//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動画アカウントの作成
