//tips
投資は10個のうち、7個はまやかしで、3つが本物というのを聞いてなるほどと思った。眼力は鍛える一方で、避けられないものとして共存する必要もある。全部避けようとすると本物もいつまでも捕まえられない。
//smart contract
ページの整備継続。
ページ構成に組み込んでいるlauout.jsの中のサイドバーの部分はEditdrawerコンポーネントに格納しているが、こちらのメールアイコン部分などを使用する予定は先になりそうなので表示だけはさせておき、後の組み込みメッセージ機能に割り当てることにする。
//const [myarray,setArray]=useState(['Inbox', 'Starred', 'Send email', 'Drafts'])
const [myarray,setArray]=useState(['Inbox', 'Starred'])
ページ構成がスッキリしたところでlayoutのappbarの中でauth済みのユーザーのnft画像を表示できる方法を模索する。
先にも述べたがlayoutが組み込まれているのが_app.jsで全ページに反映されるため、気をつけつつ、データベースの接続を行う。
ベースとなる考え方はmuiのappbarに追加するavatar機能かと思い、ninja先生のYouTubeを再確認。
import { Avatar } from "@mui/material”;から始める。
avatar:{
marginLeft:20,
}
<Typography>
Mario
</Typography>
<Avatar src="/image.jpg" className={classes.avatar} />
こちらにて、固定値での入力と反映は確認できた。
Avatarの表示画像がない場合のことも考えて、Marioの先頭文字の表記を代わりに表示させる。
const [Capitalname,setCapital]=useState('Mario')
<Avatar className={classes.avatar}>{Capitalname[0].toUpperCase()}</Avatar>
これできちんとusernameの先頭文字のimageも表示することができた。
Authでログインしたuserのnftがない場合はusernameの先頭文字を表示させる形にする。
またログインしていなければLogin表示をここに作っても良いかもしれない。
Authで取得できる内容はmailアドレスとなっているため、メールアドレスの取得から、データベースへのリンクを行わせる。
まずはfirebase関連の一式をlayout.jsに渡す。
import firebaseApp from "../../components/firebase"
import firebase from "../../components/firebase2"
import {
getAuth,
createUserWithEmailAndPassword,
signOut,
signInWithEmailAndPassword,
onAuthStateChanged,addDoc
} from "firebase/auth"
import { getStorage, ref,getDownloadURL,uploadBytes } from "firebase/storage";
import { doc, getFirestore } from "firebase/firestore"
import { collection, getDocs,getDoc, query, where,onSnapshot,orderBy,serverTimestamp } from "firebase/firestore"
そもそものauthのログインの認証は[id].jsの下記にて行っており、authhistoryという名前で設定mailがローカルストレージにて確認できるようになっている。
async function handleOnAuthIn(e) {
e.preventDefault();
console.log('aiu')
const email=umail
const password=upass
signInWithEmailAndPassword(auth,email,password)
.then((cred)=>{
//console.log('user loged in:',cred.user)
localStorage.setItem('authhistory',email)
setUmail('')
setUpass('')
}).then(()=>{
})
}
このauthhistoryがあるかないかでログインしているかいないかの判断を行なっており、まずはこのauthhistoryを取得することになる。
それがedit.jsにある下記にあたる。
const [authhistory, setauthHistory] = useState();
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])
こちらをlayoutに組み込み。反応を見る。
階層が異なっているのでimportの階層部分の整理・追加を行う。
import { useState,useEffect } from 'react';
無事にauthhistoryを取得することができた。
authhistoryがある場合にはstorageにアクセスさせる処理を追加。ninja[0].useridにあたる部分をデータベースから取得できれば良い。
//image表示
const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/"+ninja[0].userid+"/image.jpg"
)
getDownloadURL(gsReference)
.then(url => {
setImage(url)
})
.catch(err => console.log(err))
そのため、こちらの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)}
const colRef= collection(firebaseApp, "mydata")
const q = query(colRef,where("mail","==",authhistory))
await getDocs(q)
.then((snapshot)=>{
snapshot.docs.forEach(doc => {
const data = doc.data()
if(data.mail)
{
setauthname(data.userid)
}
});
}).then(()=>{
console.log('authname'+authname)
})
}
}, [authhistory])
その上で別途image取得の設定。
//image表示
const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/"+authname+"/image.jpg"
)
getDownloadURL(gsReference)
.then(url => {
setImage(url)
})
.catch(err => console.log(err))
<Avatar className={classes.avatar}>{image}</Avatar>
きちんと参照しようとしているがauthnameがundeifinedになっている。
[StorageError [FirebaseError]: Firebase Storage: Object 'undefined/image.jpg' does not exist. (storage/object-not-found)] {
code: 'storage/object-not-found',
customData: { serverResponse: '' },
_baseMessage: "Firebase Storage: Object 'undefined/image.jpg' does not exist. (storage/object-not-found)"
}
こちらをうまく取得できるように調整する。要検証。
また、NFTであることを示すためのopen seaなどのリンク場所も作成する。その流れで、Linkを自動でカスタムして生成できる仕組みも組み込むことにする。
