search

commew / timelogger-web

時間記録アプリ
https://timmew.commew.net
MIT License
2 stars 0 forks source link

WIP: タスク計測を終了する機能をコンポーネントに組み込む #100

Closed kuniyuki-f closed 1 year ago

kuniyuki-f commented 1 year ago

issueURL

57

この PR で対応する範囲 / この PR で対応しない範囲

Storybook の URL、 スクリーンショット

ドラフトのため未掲載

変更点概要

ドラフトのため未掲載

レビュアーに重点的にチェックして欲しい点

ドラフトのため未掲載

補足情報

実装について迷っているため、ドラフトでPRを作成しております。

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
timelogger-web ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 19, 2023 3:43am
kuniyuki-f commented 1 year ago

@keitakn お疲れ様です。 すみません、実装について悩んでおり、しばらく手が止まってしまっているので相談させてください。

今やろうとしていること

悩んでいること

主に以下の通りです

appTokenの扱いについて

今のapi/client/fetch/task.tsの作りでは、completeTaskなどの関数はappTokenを引数に取る形になっていると思います。

type CompleteTaskDto = {
  taskId: number;
  appToken: string;
};
export type CompleteTask = (dto: CompleteTaskDto) => Promise<Task>;

このcompleteTaskはブラウザから API を叩く認識でいて、そうなると #60 のように「PagesコンポーネントのgetServerSidePropsで取得してPage Propsに渡す」という実装はできないと考えています。

なのでappTokenをブラウザに渡して使うしかないのかな？と思うのですが、getServerSidePropsでappTokenをフロントのコンポーネントに渡してしまって問題ありませんか？

問題なければ、appToken, completeTask, taskId など必要な Props を MeasuringTaskItemに追加して、実装を進めようと考えています。

もし、もっと良い方法があればコメント頂けますと幸いです🙇‍♂ どうぞよろしくお願いします！

keitakn commented 1 year ago

@c501306014

進めて頂きありがとうございます！

なのでappTokenをブラウザに渡して使うしかないのかな？と思うのですが、getServerSidePropsでappTokenをフロントのコンポーネントに渡してしまって問題ありませんか？

問題ないと言えば問題ないのですが、Next.jsのAPI Routeを経由するようにしてAPI Route内でSessionを取得、その中から appToken を取り出す事は可能でしょうか:eyes:？

これが可能であればAPI Routeを経由するようにするで問題ないと思いました！

kuniyuki-f commented 1 year ago

@keitakn

アドバイスありがとうございます！

API Routes 内で Session から appTokenを取得する方法がありました。 https://next-auth.js.org/configuration/nextjs#in-api-routes

コードは公式通りなので割愛しますが、 src/pages/api/hello.ts で実践してみたところ、たしかに appToken を取得できました。

API Routes関連の実装は本 PR およびイシューとは別にした方が良いと考えたので、新たにイシュー #101 を立てました。 本 PR は一旦保留し、先に #101 を対応してしまいたいと思います。

引き続きよろしくお願いします🙇‍♂

keitakn commented 1 year ago

@c501306014 issue作成ありがとうございます👍

お手数ですがよろしくお願いします🙏