//tips
//smart contract
Msidをgetstaticpathに設定し、ページ反映が可能になったので、ninjaへの反映の中身を確認していく。
http://localhost:3000/ID/1/Message/3
現在/3部分の読み込み表示に対応できていないため。
getStaticProps部分を修正する必要がありそう。
const msid = parseInt(context.params.msid)
ダウンロードコンテンツの中に送付先のmsidを格納してしまう。
pile.msid = msid
送付対象のuseridをNinjaから取れるようになったので、stateに格納する。
const [msid, setmsid] = useState('')
if(Item.msid !=null||Item.msid !=undefined){
setmsid(Item.msid)
}
これはrenderingの回数が多くなりすぎるとエラーが出たので、
setmsid(ninja[0].msid)
としてしまう。これをuseeffectの中に入れた。
どのitemもmsidの情報を含んでいるのでシンプルで良い。
次にこの情報を {mixlist.map((item,index) => (の中に反映。
{item.userid==msid&&(
<div className={classes.aright}>
{item.username}
<img src={item.storagelink} className={classes.avatarshape} alt="" width="30" height="27"/>
</div>
)}
これでmsidの対象となったuseridのアバターimgと名前が表示されるようになった。
メッセージ表示部分もmsidに準拠させる。
if(authid){
const newArray = ninja.filter(element =>
(element.userid==authid&&element.Towhom==msid||element.userid==parseInt(msid)&&element.Towhom==authid.toString()));
ninjav = newArray.sort(function(a, b) {
return (a.date < b.date) ? -1 : 1; //オブジェクトの昇順ソート
//return (a.cardorder > b.cardorder) ? -1 : 1; //オブジェクトの降順ソート
});
}
これでlocalStorage.getItem('Towhom')にとらわれず、適切な形に表示させることができた。
[msid]ページがあればMessageページはいらないかもしれない。
[id]ページのconst handleClickMessage = (e) => {の中で、
router.push('/ID/'+myid+'/Message’+/ninja[0].userid)とすれば良いため。
いずれ融合させるか。
次にgridの表示が左右に分かれず縦に並んでしまっているのでそちらを分割させる。
<Grid item xs={12} md={12} lg={12} className={classes.balancer}>
<Grid item xs={6} md={6} lg={6} >
<Typography >List</Typography>
</Grid>
<Grid item xs={6} md={6} lg={6} >
makestyleでdisplay:'flex’を適用させた。
balancer:{
display:'flex',
},
これにより <Grid item xs={6} md={6} lg={6} >を左右に分けることができた。
List部分に対話者履歴者と最後のメッセージを表示させるボタン一覧を作る。
まず過去の対話者を一覧表示するところから始める。
簡単に表示する候補を抽出。
{ninja.map((item,index) => (
<div key={index} >
<Typography>
{item.username}{item.userid}{item.Towhom}
</Typography>
</div>
))
}
一覧を表示させて、下記を改善していく。
・{item.userid}!={item.Towhom}で制約をかける。(いずれ=の場合はメモ機能にする)
・自身のid以外のものが{item.userid},{item.Towhom}にある場合にはそのidをmixlistで照合し、username,storagelinkなどの情報一式を取り出す。
{item.userid!=item.Towhom&&(などだけでは対応できそうもないのでここも関数で対応するか。
ninja.forEach(Item => {の中で自分に送ったものではなく、用意した分離配列に含まれていないものを新たに追加できるようにする。
let ninjax=[]
if(Item.userid !=Item.Towhom ){
if(!ninjax.indexOf(Item.userid)){
ninjax.push(Item.userid)
}
}
これで新たに自分との対話履歴がある相手のuseridを配列に抽出できたのでこちらを展開する。
Mixlistの取得が完了した段階で上記のリストと照合し、新たなリストを作成すれば良さそう。
if(mixdone&&ninjafinal==[]){
mixlist.forEach(item=>{
ninjax.forEach(q=>{
if(item.userid==q){
ninjafinal.push(item)
}
})
}
)
console.log('ninjafinal')
console.log(ninjafinal)
}
うまく表示ができていない。ログを確認していくと下記が機能できていない。ifの中身が実行されていない。
if(!ninjax.indexOf(Item.userid)){
console.log('ninjax2')
ninjax.push(Item.userid)
console.log(ninjax)
}
重複の削除は別の箇所で行うか。
きちんと2,3が抽出されている。
次に詰まっている下記を確認していく。
if(mixdone&&ninjafinal==[]){
console.log('mixdone&&ninjafinal==[]')
mixlist.forEach(item=>{
