//tips
今日は小学六年生のスロバキア人ハーフの子とお話しした。
近頃は小三スマホデビューがイケてるらしく、
彼らの遊びは、男性がamongus、
女性がtiktokとのこと(アップロードしないのでプリクラのようなものか)。
時代を感じる。
中学受験なくても塾通いが当たり前らしい。
知識格差がひどいらしい。
とりあえずlayと渋滞という漢字を教えてもらった。強し。
//smart contract
表示の確認。
{ninjafinalv&&ninjafinalv.map((item,index) => (
<div key={index} >
<Typography>
{item.username}{item.userid}{item.storagelink}
</Typography>
</div>
))
}
Ninjafinalvがうまく反映されないが、useeffectを通した {ninjafinal}はきちんと反映される。
新たにflagを設定。
const [ninjafinal,setninjafinal]=useState([])
const [ninjafinalv,setninjafinalv]=useState([])
const [ninjafinalflag,setninjafinalflag]=useState(false)
if(mixdone&&ninjax!=[]&&!ninjafinalflag){
console.log('mixdone&&ninjafinal==[]')
console.log('mixlist.filter(x => ninjafinal.includes(x.userid)')
console.log(mixlist.filter(x => ninjafinal.includes(x.userid)))
setninjafinalv(mixlist.filter(x => ninjafinal.includes(x.userid)))
setninjafinalflag(true)
}
これによりついに内容の方を表示させることができるようになった。
<Typography >List</Typography>
{ninjafinalv&&ninjafinalv.map((item,index) => (
<div key={index} >
<Typography>
{item.username}{item.userid}{item.storagelink}
</Typography>
</div>
))
}
ここからさらに中身を変更しボタン形式に変え、クリックしたらページ[msid]の切り替えをできるようにする。
<div key={index} >
<Typography>
{item.username}
<img src={item.storagelink} className={classes.avatarshape} alt="" width="30" height="27"/>
</Typography>
</div>
ボタンのonclickメソッドにrouterを設定すれば良いか。
{item.username}
<img src={item.storagelink} className={classes.avatarshape} alt="" width="30" height="27"
onClick={()=>router.push('/ID/'+myid+'/Message/'+item.userid)}
/>
カードの影は<Card sx={{ boxShadow: 0 }}>で消去できた。marginなども別途追加し、きちんとリスト表示を整えることができた。
<Typography >List</Typography>
{ninjafinalv&&ninjafinalv.map((item,index) => (
<div key={index} >
<Card sx={{ boxShadow: 0 }} className={classes.cardlist}>
<Button>
<span className={classes.imagemargin}>{item.username}</span>
<img src={item.storagelink} className={classes.avatarshape} alt="" width="30" height="27"
onClick={()=>router.push('/ID/'+myid+'/Message/'+item.userid)}
/>
</Button>
</Card>
同時に相手からのメッセージには右端揃えでバックグラウンドの色も変更した。
{ninjav.map((item,index) => (
<div key={index} >
{item.userid==authid
?
<Typography className={classes.titlebackshape}>
{item.username}: {item.Message}:{item.date}
</Typography>
:
<Typography className={classes.titlebackshape2} align="right">
{item.username}: {item.Message}:{item.date}
</Typography>
}
</div>
))
送信先の微調整。localstorageからデータを取る。toWhomではなくmsidに依存させた。
{mixlist.map((item,index) => (
<div key={index} >
{item.userid==msid&&(
<Typography>
To: {item.username}
</Typography>
)}
</div>
))
}
良し。カードを押したら遷移するでよかったので下記に修正。Buttonタグは不要だった。
{ninjafinalv&&ninjafinalv.map((item,index) => (
<div key={index} >
<Card sx={{ boxShadow: 0 }} className={classes.cardlist} onClick={()=>router.push('/ID/'+authid+'/Message/'+item.userid)}>
<span className={classes.imagemargin}>{item.username}</span>
<img src={item.storagelink} className={classes.avatarshape} alt="" width="30" height="27"
/>
</Card>
</div>
))
user1とuser3のchatからuser1とuser2のものに遷移してもトーク箇所のmsidの引用部分が変化していない。
何度かリロードを試すと治るが、そのキャッシュが気になる。
router.push('/ID/'+authid+'/Message/'+item.userid)
これでurlはクリックされたuserに対するurlに適切に変換されている。
ここは普通にリロード処理を追加するのがシンプルか。
<Card sx={{ boxShadow: 0 }} className={classes.cardlist} onClick={()=>router.push('/ID/'+authid+'/Message/'+item.userid).then(() => router.reload())}>
これにてキャッシュ残りのようなものは解決された。router.pushはサーバの中身を上から再読み込みないみたい。
コメント部分UIの改善。
文字を大量に入力したらはみ出した。ここから直す。
