Blockchain code Metaverse VR

Crypto×VR×SmartContract(516)

スポンサーリンク

//tips

慢性的な寝不足解消になるらしい再生医療関係のエクソソーム注射は効果あるか試してみたいところ。付近で探したが顔の美容関係しかない残念。

//smart contract

各ユーザーのデータベースから文字コンテンツとimage情報を取り出すことに成功した。

文字情報の方をカードの形に表示できるように変換していく。

以前のnotesは以下の形で情報を取得していたのでこちら合わせてみる。

{notes.map(note => (
<Grid item xs={12} md={6} lg={4} key={note.id}>
{/* <NoteCard note={note} handleDelete={handleDelete} /> */}
<NoteCard note={note} />
</Grid>
))}

この形に変形したがNoteCardの読み込みが行われていない。

{ ninja.map((note,index) => {

<div item xs={12} md={6} lg={4} key={index}>
<NoteCard note={note} />
</div>
})}

Returnの中に入っていないことが原因だと気づき、先の各文言表示と混ぜて表示させた。

{ ninja.map((item,index) => {
return (
<div key={index}>
<p> { item.title }</p>
<p>{ item.details } </p>
<p> { item.userid }</p>
<p>{ item.username } </p>

<div xs={12} md={6} lg={4} key={index}>
<NoteCard note={item} />
</div>
</div>
);
})}

これで問題なくfirebaseの内容をカード化して反映できた。

getStaticPropsで取得していなかったカテゴリーの取得も加えた。

pile.category = data.category

データベースの方もcategory項目を付与。これが抜けているとページの読み込み段階でエラーが出る。

error - Error: Error serializing `.ninja[0].category` returned from `getStaticProps` in "/ID/[id]".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

設定されていないとundefinedとなるのが問題。

ここからはhttp://localhost:3000/ID/1/editのコード内容をlocalhost:3000/ID/1に反映し、それが完了したらhttp://localhost:3000/ID/1/editの方にfirebaseの設定の不足部分を補填していくことにする。

一旦コメントアウト部分を削除してきれいにする。

import React, {useState,useEffect} from 'react'
import firebaseApp from "../../components/firebase"
import firebase from "../../components/firebase2"

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"
import { title } from 'process';

import NoteCard from '../../components/Notecard';

//受け取るcontextの内容を編集
export const getStaticPaths = async () => {

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 paths = posts.map(ninja => {
return {
params: { id:ninja.toString() }
}
})
console.log('paths')

return {
paths,
fallback: false
}
}

//contextは{ params: { id: '2' },などの内容で取得
export const getStaticProps = async (context) => {
console.log(context)
console.log('aa')

let posts = []

const id = parseInt(context.params.id)

const colRef= await collection(firebaseApp, "mydata")

const q = await query(colRef,where("userid","==",id))

await getDocs(q)
.then((snapshot)=>{

snapshot.docs.forEach(doc => {
const data = doc.data()
console.log('data.title')

const pile={}
pile.title = data.title
pile.details = data.details
pile.userid = data.userid
pile.username = data.username
pile.category = data.category

posts.push(pile)

});

})//.then(()=>console.log(posts))

return {
props: { ninja: posts }
}
}

 

const Details = ({ ninja }) => {

const firestorage = getStorage();

const [image,setImage]=useState('')

//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))

return (
<div>
{ ninja.map((item,index) => {
return (
<div key={index}>
<p> { item.title }</p>
<p>{ item.details } </p>
<p> { item.userid }</p>
<p>{ item.username } </p>

<div xs={12} md={6} lg={4} key={index}>
<NoteCard note={item} />
</div>
</div>

);
})}

<img src={image} alt="" width="300" height="300"/>

</div>

);
}

export default Details;

コメントアウトを含むものは別のファイルに念の為保存しておいた。

融合の前準備として[id].jsのimport部分から整えていく。

Edit特有の編集部分は[id].jsページには不要なのでhandleDelete={handleDelete}などは削除。

firebaseからimageの引用は別途追加。

<img src={image} alt="" width="300" height="300"/>

アバターを左に寄せ、右にアドレス、名前などを記載できるようにした。

<Grid container spacing={3}>

<Grid item xs={12} md={4} lg={3}>
<img src={image} alt="" width="250" height="250"/>
</Grid>

<Grid item xs={12} md={8} lg={9}>
・・・

