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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.