//tips
AIに意識が宿ったのか。茶番なのか。
https://gigazine.net/news/20220613-google-engineer-lamda/
仮想通貨の下落がすごいが、一応まだBTCは2020年初旬の３~4倍、ETHは10倍以上。今までが途方もなさすぎた。gas代がリーズナブルになるのはいいこと。
//smart contract
キュレーションサイトの作成に戻り、５ちゃん風のUIにてhttp://localhost:3000/Board/[id]を構築していく。
まずは[id].jsにテキストフィールドを組み込み、データベースBoardの該当ドキュメントのtext配列chat内容とusernameを追加させる。
const [openflag,setFlag]=useState(false)
ログインできていればtrueになるような仕組みを作る。
現時点ではconst [openflag,setFlag]=useState(true)とし、表示の流れを見る。
const [details,setDetails]=useState(‘’)をコメントの格納先として設定。
まずはフォーム自体を作成。
{openflag && (
<div>
Add comments
<form noValidate autoComplete="off" onSubmit={()=>{console.log("title")}}>
Details
<TextField
onChange={(e)=>setDetails(e.target.value)}
variant="outlined"
color="secondary"
fullWidth
required
/>
<Box textAlign="center">
<Button
type="submit"
varient="contained"
onClick={()=>console.log('aa')}
>
submit
</Button>
</Box>
</form>
</div>
)}
提出とデータベースをつなげるため関数を設計。
<form noValidate autoComplete="off" onSubmit={handleOnAddcomments}>
const colRef= collection(firebaseApp, "Board”)を追加し、usernameは別途ログイン時にローカルに保存させることにし、保存したものを別途登録させる。
単純な追加ではないので、配列への追加をどうにか表現させる必要がある。
フィールド要素の追加はarrayUnionで可能。ど忘れしていたので再度調べ直した。見つかってよかった。
ただ、下記のようにドキュメント名は特定しておく必要があるので、pile.docid = doc.id ?doc.id:nullはデータベースから事前に取得しておく。
const washingtonRef = doc(db, "cities", "DC");
// Atomically add a new region to the "regions" array field.
await updateDoc(washingtonRef, {
regions: arrayUnion("greater_virginia")
});
これを参考に下記のようにした。
async function handleOnAddcomments(e) {
e.preventDefault();
console.log('add comments')
const Ref = doc(firebaseApp, "Board", ninja.docid);
await updateDoc(Ref, {
text: arrayUnion({chat:details,username:"naki"})
})
.then(()=>{
setDetails('')
}).then(()=>{router.reload()})
}
Unhandle d runtime error
Type Error:cannot properties of undifined(reading ‘indexof’)
表記方法が古いのか。Docの使い方が間違っているのか。
const db = getFirestore(app);
なのでfirebaseAppではなくfirebaseを使わなければならいなのか。
ログでいくつか確認する。
const Ref = doc(firebaseApp, "Board", "RJfWZWAONNvRmqBV1lnV");
const docSnap = getDoc(Ref);
if (docSnap.exists()) {
console.log("Document data:", docSnap.data());
}
これでもエラー。promiseが要因のよう。
getDoc(doc(firebaseApp, "Board", "RJfWZWAONNvRmqBV1lnV")).then(docSnap => {
if (docSnap.exists()) {
console.log("Document data:", docSnap.data());
} })
こちらにてドキュメント内容を取得することができた。
これをもとに考えたがupdateの型と異なる。
await updateDocdoc(firebaseApp, "Board", ninja.docid)).then(docSnap => {
if (docSnap.exists()) {
console.log("Document data:", docSnap.data());
} })
https://zenn.dev/arark/articles/60927323db8697
https://stackoverflow.com/questions/68308510/firestore-arrayunion-returns-firebaseerror-function-documentreference-update
https://stackoverflow.com/questions/69570638/firebase-v9-firestore-add-2-documents-one-by-one
色々探っていると { products_array: arrayUnion(product_id) }の使い方は合っている。
Dbが渡せればもっとシンプルにできるのではと考え、dbの大元を確認。
https://firebase.google.cn/docs/firestore/quickstart?hl=ja
const db = getFirestore(firebase);
こちらで様子見。
async function handleOnAddcomments(e) {
e.preventDefault();
console.log('add comments')
const db = getFirestore(firebase);
const Ref = doc(db, "Board", ninja.docid);
await updateDoc(Ref, {
text: arrayUnion({chat:details,username:"naki"})
})
.then(()=>{
setDetails('')
}).then(()=>{router.reload()})
}
これでもエラー。
const Ref = doc(db, "Board", "RJfWZWAONNvRmqBV1lnV”);でも試す。
データベースにきちんと反映できた。
どうやらninja.docidがダメなよう。ninja[0].docidとしなければならなかった。[0]で問題ないのはidでドキュメントを一つに絞っているためdocidも一つしかないため。
async function handleOnAddcomments(e) {
e.preventDefault();
console.log('add comments')
const db = getFirestore(firebase);
const Ref = doc(db, "Board", ninja[0].docid);
await updateDoc(Ref, {
text: arrayUnion({chat:details,username:"roro"})
})
.then(()=>{
setDetails('')
}).then(()=>{router.reload()})
}
問題なく稼働。
データを登録した後にリロードしてBoardに登録したものを即表示させるようにした。
書き込みの際には登録確認を行う。
登録の確認は下記などで良さそう。
localStorage.getItem('authhistory')
localStorage.getItem('authuserid')
localStorage.getItem(‘username’)
useEffect(() => {部分にフラグのオンオフを加える。
const [openflag,setFlag]=useState(false)
useEffect(() => {
if(localStorage.getItem('authhistory')){setFlag(true)}
}
, [])
これで{openflag && (が機能する。
{openflag && (
<div>
Add comments
<form noValidate autoComplete="off" onSubmit={handleOnAddcomments}>
Details
<TextField
onChange={(e)=>setDetails(e.target.value)}
・・・
素晴らしい。
現時点ではBoardの表示が先のBoardの省略ページのgridを継承しているのでうまくページ全体対応するものに変換する。
