Skip to content

Commit

Permalink
fix: fix test pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@PupoSDC
PupoSDC committed Aug 2, 2023
1 parent 0f4762f commit 7047a9a
Show file tree
Hide file tree
Showing 67 changed files with 2,333 additions and 2,833 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Built with
[`Storybook`](https://storybook.js.org/),
[`Prisma`](https://www.prisma.io/),
[`Trpc`](https://trpc.io/),
[`Redux`](https://redux.js.org/),
[`Zustand`](https://github.com/pmndrs/zustand),
and [`MDX`](https://mdxjs.com/).

Managed with
Expand Down
2 changes: 0 additions & 2 deletions apps/next-app/pages/_app.page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React, { StrictMode } from "react";
import { default as Head } from "next/head";
import { CssBaseline, CssVarsProvider } from "@mui/joy";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { getEnvVariableOrThrow } from "@chair-flight/base/env";
import { AnalyticsProvider } from "@chair-flight/react/analytics";
import { Toaster } from "@chair-flight/react/components";
import { AppTransition, theme } from "@chair-flight/react/containers";
Expand All @@ -13,7 +12,6 @@ import "@fontsource/public-sans";

if (typeof document === "undefined") {
React.useLayoutEffect = React.useEffect;
console.log(getEnvVariableOrThrow("ENV_FILE_NAME"));
}

const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => {
Expand Down
59 changes: 0 additions & 59 deletions apps/next-app/pages/tests/[testId]/components/exam-navigation.tsx
View file

This file was deleted.

166 changes: 22 additions & 144 deletions apps/next-app/pages/tests/[testId]/exam.page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,179 +1,57 @@
import { useEffect } from "react";
import { useRouter } from "next/router";
import { Box, Sheet } from "@mui/joy";
import { NoSsr } from "@mui/base";
import { Sheet } from "@mui/joy";
import { Header, AppLayout, Skeleton } from "@chair-flight/react/components";
import {
useAppDispatch,
useAppSelector,
actions,
ReduxProvider,
AppHead,
TestQuestionExam,
TestQuestionNavigation,
useTestHotkeys,
} from "@chair-flight/core/redux";
import {
Header,
AppLayout,
QuestionBoxExam,
QuestionMultipleChoice,
Skeleton,
} from "@chair-flight/react/components";
import { AppHead } from "@chair-flight/react/containers";
import { ExamNavigation } from "./components/exam-navigation";
useTestProgressTime,
} from "@chair-flight/react/containers";
import type { GetServerSideProps, NextPage } from "next";
import type { FunctionComponent } from "react";

type ExamPageProps = {
testId: string;
};

const ExamPageSkeleton: FunctionComponent = () => (
<>
<Header removeLogo removeGithubLink />
<AppLayout.Main>
<AppLayout.MainGrid sx={{ maxWidth: 3000, margin: "auto" }}>
<AppLayout.MainGridFixedColumn
xs={12}
md={8}
lg={9}
sx={{ justifyContent: "center" }}
>
<Skeleton height={"500px"} />
</AppLayout.MainGridFixedColumn>
<AppLayout.MainGridFixedColumn
xs={0}
md={4}
lg={3}
sx={{ justifyContent: "center" }}
>
<Skeleton height={"350px"} />
</AppLayout.MainGridFixedColumn>
</AppLayout.MainGrid>
</AppLayout.Main>
</>
);

const ExamPageClient: FunctionComponent<ExamPageProps> = ({ testId }) => {
const router = useRouter();
const dispatch = useAppDispatch();
const test = useAppSelector((state) => state.testProgress.tests[testId]);
const currentQuestion = test.questions[test.currentQuestionIndex];

export const ExamPage: NextPage<ExamPageProps> = ({ testId }) => {
useTestHotkeys({ testId });

useEffect(() => {
if (test.status === "finished") {
router.push(`/tests/${test.id}/review`);
}
if (test.status === "created") {
dispatch(actions.startTest({ testId: test.id }));
}
}, [router, test, dispatch]);

useEffect(() => {
let lastTime = Date.now();
const interval = setInterval(() => {
const currentTime = Date.now();
const timeSpentInMs = currentTime - lastTime;
lastTime = currentTime;
dispatch(
actions.tickTestTime({
testId: test.id,
timeSpentInMs,
}),
);
}, 1000);
return () => clearInterval(interval);
}, [dispatch, test.id]);

if (test.status === "finished") {
return <ExamPageSkeleton />;
}
useTestProgressTime({ testId });

return (
<>
<Header removeLogo removeGithubLink>
<Box
sx={{ display: { xs: "flex", md: "none" }, flexDirection: "column" }}
>
<ExamNavigation testId={testId} />
</Box>
</Header>
<AppHead />
<Header removeLogo removeGithubLink />
<AppLayout.Main>
<AppLayout.MainGrid sx={{ maxWidth: 3000, margin: "auto" }}>
<AppLayout.MainGridFixedColumn
xs={12}
md={8}
lg={9}
sx={{ justifyContent: "flex-start" }}
sx={{ justifyContent: "center" }}
>
<QuestionBoxExam
sx={{ width: "100%", maxHeight: "100%" }}
title={`Question ${test.currentQuestionIndex + 1} / ${
test.questions.length
}`}
timeSpentInMs={test.timeSpentInMs}
timeTotalInMs={test.durationInMs}
questionIndex={test.currentQuestionIndex}
totalQuestions={test.questions.length}
onNavigationClick={(p) => {
const question = test.questions[p];
if (!question) return;
dispatch(
actions.navigateToTestQuestion({
testId: test.id,
questionId: question.questionId,
}),
);
}}
question={
<QuestionMultipleChoice
data-cy="question"
question={currentQuestion.question}
status="in-progress"
selectedOptionId={currentQuestion.selectedOptionId}
onOptionClicked={(optionId) =>
dispatch(
actions.answerTestQuestion({
optionId,
testId: test.id,
questionId: currentQuestion.questionId,
}),
)
}
options={currentQuestion.options.map((opt) => ({
optionId: opt.id,
text: opt.text,
}))}
/>
}
/>
<NoSsr fallback={<Skeleton height={"500px"} />}>
<TestQuestionExam testId={testId} />
</NoSsr>
</AppLayout.MainGridFixedColumn>
<AppLayout.MainGridFixedColumn
xs={0}
md={4}
lg={3}
sx={{
justifyContent: "flex-start",
display: { xs: "none", md: "flex" },
}}
sx={{ justifyContent: "center" }}
>
<Sheet variant="outlined" sx={{ p: 2 }}>
<ExamNavigation testId={testId} />
</Sheet>
<NoSsr fallback={<Skeleton height={"350px"} />}>
<Sheet variant="outlined" sx={{ p: 2 }}>
<TestQuestionNavigation testId={testId} />
</Sheet>
</NoSsr>
</AppLayout.MainGridFixedColumn>
</AppLayout.MainGrid>
</AppLayout.Main>
</>
);
};

export const ExamPage: NextPage<ExamPageProps> = (props) => (
<>
<AppHead />
<ReduxProvider loading={<ExamPageSkeleton />}>
<ExamPageClient {...props} />
</ReduxProvider>
</>
);

export const getServerSideProps: GetServerSideProps<ExamPageProps> = async (
ctx,
) => {
Expand Down
Loading

1 comment on commit 7047a9a

@vercel
Copy link

@vercel vercel bot commented on 7047a9a Aug 2, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

chair-flight – ./

chair-flight.vercel.app
www.chair-flight.com
chair-flight-git-main-chair-flight-team.vercel.app
chair-flight-chair-flight-team.vercel.app
chair-flight.com

Please sign in to comment.