//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モジュールは最終的に削除でいいが変な不具合がそれで発生したら厄介なのでデプロイ時の確認項目とする。
