Blockchain code Metaverse VR

SmartContract×VR×Crypto(566)

スポンサーリンク

//tips

//smart contract

昨日確認した点を順に点検。

[id]ページのカードについていたeidtボタンの非表示も実行されていた。こちらも問題なし。

Message機能を追加していく。ログイン状態の場合にdrawerにメッセージボタンの表示して確認可能にし、通常は[id]ページのボタンから自身から[id]ページ所持者に向けてメッセージが送れるようにする。

メッセージはuseridごとに一つドキュメントを持ち、連想配列状態で保存できないか、試していく。

まずはdrawerのレイアウトを調整。

const greeting = (index) => {
if (index==0) {
return <HomeOutlinedIcon />;
}
if (index==1) {
return <MyLocationOutlinedIcon /> ;
}
if (index==2) {
return <MailIcon />;
}
};

{myarray.map((text, index) => (
<ListItem button key={text} onClick={()=>handlePagechange(text)}>
<ListItemIcon>
{greeting(index)}
</ListItemIcon>
<ListItemText primary={text} />

これでdrawerにクリック可能なボタンを一つ追加できた。このボタンは基本的にメッセージを受信したことがある相手への返信に使うものとする。

こちらのページは後で作成し、[id]の中にメッセージボタンを埋め込みそちらからログインユーザーが対象idユーザーにメッセージを送れるようにする。

SNSロゴと同じ箇所にmessageロゴを追加し、そちらからメッセージを送れるようにする。

まずはeditページに入り、ボタンの設置から。

import EmailOutlinedIcon from '@mui/icons-material/EmailOutlined';

大きさはstyle={{fontSize: '32px’}}で対応できた。

<EmailOutlinedIcon  className={classes.imagemargin} style={{fontSize: '32px'}}/>

あとはこのmessageをクリックした時に飛ぶ先なのだが、[id]フォルダ下に新たに最初のメッセージ送信用のページを設けようかと思う。そうすることで事前にデータベースからid情報をスムーズに取得できるため。

新たに下記のページに入れるように[id]フォルダ下にMessage.jsを作成。

http://localhost:3000/ID/1/Message

後でログイン状態かどうかの確認を加えるとして、簡単なUIから整備していく。

To: {ninja[0].username}としてメッセージの送信先の名前を表示し、その下にテキストフィールドで最初のメッセージを書き込めるようにしておく。

"firebase/auth”ではなく、"firebase/firestore”の方のaddDocを追加。

addDoc(colRef,{

userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
Message: [email]
})

これにより、オブジェクト内のフィールドMessage0として表示された。

配列にできたが0よりも送信元の表示の方が良い。

Message: {fromuserid: email}にて再度実行。

そうするとfromuserid: “How are you?”と登録されてしまう。

変数では表せないようなのでget,sendで区別することにする。

addDoc(colRef,{

userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
Message: {get: email}
})

自身と相手に既にMessage記録があるかどうかの確認も行う。

まずはデータベースの情報を取り込めるように、
pile.Message = data.Message ?data.Message:null
を追加。

その上で、お送り主の情報も一緒に格納。
Message: {get: email,userid:fromuserid}

これでMessageの下にはgetとuseridがセットされている。この際useridは文字列としてデータベースでは認識されている。

とするとどのようにこのuseridを取得するかという話になる。

Ninjaのデータの中にはあるがMessageで絞り、さらにuseridで絞ったものと、自身又は送付主のものを比較する必要がある。

これは検索回数が膨大かつ煩雑になりすぎるか。新たなコレクションを作成し、そちらを参照させて行った方がよさそう。

Directmessageコレクションを新たに作成。今まではmydataコレクションに全て入れていたのでcolrefが変わることになる。

const mailRef= collection(firebaseApp, "directmessage")

分けることで他のデータ読み込みの邪魔をさせない。

代わりにこのページに関してはmailの読み込みに特化させるようになる。

getStaticPathsから見直していく。ただgetStaticPathsは登録者数がきちんと反映されるのでこちらは変更せず、実際のidに対応したデータ取得を行うgetStaticPropsを

const colRef= await collection(firebaseApp, "directmessage")

で対応する。

これで[id]の数字に対応したuserid保持者のメッセージ履歴の一覧を取得できる。

別のデータベースに登録。
登録は意図通りできている。

素直にpile.Sender = data.Sender ?data.Sender:nullを追加。

ninja.forEach(Item => {でsenderを洗い出し、場合により遷移させる。遷移させるのは既に会話履歴がある人。

なぜ遷移させるかというと、http://localhost:3000/ID/1/Messageとして[id]の株ページでありユーザーのページ下ではないため。

この場合はninjaで取得したものの中に自分がSenderとなるものがないことを確認すれば良いか。

async function handleOnMessage(e) {
e.preventDefault();

const email=umail
//相手のuserid
const touserid=ninja[0].userid
//自分のuserid
const fromuserid=localStorage.getItem('authuserid')

//'authuserid'の登録は事前にチェック 現在ログインではなく、ログインかつ自身のページへの遷移でauthuseridが再記録されるため

//ここでは同時に送付主と受け取り主のmessageドキュメントを確認。なければ生成。

//まずは送付側からドキュメント生成し文言を配列として追加

addDoc(mailRef,{

userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
Message: email,
Sender:fromuserid
})

router.reload()

もしここで[id]から直接メッセージページに値を渡せたらどうなるか。

https://ramble.impl.co.jp/847/

Linkを使う方法もあるようだがシンプルにlocalに保存してしまった方がよさそう。

やたら眠い。寝る。

————————
・discordには招待リンクを入れるようにする(itsme projectのアカウントも作成)
・githubの非公開からのサーバ公開技術を誰かに相談(コピペページ対策)
・youtube動画アカウントの作成

人気の記事

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.