//tips
//smart contract
選択したアドレスデータの内容を表示するinfo.jsファイルを作成。
ここでは複数のドキュメントを取得し、表示している。アクセスしているアドレスデータのドキュメントにあるmessageコレクションにメッセージを追加。
2つのgetで並行して結果を受け取るようにしており、一つ目がログインアカウントのメールアドレスのドキュメント、2つ目はその中にあるコレクションを取り出している。
// アドレスデータとメッセージを取得し表示
useEffect(() => {
if (auth.currentUser != null) {
db.collection('address')
.doc(auth.currentUser.email)
.collection('address')
.doc(router.query.id).get()
.then((snapshot)=> {
setMydata(snapshot.data())
})
db.collection('address')
.doc(auth.currentUser.email)
.collection('address')
.doc(router.query.id)
.collection('message').orderBy('time', 'desc').get()
.then(snapshot=> {
const data = []
snapshot.forEach((document)=> {
data.push(<li className="list-group-item px-3 py-1">
{document.data().comment}
</li>)
})
setMsgdata(data)
})
db.collection('address')
.doc(auth.currentUser.email)
.collection('address')
.doc(router.query.id).update({flag:false})
} else {
setMessage("no data")
}
}, [message])
メッセージの送信設定としては、ログインユーザーのmessageにメッセージを追加、送信先のアカウントのmessageにメッセージを追加、送信先のアカウントにあるログインユーザーflagをtrueに変更という処理を行なっている。
全ての処理が完了してから出ないとリダイレクトできない非同期の入れ子構造になっている。
// 自身のアドレス内にメッセージを追加
db.collection('address')
.doc(auth.currentUser.email)
.collection('address')
.doc(router.query.id)
.collection('message').add(to).then(ref=> {
// 相手のアドレス内にメッセージを追加
db.collection('address')
.doc(router.query.id)
.collection('address')
.doc(auth.currentUser.email)
.collection('message').add(from).then(ref=> {
// 相手のアドレス内のflagを変更
db.collection('address')
.doc(router.query.id)
.collection('address')
.doc(auth.currentUser.email).update({flag:true}).then(ref=> {
router.push('/address')
})
メッセージを追加した後、新着メッセージのフラグをupdate({flag:true})としてtrueに更新。
これはfirestoreのdb.collection('address').doc(router.query.id).collection('address').doc(auth.currentUser.email)にflagフィールドが存在していない場合、エラーになる。
お互いのデータがアドレス帳に登録されていないとこのメッセージアプリは使えない。
ここまでで大まかな外観が掴めたので、ここから自身のページをnext.jsで作成していく。コンポーネントを横に並べて配置したいのでそちらの方法を模索。
Bootstrapでは、サイトの横幅を均等に分けるガイドラインをグリッドと呼び、12本のグリッドでレイアウトを決める機能がある。
このグリッドに沿って表示物を配置していけないか考えていく。グリットを使う表示物を集めたコンテナのなかに横並びの行rowとその行を構成する要素カラム.colがある。
.container
-.row
—.col
例えば、.col-md-4と記述すると、画面幅がMiduim以上のときはグリッドを4個持つカラムを生成することなどができる。
下記のようにすると行を二つに分割し、更に片方のブロックを分割して利用することができる。
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-2"><p>bootstrap</p></div>
<div class="col-lg-2"><p>bootstrap</p></div>
<div class="col-lg-4"><p>bootstrap</p></div>
</div>
</div>
<div class="col-lg-4"><p>bootstrap</p></div>
</div>
colで分割したものを更に分割するとその際には親の分割分を12として記載していくことがわかった。これはnext.jsというよりはbootstrapの内容だった。色々模索中。1からcssまで書かなければいけない事態にならないことをお祈り。
