//tips
ベトナムの方からポジションをオープンにしてくれという話が来た。励みになる。一旦ベータ版までは自分で制作するので、その後でお願いする旨お伝え。ブロックチェーンに連結させるところからはさらに手探りになるかと思うので、そこからは脳みそを拡張する必要がある。人選が一番大事。何度か自分で直接会って話して決める。
//smart contract
次にLinkを自動でカスタムして生成できる仕組みも組み込んでいく。
ハッシュ記号の後に短い単語を置き、それを押すとリンクへ飛ぶようにする。
Set Custom Link 1
<form noValidate autoComplete="off" onSubmit={handleOnNFTLink}>
#
<TextField
onChange={(e)=>setnftLink(e.target.value)}
variant="outlined"
color="secondary"
defaultValue='Custom Link'
fullWidth
required
/>
<Box textAlign="center">
<Button
type="submit"
varient="contained"
onClick={()=>console.log('aa')}
>
submit
</Button>
</Box>
</form>
イベント関数はonSubmit={handleOnNFTCustomLink1}にて設定。
const [customlink1, setcustomLink1] = useState('')
const [custom1get, setcustom1get] = useState('')
const [customdocid1, setcustomdocid1] = useState('')
const [customhash1, setcustomhash1] = useState('')
const [hash1get, sethash1get] = useState('')
const [hash1docid, sethash1docid] = useState('')
さらに、下記のような追加を行うためにgetStaticPropsへの追加を行う。
if(Item.nftlink !=null||Item.nftlink !=undefined){
if(nftlinkget==undefined||nftlinkget==null||nftlinkget==''){
setnftLinkget(Item.nftlink)
setnftdocidget(Item.docid)
}
}
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
これをもとに４パターン作成していくことになる。
if(Item.customlink1 !=null||Item.customlink1 !=undefined){
if(custom1get==undefined||custom1get==null||custom1get==''){
setcustom1get(Item.customlink1)
setcustomdocid1(Item.docid)
}
}
イベント関数を下記のように生成。
async function handleOnNFTCustomLink1(e) {
e.preventDefault();
console.log('custom1get')
console.log(custom1get)
console.log('customhash1')
console.log(customhash1)
if(custom1get===null&&customhash1===null){
addDoc(colRef,{
userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
customlink1:customlink1,
customhash1:customhash1
}).then(()=>{
setcustomLink1('')
setcustomhash1('')
}).then(()=>{router.reload()})
}else{
const updateRef = doc(firebaseApp,'mydata',customdocid1);
console.log(customdocid1+'customdocid1')
updateDoc(updateRef, {
customlink1:customlink1,
customhash1:customhash1
}).then(()=>{
setcustomLink1('')
setcustomhash1('')
})
.then(()=>{router.reload()})
}
}
Rendering先でも受け取り内容を表示できるようにする。
設定後実行すると
FirebaseError: Invalid document reference. Document references must have an even number of segments, but mydata has 1.
のエラーが発生。
onChange={(e)=>setcustomhash1(e.target.value)}
onChange={(e)=>setcustomLink1(e.target.value)}
これらを見直していくとif(custom1get===null&&hash1get===null){部分が誤っていることがわかったので修正。データベースでgetしたものではなく、フロントエンドで書き込んだもので判別してしまっていた。適用変数ミス。
ただここを修正しても所定の数値がないのにupdateルートに入ってしまっている。
if(custom1get==''&&hash1get==‘’){に変更することでaddルートに変えさせることができた。空の表現はnullではいけなかったよう。
また、editから弾かれて入れなくなったで確認すると
mail:ninja[0].mail
をドキュメント内に組み込めていなかった。
これを組み込むときちんと実行が確認できた。addもupdateも成功。
データベースからhashwordとlinkを取得できるようになったので組み合わせてハッシュリンクを生成できるようにする。
ここは先のSNSのクリック時と同じようにdocument.location.hrefで遷移させれば良さそう。
const handleClickImagetw = (e) => {
if(twitterlink){
document.location.href = twitterlink
console.log('twitterlink');
console.log(twitterlink);
}
}
<Typography variant="h5" >などで囲みonclickをつけるか。
<Typography variant="h5" onClick={}}>{hash1get}</Typography>
