fix: improve UIs

exKAZUu-Research · Sep 17, 2024 · c8e2769 · c8e2769
1 parent d4a64b9
commit c8e2769
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 27 deletions.
diff --git a/.env.staging 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		DATABASE_URL="file:./mount/prod.sqlite3?connection_limit=1"

		NEXT_PUBLIC_BASE_URL="http://localhost:8080"