//tips
//smart contract
Staticpropsで前処理する準備を行う。
export default function Index({ ninja }) {の形を作り、export const getStaticProps = async (context) => {から値を渡せるようにしていたところ、どちらにせよstorageに対して総当たりでデータの内容を吐き出させるのでエラーが出るのは変わらなく、さらにMAXidの取得で二度手間になりそうな頃がわかってきた。
ここは素直にstorageのimageurlをfirestoreに格納しておく方がよさそう。
useEffect(() => {内部をmaxidを取得するだけの単純なものに戻す。
下記は一旦保留。
if(MAX!=0||MAX!=undefined||MAX!=null){
console.log('abc')
console.log(MAX)
const firestorage = getStorage();
for (let i = 1; i < MAX+1; i++) {
console.log('abcd')
const gsReference = ref(
firestorage,
"gs://myapp-8e583.appspot.com/"+i+"/image.jpg"
)
console.log('abcd')
getDownloadURL(gsReference).then(url => {
//return Promise.resolve(true);
urllist.push(url)
console.log(i)
console.log(MAX)
})
.catch(error => {
if (error.code === 'storage/object-not-found') {
return Promise.resolve(false);
} else {
return Promise.reject(error);
}
});
Storageにあるimageのurlパスをもとにデータベースにstorageurlという項目でアップしていく。
この処理は後でimageのアップロード部分に追加する。
まずはこのstorageurlのリンクをfirestoreから取得できることを確認していく。 getStaticPropsで取得物をninja配列に格納。
export const getStaticProps = async () => {
//console.log(context)
//console.log('aa')
let posts = []
const colRef= await collection(firebaseApp, "mydata")
await getDocs(colRef)
.then((snapshot)=>{
snapshot.docs.forEach(doc => {
const data = doc.data()
console.log('data.title')
const pile={}
//条件式 ? trueの処理 : falseの処理
pile.userid = data.userid
pile.username = data.username?data.username:null
pile.docid = doc.id ?doc.id:null
pile.storagelink = data.storagelink?data.storagelink:null
posts.push(pile)
});
})//.then(()=>console.log(posts))
return {
props: { ninja: posts }
}
}
こちらで取得物の確認。
export default function Index({ ninja }) {
console.log(ninja)
きちんとninjaの配列に格納されたことが確認できた。
さらにrendering部分を下記のようにすることで画像表示とクリックした際に画像んも所有者の[id]ページに飛ばすように設定できた。
<h2>ALL Players</h2>
{ninja.map((item,index) => (
<div key={index}>
{item.storagelink &&
<Grid item xs={12} md={6} lg={4} key={index}>
<img src={item.storagelink} alt="" width="100" height="100" onClick={()=>router.push('/ID/'+item.userid)}/>
</Grid>
}
</div>
))}
次にnftimageの登録部分を加工することでstorageからfirestoreのデータベースにurlの格納が行われるようにする。
Set My Avatar
<form onSubmit={handlenftSubmit}>
<input type="file" onChange={handlenftChange} />
<button className="button">Send</button>
</form>
Editの上記箇所がnftアップロード箇所となるので、handlenftSubmit関数を加工する流れになるか。
const handlenftSubmit = e => {
e.preventDefault()
console.log(nftimage.name)
try {
const imageRef = ref(firestorage, ninja[0].userid+'/'+'image.jpg')
console.log(imageRef)
uploadBytes(imageRef, nftimage).then(() => {
console.log("Uploaded a file!")
router.reload()
})
} catch (err) {
console.log(err)
}
}
アップロードしたらその場でurlを取得し、forestoreへのアップロードまで行うようにする。
同時に既にnft画像を保有しているかの判断で分岐させる必要もある。
Propsに下記を追加。
pile.storagelink = data.storagelink?data.storagelink:null
if(Item.storagelink !=null||Item.storagelink !=undefined){
if(storagelink==undefined||storagelink==null||storagelink==''){
setstoragelink(Item.storagelink)
setstoragelinkdocid(Item.docid)
}
}
const [storagelink, setstoragelink] = useState('')
const [storagelinkdocid, setstoragelinkdocid] = useState('')
handlenftSubmit にこれらの要素を適用させて分岐させる。
const handlenftSubmit = e => {
e.preventDefault()
console.log(nftimage.name)
try {
const imageRef = ref(firestorage, ninja[0].userid+'/'+'image.jpg')
console.log(imageRef)
uploadBytes(imageRef, nftimage).then(() => {
console.log("Uploaded a file!")
//router.reload()
}).then(() => {
console.log("Get storageurl!")
getDownloadURL(imageRef)
.then(url => {
//setImage(url)
//データベースにstoragelinkがあるか確認
if(storagelink===null||storagelink==''){
console.log('aaa')
addDoc(colRef,{
userid:ninja[0].userid,
username:ninja[0].username,
date:Date.now(),
mail:ninja[0].mail,
storagelink:url
})
}else{
console.log('bbb')
const updateRef = doc(firebaseApp,'mydata',storagelinkdocid);
console.log('currentdocid')
updateDoc(updateRef, {
storagelink: url
});
}
router.reload()
})
})
