Skip to content

Commit

Permalink
fix: update Next.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@exKAZUu
exKAZUu committed Sep 17, 2024
1 parent 38390ee commit 0a95fa6
Show file tree
Hide file tree
Showing 6 changed files with 766 additions and 413 deletions.
12 changes: 7 additions & 5 deletions next.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
eslint: {
ignoreDuringBuilds: true,
},
typescript: {
ignoreBuildErrors: true,
},
experimental: {
serverComponentsExternalPackages: ['pino'],
optimizePackageImports: ['@chakra-ui/react', 'supertokens-auth-react'],
// 規模が小さいので常時Babelによるコンパイルを有効化する。
reactCompiler: true,
staleTimes: {
dynamic: 0,
static: 0,
},
},
reactStrictMode: true,
serverExternalPackages: ['pino'],
typescript: {
ignoreBuildErrors: true,
},
};

module.exports = nextConfig;
9 changes: 5 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,14 @@
"framer-motion": "11.5.4",
"jsonwebtoken": "9.0.2",
"jwks-rsa": "3.1.0",
"next": "14.2.11",
"next": "15.0.0-canary.157",
"nextjs-cors": "2.2.0",
"pino": "9.4.0",
"pino-pretty": "11.2.2",
"pm2": "5.4.2",
"prisma": "5.19.1",
"react": "18.3.1",
"react-dom": "18.3.1",
"react": "19.0.0-rc-f2df5694-20240916",
"react-dom": "19.0.0-rc-f2df5694-20240916",
"react-icons": "5.3.0",
"react-idle-timer": "5.7.2",
"react-syntax-highlighter": "15.5.0",
Expand Down Expand Up @@ -86,9 +86,10 @@
"@typescript-eslint/parser": "8.5.0",
"@willbooster/eslint-config-next": "1.2.0",
"@willbooster/prettier-config": "9.1.2",
"babel-plugin-react-compiler": "0.0.0-experimental-23b8160-20240916",
"concurrently": "9.0.1",
"eslint": "8.57.0",
"eslint-config-next": "14.2.11",
"eslint-config-next": "15.0.0-canary.157",
"eslint-config-prettier": "9.1.0",
"eslint-import-resolver-typescript": "3.6.3",
"eslint-plugin-import": "2.30.0",
Expand Down
228 changes: 116 additions & 112 deletions src/app/(withAuth)/courses/[courseId]/Course.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,40 +77,6 @@ export const Course: React.FC<{
setSelectedLanguageId(inputValue as VisibleLanguageId);
};

const countUserCompletedProblems = (programId: ProgramId, languageId: VisibleLanguageId): number => {
return userCompletedProblems.filter(
(userCompletedProblem) =>
userCompletedProblem.programId === programId && userCompletedProblem.languageId === languageId
).length;
};

const countCompletedProblems = (programIds: ProgramId[], languageId: VisibleLanguageId): number => {
let count = 0;

for (const programId of programIds) {
if (countUserCompletedProblems(programId, languageId) >= SPECIFIED_COMPLETION_COUNT) count++;
}
return count;
};

const getSuspendedSession = (programId: string): UserProblemSessionWithUserAnswers | undefined => {
return userProblemSessions.find(
(session) =>
session.courseId === courseId &&
session.programId === programId &&
session.languageId === selectedLanguageId &&
!session.finishedAt &&
!session.isCompleted
) as UserProblemSessionWithUserAnswers | undefined;
};

const getFirstSession = (programId: string): UserProblemSessionWithUserAnswers | undefined => {
return userProblemSessions.find(
(session) =>
session.courseId === courseId && session.programId === programId && session.languageId === selectedLanguageId
) as UserProblemSessionWithUserAnswers | undefined;
};

