fix: SidebarMobile

2023-12-29 13:17:43 +03:00 · 2023-12-29 13:17:43 +03:00 · 1d912c70e8
commit 1d912c70e8
parent c9c344c737
4 changed files with 192 additions and 146 deletions
--- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
+++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
@ -12,8 +12,12 @@ import {
  useMediaQuery,
  useTheme,
 } from "@mui/material";
-import { addQuestionVariant, deleteQuestionVariant, setQuestionVariantField } from "@root/questions/actions";
-import type { KeyboardEvent, ReactNode } from "react";
+import {
+  addQuestionVariant,
+  deleteQuestionVariant,
+  setQuestionVariantField,
+} from "@root/questions/actions";
+import type { ChangeEvent, KeyboardEvent, ReactNode } from "react";
 import { useState } from "react";
 import { Draggable } from "react-beautiful-dnd";
 import type { QuestionVariant } from "../../../model/questionTypes/shared";
@ -78,28 +82,37 @@ export const AnswerItem = ({
              focused={false}
              placeholder={"Добавьте ответ"}
              multiline={largeCheck}
-              onChange={({ target }) => {
+              onChange={({ target }: ChangeEvent<HTMLInputElement>) => {
                setQuestionVariantAnswer(target.value || " ");
              }}
              onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
-                // if (disableKeyDown) {
-                //   enqueueSnackbar("100 максимальное количество вопросов");
-                // } else if (event.code === "Enter" && !largeCheck) {
+                if (disableKeyDown) {
+                  enqueueSnackbar("100 максимальное количество вопросов");
+                } else if (event.code === "Enter" && !largeCheck) {
                  addQuestionVariant(questionId);
-                // }
+                }
              }}
              InputProps={{
                startAdornment: (
                  <>
-                    <InputAdornment {...provided.dragHandleProps} position="start">
-                      <PointsIcon style={{ color: "#9A9AAF", fontSize: "30px" }} />
+                    <InputAdornment
+                      {...provided.dragHandleProps}
+                      position="start"
+                    >
+                      <PointsIcon
+                        style={{ color: "#9A9AAF", fontSize: "30px" }}
+                      />
                    </InputAdornment>
                    {additionalContent}
                  </>
                ),
                endAdornment: (
                  <InputAdornment position="end">
-                    <IconButton sx={{ padding: "0" }} aria-describedby="my-popover-id" onClick={handleClick}>
+                    <IconButton
+                      sx={{ padding: "0" }}
+                      aria-describedby="my-popover-id"
+                      onClick={handleClick}
+                    >
                      <MessageIcon
                        style={{
                          color: "#9A9AAF",
@ -119,11 +132,20 @@ export const AnswerItem = ({
                        style={{ margin: "10px" }}
                        placeholder="Подсказка для этого ответа"
                        value={variant.hints}
-                        onChange={(e) => setQuestionVariantAnswer(e.target.value || " ")}
-                        onKeyDown={(event: KeyboardEvent<HTMLTextAreaElement>) => event.stopPropagation()}
+                        onChange={(e) =>
+                          setQuestionVariantAnswer(e.target.value || " ")
+                        }
+                        onKeyDown={(
+                          event: KeyboardEvent<HTMLTextAreaElement>
+                        ) => event.stopPropagation()}
                      />
                    </Popover>
-                    <IconButton sx={{ padding: "0" }} onClick={() => deleteQuestionVariant(questionId, variant.id)}>
+                    <IconButton
+                      sx={{ padding: "0" }}
+                      onClick={() =>
+                        deleteQuestionVariant(questionId, variant.id)
+                      }
+                    >
                      <DeleteIcon
                        style={{
                          color: theme.palette.grey2.main,
--- a/src/pages/startPage/EditPage.tsx
+++ b/src/pages/startPage/EditPage.tsx
@ -18,7 +18,13 @@ import {
  useMediaQuery,
  useTheme,
 } from "@mui/material";
-import { decrementCurrentStep, resetEditConfig, setQuizes, updateQuiz, setCurrentStep } from "@root/quizes/actions";
+import {
+  decrementCurrentStep,
+  resetEditConfig,
+  setQuizes,
+  updateQuiz,
+  setCurrentStep,
+} from "@root/quizes/actions";
 import { useCurrentQuiz } from "@root/quizes/hooks";
 import { useQuizStore } from "@root/quizes/store";
 import CustomAvatar from "@ui_kit/Header/Avatar";
@ -34,7 +40,11 @@ import { Link, useNavigate } from "react-router-dom";
 import useSWR from "swr";
 import { useDebouncedCallback } from "use-debounce";
 import { SidebarMobile } from "./Sidebar/SidebarMobile";
-import { cleanQuestions, createResult, setQuestions } from "@root/questions/actions";
+import {
+  cleanQuestions,
+  createResult,
+  setQuestions,
+} from "@root/questions/actions";
 import {
  updateOpenBranchingPanel,
  updateCanCreatePublic,
@ -82,7 +92,9 @@ export default function EditPage() {

        if (
          !questions?.find(
-            (q) => (q.type === "result" && q.content.includes(':"line"')) || q.content.includes(":'line'")
+            (q) =>
+              (q.type === "result" && q.content.includes(':"line"')) ||
+              q.content.includes(":'line'")
          )
        ) {
          createResult(quiz?.backendId, "line");
@ -93,7 +105,12 @@ export default function EditPage() {
    getData();
  }, []);

-  const { openBranchingPanel, whyCantCreatePublic, canCreatePublic, showConfirmLeaveModal } = useUiTools();
+  const {
+    openBranchingPanel,
+    whyCantCreatePublic,
+    canCreatePublic,
+    showConfirmLeaveModal,
+  } = useUiTools();
  const theme = useTheme();
  const navigate = useNavigate();
  const currentStep = useQuizStore((state) => state.currentStep);
@ -107,7 +124,6 @@ export default function EditPage() {
  const [openBranchingPage, setOpenBranchingPage] = useState<boolean>(false);
  const [buttonText, setButtonText] = useState("Опубликовать");

-  
  const openBranchingPageHC = () => {
    if (!openBranchingPage) {
      deleteTimeoutedQuestions(questions, quiz);
@ -124,23 +140,26 @@ export default function EditPage() {
      resetEditConfig();
      cleanQuestions();
      updateModalInfoWhyCantCreate(false);
-      updateSomeWorkBackend(false)
+      updateSomeWorkBackend(false);
    },
    []
  );

-  const updateQuestionHint = useDebouncedCallback((questions: AnyTypedQuizQuestion[]) => {
-    const problems = checkQuestionHint(questions, quiz);
-    useUiTools.setState({ whyCantCreatePublic: problems });
-    if (Object.keys(problems).length > 0) {
-      updateQuiz(quiz?.id, (state) => {
-        state.status = "stop";
-      });
-      updateCanCreatePublic(false);
-    } else {
-      updateCanCreatePublic(true);
-    }
-  }, 600);
+  const updateQuestionHint = useDebouncedCallback(
+    (questions: AnyTypedQuizQuestion[]) => {
+      const problems = checkQuestionHint(questions, quiz);
+      useUiTools.setState({ whyCantCreatePublic: problems });
+      if (Object.keys(problems).length > 0) {
+        updateQuiz(quiz?.id, (state) => {
+          state.status = "stop";
+        });
+        updateCanCreatePublic(false);
+      } else {
+        updateCanCreatePublic(true);
+      }
+    },
+    600
+  );

  useEffect(() => {
    updateQuestionHint(questions);
@ -165,9 +184,11 @@ export default function EditPage() {

  if (!quizConfig) return <></>;

-  const isConditionMet = [1].includes(currentStep) && !openBranchingPanel && quizConfig.type !== "form";
+  const isConditionMet =
+    [1].includes(currentStep) &&
+    !openBranchingPanel &&
+    quizConfig.type !== "form";

-  
  const handleClickStatusQuiz = () => {
    if (Object.keys(whyCantCreatePublic).length === 0) {
      if (buttonText === "Опубликовать") {
@ -187,6 +208,17 @@ export default function EditPage() {
    }
  };

+  const changePage = (index: number) => {
+    if (currentStep === 2) {
+      setNextStep(index);
+      setShowConfirmLeaveModal(true);
+
+      return;
+    }
+
+    setCurrentStep(index);
+  };
+
  return (
    <>
      {/*хедер*/}
@ -221,12 +253,12 @@ export default function EditPage() {
          </Link>
          <FormControl fullWidth variant="standard">
            <TextField
-            value={quiz.name}
-            onChange={(e) =>
-              updateQuiz(quiz.id, (quiz) => {
-                quiz.name = e.target.value;
-              })
-            }
+              value={quiz.name}
+              onChange={(e) =>
+                updateQuiz(quiz.id, (quiz) => {
+                  quiz.name = e.target.value;
+                })
+              }
              fullWidth
              id="project-name"
              placeholder="Название проекта окно"
@ -321,7 +353,11 @@ export default function EditPage() {
          display: isMobile ? "block" : "flex",
        }}
      >
-        {isMobile ? <SidebarMobile open={mobileSidebar} /> : <Sidebar setNextStep={setNextStep} />}
+        {isMobile ? (
+          <SidebarMobile open={mobileSidebar} changePage={changePage} />
+        ) : (
+          <Sidebar changePage={changePage} />
+        )}
        <Box
          sx={{
            background: theme.palette.background.default,
@ -333,7 +369,9 @@ export default function EditPage() {
            sx={{
              padding: isMobile ? "16px 16px 20px 16px" : "25px 25px 20px 25px",
              overflow: "auto",
-              height: isMobile ? ` calc(100vh - 125px) ` : `calc(100vh - ${isConditionMet ? "186px" : "166px"})`,
+              height: isMobile
+                ? ` calc(100vh - 125px) `
+                : `calc(100vh - ${isConditionMet ? "186px" : "166px"})`,
              boxSizing: "border-box",
            }}
          >
@ -357,7 +395,11 @@ export default function EditPage() {
              width: "100%",
              padding: isMobile ? "20px 16px" : "20px 20px",
              display: "flex",
-              justifyContent: isMobile ? (isMobileSm ? "center" : "flex-end") : "flex-start",
+              justifyContent: isMobile
+                ? isMobileSm
+                  ? "center"
+                  : "flex-end"
+                : "flex-start",
              flexDirection: isMobile ? "row-reverse" : "-moz-initial",
              alignItems: "center",
              gap: "15px",
@ -398,7 +440,10 @@ export default function EditPage() {
                        "&.Mui-disabled + .MuiSwitch-track": { opacity: 0.5 },
                      },
                      "&.Mui-disabled .MuiSwitch-thumb": {
-                        color: theme.palette.mode === "light" ? theme.palette.grey[100] : theme.palette.grey[600],
+                        color:
+                          theme.palette.mode === "light"
+                            ? theme.palette.grey[100]
+                            : theme.palette.grey[600],
                      },
                      "&.Mui-disabled + .MuiSwitch-track": {
                        opacity: theme.palette.mode === "light" ? 0.7 : 0.3,
@ -411,16 +456,22 @@ export default function EditPage() {
                    },
                    "& .MuiSwitch-track": {
                      borderRadius: 13,
-                      backgroundColor: theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
+                      backgroundColor:
+                        theme.palette.mode === "light" ? "#E9E9EA" : "#39393D",
                      opacity: 1,
-                      transition: theme.transitions.create(["background-color"], {
-                        duration: 500,
-                      }),
+                      transition: theme.transitions.create(
+                        ["background-color"],
+                        {
+                          duration: 500,
+                        }
+                      ),
                    },
                  }}
                />
                <Box>
-                  <Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>Логика ветвления</Typography>
+                  <Typography sx={{ fontWeight: "bold", color: "#4D4D4D" }}>
+                    Логика ветвления
+                  </Typography>
                </Box>
              </Box>
            )}
@ -437,13 +488,20 @@ export default function EditPage() {
                    minWidth: "130px",
                  }}
                  onClick={() =>
-                    Object.keys(whyCantCreatePublic).length === 0 ? () => {} : updateModalInfoWhyCantCreate(true)
+                    Object.keys(whyCantCreatePublic).length === 0
+                      ? () => {}
+                      : updateModalInfoWhyCantCreate(true)
                  }
                >
                  Тестовый просмотр
                </Button>
              ) : (
-                <a href={`/view`} target="_blank" rel="noreferrer" style={{ textDecoration: "none" }}>
+                <a
+                  href={`/view`}
+                  target="_blank"
+                  rel="noreferrer"
+                  style={{ textDecoration: "none" }}
+                >
                  <Button
                    variant="contained"
                    sx={{
@ -465,7 +523,8 @@ export default function EditPage() {
                fontSize: "14px",
                lineHeight: "18px",
                height: "34px",
-                background: buttonText === "Опубликовано" ? "#FA5B0E" : "#7E2AEA",
+                background:
+                  buttonText === "Опубликовано" ? "#FA5B0E" : "#7E2AEA",
              }}
              onClick={handleClickStatusQuiz}
            >
--- a/src/pages/startPage/Sidebar/SidebarMobile.tsx
+++ b/src/pages/startPage/Sidebar/SidebarMobile.tsx
@ -11,9 +11,22 @@ import { ArrowDown } from "./icons/ArrowDown";

 interface Iprops {
  open: boolean;
+  changePage: (step: number) => void;
 }

-export const SidebarMobile: FC<Iprops> = ({ open }) => (
+const quizSetupSteps = [
+  { sidebarIcon: <Pencil style={{ color: "#974BFA", fontSize: "24px" }} /> },
+  { sidebarIcon: <People style={{ color: "#974BFA", fontSize: "24px" }} /> },
+  {
+    sidebarIcon: <ChartLineUp style={{ color: "#974BFA", fontSize: "24px" }} />,
+  },
+  {
+    sidebarIcon: <ReturnTime style={{ color: "#974BFA", fontSize: "24px" }} />,
+  },
+  { sidebarIcon: <Question style={{ color: "#974BFA", fontSize: "24px" }} /> },
+] as const;
+
+export const SidebarMobile: FC<Iprops> = ({ open, changePage }) => (
  <Box
    sx={{
      display: open ? "block" : "none",
@ -31,89 +44,52 @@ export const SidebarMobile: FC<Iprops> = ({ open }) => (

      <Box sx={{ ml: "15px", display: "flex", alignItems: "end" }}>
        <Box>
-          <Typography sx={{ fontSize: "12px", color: "#9A9AAF" }}>Название</Typography>
-          <Typography sx={{ color: "#FFF", fontSize: "18px", fontWeight: "500" }}>Название проекта</Typography>
+          <Typography sx={{ fontSize: "12px", color: "#9A9AAF" }}>
+            Название
+          </Typography>
+          <Typography
+            sx={{ color: "#FFF", fontSize: "18px", fontWeight: "500" }}
+          >
+            Название проекта
+          </Typography>
        </Box>
-        <Pencil style={{ position: "absolute", right: "0", color: "white", fontSize: "24px" }} />
+        <Pencil
+          style={{
+            position: "absolute",
+            right: "0",
+            color: "white",
+            fontSize: "24px",
+          }}
+        />
      </Box>
    </Box>
    <Box
-      sx={{ width: "100%", justifyContent: "center", display: "flex", marginTop: "20px", flexWrap: "wrap", gap: "5px" }}
+      sx={{
+        width: "100%",
+        justifyContent: "center",
+        display: "flex",
+        marginTop: "20px",
+        flexWrap: "wrap",
+        gap: "5px",
+      }}
    >
-      <Box
-        sx={{
-          cursor: "pointer",
-          width: "44px",
-          height: "44px",
-          background: "#262835",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          borderRadius: "8px",
-        }}
-      >
-        <Pencil style={{ color: "#974BFA", fontSize: "24px" }} />
-      </Box>
-
-      <Box
-        sx={{
-          cursor: "pointer",
-          width: "44px",
-          height: "44px",
-          background: "#262835",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          borderRadius: "8px",
-        }}
-      >
-        <People style={{ color: "#974BFA", fontSize: "24px" }} />
-      </Box>
-
-      <Box
-        sx={{
-          cursor: "pointer",
-          width: "44px",
-          height: "44px",
-          background: "#262835",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          borderRadius: "8px",
-        }}
-      >
-        <ChartLineUp style={{ color: "#974BFA", fontSize: "24px" }} />
-      </Box>
-
-      <Box
-        sx={{
-          cursor: "pointer",
-          width: "44px",
-          height: "44px",
-          background: "#262835",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          borderRadius: "8px",
-        }}
-      >
-        <ReturnTime style={{ color: "#974BFA", fontSize: "24px" }} />
-      </Box>
-
-      <Box
-        sx={{
-          cursor: "pointer",
-          width: "44px",
-          height: "44px",
-          background: "#262835",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          borderRadius: "8px",
-        }}
-      >
-        <Question style={{ color: "#974BFA", fontSize: "24px" }} />
-      </Box>
+      {quizSetupSteps.map(({ sidebarIcon }, index) => (
+        <Box
+          onClick={() => changePage(index)}
+          sx={{
+            cursor: "pointer",
+            width: "44px",
+            height: "44px",
+            background: "#262835",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            borderRadius: "8px",
+          }}
+        >
+          {sidebarIcon}
+        </Box>
+      ))}

      <Box
        sx={{
@ -129,7 +105,9 @@ export const SidebarMobile: FC<Iprops> = ({ open }) => (
          marginLeft: "28px",
        }}
      >
-        <Settings style={{ color: "#974BFA", fontSize: "24px", marginLeft: "10px" }} />
+        <Settings
+          style={{ color: "#974BFA", fontSize: "24px", marginLeft: "10px" }}
+        />
        <ArrowDown style={{ color: "#F2F3F7" }} />
      </Box>
    </Box>
--- a/src/ui_kit/Sidebar.tsx
+++ b/src/ui_kit/Sidebar.tsx
@ -5,12 +5,10 @@ import PuzzlePieceIcon from "@icons/PuzzlePieceIcon";
 import TagIcon from "@icons/TagIcon";
 import { quizSetupSteps } from "@model/quizSettings";
 import { Box, IconButton, List, Typography, useTheme } from "@mui/material";
-import { setCurrentStep } from "@root/quizes/actions";
 import { useQuizStore } from "@root/quizes/store";
 import { useState } from "react";
 import MenuItem from "./MenuItem";
 import { useCurrentQuiz } from "@root/quizes/hooks";
-import { setShowConfirmLeaveModal } from "@root/uiTools/actions";

 const quizSettingsMenuItems = [
  [TagIcon, "Дополнения"],
@ -20,10 +18,10 @@ const quizSettingsMenuItems = [
 ] as const;

 type SidebarProps = {
-  setNextStep: (step: number) => void;
+  changePage: (step: number) => void;
 };

-export default function Sidebar({ setNextStep }: SidebarProps) {
+export default function Sidebar({ changePage }: SidebarProps) {
  const theme = useTheme();
  const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
  const currentStep = useQuizStore((state) => state.currentStep);
@ -31,17 +29,6 @@ export default function Sidebar({ setNextStep }: SidebarProps) {

  const handleMenuCollapseToggle = () => setIsMenuCollapsed((prev) => !prev);

-  const changePage = (index: number) => {
-    if (currentStep === 2) {
-      setNextStep(index);
-      setShowConfirmLeaveModal(true);
-
-      return;
-    }
-
-    setCurrentStep(index);
-  };
-
  return (
    <Box
      sx={{