handleClickは各idのeditページの飛ぶように変更。

const handleClick = (e) => {
e.preventDefault()

router.push('/ID/'+ninja[0].userid+'/edit')
}

ここでさらにdebankやtwitterのtweetidなどをデータベースに登録しておくことで内容を表示させられるようにする。

Imageは後で丸くくり抜いて表示されるようにする。

pile.tweetId = data.tweetId

オブジェクトの中にtweetId変数を含めたのでこれを抽出して際表示する方法を考えることになる。

<TwitterTweetEmbed
// tweetId={item.id_str}
tweetId={'1501574706423808004'}
/>

を変形させる。

error - Error: Error serializing `.ninja[1].tweetId` returned from `getStaticProps` in "/ID/[id]".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

が出たので、これはundefinedのものはnullに設定しておく必要がある。

そちらの処理を追加して下記の様子を見る。

{ninja.map((item,index) => (
<div key={index} >
{item.tweetId&&(
<TwitterTweetEmbed
tweetId={item.tweetId}
/>
)}
</div>

))}

値が存在すれば、そのまま格納し、なければnullを入れるようにした。

pile.tweetId = data.tweetId ?data.tweetId:null

これにより無事にtweetの内容がTwitterTweetEmbedのカード形式で表示された。

他の必須記入事項ではないものにもこの三項式を利用しておくことでエラーを防いでおく。

snapshot.docs.forEach(doc => {
const data = doc.data()
console.log('data.title')

const pile={}
//条件式 ? trueの処理 : falseの処理
pile.title = data.title?data.title:null
pile.details = data.details?data.details:null
pile.userid = data.userid
pile.username = data.username
pile.category = data.category?data.category:null
pile.tweetId = data.tweetId ?data.tweetId:null

posts.push(pile)

});

Useridとusernameはどのpost項目にも組み入れるようにしておく。
pile.userid = data.userid
pile.username = data.username

Mediumの入力はデータベースに追加してカード形式で表示させるのでここでは必要ないか。

一方でdebankのdeposit内容はdebankidからfetchしているのでこれは受け渡し可能にしておく。

<Deposits />

ではなく引数を取り、idを受け渡す形に変更。

<Deposits depo={depo}/>

const [depo, setDepo] = useState();

ninja.forEach(Item => {
if(Item.debankid !=null){
// depo = Item.debankid
setDepo(Item.debankid)

console.log(depo)
}
});

export default function Deposits({depo}) {

useEffect(() => {
fetch(
//'https://openapi.debank.com/v1/user/total_balance?id=0xa242fcb2acbb118ea1b6829efe8b7e2087b43986', {
'https://openapi.debank.com/v1/user/total_balance?id='+depo, {
headers:
{
'accept': 'application/json'
}
})
.then(res => res.json())
.then(results => setDebank((results.total_usd_value).toFixed(digit)))
}, [])

こちらの内容で確認。

Depositで下記のエラー。

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toFixed')

useEffectがこのケースではあっていない気がするので、

.then(()=>console.log('depo'+depo))

を挿入し、depoがどのように渡されているかを確認。

きちんと問題なく数値が渡されているよう。ただ、render数が多すぎるようなので、エラーが出ている。

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Renderingはsetするたびに行われるのでさせないように条件付け。

ninja.forEach(Item => {
if(Item.debankid !=null||Item.debankid !=undefined){
if(depo==undefined||depo==null){
// depo = Item.debankid
setDepo(Item.debankid)
console.log('aa')
console.log(depo)
}
}
});

またuseeffectの内容も加工。

useEffect(() => {
console.log('depo'+depo)
if(depo!=undefined||depo!=null){
console.log('depo'+depo)

fetch(
//'https://openapi.debank.com/v1/user/total_balance?id=0xa242fcb2acbb118ea1b6829efe8b7e2087b43986', {
'https://openapi.debank.com/v1/user/total_balance?id='+depo, {
headers:
{
'accept': 'application/json'
}
})
.then(res => res.json())
//.then(()=>console.log('depo'+depo))
//.then(results=>console.log('value'+results.total_usd_value))
.then(results => setDebank((results.total_usd_value).toFixed(digit)))
//.then(results => setDebank((results.total_usd_value)))
}
}, [])

こちらにより意図した形でdebankidからuserのトータル金額を表示させることができた。

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.