return (
<main>
<Heading as="h1" marginBottom="4">
Expand All @@ -130,88 +96,126 @@ export const Course: React.FC<{
))}
</Select>
<VStack align="stretch">
{courseIdToProgramIdLists[courseId].map((programIds, iLesson) => (
<Box key={iLesson}>
<Accordion allowToggle>
<AccordionItem>
<AccordionButton>
<Box flex="1">
<HStack spacing="50%">
<Box>第{iLesson + 1}回</Box>
<HStack>
<Box>
Completed {countCompletedProblems(programIds, selectedLanguageId)} / {programIds.length}
</Box>
{countCompletedProblems(programIds, selectedLanguageId) >= programIds.length && (
<Box h={4} ml={2} position={'relative'} w={4}>
<Image fill alt="完了の王冠" src="/crown.png" />
{courseIdToProgramIdLists[courseId].map((programIds, iLesson) => {
const completedProblemCount = programIds.filter(
(programId) =>
countUserCompletedProblems(userCompletedProblems, programId, selectedLanguageId) >=
SPECIFIED_COMPLETION_COUNT
).length;

return (
<Box key={iLesson}>
<Accordion allowToggle>
<AccordionItem>
<AccordionButton>
<Box flex="1">
<HStack spacing="50%">
<Box>第{iLesson + 1}回</Box>
<HStack>
<Box>
Completed {completedProblemCount} / {programIds.length}
</Box>
)}
{completedProblemCount >= programIds.length && (
<Box h={4} ml={2} position={'relative'} w={4}>
<Image fill alt="完了の王冠" src="/crown.png" />
</Box>
)}
</HStack>
</HStack>
</HStack>
</Box>
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4}>
<TableContainer>
<Table>
<Thead>
<Tr>
<Th textAlign="left">プログラム</Th>
<Th></Th>
<Th align="left">進捗</Th>
<Th align="left">
初回セッションの
<br />
不正解回数
</Th>
<Th align="left">
初回セッションの
<br />
所要時間（秒）
</Th>
</Tr>
</Thead>
<Tbody>
{programIds.map(async (programId) => (
<Tr key={programId}>
<Td>
<NextLink passHref href={`${courseId}/${selectedLanguageId}/${programId}`}>
{programIdToName[programId]}
</NextLink>
</Td>
<Td>{getSuspendedSession(programId) && <Tag>挑戦中</Tag>}</Td>
<Td>
<Flex>
<p>
{countUserCompletedProblems(programId, selectedLanguageId)} /{' '}
{SPECIFIED_COMPLETION_COUNT}
</p>
{countUserCompletedProblems(programId, selectedLanguageId) >=
SPECIFIED_COMPLETION_COUNT && (
<Box h={4} ml={2} position={'relative'} w={4}>
<Image fill alt="完了の王冠" src="/crown.png" />
</Box>
)}
</Flex>
</Td>
<Td>{countFailedAnswers(getFirstSession(programId))}</Td>
<Td>
{typeof getFirstSession(programId)?.timeSpent === 'number'
? Math.floor(totalAnswerTimeSpent(getFirstSession(programId)) / 1000)
: 0}
</Td>
</Box>
<AccordionIcon />
</AccordionButton>
<AccordionPanel pb={4}>
<TableContainer>
<Table>
<Thead>
<Tr>
<Th textAlign="left">プログラム</Th>
<Th></Th>
<Th align="left">進捗</Th>
<Th align="left">
初回セッションの
<br />
不正解回数
</Th>
<Th align="left">
初回セッションの
<br />
所要時間（秒）
</Th>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</AccordionPanel>
</AccordionItem>
</Accordion>
</Box>
))}
</Thead>
<Tbody>
{programIds.map((programId) => {
const suspendedSession = userProblemSessions.find(
(session) =>
session.courseId === courseId &&
session.programId === programId &&
session.languageId === selectedLanguageId &&
!session.finishedAt &&
!session.isCompleted
);
const firstSession = userProblemSessions.find(
(session) =>
session.courseId === courseId &&
session.programId === programId &&
session.languageId === selectedLanguageId
);
const completedProblemCount = countUserCompletedProblems(
userCompletedProblems,
programId,
selectedLanguageId
);
return (
<Tr key={programId}>
<Td>
<NextLink passHref href={`${courseId}/${selectedLanguageId}/${programId}`}>
{programIdToName[programId]}
</NextLink>
</Td>
<Td>{suspendedSession && <Tag>挑戦中</Tag>}</Td>
<Td>
<Flex>
<p>
{completedProblemCount} / {SPECIFIED_COMPLETION_COUNT}
</p>
{completedProblemCount >= SPECIFIED_COMPLETION_COUNT && (
<Box h={4} ml={2} position={'relative'} w={4}>
<Image fill alt="完了の王冠" src="/crown.png" />
</Box>
)}
</Flex>
</Td>
<Td>{countFailedAnswers(firstSession)}</Td>
<Td>
{typeof firstSession?.timeSpent === 'number'
? Math.floor(totalAnswerTimeSpent(firstSession) / 1000)
: 0}
</Td>
</Tr>
);
})}
</Tbody>
</Table>
</TableContainer>
</AccordionPanel>
</AccordionItem>
</Accordion>
</Box>
);
})}
</VStack>
</main>
);
};

