SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: decompose

Browse Source
This commit is contained in:
IlyaDoronin 2024-02-28 17:10:50 +03:00
parent 33e0492719
commit e3900506ee
3 changed files with 661 additions and 651 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
lib/components/ViewPublicationPage/StartPageViewPublication/StartPageMobile.tsx Normal file
View File

@ -0,0 +1,72 @@
import { Box } from "@mui/material";
type StartPageMobileProps = {
quizHeaderBlock: JSX.Element;
quizMainBlock: JSX.Element;
backgroundBlock: JSX.Element | null;
startpageType: "standard" | "expanded" | "centered";
};
export const StartPageMobile = ({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
startpageType,
}: StartPageMobileProps) => {
return (
<Box
sx={{
display: "flex",
flexDirection: "column-reverse",
flexGrow: 1,
justifyContent: "flex-end",
minHeight: "100vh",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}
>
<Box
sx={{
width: "100%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
p: "25px",
height: "100%",
overflowY: "auto",
overflowX: "hidden",
"&::-webkit-scrollbar": {
width: "4px",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "#b8babf",
},
}}
>
{quizHeaderBlock}
<Box
sx={{
height: "80%",
display: "flex",
flexGrow: 1,
flexDirection: "column",
justifyContent: "space-between",
width: "100%",
}}
>
{quizMainBlock}
</Box>
</Box>
<Box
sx={{
width: "100%",
overflow: "hidden",
}}
>
{backgroundBlock}
</Box>
</Box>
);
};

1078
lib/components/ViewPublicationPage/StartPageViewPublication.tsx → lib/components/ViewPublicationPage/StartPageViewPublication/index.tsx
View File

File diff suppressed because it is too large Load Diff

162
lib/components/ViewPublicationPage/ViewPublicationPage.tsx
View File

@ -11,88 +11,94 @@ import { Question } from "./Question";
import { ResultForm } from "./ResultForm";
import { StartPageViewPublication } from "./StartPageViewPublication";
export default function ViewPublicationPage() {
const { settings, recentlyCompleted } = useQuizData();
let currentQuizStep = useQuizViewStore(state => state.currentQuizStep);
const isMobileMini = useRootContainerSize() < 382;
const {
currentQuestion,
currentQuestionStepNumber,
isNextButtonEnabled,
isPreviousButtonEnabled,
moveToPrevQuestion,
moveToNextQuestion,
showResultAfterContactForm,
} = useQuestionFlowControl();
const { settings, recentlyCompleted } = useQuizData();
let currentQuizStep = useQuizViewStore((state) => state.currentQuizStep);
const isMobileMini = useRootContainerSize() < 382;
const {
currentQuestion,
currentQuestionStepNumber,
isNextButtonEnabled,
isPreviousButtonEnabled,
moveToPrevQuestion,
moveToNextQuestion,
showResultAfterContactForm,
} = useQuestionFlowControl();
useEffect(function setFaviconAndTitle() {
const link = document.querySelector('link[rel="icon"]');
if (link && settings.cfg.startpage.favIcon) {
link.setAttribute("href", settings.cfg.startpage.favIcon);
}
useEffect(
function setFaviconAndTitle() {
const link = document.querySelector('link[rel="icon"]');
if (link && settings.cfg.startpage.favIcon) {
link.setAttribute("href", settings.cfg.startpage.favIcon);
}
document.title = settings.name;
}, [settings]);
document.title = settings.name;
},
[settings]
);
if (recentlyCompleted) throw new Error("Quiz already completed");
if (currentQuizStep === "startpage" && settings.cfg.noStartPage) currentQuizStep = "question";
if (recentlyCompleted) throw new Error("Quiz already completed");
if (currentQuizStep === "startpage" && settings.cfg.noStartPage)
currentQuizStep = "question";
let quizStepElement: ReactElement;
switch (currentQuizStep) {
case "startpage": {
quizStepElement = <StartPageViewPublication />;
break;
}
case "question": {
if (currentQuestion.type === "result") {
quizStepElement = <ResultForm resultQuestion={currentQuestion} />;
break;
}
quizStepElement = (
<Question
currentQuestion={currentQuestion}
currentQuestionStepNumber={currentQuestionStepNumber}
prevButton={
<Button
disabled={!isPreviousButtonEnabled}
variant="contained"
sx={{ fontSize: "16px", padding: "10px 15px" }}
onClick={moveToPrevQuestion}
>
{isMobileMini ? "←" : "← Назад"}
</Button>
}
nextButton={
<Button
disabled={!isNextButtonEnabled}
variant="contained"
sx={{ fontSize: "16px", padding: "10px 15px" }}
onClick={moveToNextQuestion}
>
Далее →
</Button>
}
/>
);
break;
}
case "contactform": {
quizStepElement = (
<ContactForm
currentQuestion={currentQuestion}
onShowResult={showResultAfterContactForm}
/>
);
break;
}
default: notReachable(currentQuizStep);
let quizStepElement: ReactElement;
switch (currentQuizStep) {
case "startpage": {
quizStepElement = <StartPageViewPublication />;
break;
}
case "question": {
if (currentQuestion.type === "result") {
quizStepElement = <ResultForm resultQuestion={currentQuestion} />;
break;
}
return (
<ThemeProvider theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}>
{quizStepElement}
</ThemeProvider>
);
}
quizStepElement = (
<Question
currentQuestion={currentQuestion}
currentQuestionStepNumber={currentQuestionStepNumber}
prevButton={
<Button
disabled={!isPreviousButtonEnabled}
variant="contained"
sx={{ fontSize: "16px", padding: "10px 15px" }}
onClick={moveToPrevQuestion}
>
{isMobileMini ? "←" : "← Назад"}
</Button>
}
nextButton={
<Button
disabled={!isNextButtonEnabled}
variant="contained"
sx={{ fontSize: "16px", padding: "10px 15px" }}
onClick={moveToNextQuestion}
>
Далее →
</Button>
}
/>
);
break;
}
case "contactform": {
quizStepElement = (
<ContactForm
currentQuestion={currentQuestion}
onShowResult={showResultAfterContactForm}
/>
);
break;
}
default:
notReachable(currentQuizStep);
}
return (
<ThemeProvider
theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}
>
{quizStepElement}
</ThemeProvider>
);
}