Blockchain code Metaverse VR

Crypto×VR×SmartContract(546)

スポンサーリンク

//tips

//smart contract

ハッシュようの単語とリンクを融合させて表示できるようにする。

<Typography variant="h5" onClick={()=>{document.location.href = custom1get}}>{hash1get}</Typography>

ばっちり機能した。クリックすると該当リンクのページに遷移する。

ただ、色が黒なので、もう少しハッシュリンクっぽくする。

<Typography variant="h5" color="primary" onClick={()=>{document.location.href = custom1get}}>#{hash1get}</Typography>

"primary”で青にした。

次にeditに適用したコードを[id]に同期させていく。

まずはpropsの受け取り部分から調整。

pile.nftlink = data.nftlink ?data.nftlink:null
pile.customlink1 = data.customlink1 ?data.customlink1:null
pile.customhash1 = data.customhash1 ?data.customhash1:null
pile.customlink2 = data.customlink2 ?data.customlink2:null
pile.customhash2 = data.customhash2 ?data.customhash2:null

データベースから受け取る格納先の整備。

const [nftlink, setnftLink] = useState('')
const [nftlinkget, setnftLinkget] = useState('')
const [nftdocidget, setnftdocidget] = useState('')

const [customlink1, setcustomLink1] = useState('')
const [custom1get, setcustom1get] = useState('')
const [customdocid1, setcustomdocid1] = useState('')

const [customhash1, setcustomhash1] = useState('')
const [hash1get, sethash1get] = useState('')
const [hash1docid, sethash1docid] = useState('')

const [customlink2, setcustomLink2] = useState('')
const [custom2get, setcustom2get] = useState('')
const [customdocid2, setcustomdocid2] = useState('')

const [customhash2, setcustomhash2] = useState('')
const [hash2get, sethash2get] = useState('')
const [hash2docid, sethash2docid] = useState('')

NFT画像下へシンプルにハッシュリンクを組み込み完了。

<Grid item xs={12} md={4} lg={3}>
<img src={image} alt="" width="250" height="250" onClick={handleClickNFTImage}/>
<br />
<Typography variant="h5" color="primary" onClick={()=>{document.location.href = custom1get}}>#{hash1get}</Typography>
<br />
<Typography variant="h5" color="primary" onClick={()=>{document.location.href = custom2get}}>#{hash2get}</Typography>
<br />

[id]の方でもaddressを編集できるようになっていたのでそちらの箇所を削除。編集作業はeditページのみで行わせる。

[id]ページからeditページへの遷移を行わせるボタンを現在丸+にしておりわかりずらい。ここを通常のGo My edit pageボタンにしてしまう。

下記が該当箇所。

<Typography variant="h4" component="h1" gutterBottom>
example

<AddCircleOutlineOutlinedIcon
className={classes.doright}
sx={{ fontSize: 35 }}
onClick={handleClick}
/>

</Typography>

handleClick関数の中でauthのアドレスと現在のアドレスが等しければ遷移させるようにしている。

const handleClick = (e) => {
e.preventDefault()

console.log(auth.currentUser.email)
console.log(ninja[0].mail)

if(auth.currentUser.email==ninja[0].mail){
console.log('Success!')
router.push('/ID/'+ninja[0].userid+'/edit')
}

//router.push('/ID/'+ninja[0].userid+'/edit')
}

これをどのページであっても自分のeditページに遷移させたい。

そのためにはauth.currentUser.emailと一致するninja[0].mailを持つドキュメントからninja[0].useridを抜き出させれば良い。

ninja.forEach(Item => {では取得できないのでデータベースから取得になるか。

この流れで作業しているのがeditのuseeffectでの照合部分。

useEffect(() => {
setauthHistory(localStorage.getItem('authhistory'))
if (authhistory) {
console.log('authhistory')
console.log(authhistory)

if(authhistory!=ninja[0].mail){router.push('/ID/'+ninja[0].userid)}
}
}, [authhistory])

逆に自分のページにのみedtボタンを表示させれば良いのではないかと気づいた。

[id]内にでboolを作成し、

localStorage.getItem('authhistory’)==ninja[0].mail

ならtrueになり、ボタンはその際に表示させるようにする。

const [idmailcheck, setidmailcheck] = useState(false)

をまずは作成。

if(localStorage.getItem('authhistory')==ninja[0].mail){
setidmailcheck(true)
}else{
setidmailcheck(false)
}

localstorageがdefinedされてないとエラー発生。

同様のエラーの遭遇している下記を参照。

https://stackoverflow.com/questions/52474208/react-localstorage-is-not-defined-error-showing

サーバーでレンダリングするタイミングでは、ブラウザやブラウザが提供するAPIにアクセスできないので、typeof window !== 'undefined’でブラウザ表示のターンが回ってきたことを確認する必要がある。

if (typeof window !== 'undefined') {
console.log('we are running on the client')
} else {
console.log('we are running on the server');
}

これを踏まえ下記で対応。

if (typeof window !== 'undefined') {

if(localStorage.getItem('authhistory')==ninja[0].mail){
setidmailcheck(true)
}else{
setidmailcheck(false)
}

} else {
console.log('we are running on the server');
}

Rendering数が多すぎると警告が出たのでまたboolを追加。

if(!windowcheck){
if (typeof window !== 'undefined') {

if(localStorage.getItem('authhistory')==ninja[0].mail){
setidmailcheck(true)
}else{
setidmailcheck(false)
}
setwindowcheck(true)

} else {
console.log('we are running on the server');
}
}
こちらにて対応できたが、新たなwarningが発生。

./node_modules/typescript/lib/typescript.js
Critical dependency: the request of a dependency is an expression

これは謎。typescriptが出てきているので、以前入れたモジュールが、コンパイル時に何らかの影響を与えていそうということはわかる。typescriptモジュールは最終的に削除でいいが変な不具合がそれで発生したら厄介なのでデプロイ時の確認項目とする。

人気の記事

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.