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

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

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.