From b550956dbd3d17ffdc1c95b47af7dc443a53609d Mon Sep 17 00:00:00 2001 From: hikahana <22.h.hanada.nutfes@gmail.com> Date: Tue, 12 Nov 2024 13:38:50 +0000 Subject: [PATCH 01/11] add progress component --- app/package-lock.json | 46 ++++++++++++++++++++++++++++++ app/package.json | 1 + app/src/components/ui/progress.tsx | 28 ++++++++++++++++++ 3 files changed, 75 insertions(+) create mode 100644 app/src/components/ui/progress.tsx diff --git a/app/package-lock.json b/app/package-lock.json index 1cee9ec..9dd8b58 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -13,6 +13,7 @@ "@radix-ui/react-alert-dialog": "^1.1.2", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.1.0", + "@radix-ui/react-progress": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", @@ -3442,6 +3443,43 @@ } } }, + "node_modules/@radix-ui/react-progress": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.0.tgz", + "integrity": "sha512-aSzvnYpP725CROcxAOEBVZZSIQVQdHgBr2QQFKySsaD14u8dNT0batuXI+AAGDdAHfXH8rbnHmjYFqVJ21KkRg==", + "dependencies": { + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-primitive": "2.0.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-progress/node_modules/@radix-ui/react-context": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz", + "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", @@ -7466,6 +7504,14 @@ } } }, + "node_modules/react-timer-hook": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/react-timer-hook/-/react-timer-hook-3.0.8.tgz", + "integrity": "sha512-bi2e7DhPBU1MRPU4ZHaVqBmgM9e2HK0ae8O2AIqwqjcPo4/qR7lVGQonOQLAKOZPQCJSYfV8F5aBWzOLXElzqQ==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/app/package.json b/app/package.json index 478e2ad..bd64e03 100755 --- a/app/package.json +++ b/app/package.json @@ -17,6 +17,7 @@ "@radix-ui/react-alert-dialog": "^1.1.2", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.1.0", + "@radix-ui/react-progress": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", diff --git a/app/src/components/ui/progress.tsx b/app/src/components/ui/progress.tsx new file mode 100644 index 0000000..4fc3b47 --- /dev/null +++ b/app/src/components/ui/progress.tsx @@ -0,0 +1,28 @@ +"use client" + +import * as React from "react" +import * as ProgressPrimitive from "@radix-ui/react-progress" + +import { cn } from "@/lib/utils" + +const Progress = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, value, ...props }, ref) => ( + + + +)) +Progress.displayName = ProgressPrimitive.Root.displayName + +export { Progress } From 82d43f3b7cce12b4d25816ca303a3f6b5efe5ec4 Mon Sep 17 00:00:00 2001 From: hikahana <22.h.hanada.nutfes@gmail.com> Date: Tue, 12 Nov 2024 13:39:02 +0000 Subject: [PATCH 02/11] fix title --- app/src/app/layout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx index 4d1f792..87f279a 100755 --- a/app/src/app/layout.tsx +++ b/app/src/app/layout.tsx @@ -12,8 +12,8 @@ const notoSansJP = Noto_Sans_JP({ }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Let`s pics", + description: "Let`s pics", }; export default function RootLayout({ From c74d4029632a5eecc555e9c7a6040645727dde16 Mon Sep 17 00:00:00 2001 From: hikahana <22.h.hanada.nutfes@gmail.com> Date: Tue, 12 Nov 2024 13:51:33 +0000 Subject: [PATCH 03/11] fix type assignment --- app/src/types/index.tsx | 135 +++++++++++++++++++++------------------- 1 file changed, 71 insertions(+), 64 deletions(-) diff --git a/app/src/types/index.tsx b/app/src/types/index.tsx index 97fcbd5..09b3229 100644 --- a/app/src/types/index.tsx +++ b/app/src/types/index.tsx @@ -2,101 +2,108 @@ * @see {@link https://firebase.google.com/docs/reference/js/v8/firebase.User#properties_1}
*/ export type User = { - displayName: string | null; - phoneNumber?: string | null; - email: string | null; - photoURL: string | null; - providerId?: string; - uid: string; + displayName: string | null; + phoneNumber?: string | null; + email: string | null; + photoURL: string | null; + providerId?: string; + uid: string; }; /** * @see {@link https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth#currentuser}
*/ export type AuthContextState = { - currentUser: User | null | undefined; + currentUser: User | null | undefined; }; export type ReactNodeProps = { - children?: React.ReactNode; + children?: React.ReactNode; }; // prismaの型定義 export type DBUser = { - id: number; - uid: string; - name: string; - email: string; - photoUrl: string; - scores?: Score[]; - createdAt: Date; - updatedAt: Date; + id: number; + uid: string; + name: string; + email: string; + photoUrl: string; + scores?: Score[]; + createdAt: Date; + updatedAt: Date; }; export type Score = { - id: number; - point: number; - answerTime: Date; - similarity: number; - assignmentId: number; - userId: number; - imageUrl: string; - createdAt: Date; - updatedAt: Date; - user?: DBUser; - assignment?: Assignment; + id: number; + point: number; + answerTime: Date; + similarity: number; + assignmentId: number; + userId: number; + imageUrl: string; + createdAt: Date; + updatedAt: Date; + user?: DBUser; + assignment?: Assignment; }; export type Assignment = { - id: number; - wordId: number; - date: Date; - createdAt: Date; - updatedAt: Date; - word?: Word; - scores?: Score[]; + id: number; + wordId: number; + date: Date; + createdAt: Date; + updatedAt: Date; + word?: Word; + scores?: Score[]; }; export type Word = { - id: number; - english: string; - japanese: string; - difficulty: number; - createdAt: Date; - updatedAt: Date; - assignment?: Assignment[]; + id: number; + english: string; + japanese: string; + difficulty: number; + createdAt: Date; + updatedAt: Date; + assignment?: Assignment[]; }; export type ScoreDetail = { - id: number; - assignment: string; - answerIntervalTime: number; - userName: string; - imageUrl: string; - point: number; - similarity: number; + id: number; + assignment: string; + answerIntervalTime: number; + userName: string; + imageUrl: string; + point: number; + similarity: number; }; export type RankingScores = { - id: number; - userName: string; - totalPoint: number; - imageUrl: string; + id: number; + userName: string; + totalPoint: number; + imageUrl: string; }; export type MyScoreDetail = { - id: number; - assignment: string; - answerIntervalTime: number; - userName: string; - imageUrl: string; - point: number; - highestPoint: number; - similarity: number; - answerTime: string; - date: string; - streakDays: number; + id: number; + assignment: string; + answerIntervalTime: number; + userName: string; + imageUrl: string; + point: number; + highestPoint: number; + similarity: number; + answerTime: string; + date: string; + streakDays: number; }; export type todayAssignment = { + assignmentId: number; + english: string; + assignTime: Date; +}; + +export type latestAssignment = { assignmentId: number; english: string; -}; + +} From 6255ec09342a635a99de0ceb606ab21059cd5537 Mon Sep 17 00:00:00 2001 From: hikahana <22.h.hanada.nutfes@gmail.com> Date: Tue, 12 Nov 2024 14:01:23 +0000 Subject: [PATCH 04/11] fix lint --- app/src/components/ui/progress.tsx | 41 ++++++++++++++---------------- 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/app/src/components/ui/progress.tsx b/app/src/components/ui/progress.tsx index 4fc3b47..5731a07 100644 --- a/app/src/components/ui/progress.tsx +++ b/app/src/components/ui/progress.tsx @@ -1,28 +1,25 @@ -"use client" +"use client"; -import * as React from "react" -import * as ProgressPrimitive from "@radix-ui/react-progress" +import * as ProgressPrimitive from "@radix-ui/react-progress"; +import * as React from "react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; const Progress = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef + React.ElementRef, + React.ComponentPropsWithoutRef >(({ className, value, ...props }, ref) => ( - - - -)) -Progress.displayName = ProgressPrimitive.Root.displayName + + + +)); +Progress.displayName = ProgressPrimitive.Root.displayName; -export { Progress } +export { Progress }; From 2b45788b0df0f4231b7594caebc4252867cff052 Mon Sep 17 00:00:00 2001 From: hikahana <22.h.hanada.nutfes@gmail.com> Date: Tue, 12 Nov 2024 14:02:00 +0000 Subject: [PATCH 05/11] fix response data --- app/src/app/api/assignment/latest/route.ts | 4 ++-- app/src/app/api/assignment/today/route.ts | 20 ++++++++------------ 2 files changed, 10 insertions(+), 14 deletions(-) diff --git a/app/src/app/api/assignment/latest/route.ts b/app/src/app/api/assignment/latest/route.ts index f66d726..de92452 100644 --- a/app/src/app/api/assignment/latest/route.ts +++ b/app/src/app/api/assignment/latest/route.ts @@ -1,4 +1,4 @@ -import type { todayAssignment } from "@/types"; +import type { latestAssignment } from "@/types"; import { prisma } from "@lib/prisma"; // 最新の課題を取得 @@ -17,7 +17,7 @@ export async function GET() { }); } - const latestAssignment: todayAssignment = { + const latestAssignment: latestAssignment = { assignmentId: assignment.id, english: assignment.word.english, }; diff --git a/app/src/app/api/assignment/today/route.ts b/app/src/app/api/assignment/today/route.ts index d76541e..5d2721d 100644 --- a/app/src/app/api/assignment/today/route.ts +++ b/app/src/app/api/assignment/today/route.ts @@ -1,22 +1,22 @@ -;import { prisma } from "@lib/prisma"; import type { Assignment, todayAssignment } from "@/types"; +import { prisma } from "@lib/prisma"; // 課題新規作成（ランダム） export async function GET() { const startOfToday = new Date(); startOfToday.setHours(0, 0, 0, 0); // 今日の開始時間を設定 (00:00:00) - + const endOfToday = new Date(); endOfToday.setHours(23, 59, 59, 999); // 今日の終了時間を設定 (23:59:59) const assignments = await prisma.assignment.findMany({ where: { date: { - gte: startOfToday, // 今日の開始時間以上 - lte: endOfToday, // 今日の終了時間以下 + gte: startOfToday, // 今日の開始時間以上 + lte: endOfToday, // 今日の終了時間以下 }, - }, - include: { word: true }, + }, + include: { word: true }, }); console.log(assignments); @@ -24,17 +24,13 @@ export async function GET() { const todayAssignment: todayAssignment = { assignmentId: assignment.id, english: assignment.word.english, + assignTime: assignment.date, }; return todayAssignment; - }) + }); return new Response(JSON.stringify(todayAssignments), { status: 200, headers: { "Content-Type": "application/json" }, }); } - - - - - From a0833ba708d67b0e871a9a958a6c4296f5448719 Mon Sep 17 00:00:00 2001 From: hikahana <22.h.hanada.nutfes@gmail.com> Date: Tue, 12 Nov 2024 14:02:11 +0000 Subject: [PATCH 06/11] add timer --- app/src/app/page.tsx | 50 ++++++++++++++++++++++++++----- app/src/components/Timer.tsx | 57 ++++++++++++++++++++++++++++++++++++ 2 files changed, 99 insertions(+), 8 deletions(-) create mode 100644 app/src/components/Timer.tsx diff --git a/app/src/app/page.tsx b/app/src/app/page.tsx index a538c61..d47b2b0 100755 --- a/app/src/app/page.tsx +++ b/app/src/app/page.tsx @@ -1,8 +1,10 @@ "use client"; +import Timer from "@/components/Timer"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; -import type { MyScoreDetail } from "@/types"; +import { Progress } from "@/components/ui/progress"; +import type { MyScoreDetail, todayAssignment } from "@/types"; import { useRouter } from "next/navigation"; import { useEffect, useState } from "react"; import ClockIcon from "../../public/icons/icon-clock.svg"; @@ -10,6 +12,9 @@ import PhotoCameraIcon from "../../public/icons/icon-photo-camera.svg"; export default function Home() { const [myScore, setMyScore] = useState([]); + const [assignment, setAssignment] = useState([]); + const [isLoading, setIsLoading] = useState(true); + const [progressCount, setProgressCount] = useState(0); const router = useRouter(); useEffect(() => { @@ -20,11 +25,13 @@ export default function Home() { } try { + // get api/score/me const userData = JSON.parse(userIdString); const uid = userData.uid; if (!uid) { throw new Error("User ID not found"); } + setProgressCount(33); const response = await fetch(`/api/score/me/${uid}?limit=3`); if (!response.ok) { @@ -32,6 +39,23 @@ export default function Home() { } const data = await response.json(); setMyScore(data); + setProgressCount(66); + + // get api/assignment/today + const resAssignment = await fetch(`/api/assignment/today`); + if (!resAssignment.ok) { + throw new Error("データの取得に失敗しました"); + } + const resData: todayAssignment[] = await resAssignment.json(); + if (!resData) { + throw new Error("無効なデータが返されました"); + } + const formattedData = resData.map((item) => ({ + ...item, + assignTime: new Date(item.assignTime), + })); + setAssignment(formattedData); + setIsLoading(false); } catch (error) { console.error("エラーが発生しました:", error); } @@ -43,6 +67,21 @@ export default function Home() { return (
+ {isLoading ? ( + +
+ Loading... + +
+ + ) : ( +
+ {assignment && ( + // fixme [0]番目を参照しているがお題ごとに可変的にする必要あり。 + + )} +
+ )}

まだチャレンジの記録がありません

-

- 新しいチャレンジに挑戦してみましょう！ -

+

新しいチャレンジに挑戦してみましょう！

) : ( myScore.map((score) => ( -
+
チャレンジ画像 = ({ assignTime }) => { + const [elapsedTime, setElapsedTime] = useState(0); + const startTime = new Date(assignTime).getTime(); + + console.log(assignTime); + useEffect(() => { + const interval = setInterval(() => { + const currentTime = new Date(); + const timeElapsed = currentTime.getTime() - startTime; + setElapsedTime(timeElapsed); + }, 1000); + + return () => { + clearInterval(interval); + }; + }, []); + + // 経過時間を時間、分、秒に変換 + const formatTime = (ms: number) => { + const seconds = Math.floor(ms / 1000); + const minutes = Math.floor(seconds / 60); + const hours = Math.floor(minutes / 60); + + return { + hh: hours % 24, + mm: minutes % 60, + ss: seconds % 60, + }; + }; + + const { hh, mm, ss } = formatTime(elapsedTime); + + const formattedHours = String(hh).padStart(2, "0"); + const formattedMinutes = String(mm).padStart(2, "0"); + const formattedSeconds = String(ss).padStart(2, "0"); + + return ( + +
+
お題が出てからの経過時間
+
+ {formattedHours}:{formattedMinutes}: + {formattedSeconds} +
+
+ + ); +}; + +export default Timer; From e5b88a6ab514f8074a3262f5addc08ce452716ed Mon Sep 17 00:00:00 2001 From: hikahana <22.h.hanada.nutfes@gmail.com> Date: Tue, 12 Nov 2024 15:08:10 +0000 Subject: [PATCH 07/11] del log and add dependencies --- app/src/components/{ => view}/Timer.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) rename app/src/components/{ => view}/Timer.tsx (97%) diff --git a/app/src/components/Timer.tsx b/app/src/components/view/Timer.tsx similarity index 97% rename from app/src/components/Timer.tsx rename to app/src/components/view/Timer.tsx index d52e32e..15143b8 100644 --- a/app/src/components/Timer.tsx +++ b/app/src/components/view/Timer.tsx @@ -9,7 +9,6 @@ const Timer: FC = ({ assignTime }) => { const [elapsedTime, setElapsedTime] = useState(0); const startTime = new Date(assignTime).getTime(); - console.log(assignTime); useEffect(() => { const interval = setInterval(() => { const currentTime = new Date(); @@ -20,7 +19,7 @@ const Timer: FC = ({ assignTime }) => { return () => { clearInterval(interval); }; - }, []); + }, [startTime]); // 経過時間を時間、分、秒に変換 const formatTime = (ms: number) => { From 674eec4bd429b98d15b9503b31ab0dd0335a5f35 Mon Sep 17 00:00:00 2001 From: hikahana <22.h.hanada.nutfes@gmail.com> Date: Tue, 12 Nov 2024 15:08:39 +0000 Subject: [PATCH 08/11] fix biome --- app/src/app/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/app/page.tsx b/app/src/app/page.tsx index d47b2b0..e93f9d9 100755 --- a/app/src/app/page.tsx +++ b/app/src/app/page.tsx @@ -1,6 +1,6 @@ "use client"; -import Timer from "@/components/Timer"; +import Timer from "@/components/view/Timer"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; import { Progress } from "@/components/ui/progress"; @@ -42,7 +42,7 @@ export default function Home() { setProgressCount(66); // get api/assignment/today - const resAssignment = await fetch(`/api/assignment/today`); + const resAssignment = await fetch('/api/assignment/today'); if (!resAssignment.ok) { throw new Error("データの取得に失敗しました"); } From ca5fbf1c4479d47ce2cd9a4973a3aa6e0a42b885 Mon Sep 17 00:00:00 2001 From: hikahana <22.h.hanada.nutfes@gmail.com> Date: Tue, 12 Nov 2024 15:51:06 +0000 Subject: [PATCH 09/11] del react-timer-hook --- app/package-lock.json | 8 -------- 1 file changed, 8 deletions(-) diff --git a/app/package-lock.json b/app/package-lock.json index 9dd8b58..a8c9c16 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -7504,14 +7504,6 @@ } } }, - "node_modules/react-timer-hook": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/react-timer-hook/-/react-timer-hook-3.0.8.tgz", - "integrity": "sha512-bi2e7DhPBU1MRPU4ZHaVqBmgM9e2HK0ae8O2AIqwqjcPo4/qR7lVGQonOQLAKOZPQCJSYfV8F5aBWzOLXElzqQ==", - "peerDependencies": { - "react": ">=16.8.0" - } - }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", From 026973eab9adb873a16d2c7efbe23a96fbf0a45a Mon Sep 17 00:00:00 2001 From: hikahana <22.h.hanada.nutfes@gmail.com> Date: Tue, 12 Nov 2024 15:52:14 +0000 Subject: [PATCH 10/11] fix card unified width --- app/src/app/page.tsx | 14 +++++++------- app/src/components/view/Timer.tsx | 13 +++++++------ 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/app/src/app/page.tsx b/app/src/app/page.tsx index e93f9d9..f0e446c 100755 --- a/app/src/app/page.tsx +++ b/app/src/app/page.tsx @@ -65,25 +65,25 @@ export default function Home() { }, []); return ( -
+
{isLoading ? ( -
+
Loading...
) : ( -
+
{assignment && ( // fixme [0]番目を参照しているがお題ごとに可変的にする必要あり。 - + )}
)} 今日のお題

撮影してスコアを競おう！

-

Labyrinthine

+

{assignment[0]?.english}

- +

過去のチャレンジ

{myScore.length === 0 ? (
diff --git a/app/src/components/view/Timer.tsx b/app/src/components/view/Timer.tsx index 15143b8..6952ab1 100644 --- a/app/src/components/view/Timer.tsx +++ b/app/src/components/view/Timer.tsx @@ -41,12 +41,13 @@ const Timer: FC = ({ assignTime }) => { const formattedSeconds = String(ss).padStart(2, "0"); return ( - -
-
お題が出てからの経過時間
-
- {formattedHours}:{formattedMinutes}: - {formattedSeconds} + +
+
経過時間
+
+ {formattedHours}: + {formattedMinutes}: + {formattedSeconds}
From 7a75ce2729dced82de9c45469567a0f90687b7f8 Mon Sep 17 00:00:00 2001 From: hikahana <22.h.hanada.nutfes@gmail.com> Date: Tue, 12 Nov 2024 16:03:06 +0000 Subject: [PATCH 11/11] fix loading --- app/src/app/page.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/app/src/app/page.tsx b/app/src/app/page.tsx index f0e446c..d28f6cf 100755 --- a/app/src/app/page.tsx +++ b/app/src/app/page.tsx @@ -1,9 +1,9 @@ "use client"; -import Timer from "@/components/view/Timer"; import { Button } from "@/components/ui/button"; import { Card } from "@/components/ui/card"; import { Progress } from "@/components/ui/progress"; +import Timer from "@/components/view/Timer"; import type { MyScoreDetail, todayAssignment } from "@/types"; import { useRouter } from "next/navigation"; import { useEffect, useState } from "react"; @@ -42,7 +42,7 @@ export default function Home() { setProgressCount(66); // get api/assignment/today - const resAssignment = await fetch('/api/assignment/today'); + const resAssignment = await fetch("/api/assignment/today"); if (!resAssignment.ok) { throw new Error("データの取得に失敗しました"); } @@ -68,7 +68,7 @@ export default function Home() {
{isLoading ? ( - +
Loading... @@ -93,7 +93,9 @@ export default function Home() {

今日のお題

撮影してスコアを競おう！

-

{assignment[0]?.english}

+

+ {assignment[0]?.english} +

) : ( myScore.map((score) => ( -
+