refactor: clonedContent

This commit is contained in:
IlyaDoronin 2023-10-04 12:45:51 +03:00
parent 8f32af7d7e
commit 149c618597
13 changed files with 166 additions and 184 deletions

@ -175,7 +175,7 @@ export const AnswerItem = ({
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: { content: {
...listQuestions[quizId][totalIndex].content, ...question.content,
variants: cloneVariants, variants: cloneVariants,
}, },
}); });

@ -150,8 +150,11 @@ export default function QuestionsPageCard({
const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const { type: switchState, expanded: isExpanded } = const {
listQuestions[quizId][totalIndex]; title,
type: switchState,
expanded: isExpanded,
} = listQuestions[quizId][totalIndex];
const anchorRef = useRef(null); const anchorRef = useRef(null);
const debounced = useDebouncedCallback((title) => { const debounced = useDebouncedCallback((title) => {
updateQuestionsList(quizId, totalIndex, { title }); updateQuestionsList(quizId, totalIndex, { title });
@ -187,7 +190,7 @@ export default function QuestionsPageCard({
}} }}
> >
<TextField <TextField
defaultValue={listQuestions[quizId][totalIndex].title} defaultValue={title}
placeholder={"Заголовок вопроса"} placeholder={"Заголовок вопроса"}
onChange={({ target }) => debounced(target.value)} onChange={({ target }) => debounced(target.value)}
InputProps={{ InputProps={{

@ -43,10 +43,7 @@ export default function Emoji({ totalIndex }: Props) {
answerNew.push({ answer: "", hints: "", extendedText: "" }); answerNew.push({ answer: "", hints: "", extendedText: "" });
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: { content: { ...question.content, variants: answerNew },
...listQuestions[quizId][totalIndex].content,
variants: answerNew,
},
}); });
}} }}
> >

@ -61,14 +61,14 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
<input <input
onChange={({ target }) => { onChange={({ target }) => {
if (target.files?.length) { if (target.files?.length) {
const clonContent = { ...question.content }; const clonedContent = { ...question.content };
clonContent.variants[index].answer = URL.createObjectURL( clonedContent.variants[index].answer = URL.createObjectURL(
target.files[0] target.files[0]
); );
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: clonedContent,
}); });
} }
}} }}
@ -196,9 +196,15 @@ export default function OptionsAndPicture({ totalIndex }: Props) {
variant="body2" variant="body2"
sx={{ color: theme.palette.brightPurple.main }} sx={{ color: theme.palette.brightPurple.main }}
onClick={() => { onClick={() => {
const clonContent = { ...question.content }; const clonedContent = { ...question.content };
clonContent.variants.push({ answer: "", hints: "", extendedText: "" }); clonedContent.variants.push({
updateQuestionsList(quizId, totalIndex, { content: clonContent }); answer: "",
hints: "",
extendedText: "",
});
updateQuestionsList(quizId, totalIndex, {
content: clonedContent,
});
}} }}
> >
Добавьте ответ Добавьте ответ

@ -48,12 +48,12 @@ export default function OptionsPicture({ totalIndex }: Props) {
const addImage = ({ target }: ChangeEvent<HTMLInputElement>) => { const addImage = ({ target }: ChangeEvent<HTMLInputElement>) => {
// if (target.files?.length) { // if (target.files?.length) {
// const clonContent = question.content; // const clonedContent = { ...question.content };
// clonContent.images.push(URL.createObjectURL(target.files[0])); // clonedContent.images.push(URL.createObjectURL(target.files[0]));
// updateQuestionsList(quizId, totalIndex, { // updateQuestionsList(quizId, totalIndex, {
// content: { ...question.content, images }, // content: clonedContent,
// }); // });
// } // }
}; };

@ -83,7 +83,7 @@ export default function SettingTextField({
} }
})} })}
onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => { onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
const clonContent = { const clonedContent = {
...question.content, ...question.content,
single: false, single: false,
multi: false, multi: false,
@ -91,7 +91,7 @@ export default function SettingTextField({
[ANSWER_TYPES[Number(target.value)].value]: true, [ANSWER_TYPES[Number(target.value)].value]: true,
}; };
updateQuestionsList(quizId, totalIndex, { content: clonContent }); updateQuestionsList(quizId, totalIndex, { content: clonedContent });
}} }}
> >
{ANSWER_TYPES.map(({ name }, index) => ( {ANSWER_TYPES.map(({ name }, index) => (

@ -132,7 +132,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
<CustomCheckbox <CustomCheckbox
sx={{ display: "block", mr: isMobile ? "0px" : "16px" }} sx={{ display: "block", mr: isMobile ? "0px" : "16px" }}
label={"Необязательный вопрос"} label={"Необязательный вопрос"}
checked={!listQuestions[quizId][totalIndex].required} checked={!question.required}
handleChange={(e) => { handleChange={(e) => {
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
required: !e.target.checked, required: !e.target.checked,

@ -57,7 +57,7 @@ export default function SettingSlider({ totalIndex }: SettingSliderProps) {
<CustomCheckbox <CustomCheckbox
sx={{ mr: isMobile ? "0px" : "16px" }} sx={{ mr: isMobile ? "0px" : "16px" }}
label={"Необязательный вопрос"} label={"Необязательный вопрос"}
checked={!listQuestions[quizId][totalIndex].required} checked={!question.required}
handleChange={(e) => { handleChange={(e) => {
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
required: !e.target.checked, required: !e.target.checked,

@ -93,7 +93,6 @@ export const BUTTON_TYPE_QUESTIONS: ButtonTypeQuestion[] = [
export default function TypeQuestions({ totalIndex }: Props) { export default function TypeQuestions({ totalIndex }: Props) {
const quizId = Number(useParams().quizId); const quizId = Number(useParams().quizId);
const { listQuestions } = questionStore(); const { listQuestions } = questionStore();
const switchState = listQuestions[quizId][totalIndex].type;
return ( return (
<Box <Box

@ -30,10 +30,7 @@ export default function AnswerOptions({ totalIndex }: Props) {
answerNew.push({ answer: "", hints: "", extendedText: "" }); answerNew.push({ answer: "", hints: "", extendedText: "" });
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: { content: { ...question.content, variants: answerNew },
...listQuestions[quizId][totalIndex].content,
variants: answerNew,
},
}); });
}; };

@ -141,15 +141,17 @@ export default function BranchingQuestions({
> >
<Select <Select
items={ACTIONS} items={ACTIONS}
activeItemIndex={ activeItemIndex={question.content.rule.show ? 0 : 1}
listQuestions[quizId][totalIndex].content.rule.show ? 0 : 1
}
sx={{ maxWidth: "140px" }} sx={{ maxWidth: "140px" }}
onChange={(action) => { onChange={(action) => {
const clonContent = listQuestions[quizId][totalIndex].content;
clonContent.rule.show = action === ACTIONS[0];
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: {
...question.content,
rule: {
...question.content.rule,
show: action === ACTIONS[0],
},
},
}); });
}} }}
/> />
@ -157,8 +159,7 @@ export default function BranchingQuestions({
если в ответе на вопрос если в ответе на вопрос
</Typography> </Typography>
</Box> </Box>
{listQuestions[quizId][totalIndex].content.rule.reqs.map( {question.content.rule.reqs.map((request, index) => (
(request, index) => (
<Box <Box
key={index} key={index}
sx={{ sx={{
@ -182,12 +183,10 @@ export default function BranchingQuestions({
<IconButton <IconButton
sx={{ borderRadius: "6px", padding: "2px" }} sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => { onClick={() => {
const clonContent = const clonedContent = { ...question.content };
listQuestions[quizId][totalIndex].content; clonedContent.rule.reqs.splice(index, 1);
clonContent.rule.reqs.splice(index, 1);
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: clonedContent,
}); });
}} }}
> >
@ -199,10 +198,9 @@ export default function BranchingQuestions({
activeItemIndex={request.id ? Number(request.id) : -1} activeItemIndex={request.id ? Number(request.id) : -1}
items={STIPULATIONS} items={STIPULATIONS}
onChange={(stipulation) => { onChange={(stipulation) => {
const clonContent = const clonedContent = { ...question.content };
listQuestions[quizId][totalIndex].content;
clonContent.rule.reqs[index] = { clonedContent.rule.reqs[index] = {
id: String( id: String(
STIPULATIONS.findIndex((item) => STIPULATIONS.findIndex((item) =>
item.includes(stipulation) item.includes(stipulation)
@ -212,7 +210,7 @@ export default function BranchingQuestions({
}; };
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: clonedContent,
}); });
}} }}
sx={{ marginBottom: "15px" }} sx={{ marginBottom: "15px" }}
@ -226,9 +224,7 @@ export default function BranchingQuestions({
pb: "10px", pb: "10px",
}} }}
> >
<Typography <Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
sx={{ color: "#4D4D4D", fontWeight: "500" }}
>
Дан ответ Дан ответ
</Typography> </Typography>
<Typography sx={{ color: "#7E2AEA", pl: "10px" }}> <Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
@ -240,24 +236,23 @@ export default function BranchingQuestions({
activeItemIndex={-1} activeItemIndex={-1}
items={ANSWERS} items={ANSWERS}
onChange={(answer) => { onChange={(answer) => {
const clonContent = const clonedContent = { ...question.content };
listQuestions[quizId][totalIndex].content;
const answerItemIndex = ANSWERS.findIndex( const answerItemIndex = ANSWERS.findIndex(
(answerItem) => answerItem === answer (answerItem) => answerItem === answer
); );
if ( if (
!clonContent.rule.reqs[index].vars.includes( !clonedContent.rule.reqs[index].vars.includes(
answerItemIndex answerItemIndex
) )
) { ) {
listQuestions[quizId][totalIndex].content.rule.reqs[ question.content.rule.reqs[index].vars.push(
index answerItemIndex
].vars.push(answerItemIndex); );
} }
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: clonedContent,
}); });
}} }}
sx={{ sx={{
@ -273,37 +268,35 @@ export default function BranchingQuestions({
gap: "10px", gap: "10px",
}} }}
> >
{listQuestions[quizId][totalIndex].content.rule.reqs[ {question.content.rule.reqs[index].vars.map(
index (item, varIndex) => (
].vars.map((item, varIndex) => (
<Chip <Chip
key={varIndex} key={varIndex}
label={ANSWERS[item]} label={ANSWERS[item]}
variant="outlined" variant="outlined"
onDelete={() => { onDelete={() => {
const clonContent = const clonedContent = { ...question.content };
listQuestions[quizId][totalIndex].content; const removedItemIndex = clonedContent.rule.reqs[
const removedItemIndex = clonContent.rule.reqs[
index index
].vars.findIndex((varItem) => varItem === item); ].vars.findIndex((varItem) => varItem === item);
clonContent.rule.reqs[index].vars.splice( clonedContent.rule.reqs[index].vars.splice(
removedItemIndex, removedItemIndex,
1 1
); );
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: clonedContent,
}); });
}} }}
/> />
))} )
)}
</Box> </Box>
</> </>
)} )}
</Box> </Box>
) ))}
)}
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
@ -318,10 +311,10 @@ export default function BranchingQuestions({
marginBottom: "10px", marginBottom: "10px",
}} }}
onClick={() => { onClick={() => {
const clonContent = listQuestions[quizId][totalIndex].content; const clonedContent = { ...question.content };
clonContent.rule.reqs.push({ id: "", vars: [] }); clonedContent.rule.reqs.push({ id: "", vars: [] });
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: clonedContent,
}); });
}} }}
> >
@ -330,15 +323,16 @@ export default function BranchingQuestions({
<FormControl> <FormControl>
<RadioGroup <RadioGroup
aria-labelledby="demo-controlled-radio-buttons-group" aria-labelledby="demo-controlled-radio-buttons-group"
value={ value={question.content.rule.or ? 1 : 0}
listQuestions[quizId][totalIndex].content.rule.or ? 1 : 0
}
onChange={(_, value) => { onChange={(_, value) => {
const clonContent =
listQuestions[quizId][totalIndex].content;
clonContent.rule.or = Boolean(Number(value));
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: clonContent, content: {
...question.content,
rule: {
...question.content.rule,
or: Boolean(Number(value)),
},
},
}); });
}} }}
> >

@ -33,8 +33,8 @@ export default function HelpQuestions({ totalIndex }: HelpQuestionsProps) {
}, 1000); }, 1000);
const videoHC = (url: string) => { const videoHC = (url: string) => {
const clonContent = question.content; const clonedContent = { ...question.content };
clonContent.hint.video = url; clonedContent.hint.video = url;
updateQuestionsList(quizId, totalIndex, { updateQuestionsList(quizId, totalIndex, {
content: { content: {
...question.content, ...question.content,

@ -10,6 +10,8 @@ import type {
AnyQuizQuestion, AnyQuizQuestion,
QuizQuestionType, QuizQuestionType,
QuestionVariant, QuestionVariant,
QuestionBranchingRule,
QuestionHint,
} from "../model/questionTypes/shared"; } from "../model/questionTypes/shared";
import { QUIZ_QUESTION_BASE } from "../constants/base"; import { QUIZ_QUESTION_BASE } from "../constants/base";
@ -25,22 +27,6 @@ import { QUIZ_QUESTION_TEXT } from "../constants/text";
import { QUIZ_QUESTION_VARIANT } from "../constants/variant"; import { QUIZ_QUESTION_VARIANT } from "../constants/variant";
import { QUIZ_QUESTION_VARIMG } from "../constants/varimg"; import { QUIZ_QUESTION_VARIMG } from "../constants/varimg";
type Hint = {
text: string;
video: string;
};
type Rule = {
or: boolean;
show: boolean;
reqs: [
{
id: string;
vars: number[];
}
];
};
export interface Question { export interface Question {
id: number; id: number;
title: string; title: string;
@ -51,8 +37,8 @@ export interface Question {
page: number; page: number;
content: { content: {
variants: QuestionVariant[]; variants: QuestionVariant[];
hint: Hint; hint: QuestionHint;
rule: Rule; rule: QuestionBranchingRule;
images: string[]; images: string[];
largeCheck: boolean; largeCheck: boolean;
large: string; large: string;