//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が３で受け取ってもローカルストレージの値に引っ張られて表示がうまくいっていない。
[msid]の方はローカルストレージに引っ張られないように設定しておく必要がある。
