/itemsエンドポイントのファイルを分割&削除ボタン追加
#35
Conversation
|
Visit the preview URL for this PR (updated for commit 3831396): https://cafeore-2024--pr35-refactor-apis-8bwpxro5.web.app (expires Fri, 06 Sep 2024 19:35:04 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: b62dcde668e26b6280dd8317f3f875013f6f22f5 |
| export const action: ClientActionFunction = async (args) => { | ||
| const { request } = args; | ||
| switch (request.method) { | ||
| case "POST": | ||
| return addItem(args); | ||
| // case "DELETE": | ||
| // return deleteItem(args); | ||
| default: | ||
| console.error("Invalid method", request.method); | ||
| return new Response(null, { status: 405 }); | ||
| } | ||
| }; |
There was a problem hiding this comment.
items.tsxの中に書かれていたclientActionを、action.tsとして別ファイルに切り出しています。
httpリクエストのmethodに応じてハンドリングする関数が分岐してることに注意してください
| // todo: implement delete item | ||
| console.error("Not implemented: delete item", itemId); |
There was a problem hiding this comment.
つぎ、らいらいにはこの関数の実装をやってほしいです！
この2行を消して実装に取り掛かってください
| <Form method="DELETE"> | ||
| <input type="hidden" name="itemId" value={item.id} /> | ||
| <Button type="submit">削除</Button> | ||
| </Form> |
There was a problem hiding this comment.
各アイテムに削除ボタンを追加
ここではhttpリクエストのDELETEメソッドを使用するよう指定しています
There was a problem hiding this comment.
〈すごい細かい話〉 ※読み飛ばしてOK
やたらhttpリクエストって言ってるけど、今回はすべてがブラウザ上で動作するSPAなので、実態はJavaScriptのオブジェクトでしかないです。
| import { itemRepository } from '~/repositories/item'; | ||
|
|
||
| import type { action as clientAction } from "./action"; | ||
| export { action as clientAction } from "./action"; |
There was a problem hiding this comment.
items/route.tsxが以前のitems.tsxと同じ内容を含んでいます
この箇所でaction.tsのactionをclientActionとしてexportすることで、route.tsxの中にclientActionを直接書いたのと同じ作用を生み出しています
Remixでは、ページのJSX（htmlっぽいやつ）とactionを同じファイルに書かなきゃいけないルールですが、こうすることによって、actionのファイル分割を実現しています
@Lailai0477 はこのPRの Files changed を眺めて
自分の実装箇所（
clientAction）がどのようにリファクタされたかにフォーカスして読んでみてください。読み終わったら、便宜上このPRのレビューをapprovedに変更し、マージの作業をお願いします
次の実装の指示も書いてあります。
このPRのコメントだけで理解出来たら、そのまま実装
まだ解説してほしい部分があれば、Slackでメンションしてください
ref