//tips
昨日ベトナムのニコラスと話していた際に、中国のロシア/ウクライナに対する態度をcnnが取り上げられてると教えてくれた。これは本当かどうかはわからない。少なくともfakeニュース合戦が始まっているのはわかる。各国で異なる意図の情報戦が行われているので鵜呑みにしないよう気を付ける。
//smart contract
まずは編集用のedit.jsを作成。基本的な構成はindex.jsと同じかたち。
どちらかというとedit.jsのカスタマイズ部分を除外したものをindex.jsに表示させるという形にしたい。
Index.jsのonclickをedit.jsに飛ぶように設定し、一方でedit.jsのものはindexに飛ぶようにした。
const handleClick = (e) => {
e.preventDefault()
router.push('/edit')
}
EditではCardのmap展開の後にアイコンを設置し、そちらをクリックしたらcreate.jsに飛ぶようにする。
Create.jsではサーバにアクセスし、カードの読み込みもととなっている情報にアクセス可能にする。
現在カードの内容はdataフォルダのdb.jsonにあり、下記のようにモックサーバーにて起動させている。
json-server --watch data/db.json --port 8000
Create.jsを編集。title&&detailsの条件をconsole.logではなく、jsonオブジェクトデータの内容を取得し、そちらにjsonテキストとして記入されたtitle, details, categoryの内容を追加。最後にeditページに戻るようにする。
よく間違ってしまうが、JSON.stringifyはJavaScript のオブジェクトや値をJSON 文字列に変換するもの。ただのstringではないので注意。
if(title&&details){
fetch('http://localhost:8000/notes', {
method: 'POST',
headers: {"Content-type": "application/json"},
body: JSON.stringify({ title, details, category })
}).then(() => history.push(‘/edit’))
}
Makestyleの中身でdivの右寄せのclassを作ろうと頑張ったができなかったので、渋々boxを使用した。makestyleで右寄せする正解がわからない。なぜか機能しなかった。
<Box textAlign="right">
<Button
type="submit"
varient="contained"
endIcon={<HailIcon />}
>
submit
</Button>
</Box>
push先のjsonserverのnotesは下記のような構造になっている。
{
"title": "Yoshi's birthday bash",
"details": "Lorem … book.",
"category": "reminders",
"id": 1
},
http://localhost:8000/では{}のみの表示だが、http://localhost:8000/notesとすることで、これらの情報が表示される。
大元のdb.jsonは下記のような形。
{
"notes": [
{
"title": "Yoshi's birthday bash",
"details": "Lorem … book.",
"category": "reminders",
"id": 1
},
Notesは別途特別な所作を行うわないと表示できないことを認識。
history.push(のところでエラー発生。
const history = useHistory()こちらを入れるのを忘れていた。
バージョンアップでこれは使えなくなっていた。
代わりにuseNavigateを使うべしとのこと。useRouterとの違いは、ページ遷移や遷移先に値を渡すことが可能になる点のよう。
https://zenn.dev/horisan/articles/2aeaf0bd3fb70f
これでもダメでnext.jsのページを見たらLinkやrouter.pushで行きなさいとあったので素直にrouter.pushでいく。
しっかり項目をサーバーのnoteに追加することができ、さらにrouterで/editのページに遷移させた。
+ボタンがずれていたのでGridの外におき、安定させた。
この追加したcardにdeleteボタンを表示させているので、ボタンをクリックしたら表示及びデータの大元から消せるようにする。
Editページにこちらを追加。
const handleDelete=async(id)=>{
// データベース側の削除
await fetch('http://localhost:8000/notes/'+id,{
method:'DELETE'
})
// stateで保存しているデータの編集
//ここでクリックしたid以外のものを取得
const newNotes=notes.filter(note => note.id != id )
setNotes(newNotes)
}
<NoteCard note={note} handleDelete={handleDelete} />
さらに、NoteCardでonclickを感知したらこのイベントを実行するようにイベント関数を引き渡すようにしている。
<CardHeader
action={
<IconButton onClick={()=>handleDelete(note.id)}>
<DeleteOutlined />
しっかり機能している。
さらにedit.jsページのみにこのアイコンを表示させるようにしたい。
そのためにはCardHeader の中身を分岐させる必要がある。
<CardHeader
action={
<IconButton onClick={()=>handleDelete(note.id)}>
<DeleteOutlined />
</IconButton>
}
title={note.title}
subheader={note.category}
/>
このようにできないか。
{handleDelete && action={
<IconButton onClick={()=>handleDelete(note.id)}>
<DeleteOutlined />
</IconButton>
}
こちらはエラーが出たのでさらに外側から囲む。
{handleDelete
?
<CardHeader
action={
<IconButton onClick={()=>handleDelete(note.id)}>
<DeleteOutlined />
</IconButton>
}
title={note.title}
subheader={note.category}
/>
:
<CardHeader
title={note.title}
subheader={note.category}
/>
}
この分岐式によりhandleDeleteを送らないindexでは表示させず、editページのみで表示させることができるようになった。
同じく下部の+もeditページのみに表示させる。
