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

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

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.