マイページ
マイページに出すもの
マイページは、そのアプリで自分が何をしたかをまとめる画面です。fleama では2つ出します。
- 出品した商品 — 自分が売りに出したもの
- 購入した商品 — 自分が買ったもの
どちらも中身は商品の一覧です。違うのはどれを選ぶかだけなので、並べる部品は1つで足ります。第8章で作った ItemList をそのまま2回使います。
誰の画面かは Context から取る
「自分」が誰なのかは、第5章で作った UserContext が持っています。マイページは画面の奥のほうにありますが、props で渡さなくても直接読めます。
TypeScript (JSX)
const user = useContext(UserContext);ここを props で受け取る形にすると、ヘッダーもマイページもカートも、全部の親がユーザーを渡す係になります。ログイン情報のようにアプリのどこでも要るものは Context に置くのが素直です。
絞り込みは filter で
商品には sellerId と buyerId を持たせてあります。出品した商品は売り手が自分のもの、購入した商品は買い手が自分のものです。
TypeScript (JSX)
const selling = items.filter((item) => item.sellerId === user.id);
const bought = items.filter((item) => item.buyerId === user.id);filter は元の配列を変えず、条件に合ったものだけの新しい配列を返します。同じ items から2つの一覧を作っても、互いに影響しません。ここで for を回して自分で配列を作ることもできますが、行が増えるだけで得はありません。
件数を添える
0件のときに何も出ないと、絞り込みが効いているのか壊れているのか分かりません。件数を出しておくと、その区別が付きます。
演習
UserContext から自分を取り出し、出品した商品と購入した商品に分けて並べます。