fix: improve detection of lecture visit

exKAZUu-Research · Oct 11, 2024 · 9e7367b · 9e7367b
1 parent 36b4e59
commit 9e7367b
Show file tree

Hide file tree

Showing 12 changed files with 167 additions and 62 deletions.
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "@willbooster/shared-lib": "5.2.4",
     "@willbooster/shared-lib-react": "3.2.9",
     "@willbooster/wb": "8.0.2",
+    "at-decorators": "2.1.0",
     "build-ts": "13.1.8",
     "dayjs": "1.11.13",
     "dotenv-cli": "7.4.2",

diff --git a/src/app/(withAuth)/admin/statistics/page.tsx b/src/app/(withAuth)/admin/statistics/page.tsx
@@ -2,7 +2,7 @@ import type { NextPage } from 'next';
 
 import { logger } from '../../../../infrastructures/pino';
 import { prisma } from '../../../../infrastructures/prisma';
-import { Box, Heading, VStack, Table, Thead, Tbody, Tr, Th, Td } from '../../../../infrastructures/useClient/chakra';
+import { Box, Heading, Table, Tbody, Td, Th, Thead, Tr, VStack } from '../../../../infrastructures/useClient/chakra';
 import type { CourseId } from '../../../../problems/problemData';
 import { courseIdToLectureIndexToProblemIds } from '../../../../problems/problemData';
 import { dayjs } from '../../../utils/dayjs';

diff --git a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/pageOnClient.tsx b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/pageOnClient.tsx
@@ -1,10 +1,12 @@
 'use client';
 
 import type { ProblemSession, ProblemSubmission } from '@prisma/client';
+import { useLocalStorage } from '@willbooster/shared-lib-react';
 import NextLink from 'next/link';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { MdCheckCircle, MdCheckCircleOutline, MdOutlineVerified, MdVerified } from 'react-icons/md';
 
