//tips
//smart contract
authnameが取得できない要因はdocidの指定部分かと思うので、そちらを調整していく。
[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)"
}
これは格納しているimage storageの方に該当するフォルダがないためおきのかと考えた。
mailアドレス："naki@gmail.com”でフィルターし、そちらのuserid:1を取得してもstorageにフォルダがないのかと思ったがきちんと1フォルダは事前に用意してある。
Useridとフォルダの生成は別途整えるとして、authnameが取得できない問題をクリアにしていく。
ログで確認していくとどうやらstateの反映よりも前にauthnameをもとにstorageに読み込みをかけてしまうのが問題のよう。
if(authname!=undefined){
const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/"+authname+"/image.jpg"
)
getDownloadURL(gsReference)
.then(url => {
setImage(url)
})
.catch(err => console.log(err))
}
上記でトライするとLayout.jsはマウント時にしか読み込まれないため、マウント後のstate反映への対処ができない。
似たような使用例を探してみたがなかなか見つからない。コンポーネントの方でデータベース接続するのはやはり無理があるか。_appを編集するなどで対応できるかもしれない。
https://stackoverflow.com/questions/66302551/next-js-fetch-data-once-to-display-on-all-pages
画像関係の表示は一旦取りやめ。
シンプルな形に戻す。
Auth登録時にデータベースへの登録連携ができるように調整する。同時にstorageへのimageアップロードの仕組みを再度確認し、useridと紐づいた表示が行われているか確認。また、そもそものuseridの自動付与の仕組みも追加してあげる必要がある。
現状のauth登録はTOPページに機能を移しており、sign upボタンを押すことでmailとpassを設定できるようにしている。
handleOnAuthにてこちらの関数は実装されており、内容としては下記の形になっている。
async function handleOnAuth(e) {
e.preventDefault();
console.log('aiu')
const email=umail
const password=upass
createUserWithEmailAndPassword(auth,email,password)
.then((cred)=>{
console.log('user created:',cred.user)
setUmail('')
setUpass('')
})
}
ここにデータベースへの追加も一緒に行わせられるよう設定を加えていく。
edit.jsのadd contents部分が参考になるか。
handleOnAddcontentsの中身を見ていく。内容としてはかなりシンプル。
const colRef=collection(firebaseApp,'mydata')
async function handleOnAddcontents(e) {
e.preventDefault();
console.log('add contents')
addDoc(colRef,{
title:title,
details:details,
category:subcategory,
userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail
}).then(()=>{
setTitle('')
setDetails('')
setScategory('')
}).then(()=>{router.reload()})
}
ただ、ネックとなるのはninja[0]などで事前取得しているデータベースの情報を別途取得する必要があるということ。
事前にuseridの最後尾だけ取得したい。
配列にidを格納して最大値を抽出すれば良いが、色々注意が必要で単純な.maxの使用は控える。
https://qiita.com/ndj/items/82e9c5a4518fe16e539f
https://www.javadrive.jp/javascript/math_class/index6.html
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/max
下記を参考にし、Reduceを使用した安全な方法をとる。
const aryMax = function (a, b) {return Math.max(a, b);}
let ary = [5, 2, 3, 1, 10];
let max = ary.reduce(aryMax); // => 10
ベースはid部分を抽出しているgetStaticPathsの内容を踏襲し、その中で最大値を取得する形にする。
let posts = []
const colRef=await collection(firebaseApp, "mydata")
await getDocs(colRef)
.then((snapshot)=>{
snapshot.docs.forEach(doc => {
posts.push(JSON.stringify(doc.data().userid))
});
})//.then(()=>console.log(posts))
下記にて対応し、ログの確認。
const aryMax = function (a, b) {return Math.max(a, b);}
//最大userid値の取得
let posts = []
const colRef= collection(firebaseApp, "mydata")
getDocs(colRef)
.then((snapshot)=>{
snapshot.docs.forEach(doc => {
posts.push(JSON.stringify(doc.data().userid))
});
}).then(()=>{
setMaxid(posts.reduce(aryMax))
})
console.log('Maxid')
console.log(Maxid)
きちんとMaxidが取得できた。
handleOnAddcontentsへの組み込みトライ。
async function handleOnAuth(e) {
e.preventDefault();
console.log('aiu')
const email=umail
const password=upass
createUserWithEmailAndPassword(auth,email,password)
.then((cred)=>{
console.log('user created:',cred.user)
setUmail('')
setUpass('')
}).then(()=>{
addDoc(colRef,{
userid:Maxid+1,
username:email,
date:Date.now(),
mail:email
})
})
}
うまくいっていないよう。
Uncaught (in promise) TypeError: (0 , firebase_auth__WEBPACK_IMPORTED_MODULE_5__.addDoc) is not a function
at eval
のエラーが問題か。
ログインしたままでできないのかもしれないと気づき。ログアウトして再度トライ。
Authenticationの方にはきちんとデータベースに反映されているが、firestoreデータベースの方には反映されていない。
また地味にauthのpassの長さが6桁必要とのことなので事前にエラーは出さないようなコメントを記入しておく。
Thenでの連動がいけないのかと考え、一旦分離してチェック。
const docRef = awaitaddDoc(colRef,{
userid:Maxid+1,
username:email,
date:Date.now(),
mail:email
})
console.log("Document written with ID: ", docRef.id);
adddoc is not function と出てくる。
何かと思ってよく読むとfirestoreでなく、authのadddocを引用している。authの方のaddDocを消去してトライ。
素晴らしい。authデータベースにもfirestoreデータベースにも登録が確認できた。
Auth登録時にデータベースへの登録連携とuserid自動付与の仕組みも追加できた。
次は、storageへのimageアップロードの仕組みを再度確認し、useridと紐づいた表示が行われているか確認していく工程に移る。
※忘れないようメモ
NFTであることを示すためのopen seanなどのリンク場所も作成。その流れで、Linkを自動でカ
スタムして生成できる仕組みも組み込む。
