Blockchain code Metaverse VR

SmartContract×VR×Crypto(572)

スポンサーリンク

//tips

//smart contract

メッセージの抜き出しに条件をつけ特定の会話主のメッセージを抜き出す。

Towhomの方もローカルストレージから抜き出しておく。

const [authid, setauthid] = useState('')
const [towhomid, settowhomid] = useState('')

useEffect(() => {
// if(localStorage.getItem('authhistory')==ninja[0].mail){ localStorage.setItem('authuserid',ninja[0].userid)}
setauthid(localStorage.getItem('authuserid'))
settowhomid(localStorage.getItem('Towhom'))
}
, [])

Rendering表示の方に制約を加えたが、表示されなくなってしまった。

{ninjav.map((item,index) => (
<div key={index} >

{item.userid==authid||item.userid==towhomid&&
<>

{item.userid==authid
?
<Typography className={classes.titlebackshape}>
{item.username}: {item.Message}:{item.date}
</Typography>
:

<Typography className={classes.titlebackshape}>
{item.username}: {item.Message}:{item.date}:right
</Typography>
}
</>
}

Sortの部分で処理してしまった方が適切かもしれない。

Foreachではなくfilterでninjaから派生配列を生成してそちらをninjavのsortにかける流れが良さそう。

const newArray = ninja.filter(element => (element.userid==authid||element.userid==towhomid));
console.log('newArray');
console.log(newArray);

let ninjav = newArray.sort(function(a, b) {
return (a.date < b.date) ? -1 : 1; //オブジェクトの昇順ソート
//return (a.cardorder > b.cardorder) ? -1 : 1; //オブジェクトの降順ソート
});

element.userid==authid||element.userid==towhomid)では少し条件が緩すぎたので

下記に変換。
const newArray = ninja.filter(element =>
(element.userid==authid&&element.Towhom==towhomid||element.userid==parseInt(towhomid)&&element.Towhom==userid.toString()));

ただ、Towhomへの登録が文字列でなされているので数字から文字の変換。文字から数字への変換が必要になる。

なぜか新たにuseridでエラーが出るようになった。

Authidの読み込みが間にあっていなさそうなので、auth設定後に実施するようにする。

console.log('authid')
console.log(authid)

if(authid){

const newArray = ninja.filter(element =>
(element.userid==authid&&element.Towhom==towhomid||element.userid==parseInt(towhomid)&&element.Towhom==authid.toString()));

ninjav = newArray.sort(function(a, b) {
return (a.date < b.date) ? -1 : 1; //オブジェクトの昇順ソート
//return (a.cardorder > b.cardorder) ? -1 : 1; //オブジェクトの降順ソート
});

}

useEffect(() => {
// if(localStorage.getItem('authhistory')==ninja[0].mail){ localStorage.setItem('authuserid',ninja[0].userid)}
setauthid(localStorage.getItem('authuserid'))
settowhomid(localStorage.getItem('Towhom'))
}
, [towhomid])

Rendering箇所も下記のように設計することで問題なく抽出できた。

{authid&&
<>
{ninjav.map((item,index) => (
<div key={index} >

このmessageページは初めてメッセージを送る相手用なので、既に既存のメッセージのやり取りがある相手に対してはtwitterのように送付済みのフレンド一覧を表示させたい。

[id]フォルダの中に別途Messageフォルダを作成し、動的ルーティングのページを作成する。

https://qiita.com/gozan/items/42118d6312d5919f4a79

http://localhost:3000/ID/[id]/Message/[msid]とするため、msidとして認識できるように設定する必要がある。

getstaticpathの一部を

const paths = posts.map(ninja => {
return {
params: { msid:ninja.toString() }
}
})

に変更。

getstaticpropsでは

export const getStaticProps = async (context) => {

let posts = []

const id = parseInt(context.params.msid)

とした。

ところが下記のように二つ分の動的なidを設定する必要があるとのエラーが出た。

error - Error: A required parameter (id) was not provided as a string in getStaticPaths for /ID/[id]/Message/[msid]

このような形で通用するか試す。

const paths = posts.map(ninja => {
return {
params: { id:ninja.toString() ,msid:ninja.toString()}
}

よし。きちんとページ表示まで持っていけた。

ただ、別のuseridページを表示させようとするとうまくいかず。間にフォルダ名記載を入れる方法ではダメなのか。

https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routesa

getstaticpathのconsole.log(posts)で確認いたところ全てのuseridを抽出できている。

getStaticProps のcontextの中身を見てみる。

http://localhost:3000/ID/1/Message/1の場合は、

context
{
params: { id: '1', msid: '1' },
locales: undefined,
locale: undefined,
defaultLocale: undefined
}

http://localhost:3000/ID/1/Message/2とするとエラーとなる。

pathsを抽出してみたところ、{ id: '1', msid: ‘2’ } }のものが存在しないことがわかった。

[
{ params: { id: '1', msid: '1' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '3', msid: '3' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '3', msid: '3' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '2', msid: '2' } },
{ params: { id: '4', msid: '4' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '2', msid: '2' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '4', msid: '4' } },
{ params: { id: '1', msid: '1' } },
{ params: { id: '4', msid: '4' } },
{ params: { id: '4', msid: '4' } }
]

膨大な量になってしまうがforeachでidに対して全てのidパターンをかけるのが良さそう。

const paths = posts.map(ninja => {
return {
params: { id:ninja.toString() ,msid:ninja.toString()}
}
})

の構成を変える。

const paths = posts.map(ninja => {
ninja.forEach(element => {
return {
params: { id:ninja.toString() ,msid:element.toString()}
}
})
})

これでダメだったのでpostsを整理する。

[
'1', '1', '1', '3', '1', '1',
'1', '1', '1', '1', '1', '3',
'1', '1', '1', '1', '1', '2',
'4', '1', '1', '2', '1', '4',
'1', '4', '4'
]

const filteredArray = posts.filter(function(ele , pos){
return posts.indexOf(ele) == pos;
})

console.log('filteredArray')
console.log(filteredArray)

let paths=[params]

filteredArray.map(item => {
item.forEach(element => {
paths.params.push({ id:item.toString() ,msid:element.toString()})
}
)
})

console.log('paths')
console.log(paths)

このように改造して確認。

FiredfilteredArrayをうまく変えて仕舞えば良いことに気が付き

こちらの形に修正することでついに[msid]に数字を入れて表示させることができた。

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 filteredArray = posts.filter(function(ele , pos){
return posts.indexOf(ele) == pos;
})

console.log('filteredArray')
console.log(filteredArray)

let filtered =[]

fileadd()

function fileadd(){
for(var i=0;i<filteredArray.length;i++){
for(var s=0;s<filteredArray.length;s++){
filtered.push([filteredArray[i],filteredArray[s]])
}
}
}

console.log('filtered')
console.log(filtered)

const paths = filtered.map(ninja => {
return {
params: { id:ninja[0].toString() ,msid:ninja[1].toString()}
}
})

console.log('paths')
console.log(paths)

return {
paths,
fallback: false
}
}

context部分も問題なし。

context
{
params: { id: '1', msid: '3' },
locales: undefined,
locale: undefined,
defaultLocale: undefined
}

あとはこのmsidに合わせてページの表示を変えるように使用を変更していけば良い。

現状msidが3で受け取ってもローカルストレージの値に引っ張られて表示がうまくいっていない。

[msid]の方はローカルストレージに引っ張られないように設定しておく必要がある。

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

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

3

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

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.