Blockchain code Metaverse VR

Crypto×VR×SmartContract(502)

スポンサーリンク

//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ページのみに表示させる。

人気の記事

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.