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

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

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.