feat: 単語暗記進捗の記録のためのブックマーク機能（★）と、単語カードを見た数を記録する機能（目のアイコン） - #27
Conversation
tknkaa
left a comment
tknkaa
left a comment
There was a problem hiding this comment.
楽観的 UI 使ってるところとかめっちゃいいと思う！
細かいところと Server Actions についてもう一回確認してほしい！
There was a problem hiding this comment.
何の変更か分かるようにマイグレーションに名前を指定してるのはめっちゃいいと思う！
ただ、今回はマイグレーションを2回に分ける意味がないので、特に理由がなければ1回にまとめた方が履歴がスッキリしていいと思う！
| // level2はcoralとlevel1の間を橋渡しする暖色のアンバーにしている | ||
| export const DEFAULT_STAR_COLORS: StarColors = { | ||
| level1: "#3fb6b8", | ||
| level2: "#fbbf24 ", |
There was a problem hiding this comment.
末尾スペースがあると input type="color" で黒に矯正されてしまうので消そう！
There was a problem hiding this comment.
useStarColors はコンポーネントではなくカスタムフックなので、ファイル名はキャメルケースにして、lib/hooks/useStarColors.ts に置きたい！
| {displayedStar.starred ? "★" : "☆"} | ||
| </button> | ||
| </form> | ||
| <StarCountEditor |
There was a problem hiding this comment.
key = {current.id} みたいに key を指定した方がいいかも！
スターの回数を修正するポップアップを開いたまま次のカードに移動すると、ポップアップの中の値が前のカードのまま残っちゃって、そのまま保存すると前のカードの回数が今開いてるカードに適用されてしまうと思う！
There was a problem hiding this comment.
mask と useId をやめて、輪郭と瞳孔の穴を fill-rule="evenodd" で1つの <path> にまとめた方が、フックを使わなくなる分 "use client" も不要になってシンプルになると思う！
| : { id: current.id, starred: current.starred, starCount: current.starCount }; | ||
| async function handleToggleStar() { | ||
| setOptimisticStar( | ||
| current.starred |
There was a problem hiding this comment.
CardRow.tsx と同じように displayedStar から次の状態を計算するべきかと！そうすればサーバーのレスポンスを待たずにトグルできると思う！
|
|
||
| // 単語の★を付け外しする。付けるときだけ starCount を+1し、外してもstarCountは減らさない | ||
| export async function toggleStar(cardId: string, notebookId: string) { | ||
| const card = await prisma.card.findUniqueOrThrow({ |
There was a problem hiding this comment.
find して update するのは atomic にしたい！
| }); | ||
|
|
||
| revalidatePath(`/my-notebooks/${notebookId}`); | ||
| revalidatePath(`/my-notebooks/${notebookId}/study`); |
There was a problem hiding this comment.
setStarCount, resetStar, resetAllStars で /review を revalidate しない理由ってなんだっけ？
| data: { viewCount: { increment: 1 } }, | ||
| }); | ||
|
|
||
| revalidatePath(`/my-notebooks/${notebookId}`); |
There was a problem hiding this comment.
ここは3パス全部 revalidate する意味あるかな？
|
revalidateする/しない のまえに、このコードだとなにもキャッシュしていないのでは? |
3 participants
My単語帳→ブックマーク機能
のタスク（8/14にアサイン）を行いました。追加した機能は以下です。
・ブックマーク機能として、覚えられなかった単語に★をつける
・★の回数が蓄積される
・★の回数によって色が変わる（1回目：青緑、2回目：黄、3回目以降：赤）
・上記の★の色をユーザーが自由に編集できる
・★の表示回数を手動で変更あるいはリセット（個別・一括の両方）する
・★がついた単語のみを復習する
・単語カードが表示された回数がわかる（目のアイコンの右側に数字が表示される）