//tips
//smart contract
ログインを押すことでauthuseridがセットできるようになったので、[id]ページのメッセージブタンクリックでconst myid=localStorage.getItem('authuserid’)取得手続きの方向がきちんと定められた。
const handleClickMessage = (e) => {
e.preventDefault();
//クリック時点で[id]の登録
localStorage.setItem('Sender',ninja[0].userid)
console.log('handleClickMessage')
console.log(ninja[0].userid)
const myid=localStorage.getItem('authuserid')
if(myid){
console.log('Success!')
router.push('/ID/'+myid+'/Message')
}else{
router.push("/login")
}
}
ここで自身のMessageページに遷移する。
このメッセージページで特殊な点はデータベースでのコレクションをメッセージ専用のものに切り替えている点。
ただ、やることはシンプルでメッセージ用のコレクションから自身が受信したもの、送信したもののデータ群を取得して表示させる。
送り手・受け手の記載がややこしくなったので[id]にて受取手をTowhomでセット。
const handleClickMessage = (e) => {
e.preventDefault();
//クリック時点で[id]の登録
localStorage.setItem('Towhom',ninja[0].userid)
pile.Towhom = data.Towhom ?data.Towhom:null
この後に自身のメッセージページに遷移してこのTowhomのuserid宛にメッセージを送ることができれば良い。
このTowhomで取得したuseridに紐づいたusernameとstoragelinkも欲しいところ。もちろん自身のものも欲しい。
登録時点でメッセージコレクションの方にも初期登録及び画像登録・変更が共有されるようにしておいた方がよいか。そうするとせっかく分けた意味がないので、ベースのデータを呼び出して使うことにする。
メッセージページはそこまで重くなる要素もないので、ダブルでの運用をトライ。
Useridをトリガーにして、usernameとstoragelinkを引っ張ることができれば良い。
ベースデータからstoragelinkでフィルターをかけ、そのドキュメント内のuseridとusernameを一種に取得したものをリスト化しすればよさそう。
まずはリストの抽出をトライ。
こちらを改造する。
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={}
//条件式 ? trueの処理 : falseの処理
pile.userid = data.userid
pile.username = data.username
pile.storagelink = data.storagelink?data.storagelink:null
posts.push(pile)
});
})//.then(()=>console.log(posts))
特定のフィールドがあるドキュメントのみを取り出すにはorderByを使用する必要があるのとのこと。
Firestore Get All Documents Where a Specific Field Exists or Does Not Exist
試しに下記で作成してみて実行。
const [mixlist,setmixlist]=useState([])
async function Datamixlist() {
const colRef= await collection(firebaseApp, "mydata").orderBy('storagelink')
//const q = await query(colRef,where("userid","==",id))
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
pile.storagelink = data.storagelink?data.storagelink:null
mixlist.push(pile)
});
}).then(()=>console.log(mixlist))
}
Datamixlist()
Orderbyで謎のエラーが発生。.where('tags', '!=', null)の形式で試してみる。
const q = await query(colRef,where("storagelink", '!=', null))
最短のループ回数でリスト取得を行うことができた。かなりの頻度で際読み込み・再実行となっているのが気になる。ここは後で見直し。
const [mixlist,setmixlist]=useState([])
const [mixdone,setmixdone]=useState(false)
function Datamixlist() {
let posts = []
const colRef= collection(firebaseApp, "mydata")//.orderBy('storagelink')
const q = query(colRef,where("storagelink", '!=', null))
getDocs(q)
.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
pile.storagelink = data.storagelink?data.storagelink:null
posts.push(pile)
});
}).then(()=>console.log(posts)).then(()=>setmixlist(posts)).then(()=>setmixdone(true))
}
if(!mixdone){
Datamixlist()
}
storageへの画像登録がマストとなってしまうが、こちらのアプリの前提がアバター使用なので問題ない。その代わり、画像登録は公開する上でマストの設定にするか。
リストは取得できたのでmapで展開しつつ、展開の中身とTowhomに格納したuseridと合致させ,
必要な部分を取れるようにすれば良い。
取得した内容で名前とアバター表示を可能にする。その下にテキストフィールドを設置すれば良い。
