Blockchain code Metaverse VR

SmartContract×VR×Crypto(575)

スポンサーリンク

//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の改善。

文字を大量に入力したらはみ出した。ここから直す。

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.