function countUserCompletedProblems(
userCompletedProblems: { programId: string; languageId: VisibleLanguageId }[],
programId: ProgramId,
languageId: VisibleLanguageId
): number {
return userCompletedProblems.filter(
(userCompletedProblem) =>
userCompletedProblem.programId === programId && userCompletedProblem.languageId === languageId
).length;
}
1 change: 0 additions & 1 deletion src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/ExecutionResultProblem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ export const ExecutionResultProblem: React.FC<ExecutionResultProblemProps> = ({
const { isOpen: isHelpModalOpen, onClose: onHelpModalClose, onOpen: onHelpModalOpen } = useDisclosure();
const { isOpen: isAlertOpen, onClose: onAlertClose, onOpen: onAlertOpen } = useDisclosure();
const cancelRef = useRef(null);
console.log('isAlertOpen:', isAlertOpen);

const [alertTitle, setAlertTitle] = useState('');
const [alertMessage, setAlertMessage] = useState('');
Expand Down
38 changes: 15 additions & 23 deletions src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import type { UserProblemSession } from '@prisma/client';
import type { NextPage } from 'next';

import { generateProblem, type Problem } from '../../../../../../problems/generateProblem';
import { generateProblem } from '../../../../../../problems/generateProblem';
import type { CourseId, LanguageId, ProgramId, VisibleLanguageId } from '../../../../../../problems/problemData';
import { getSuspendedUserProblemSession } from '../../../../../../utils/fetch';
import { getNonNullableSessionOnServer } from '../../../../../../utils/session';
Expand All @@ -18,15 +17,7 @@ const ProblemPage: NextPage<{
const languageId = params.languageId;
const programId = params.programId;

const suspendedSession: UserProblemSession | undefined = await getSuspendedUserProblemSession(
userId,
courseId,
programId,
languageId
);

let userProblemSession = suspendedSession;

let userProblemSession = await getSuspendedUserProblemSession(userId, courseId, programId, languageId);
if (!userProblemSession) {
const problemVariableSeed = Date.now().toString();
const problemType = 'executionResult';
Expand All @@ -50,25 +41,26 @@ const ProblemPage: NextPage<{
);
}

const problem: Problem | undefined = userProblemSession
const problem = userProblemSession
? generateProblem(
userProblemSession.programId as ProgramId,
userProblemSession.languageId as LanguageId,
userProblemSession.problemVariablesSeed
)
: undefined;

return userProblemSession && problem ? (
<BaseProblem
courseId={params.courseId}
languageId={languageId}
problem={problem}
programId={params.programId}
userId={session.superTokensUserId}
userProblemSession={userProblemSession}
/>
) : (
<></>
return (
userProblemSession &&
problem && (
<BaseProblem
courseId={params.courseId}
languageId={languageId}
problem={problem}
programId={params.programId}
userId={session.superTokensUserId}
userProblemSession={userProblemSession}
/>
)
);
};

Expand Down
Loading

0 comments on commit 0a95fa6

Please sign in to comment.