Skip to content

Commit

Permalink
fix: refine problemData
Browse files Browse the repository at this point in the history
  • Loading branch information
@exKAZUu
exKAZUu committed Sep 17, 2024
1 parent c8e2769 commit 38390ee
Show file tree
Hide file tree
Showing 10 changed files with 1,023 additions and 916 deletions.
18 changes: 6 additions & 12 deletions src/app/(withAuth)/courses/[courseId]/Course.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import NextLink from 'next/link';
import React, { useEffect } from 'react';
import { useLocalStorage } from 'usehooks-ts';

import { backendTrpcReact } from '../../../../infrastructures/trpcBackend/client';
import {
Accordion,
AccordionButton,
Expand Down Expand Up @@ -61,15 +60,10 @@ export const Course: React.FC<{
userCompletedProblems: { programId: string; languageId: VisibleLanguageId }[];
userProblemSessions: UserProblemSessionWithUserAnswers[];
}> = ({ courseId, userCompletedProblems, userProblemSessions }) => {
// TODO: remove the following example code
const getSessionQuery = backendTrpcReact.getSession.useQuery();
console.log('getSessionQuery:', getSessionQuery.isLoading, getSessionQuery.data, getSessionQuery.error);

const [selectedLanguageId, setSelectedLanguageId] = useLocalStorage<VisibleLanguageId>(
selectedLanguageIdKey,
defaultLanguageId
);

useEffect(() => {
// 念の為、未知の言語が指定された場合、デフォルト言語に設定し直す。
if (!visibleLanguageIds.includes(selectedLanguageId)) {
Expand Down Expand Up @@ -99,7 +93,7 @@ export const Course: React.FC<{
return count;
};

const SuspendedSession = (programId: string): UserProblemSessionWithUserAnswers | undefined => {
const getSuspendedSession = (programId: string): UserProblemSessionWithUserAnswers | undefined => {
return userProblemSessions.find(
(session) =>
session.courseId === courseId &&
Expand All @@ -110,7 +104,7 @@ export const Course: React.FC<{
) as UserProblemSessionWithUserAnswers | undefined;
};

const firstSession = (programId: string): UserProblemSessionWithUserAnswers | undefined => {
const getFirstSession = (programId: string): UserProblemSessionWithUserAnswers | undefined => {
return userProblemSessions.find(
(session) =>
session.courseId === courseId && session.programId === programId && session.languageId === selectedLanguageId
Expand Down Expand Up @@ -186,7 +180,7 @@ export const Course: React.FC<{
{programIdToName[programId]}
</NextLink>
</Td>
<Td>{SuspendedSession(programId) && <Tag>挑戦中</Tag>}</Td>
<Td>{getSuspendedSession(programId) && <Tag>挑戦中</Tag>}</Td>
<Td>
<Flex>
<p>
Expand All @@ -201,10 +195,10 @@ export const Course: React.FC<{
)}
</Flex>
</Td>
<Td>{countFailedAnswers(firstSession(programId))}</Td>
<Td>{countFailedAnswers(getFirstSession(programId))}</Td>
<Td>
{typeof firstSession(programId)?.timeSpent === 'number'
? Math.floor(totalAnswerTimeSpent(firstSession(programId)) / 1000)
{typeof getFirstSession(programId)?.timeSpent === 'number'
? Math.floor(totalAnswerTimeSpent(getFirstSession(programId)) / 1000)
: 0}
</Td>
</Tr>
Expand Down
30 changes: 8 additions & 22 deletions src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/BaseProblem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,10 +156,11 @@ export const BaseProblem: React.FC<{

const explanation = getExplanation(programId, languageId);

const ProblemComponent: React.FC = () => {
switch (problemType) {
case 'executionResult': {
return (
return (
<main>
<VStack spacing="4">
<Heading as="h1">{programIdToName[programId]}</Heading>
{problemType === 'executionResult' ? (
<ExecutionResultProblem
createAnswerLog={createAnswerLog}
explanation={explanation}
Expand All @@ -169,10 +170,7 @@ export const BaseProblem: React.FC<{
setCurrentTraceItemIndex={setCurrentTraceItemIndex}
setProblemType={setProblemType}
/>
);
}
case 'checkpoint': {
return (
) : problemType === 'checkpoint' ? (
<CheckpointProblem
beforeTraceItemIndex={beforeTraceItemIndex}
createAnswerLog={createAnswerLog}
Expand All @@ -184,10 +182,7 @@ export const BaseProblem: React.FC<{
setCurrentTraceItemIndex={setCurrentTraceItemIndex}
setProblemType={setProblemType}
/>
);
}
case 'step': {
return (
) : (
<StepProblem
beforeTraceItemIndex={beforeTraceItemIndex}
createAnswerLog={createAnswerLog}
Expand All @@ -199,16 +194,7 @@ export const BaseProblem: React.FC<{
setBeforeTraceItemIndex={setBeforeTraceItemIndex}
setCurrentTraceItemIndex={setCurrentTraceItemIndex}
/>
);
}
}
};

return (
<main>
<VStack spacing="4">
<Heading as="h1">{programIdToName[programId]}</Heading>
<ProblemComponent />
)}
</VStack>
</main>
);
Expand Down
53 changes: 44 additions & 9 deletions src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/CheckpointProblem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
'use client';

import { useEffect, useRef } from 'react';
import { useEffect, useRef, useState } from 'react';

import { CustomModal } from '../../../../../../components/molecules/CustomModal';
import { SyntaxHighlighter } from '../../../../../../components/organisms/SyntaxHighlighter';
import type { TurtleGraphicsHandle } from '../../../../../../components/organisms/TurtleGraphics';
import { TurtleGraphics } from '../../../../../../components/organisms/TurtleGraphics';
import {
AlertDialog,
AlertDialogBody,
AlertDialogContent,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogOverlay,
Box,
Button,
Flex,
Expand Down Expand Up @@ -43,17 +47,24 @@ export const CheckpointProblem: React.FC<CheckpointProblemProps> = ({
setCurrentTraceItemIndex,
setProblemType,
}) => {
console.log('CheckpointProblem');

const turtleGraphicsRef = useRef<TurtleGraphicsHandle>(null);
const {
isOpen: isExplanationModalOpen,
onClose: onExplanationModalClose,
onOpen: onExplanationModalOpen,
} = useDisclosure();
const { isOpen: isHelpModalOpen, onClose: onHelpModalClose, onOpen: onHelpModalOpen } = useDisclosure();
const { isOpen: isAlertOpen, onClose: onAlertClose, onOpen: onAlertOpen } = useDisclosure();
const cancelRef = useRef(null);

const beforeCheckpointTraceItem = problem.traceItems[beforeTraceItemIndex];
const currentCheckpointTraceItem = problem.traceItems[currentTraceItemIndex];

const [alertTitle, setAlertTitle] = useState('');
const [alertMessage, setAlertMessage] = useState('');

const handleClickResetButton = (): void => {
turtleGraphicsRef.current?.init();
};
Expand All @@ -63,17 +74,19 @@ export const CheckpointProblem: React.FC<CheckpointProblemProps> = ({

createAnswerLog(isPassed);

// TODO: 一旦アラートで表示
if (isPassed) {
setBeforeTraceItemIndex(currentTraceItemIndex);

if (currentCheckpointTraceItem.sid === problem.checkpointSids.at(-1)) {
// 最終チェックポイントを正解した場合はその次の行からステップ問題に移行
alert('正解です。このチェックポイントから1行ずつ回答してください');
setAlertTitle('正解');
setAlertMessage('正解です。このチェックポイントから1行ずつ回答してください');
onAlertOpen();
setCurrentTraceItemIndex(currentTraceItemIndex + 1);
setProblemType('step');
} else {
alert('正解です。次のチェックポイントに進みます');
setAlertTitle('正解');
setAlertMessage('正解です。次のチェックポイントに進みます');
onAlertOpen();
const nextCheckpointTraceItemIndex = problem.traceItems.findIndex(
(traceItem) =>
traceItem.sid ===
Expand All @@ -82,8 +95,9 @@ export const CheckpointProblem: React.FC<CheckpointProblemProps> = ({
setCurrentTraceItemIndex(nextCheckpointTraceItemIndex);
}
} else {
// 不正解の場合は最後に正解したチェックポイントからステップ問題に移行
alert('不正解です。最後に正解したチェックポイントから1行ずつ回答してください');
setAlertTitle('不正解');
setAlertMessage('不正解です。最後に正解したチェックポイントから1行ずつ回答してください');
onAlertOpen();
setCurrentTraceItemIndex(beforeTraceItemIndex + 1);
setProblemType('step');
}
Expand Down Expand Up @@ -185,6 +199,27 @@ export const CheckpointProblem: React.FC<CheckpointProblemProps> = ({
</Box>
<Variables traceItemVars={beforeCheckpointTraceItem?.vars} />
</VStack>
<AlertDialog
closeOnEsc={false}
closeOnOverlayClick={false}
isOpen={isAlertOpen}
leastDestructiveRef={cancelRef}
onClose={onAlertClose}
>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize="lg" fontWeight="bold">
{alertTitle}
</AlertDialogHeader>
<AlertDialogBody>{alertMessage}</AlertDialogBody>
<AlertDialogFooter>
<Button ref={cancelRef} onClick={onAlertClose}>
閉じる
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
</Flex>
);
};
52 changes: 45 additions & 7 deletions src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/ExecutionResultProblem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
'use client';

import { useEffect, useRef } from 'react';
import { useEffect, useRef, useState } from 'react';

import { CustomModal } from '../../../../../../components/molecules/CustomModal';
import { SyntaxHighlighter } from '../../../../../../components/organisms/SyntaxHighlighter';
import type { TurtleGraphicsHandle } from '../../../../../../components/organisms/TurtleGraphics';
import { TurtleGraphics } from '../../../../../../components/organisms/TurtleGraphics';
import {
AlertDialog,
AlertDialogBody,
AlertDialogContent,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogOverlay,
Box,
Button,
Flex,
Expand Down Expand Up @@ -37,13 +41,21 @@ export const ExecutionResultProblem: React.FC<ExecutionResultProblemProps> = ({
setCurrentTraceItemIndex,
setProblemType,
}) => {
console.log('ExecutionResultProblem');

const turtleGraphicsRef = useRef<TurtleGraphicsHandle>(null);
const {
isOpen: isExplanationModalOpen,
onClose: onExplanationModalClose,
onOpen: onExplanationModalOpen,
} = useDisclosure();
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('');

const handleClickResetButton = (): void => {
turtleGraphicsRef.current?.init();
Expand All @@ -54,20 +66,25 @@ export const ExecutionResultProblem: React.FC<ExecutionResultProblemProps> = ({

createAnswerLog(isPassed);

// TODO: 一旦アラートで表示
if (isPassed) {
alert('正解です。この問題は終了です');
setAlertTitle('正解');
setAlertMessage('正解です。この問題は終了です');
onAlertOpen();
handleComplete();
} else {
if (problem.checkpointSids.length > 0) {
alert('不正解です。チェックポイントごとに回答してください');
setAlertTitle('不正解');
setAlertMessage('不正解です。チェックポイントごとに回答してください');
onAlertOpen();
const nextCheckpointTraceItemIndex = problem.traceItems.findIndex(
(traceItem) => traceItem.sid === problem.checkpointSids.at(0)
);
setCurrentTraceItemIndex(nextCheckpointTraceItemIndex);
setProblemType('checkpoint');
} else {
alert('不正解です。ステップごとに回答してください');
setAlertTitle('不正解');
setAlertMessage('不正解です。ステップごとに回答してください');
onAlertOpen();
setCurrentTraceItemIndex(1);
setProblemType('step');
}
Expand Down Expand Up @@ -149,6 +166,27 @@ export const ExecutionResultProblem: React.FC<ExecutionResultProblemProps> = ({
<SyntaxHighlighter code={problem.displayProgram} programmingLanguageId={selectedLanguageId} />
</Box>
</VStack>
<AlertDialog
closeOnEsc={false}
closeOnOverlayClick={false}
isOpen={isAlertOpen}
leastDestructiveRef={cancelRef}
onClose={onAlertClose}
>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize="lg" fontWeight="bold">
{alertTitle}
</AlertDialogHeader>
<AlertDialogBody>{alertMessage}</AlertDialogBody>
<AlertDialogFooter>
<Button ref={cancelRef} onClick={onAlertClose}>
閉じる
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
</Flex>
);
};
Loading

0 comments on commit 38390ee

Please sign in to comment.