From c8e276983fcee4b910a541a75f739b4e76b1739b Mon Sep 17 00:00:00 2001
From: "Sakamoto, Kazunori" <exkazuu@gmail.com>
Date: Tue, 17 Sep 2024 19:42:53 +0900
Subject: [PATCH] fix: improve UIs

---
 .env.staging                                  |  3 ++
 package.json                                  |  2 +-
 .../[programId]/CheckpointProblem.tsx         | 28 ++++++++++---------
 .../[languageId]/[programId]/StepProblem.tsx  | 28 ++++++++++---------
 .../(withAuth)/courses/[courseId]/page.tsx    |  2 ++
 .../trpcBackend/routers/index.ts              |  5 ++++
 6 files changed, 41 insertions(+), 27 deletions(-)
 create mode 100644 .env.staging

diff --git a/.env.staging b/.env.staging
new file mode 100644
index 00000000..49d5c3e1
--- /dev/null
+++ b/.env.staging
@@ -0,0 +1,3 @@
+DATABASE_URL="file:./mount/prod.sqlite3?connection_limit=1"
+
+NEXT_PUBLIC_BASE_URL="http://localhost:8080"
diff --git a/package.json b/package.json
index 4d10bceb..1a3a0e65 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "prepare": "husky || true",
     "prettify": "prettier --cache --color --write \"**/{.*/,}*.{cjs,css,cts,htm,html,js,json,json5,jsonc,jsx,md,mjs,mts,scss,ts,tsx,vue,yaml,yml}\" \"!**/test-fixtures/**\"",
     "start": "wb start",
-    "start-prod": "wb start --mode staging",
+    "start-stg": "wb start --mode staging",
     "test": "wb test",
     "test/ci-setup": "wb prisma reset",
     "typecheck": "wb typecheck"
diff --git a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/CheckpointProblem.tsx b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/CheckpointProblem.tsx
index 07436357..242fc158 100644
--- a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/CheckpointProblem.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/CheckpointProblem.tsx
@@ -123,7 +123,7 @@ export const CheckpointProblem: React.FC<CheckpointProblemProps> = ({
         </VStack>
         <VStack align="center">
           <Box textAlign="center" w="100%">
-            赤線で囲われた時点の実行結果
+            赤線で囲われた行の実行後の結果（注意：実行前ではなく実行後！）
           </Box>
           <Box>
             <TurtleGraphics
@@ -135,18 +135,20 @@ export const CheckpointProblem: React.FC<CheckpointProblemProps> = ({
             />
           </Box>
         </VStack>
-        <VStack>
-          <Box>青色のハイライト時点の実行結果</Box>
-          <Box>
-            <TurtleGraphics
-              ref={turtleGraphicsRef}
-              beforeTraceItem={beforeCheckpointTraceItem}
-              currentTraceItem={currentCheckpointTraceItem}
-              isEnableOperation={false}
-              problem={problem}
-            />
-          </Box>
-        </VStack>
+        {problem.sidToLineIndex.get(beforeCheckpointTraceItem.sid) && (
+          <VStack>
+            <Box>青色のハイライト行の実行後の結果（注意：実行前ではなく実行後！）</Box>
+            <Box>
+              <TurtleGraphics
+                ref={turtleGraphicsRef}
+                beforeTraceItem={beforeCheckpointTraceItem}
+                currentTraceItem={currentCheckpointTraceItem}
+                isEnableOperation={false}
+                problem={problem}
+              />
+            </Box>
+          </VStack>
+        )}
       </VStack>
       <VStack align="end" minW="50%" overflow="hidden">
         <HStack>
diff --git a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/StepProblem.tsx b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/StepProblem.tsx
index eb4c281f..ac71ddbc 100644
--- a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/StepProblem.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/StepProblem.tsx
@@ -111,7 +111,7 @@ export const StepProblem: React.FC<StepProblemProps> = ({
         </VStack>
         <VStack align="center">
           <Box textAlign="center" w="100%">
-            赤線で囲われた時点の実行結果
+            赤線で囲われた行の実行後の結果（注意：実行前ではなく実行後！）
           </Box>
           <Box>
             <TurtleGraphics
@@ -123,18 +123,20 @@ export const StepProblem: React.FC<StepProblemProps> = ({
             />
           </Box>
         </VStack>
-        <VStack>
-          <Box>青色のハイライト時点の実行結果</Box>
-          <Box>
-            <TurtleGraphics
-              ref={turtleGraphicsRef}
-              beforeTraceItem={beforeCheckpointTraceItem}
-              currentTraceItem={currentCheckpointTraceItem}
-              isEnableOperation={false}
-              problem={problem}
-            />
-          </Box>
-        </VStack>
+        {problem.sidToLineIndex.get(beforeCheckpointTraceItem.sid) && (
+          <VStack>
+            <Box>青色のハイライト行の実行後の結果（注意：実行前ではなく実行後！）</Box>
+            <Box>
+              <TurtleGraphics
+                ref={turtleGraphicsRef}
+                beforeTraceItem={beforeCheckpointTraceItem}
+                currentTraceItem={currentCheckpointTraceItem}
+                isEnableOperation={false}
+                problem={problem}
+              />
+            </Box>
+          </VStack>
+        )}
       </VStack>
       <VStack align="end" minW="50%" overflow="hidden">
         <HStack>
diff --git a/src/app/(withAuth)/courses/[courseId]/page.tsx b/src/app/(withAuth)/courses/[courseId]/page.tsx
index 86e2eeb3..68019842 100644
--- a/src/app/(withAuth)/courses/[courseId]/page.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/page.tsx
@@ -25,6 +25,8 @@ const CoursePage: NextPage<{ params: { courseId: CourseId } }> = async ({ params
   const courseId = params.courseId;
   const userCompletedProblems = await fetchUserCompletedProblems(user.id, courseId);
   const userProblemSessions = await fetchUserProblemSessionsWithUserAnswer(user.id);
+  console.log('userCompletedProblems:', userCompletedProblems);
+  console.log('userProblemSessions:', userProblemSessions);
 
   return (
     <Course
diff --git a/src/infrastructures/trpcBackend/routers/index.ts b/src/infrastructures/trpcBackend/routers/index.ts
index d1df2987..1315d8e5 100644
--- a/src/infrastructures/trpcBackend/routers/index.ts
+++ b/src/infrastructures/trpcBackend/routers/index.ts
@@ -1,3 +1,4 @@
+import { revalidatePath } from 'next/cache';
 import { z } from 'zod';
 
 import { upsertUserProblemSession } from '../../../utils/upsertUserProblemSession';
@@ -67,6 +68,8 @@ export const backendRouter = router({
         },
         data,
       });
+      revalidatePath('/courses', 'layout');
+      console.log('revalidatePath()');
       return userProblemSession;
     }),
   createUserCompletedProblem: procedure
@@ -88,6 +91,8 @@ export const backendRouter = router({
           languageId: input.languageId,
         },
       });
+      revalidatePath('/courses', 'layout');
+      console.log('revalidatePath()');
     }),
   createUserAnswer: procedure
     .use(authorize)