+import { useAuthContextSelector } from '../../../../../../contexts/AuthContext';
 import {
   Box,
   Card,
@@ -50,6 +52,15 @@ export const Lecture: React.FC<Props> = (props) => {
   const completedProblemCount = lectureProblemIds.filter((problemId) => completedProblemIdSet.has(problemId)).length;
   const isLessonCompleted = completedProblemCount >= lectureProblemIds.length;
 
+  const currentUserId = useAuthContextSelector((c) => c.currentUserId);
+  const [, setIsOpened] = useLocalStorage(
+    `trace-dojo.${props.params.courseId}.${props.lectureIndex}.${currentUserId}`,
+    false
+  );
+  useEffect(() => {
+    setIsOpened(true);
+  }, [setIsOpened]);
+
   return (
     <VStack align="stretch" spacing={6}>
       <Heading as="h1">

diff --git a/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/page.tsx b/src/app/(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/page.tsx
@@ -1,5 +1,4 @@
 import type { NextPage } from 'next';
-import SuperTokensNode from 'supertokens-node';
 
 import { logger } from '../../../../../../../../infrastructures/pino';
 import { prisma } from '../../../../../../../../infrastructures/prisma';
@@ -14,8 +13,6 @@ type Props = {
 
 const ProblemPage: NextPage<Props> = async (props) => {
   const session = await getNonNullableSessionOnServer();
-  const superTokensUser = session && (await SuperTokensNode.getUser(session.superTokensUserId));
-  const isAdmin = superTokensUser?.emails[0]?.endsWith('@internet.ac.jp');
 
   let incompleteProblemSession = await prisma.problemSession.findFirst({
     where: {
@@ -45,7 +42,6 @@ const ProblemPage: NextPage<Props> = async (props) => {
   return (
     <ProblemPageOnClient
       initialProblemSession={incompleteProblemSession}
-      isAdmin={isAdmin}
       params={props.params}
       userId={session.superTokensUserId}
     />

diff --git a/.../(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/pageOnClient.tsx b/.../(withAuth)/courses/[courseId]/lectures/[lectureId]/problems/[problemId]/pageOnClient.tsx
@@ -11,6 +11,7 @@ import {
   MAX_ACTIVE_DURATION_MS_AFTER_LAST_EVENT,
   MIN_INTERVAL_MS_OF_ACTIVE_EVENTS,
 } from '../../../../../../../../constants';
+import { useAuthContextSelector } from '../../../../../../../../contexts/AuthContext';
 import { backendTrpcReact } from '../../../../../../../../infrastructures/trpcBackend/client';
 import {
   Button,
@@ -29,12 +30,13 @@ import { ProblemBody } from './ProblmBody';
 
 type Props = {
   initialProblemSession: ProblemSession;
-  isAdmin: boolean | undefined;
   params: { courseId: CourseId; lectureId: string; problemId: ProblemId };
   userId: string;
 };
 
 export const ProblemPageOnClient: React.FC<Props> = (props) => {
+  const isAdmin = useAuthContextSelector((c) => c.isAdmin);
+
   const lectureIndex = courseIdToLectureIds[props.params.courseId].indexOf(props.params.lectureId);
   const problem = useMemo(
     () =>
@@ -127,7 +129,7 @@ export const ProblemPageOnClient: React.FC<Props> = (props) => {
                   : 'ステップ実行モードで最初からやり直す'}
               </Button>
             </Tooltip>
-            {props.isAdmin && (
+            {isAdmin && (
               <Button
                 colorScheme="blue"
                 variant="outline"

diff --git a/src/app/(withAuth)/courses/[courseId]/pageOnClient.tsx b/src/app/(withAuth)/courses/[courseId]/pageOnClient.tsx
@@ -1,7 +1,9 @@
 'use client';
 
+import { useLocalStorage } from '@willbooster/shared-lib-react';
 import { MdOutlineVerified, MdVerified } from 'react-icons/md';
 
+import { useAuthContextSelector } from '../../../../contexts/AuthContext';
 import {
   Box,
   Button,
@@ -37,58 +39,82 @@ export const CoursePageOnClient: React.FC<Props> = (props) => {
       <Heading as="h1">{courseIdToName[props.params.courseId]}</Heading>
 
       <SimpleGrid columnGap={4} columns={{ base: 1, lg: 2 }} rowGap={6}>
-        {courseIdToLectureIndexToProblemIds[props.params.courseId].map((problemIds, lectureIndex) => {
-          const completedProblemCount = problemIds.filter((problemId) =>
-            props.currentUserCompletedProblemIdSet.has(problemId)
-          ).length;
-          const isLectureCompleted = completedProblemCount >= problemIds.length;
+        {courseIdToLectureIndexToProblemIds[props.params.courseId].map((problemIds, lectureIndex) => (
+          <LectureCard
+            key={lectureIndex}
+            courseId={props.params.courseId}
+            currentUserCompletedProblemIdSet={props.currentUserCompletedProblemIdSet}
+            currentUserStartedProblemIdSet={props.currentUserStartedProblemIdSet}
+            lectureIndex={lectureIndex}
+            problemIds={problemIds}
+          />
+        ))}
+      </SimpleGrid>
+    </VStack>
+  );
+};
+type LectureCardProps = {
+  courseId: CourseId;
+  lectureIndex: number;
+  problemIds: string[];
+  currentUserCompletedProblemIdSet: ReadonlySet<string>;
+  currentUserStartedProblemIdSet: ReadonlySet<string>;
+};
 
-          const isDisabled = problemIds.every((problemId) => !props.currentUserStartedProblemIdSet.has(problemId));
-          const url = isDisabled
-            ? '#'
-            : `${props.params.courseId}/lectures/${courseIdToLectureIds[props.params.courseId][lectureIndex]}`;
+const LectureCard: React.FC<LectureCardProps> = ({
+  courseId,
+  currentUserCompletedProblemIdSet,
+  currentUserStartedProblemIdSet,
+  lectureIndex,
+  problemIds,
+}) => {
+  const completedProblemCount = problemIds.filter((problemId) =>
+    currentUserCompletedProblemIdSet.has(problemId)
+  ).length;
+  const isLectureCompleted = completedProblemCount >= problemIds.length;
 
-          return (
-            <Card key={lectureIndex} p={2}>
-              <CardHeader as={HStack} gap={3}>
-                <Icon
-                  as={isLectureCompleted ? MdVerified : MdOutlineVerified}
-                  color={isLectureCompleted ? 'brand.500' : 'gray.200'}
-                  fontSize="3xl"
-                  mx="-0.125em"
-                />
-                <Heading size="md">第{lectureIndex + 1}回</Heading>
-                <Spacer />
-                <Tooltip
-                  isDisabled={!isDisabled}
-                  label={`第${lectureIndex + 1}回の配布資料のURLから問題を一度開くと、ボタンが有効になります。`}
-                >
-                  <Link href={url}>
-                    <Button colorScheme="brand" isDisabled={isDisabled} mt={4}>
-                      課題を解く
-                    </Button>
-                  </Link>
-                </Tooltip>
-              </CardHeader>
+  const currentUserId = useAuthContextSelector((c) => c.currentUserId);
+  const [isOpened] = useLocalStorage(`trace-dojo.${courseId}.${lectureIndex}.${currentUserId}`, false);
+  const isDisabled = !isOpened && problemIds.every((problemId) => !currentUserStartedProblemIdSet.has(problemId));
+  const url = isDisabled ? '#' : `${courseId}/lectures/${courseIdToLectureIds[courseId][lectureIndex]}`;
 
-              <CardBody align="stretch" as={VStack}>
-                <Progress
-                  colorScheme="brand"
-                  max={problemIds.length}
-                  rounded="sm"
-                  size="sm"
-                  title={`${completedProblemCount}/${problemIds.length} 問題完了`}
-                  value={completedProblemCount}
-                />
-                <Box textAlign="right">
-                  解答状況: {completedProblemCount}/{problemIds.length} 問 (
-                  {Math.round((completedProblemCount / problemIds.length) * 100)}%)
-                </Box>
-              </CardBody>
-            </Card>
-          );
-        })}
-      </SimpleGrid>
-    </VStack>
+  return (
+    <Card p={2}>
+      <CardHeader as={HStack} gap={3}>
+        <Icon
+          as={isLectureCompleted ? MdVerified : MdOutlineVerified}
+          color={isLectureCompleted ? 'brand.500' : 'gray.200'}
+          fontSize="3xl"
+          mx="-0.125em"
+        />
+        <Heading size="md">第{lectureIndex + 1}回</Heading>
+        <Spacer />
+        <Tooltip
+          isDisabled={!isDisabled}
+          label={`第${lectureIndex + 1}回の配布資料のURLから問題を一度開くと、ボタンが有効になります。`}
+        >
+          <Link href={url}>
+            <Button colorScheme="brand" isDisabled={isDisabled} mt={4}>
+              課題を解く
+            </Button>
+          </Link>
+        </Tooltip>
+      </CardHeader>
+
+      <CardBody align="stretch" as={VStack}>
+        <Progress
+          colorScheme="brand"
+          max={problemIds.length}
+          rounded="sm"
+          size="sm"
+          title={`${completedProblemCount}/${problemIds.length} 問題完了`}
+          value={completedProblemCount}
+        />
+        <Box textAlign="right">
+          解答状況: {completedProblemCount}/{problemIds.length} 問 (
+          {Math.round((completedProblemCount / problemIds.length) * 100)}%)
+        </Box>
+      </CardBody>
+    </Card>
   );
 };
diff --git a/src/app/(withAuth)/layout.tsx b/src/app/(withAuth)/layout.tsx
@@ -6,9 +6,10 @@ import { SessionAuthForNextJs } from '../../components/molecules/SessionAuthForN
 import { TryRefreshComponent } from '../../components/molecules/TryRefreshComponent';
 import { DefaultFooter } from '../../components/organisms/DefaultFooter';
 import { DefaultHeader } from '../../components/organisms/DefaultHeader';
+import { AuthContextProvider } from '../../contexts/AuthContext';
 import { Container, Spinner } from '../../infrastructures/useClient/chakra';
 import type { LayoutProps } from '../../types';
-import { getNullableSessionOnServer } from '../../utils/session';
+import { getEmailFromSession, getNullableSessionOnServer } from '../../utils/session';
 
 const DefaultLayout: NextPage<LayoutProps> = async ({ children }) => {
   const { hasToken, session } = await getNullableSessionOnServer();
@@ -43,7 +44,12 @@ const DefaultLayout: NextPage<LayoutProps> = async ({ children }) => {
       <DefaultHeader />
       <Suspense fallback={<Spinner left="50%" position="fixed" top="50%" transform="translate(-50%, -50%)" />}>
         <Container pb={16} pt={6}>
-          {children}
+          <AuthContextProvider
+            currentEmail={await getEmailFromSession(session.superTokensUserId)}
+            currentUserId={session.superTokensUserId}
+          >
+            {children}
+          </AuthContextProvider>
         </Container>
       </Suspense>
       <DefaultFooter />

diff --git a/src/app/(withAuth)/usage/page.tsx b/src/app/(withAuth)/usage/page.tsx
@@ -1,6 +1,6 @@
 import type { NextPage } from 'next';
 
-import { Box, Heading, VStack, Image, Text, List, ListItem } from '../../../infrastructures/useClient/chakra';
+import { Box, Heading, Image, List, ListItem, Text, VStack } from '../../../infrastructures/useClient/chakra';
 
 const CoursesPage: NextPage = async () => {
   return (

diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import React from 'react';
+import { createContext, useContextSelector } from 'use-context-selector';
+
+type Value = {
+  currentUserId: string;
+  currentEmail?: string;
+  isAdmin: boolean;
+};
+
+const Context = createContext<Value>(undefined as unknown as Value);
+
+export function useAuthContextSelector<Selected>(selector: (value: Value) => Selected): Selected {
+  return useContextSelector(Context, selector);
+}
+
+export type Props = {
+  children: React.ReactNode;
+  currentUserId: string;
+  currentEmail?: string;
+};
+
+export const AuthContextProvider: React.FC<Props> = (props) => {
+  return (
+    <Context.Provider
+      value={{
+        currentUserId: props.currentUserId,
+        currentEmail: props.currentEmail,
+        isAdmin: !!props.currentEmail?.endsWith('@internet.ac.jp'),
+      }}
+    >
+      {props.children}
+    </Context.Provider>
+  );
+};
diff --git a/src/problems/instantiateProblem.ts b/src/problems/instantiateProblem.ts
@@ -2,7 +2,7 @@ import { Random } from '../app/utils/random';
 
 import type { LanguageId, ProblemId } from './problemData';
 import { problemIdToLanguageIdToProgram } from './problemData';
-import { type TraceItemVariable, type TraceItem, traceProgram } from './traceProgram';
+import { type TraceItem, type TraceItemVariable, traceProgram } from './traceProgram';
 
 export type InstantiatedProblem = {
   /**

diff --git a/src/utils/session.ts b/src/utils/session.ts
@@ -1,3 +1,6 @@
+import { memoizeFactory } from 'at-decorators';
+import SuperTokensNode from 'supertokens-node';
+
 import { logger } from '../infrastructures/pino';
 import { prisma } from '../infrastructures/prisma';
 
@@ -48,3 +51,19 @@ async function upsertUserToPrisma(id: string): Promise<void> {
   });
   logger.debug('User upserted: %o', user);
 }
+
+const memoizeForEmails = memoizeFactory({
+  maxCachedArgsSize: Number.POSITIVE_INFINITY,
+  cacheDuration: 60 * 60 * 1000,
+});
+
+async function _getEmailFromSuperTokens(userId: string): Promise<string | undefined> {
+  try {
+    const user = await SuperTokensNode.getUser(userId);
+    return user?.emails[0];
+  } catch {
+    return undefined;
+  }
+}
+
+export const getEmailFromSession = memoizeForEmails(_getEmailFromSuperTokens);
diff --git a/yarn.lock b/yarn.lock
@@ -4598,6 +4598,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"at-decorators@npm:2.1.0":
+  version: 2.1.0
+  resolution: "at-decorators@npm:2.1.0"
+  checksum: 10c0/2870952e8b99d91db6d3875f607ac35012b3937f585e52ce5640313e31d4e4417da68510594b457ffd26e51525e046c804101ad80f255681d594f1f8325e4433
+  languageName: node
+  linkType: hard
+
 "atomic-sleep@npm:^1.0.0":
   version: 1.0.0
   resolution: "atomic-sleep@npm:1.0.0"
@@ -13902,6 +13909,7 @@ __metadata:
     "@willbooster/shared-lib": "npm:5.2.4"
     "@willbooster/shared-lib-react": "npm:3.2.9"
     "@willbooster/wb": "npm:8.0.2"
+    at-decorators: "npm:2.1.0"
     build-ts: "npm:13.1.8"
     concurrently: "npm:9.0.1"
     conventional-changelog-conventionalcommits: "npm:8.0.0"