кнопка ветвления работает

2024-01-05 10:07:06 +03:00 · 2024-01-05 10:07:06 +03:00 · f907fdd006
commit f907fdd006
parent 0f8b448a65
41 changed files with 307 additions and 136 deletions
--- a/src/api/question.ts
+++ b/src/api/question.ts
@ -43,7 +43,6 @@ async function getQuestionList(body?: Partial<GetQuestionListRequest>) {
    body: { ...defaultGetQuestionListBody, ...body },
    method: "POST",
  });
-  console.log(response.items);
  const clearArrayFromEmptySpaceBlaBlaValue = response.items?.map(
    (question) => {
      let data = question;
--- a/src/pages/ContactFormPage/ContactFormPage.tsx
+++ b/src/pages/ContactFormPage/ContactFormPage.tsx
@ -193,7 +193,7 @@ function ContactFormParent({ outerContainerSx: sx, children }: Props) {
              height: "197px",
            }}
            sx={{
-              height: "197px"
+              height: "197px",
            }}
            maxLength={300}
          />
--- a/src/pages/ContactFormPage/NewField/WindowNewField.tsx
+++ b/src/pages/ContactFormPage/NewField/WindowNewField.tsx
@ -122,7 +122,7 @@ export default function WindowNewField({ drawerState, closeDrawer }: Props) {
          padding: "20px",
          display: "flex",
          gap: "10px",
-          flexWrap: "wrap"
+          flexWrap: "wrap",
        }}
      >
        {buttonSetting.flatMap((e, i) =>
--- a/src/pages/Questions/BranchingMap/CsComponent.tsx
+++ b/src/pages/Questions/BranchingMap/CsComponent.tsx
@ -212,7 +212,7 @@ function CsComponent({
        cy?.layout(layoutOptions).run();
        cy?.center(es);
      } else {
-        enqueueSnackbar("Добавляемый вопрос не найден");
+        enqueueSnackbar("Перетащите на плюсик вопрос");
      }
    } else {
      enqueueSnackbar("Quiz не найден");
@ -270,7 +270,6 @@ function CsComponent({

    if (!noChild) {
      //детей больше 1
-      console.log("детей  ", noChild, "  открываем модалку ветвления");
      //- предупреждаем стор вопросов об открытии модалки ветвления
      updateOpenedModalSettingsId(targetQuestion.content.id);
    }
@ -294,19 +293,12 @@ function CsComponent({
  //Отработка первичного рендера странички графика
  const firstRender = useRef(true);
  useEffect(() => {
-    console.log("____________ПЕРВЧИНЫЙ РЕНДЕР____________");
-    console.log("______someWorkBackend______", someWorkBackend);
-
    if (!someWorkBackend && firstRender.current) {
-      console.log("цс первично отрабатывает");
      document
        .querySelector("#root")
        ?.addEventListener("mouseup", cleardragQuestionContentId);
      const cy = cyRef.current;

-      console.log("СПИСОК ЭЛЕМЕНТОВ ЦИТОСКЕЙПА В ПЕРВЧИНЫЙ РЕНДЕР");
-      console.log(cy?.elements());
-
      const eles = cy?.add(
        storeToNodes(
          questions.filter(
@ -324,7 +316,6 @@ function CsComponent({
    }

    return () => {
-      console.log("разрендер");
      document
        .querySelector("#root")
        ?.removeEventListener("mouseup", cleardragQuestionContentId);
--- a/src/pages/Questions/BranchingMap/FirstNodeField.tsx
+++ b/src/pages/Questions/BranchingMap/FirstNodeField.tsx
@ -24,7 +24,6 @@ export const FirstNodeField = ({
  const quiz = useCurrentQuiz();

  useLayoutEffect(() => {
-    console.log("компонент с плюсом");
    updateOpenedModalSettingsId();
    updateRootContentId(quiz.id, "");
    clearRuleForAll();
--- a/src/pages/Questions/BranchingMap/hooks/usePopper.ts
+++ b/src/pages/Questions/BranchingMap/hooks/usePopper.ts
@ -208,7 +208,6 @@ export const usePopper = ({
        });
        let gearsPopper: Popper | null = null;
        if (node.data().root !== true) {
-          console.log(node.data("parentType"));
          const parentQuestion = getQuestionByContentId(
            node.data("parentType"),
          );
@ -240,16 +239,12 @@ export const usePopper = ({
                updateOpenedModalSettingsId(item.id());
              });

-              console.log("собираюсь анализировать папашу");
-              console.log("Тип папаши ", parentQuestion.type);
              if (
                parentQuestion?.type === "date" ||
                parentQuestion?.type === "text" ||
                parentQuestion?.type === "number" ||
                parentQuestion?.type === "page"
              ) {
-                console.log("Шестерня должна быть невидимая");
-                console.log("Тип папаши ", parentQuestion.type);
                gearElement.classList.add("popper-gear-none");
              }

--- a/src/pages/Questions/BranchingMap/hooks/useRemoveNode.ts
+++ b/src/pages/Questions/BranchingMap/hooks/useRemoveNode.ts
@ -173,7 +173,6 @@ export const useRemoveNode = ({
          quiz &&
          cy?.edges(`[source="${parentQuestionContentId}"]`).length === 0
        ) {
-          console.log(parentQuestionContentId);
          //createFrontResult(quiz.backendId, parentQuestionContentId);
        }
        clearDataAfterRemoveNode({
--- a/src/pages/Questions/BranchingMap/index.tsx
+++ b/src/pages/Questions/BranchingMap/index.tsx
@ -8,7 +8,6 @@ import { useUiTools } from "@root/uiTools/store";

 export const BranchingMap = () => {
  const quiz = useCurrentQuiz();
-  console.log("рендер странички ветвления");
  const { dragQuestionContentId } = useUiTools();
  const [modalQuestionParentContentId, setModalQuestionParentContentId] =
    useState<string>("");
--- a/src/pages/Questions/ButtonsOptions.tsx
+++ b/src/pages/Questions/ButtonsOptions.tsx
@ -44,9 +44,17 @@ interface Props {
  SSHC: (data: string) => void;
  question: AnyTypedQuizQuestion;
  sx?: SxProps;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }

-export default function ButtonsOptions({ SSHC, switchState, question }: Props) {
+export default function ButtonsOptions({
+  SSHC,
+  switchState,
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
  const isWrappMiniButtonSetting = useMediaQuery(theme.breakpoints.down(920));
@ -55,6 +63,7 @@ export default function ButtonsOptions({ SSHC, switchState, question }: Props) {
  const [openDelete, setOpenDelete] = useState<boolean>(false);

  const openedModal = () => {
+    setOpenBranchingPage(true);
    updateDesireToOpenABranchingModal(question.content.id);
  };

@ -95,6 +104,7 @@ export default function ButtonsOptions({ SSHC, switchState, question }: Props) {
      title: "Ветвление",
      value: "branching",
      myFunc: (question) => {
+        setOpenBranchingPage(true);
        updateDesireToOpenABranchingModal(question.content.id);
      },
    },
--- a/src/pages/Questions/ButtonsOptionsAndPict.tsx
+++ b/src/pages/Questions/ButtonsOptionsAndPict.tsx
@ -45,13 +45,18 @@ interface Props {
  switchState: string;
  SSHC: (data: string) => void;
  question: QuizQuestionVariant | QuizQuestionVarImg;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }

 export default function ButtonsOptionsAndPict({
  SSHC,
  switchState,
  question,
+  openBranchingPage,
+  setOpenBranchingPage,
 }: Props) {
+  console.log(setOpenBranchingPage);
  const [buttonHover, setButtonHover] = useState<string>("");
  const [openedReallyChangingModal, setOpenedReallyChangingModal] =
    useState<boolean>(false);
@ -205,6 +210,7 @@ export default function ButtonsOptionsAndPict({
            onMouseEnter={() => setButtonHover("branching")}
            onMouseLeave={() => setButtonHover("")}
            onClick={() => {
+              setOpenBranchingPage(true);
              updateDesireToOpenABranchingModal(question.content.id);
            }}
            sx={{
--- a/src/pages/Questions/DataOptions/DataOptions.tsx
+++ b/src/pages/Questions/DataOptions/DataOptions.tsx
@ -14,9 +14,15 @@ import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";

 interface Props {
  question: QuizQuestionDate;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }

-export default function DataOptions({ question }: Props) {
+export default function DataOptions({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
  const [switchState, setSwitchState] = useState("setting");
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
@ -71,6 +77,8 @@ export default function DataOptions({ question }: Props) {
        switchState={switchState}
        SSHC={SSHC}
        question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
      />
      <SwitchData switchState={switchState} question={question} />
    </>
--- a/src/pages/Questions/DraggableList/DraggableListItem.tsx
+++ b/src/pages/Questions/DraggableList/DraggableListItem.tsx
@ -15,9 +15,17 @@ type Props = {
  question: AnyTypedQuizQuestion | UntypedQuizQuestion;
  isDragging: boolean;
  index: number;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 };

-function DraggableListItem({ question, isDragging, index }: Props) {
+function DraggableListItem({
+  question,
+  isDragging,
+  index,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
  const theme = useTheme();
  const { editSomeQuestion } = useUiTools();

@ -87,6 +95,8 @@ function DraggableListItem({ question, isDragging, index }: Props) {
          ) : (
            <Box sx={{ width: "100%", position: "relative" }}>
              <QuestionsPageCard
+                openBranchingPage={openBranchingPage}
+                setOpenBranchingPage={setOpenBranchingPage}
                question={question}
                draggableProps={provided.dragHandleProps}
                isDragging={isDragging}
--- a/src/pages/Questions/DraggableList/QuestionPageCard.tsx
+++ b/src/pages/Questions/DraggableList/QuestionPageCard.tsx
@ -57,6 +57,8 @@ interface Props {
  draggableProps: DraggableProvidedDragHandleProps | null | undefined;
  isDragging: boolean;
  index: number;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }

 export default function QuestionsPageCard({
@ -64,6 +66,8 @@ export default function QuestionsPageCard({
  draggableProps,
  isDragging,
  index,
+  openBranchingPage,
+  setOpenBranchingPage,
 }: Props) {
  const maxLengthTextField = 225;

@ -292,6 +296,7 @@ export default function QuestionsPageCard({
                  onClick={() => {
                    if (question.type === null) {
                      deleteQuestion(question.id);
+                      return;
                    }
                    if (question.content.rule.parentId.length !== 0) {
                      setOpenDelete(true);
@ -402,7 +407,11 @@ export default function QuestionsPageCard({
            {question.type === null ? (
              <TypeQuestions question={question} />
            ) : (
-              <SwitchQuestionsPage question={question} />
+              <SwitchQuestionsPage
+                question={question}
+                openBranchingPage={openBranchingPage}
+                setOpenBranchingPage={setOpenBranchingPage}
+              />
            )}
          </Box>
        )}
--- a/src/pages/Questions/DraggableList/index.tsx
+++ b/src/pages/Questions/DraggableList/index.tsx
@ -4,8 +4,14 @@ import type { DropResult } from "react-beautiful-dnd";
 import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import DraggableListItem from "./DraggableListItem";
 import { useQuestionsStore } from "@root/questions/store";
-
-export const DraggableList = () => {
+interface Props {
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
+}
+export const DraggableList = ({
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) => {
  const { questions } = useQuestionsStore();
  const filteredQuestions = questions.filter(
    (question) => question.type !== "result",
@ -21,6 +27,8 @@ export const DraggableList = () => {
          <Box ref={provided.innerRef} {...provided.droppableProps}>
            {filteredQuestions.map((question, index) => (
              <DraggableListItem
+                openBranchingPage={openBranchingPage}
+                setOpenBranchingPage={setOpenBranchingPage}
                key={question.id}
                question={question}
                isDragging={snapshot.isDraggingOver}
--- a/src/pages/Questions/DropDown/DropDown.tsx
+++ b/src/pages/Questions/DropDown/DropDown.tsx
@ -10,9 +10,15 @@ import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";
 import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
 interface Props {
  question: QuizQuestionSelect;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }

-export default function DropDown({ question }: Props) {
+export default function DropDown({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
  const onClickAddAnAnswer = useAddAnswer();
  const [switchState, setSwitchState] = useState("setting");
  const theme = useTheme();
@ -92,6 +98,8 @@ export default function DropDown({ question }: Props) {
        switchState={switchState}
        SSHC={SSHC}
        question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
      />
      <SwitchDropDown switchState={switchState} question={question} />
    </>
--- a/src/pages/Questions/Emoji/Emoji.tsx
+++ b/src/pages/Questions/Emoji/Emoji.tsx
@ -21,9 +21,15 @@ import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";

 interface Props {
  question: QuizQuestionEmoji;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }

-export default function Emoji({ question }: Props) {
+export default function Emoji({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
  const [switchState, setSwitchState] = useState<string>("setting");
  const onClickAddAnAnswer = useAddAnswer();
  const [open, setOpen] = useState<boolean>(false);
@ -237,6 +243,8 @@ export default function Emoji({ question }: Props) {
        switchState={switchState}
        SSHC={SSHC}
        question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
      />
      <SwitchEmoji switchState={switchState} question={question} />
    </>
--- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
+++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
@ -32,9 +32,14 @@ import SwitchOptionsAndPict from "./switchOptionsAndPict";

 interface Props {
  question: QuizQuestionVarImg;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }

-export default function OptionsAndPicture({ question }: Props) {
+export default function OptionsAndPicture({
+  question,
+  setOpenBranchingPage,
+}: Props) {
  const [switchState, setSwitchState] = useState("setting");
  const [selectedVariantId, setSelectedVariantId] = useState<string | null>(
    null,
@ -390,6 +395,7 @@ export default function OptionsAndPicture({ question }: Props) {
        switchState={switchState}
        SSHC={SSHC}
        question={question}
+        setOpenBranchingPage={setOpenBranchingPage}
      />
      <SwitchOptionsAndPict switchState={switchState} question={question} />
    </>
--- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
+++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx
@ -18,9 +18,15 @@ import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";

 interface Props {
  question: QuizQuestionImages;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }

-export default function OptionsPicture({ question }: Props) {
+export default function OptionsPicture({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
  const theme = useTheme();
  const onClickAddAnAnswer = useAddAnswer();
  const quizQid = useCurrentQuiz()?.qid;
@ -187,6 +193,8 @@ export default function OptionsPicture({ question }: Props) {
        switchState={switchState}
        SSHC={SSHC}
        question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
      />
      <SwitchAnswerOptionsPict switchState={switchState} question={question} />
    </>
--- a/src/pages/Questions/OwnTextField/OwnTextField.tsx
+++ b/src/pages/Questions/OwnTextField/OwnTextField.tsx
@ -17,9 +17,15 @@ import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";

 interface Props {
  question: QuizQuestionText;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }

-export default function OwnTextField({ question }: Props) {
+export default function OwnTextField({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
  const [switchState, setSwitchState] = useState("setting");
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
@ -98,6 +104,8 @@ export default function OwnTextField({ question }: Props) {
        switchState={switchState}
        SSHC={SSHC}
        question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
      />
      <SwitchTextField switchState={switchState} question={question} />
    </>
--- a/src/pages/Questions/PageOptions/PageOptions.tsx
+++ b/src/pages/Questions/PageOptions/PageOptions.tsx
@ -31,6 +31,8 @@ import { updateDesireToOpenABranchingModal } from "@root/uiTools/actions";
 type Props = {
  disableInput?: boolean;
  question: QuizQuestionPage;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 };

 export default function PageOptions({ disableInput, question }: Props) {
--- a/src/pages/Questions/QuestionSwitchWindowTool.tsx
+++ b/src/pages/Questions/QuestionSwitchWindowTool.tsx
@ -41,7 +41,14 @@ export const QuestionSwitchWindowTool = ({
      }}
    >
      <Box sx={{ flexBasis: "796px" }}>
-        {openBranchingPage ? <BranchingMap /> : <DraggableList />}
+        {openBranchingPage ? (
+          <BranchingMap />
+        ) : (
+          <DraggableList
+            openBranchingPage={openBranchingPage}
+            setOpenBranchingPage={openBranchingPageHC}
+          />
+        )}
      </Box>
      {openBranchingPage && (
        <SwitchBranchingPanel
--- a/src/pages/Questions/RatingOptions/RatingOptions.tsx
+++ b/src/pages/Questions/RatingOptions/RatingOptions.tsx
@ -22,6 +22,8 @@ import { updateQuestion } from "@root/questions/actions";

 interface Props {
  question: QuizQuestionRating;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }

 export type ButtonRatingFrom = {
@ -29,7 +31,11 @@ export type ButtonRatingFrom = {
  icon: JSX.Element;
 };

-export default function RatingOptions({ question }: Props) {
+export default function RatingOptions({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
  const [switchState, setSwitchState] = useState("setting");
  const [negativeText, setNegativeText] = useState<string>("");
  const [positiveText, setPositiveText] = useState<string>("");
@ -270,6 +276,8 @@ export default function RatingOptions({ question }: Props) {
        switchState={switchState}
        SSHC={SSHC}
        question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
      />
      <SwitchRating switchState={switchState} question={question} />
    </>
--- a/src/pages/Questions/SliderOptions/SliderOptions.tsx
+++ b/src/pages/Questions/SliderOptions/SliderOptions.tsx
@ -13,9 +13,15 @@ import type { QuizQuestionNumber } from "../../../model/questionTypes/number";

 interface Props {
  question: QuizQuestionNumber;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }

-export default function SliderOptions({ question }: Props) {
+export default function SliderOptions({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(980));
  const isMobile = useMediaQuery(theme.breakpoints.down(790));
@ -274,6 +280,8 @@ export default function SliderOptions({ question }: Props) {
        switchState={switchState}
        SSHC={SSHC}
        question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
      />
      <SwitchSlider switchState={switchState} question={question} />
    </>
--- a/src/pages/Questions/SwitchBranchingPanel/QuestionsList.tsx
+++ b/src/pages/Questions/SwitchBranchingPanel/QuestionsList.tsx
@ -39,6 +39,13 @@ export const QuestionsList = ({ setOpenBranchingPage = () => {} }: Props) => {
    (question) => question.type !== "result",
  );

+  useEffect(() => {
+    if (desireToOpenABranchingModal) {
+      const element = document.getElementById(desireToOpenABranchingModal);
+      if (element !== null) element.scrollIntoView();
+    }
+  }, [desireToOpenABranchingModal]);
+
  return (
    <Box sx={{ padding: "15px" }}>
      <Box
@ -62,54 +69,57 @@ export const QuestionsList = ({ setOpenBranchingPage = () => {} }: Props) => {
      >
        {/* тут нужно будет фильтровать с проверкой, что вопрос имеет тип*/}
        {questions
-          .filter((q: AnyQuestion) => q.type)
-          .map(({ title, content }, index) => (
-            <Button
-              onMouseDown={() => {
-                //Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
-                if (!content.rule.parentId)
-                  updateDragQuestionContentId(content.id);
-              }}
-              key={index}
-              sx={{
-                width: "100%",
-                cursor: "pointer",
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                padding: "12px",
-                background: "#FFFFFF",
-                borderRadius: "8px",
-                border:
-                  desireToOpenABranchingModal === content.id
-                    ? "4px solid #7e2aea"
-                    : "none",
-                marginBottom: "20px",
-                boxShadow: "0px 10px 30px #e7e7e7",
-                backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgb(154, 154, 175)' strokeWidth='2' stroke-dasharray='8 8' stroke-dashoffset='0' strokeLinecap='square'/%3e%3c/svg%3e");
-  border-radius: 8px;`,
-                "&:last-child": { marginBottom: 0 },
-              }}
-            >
-              <Typography
+          .filter((q: AnyQuestion) => q.type && q.type !== "result")
+          .map(({ title, content }, index) => {
+            return (
+              <Button
+                id={content.id}
+                onMouseDown={() => {
+                  //Разрешаем добавить этот вопрос если у него нет родителя (не добавляли ещё в дерево)
+                  if (!content.rule.parentId)
+                    updateDragQuestionContentId(content.id);
+                }}
+                key={index}
                sx={{
                  width: "100%",
-                  color: content.rule.parentId ? "#9A9AAF" : "#000",
+                  cursor: "pointer",
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  padding: "12px",
+                  background: "#FFFFFF",
+                  borderRadius: "8px",
+                  border:
+                    desireToOpenABranchingModal === content.id
+                      ? "4px solid #7e2aea"
+                      : "none",
+                  marginBottom: "20px",
+                  boxShadow: "0px 10px 30px #e7e7e7",
+                  backgroundImage: `url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='rgb(154, 154, 175)' strokeWidth='2' stroke-dasharray='8 8' stroke-dashoffset='0' strokeLinecap='square'/%3e%3c/svg%3e");
+  border-radius: 8px;`,
+                  "&:last-child": { marginBottom: 0 },
                }}
              >
-                {title || "нет заголовка"}
-              </Typography>
-              <IconButton
-                onClick={() => {
-                  setOpenBranchingPage();
-                  updateEditSomeQuestion(content.id);
-                }}
-              >
-                <Pencil style={{ color: "#7e2aea" }} />
-              </IconButton>
-              {content.rule.parentId && <CheckedIcon />}
-            </Button>
-          ))}
+                <Typography
+                  sx={{
+                    width: "100%",
+                    color: content.rule.parentId ? "#9A9AAF" : "#000",
+                  }}
+                >
+                  {title || "нет заголовка"}
+                </Typography>
+                <IconButton
+                  onClick={() => {
+                    setOpenBranchingPage();
+                    updateEditSomeQuestion(content.id);
+                  }}
+                >
+                  <Pencil style={{ color: "#7e2aea" }} />
+                </IconButton>
+                {content.rule.parentId && <CheckedIcon />}
+              </Button>
+            );
+          })}
      </Box>
    </Box>
  );
--- a/src/pages/Questions/SwitchQuestionsPage.tsx
+++ b/src/pages/Questions/SwitchQuestionsPage.tsx
@ -14,42 +14,114 @@ import { notReachable } from "../../utils/notReachable";

 interface Props {
  question: AnyTypedQuizQuestion;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }

-export default function SwitchQuestionsPage({ question }: Props) {
+export default function SwitchQuestionsPage({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
  switch (question.type) {
    case "variant":
-      return <AnswerOptions question={question} />;
+      return (
+        <AnswerOptions
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );

    case "images":
-      return <OptionsPicture question={question} />;
+      return (
+        <OptionsPicture
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );

    case "varimg":
-      return <OptionsAndPicture question={question} />;
+      return (
+        <OptionsAndPicture
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );

    case "emoji":
-      return <Emoji question={question} />;
+      return (
+        <Emoji
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );

    case "text":
-      return <OwnTextField question={question} />;
+      return (
+        <OwnTextField
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );

    case "select":
-      return <DropDown question={question} />;
+      return (
+        <DropDown
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );

    case "date":
-      return <DataOptions question={question} />;
+      return (
+        <DataOptions
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );

    case "number":
-      return <SliderOptions question={question} />;
+      return (
+        <SliderOptions
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );

    case "file":
-      return <UploadFile question={question} />;
+      return (
+        <UploadFile
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );

    case "page":
-      return <PageOptions question={question} />;
+      return (
+        <PageOptions
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );

    case "rating":
-      return <RatingOptions question={question} />;
+      return (
+        <RatingOptions
+          question={question}
+          openBranchingPage={openBranchingPage}
+          setOpenBranchingPage={setOpenBranchingPage}
+        />
+      );

    default:
      notReachable(question);
--- a/src/pages/Questions/UploadFile/UploadFile.tsx
+++ b/src/pages/Questions/UploadFile/UploadFile.tsx
@ -36,9 +36,15 @@ const DESIGN_TYPES: DesignItem[] = [

 interface Props {
  question: QuizQuestionFile;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }

-export default function UploadFile({ question }: Props) {
+export default function UploadFile({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
  const [switchState, setSwitchState] = useState("setting");
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down(980));
@ -201,6 +207,8 @@ export default function UploadFile({ question }: Props) {
        switchState={switchState}
        SSHC={SSHC}
        question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
      />
      <SwitchUpload switchState={switchState} question={question} />
    </>
--- a/src/pages/Questions/answerOptions/AnswerOptions.tsx
+++ b/src/pages/Questions/answerOptions/AnswerOptions.tsx
@ -10,9 +10,16 @@ import { useAddAnswer } from "../../../utils/hooks/useAddAnswer";

 interface Props {
  question: QuizQuestionVariant;
+  openBranchingPage: boolean;
+  setOpenBranchingPage: (a: boolean) => void;
 }

-export default function AnswerOptions({ question }: Props) {
+export default function AnswerOptions({
+  question,
+  openBranchingPage,
+  setOpenBranchingPage,
+}: Props) {
+  console.log(setOpenBranchingPage);
  const onClickAddAnAnswer = useAddAnswer();
  const [switchState, setSwitchState] = useState("setting");
  const theme = useTheme();
@ -89,6 +96,8 @@ export default function AnswerOptions({ question }: Props) {
        switchState={switchState}
        SSHC={SSHC}
        question={question}
+        openBranchingPage={openBranchingPage}
+        setOpenBranchingPage={setOpenBranchingPage}
      />
      <SwitchAnswerOptions switchState={switchState} question={question} />
    </>
--- a/src/pages/ResultPage/ResultSettings.tsx
+++ b/src/pages/ResultPage/ResultSettings.tsx
@ -76,7 +76,6 @@ export const ResultSettings = () => {

  const leavePage = (leave: boolean) => {
    if (leave) {
-      console.log("ливаем");
    }

    setOpenNotificationModal(false);
--- a/src/pages/ResultPage/cards/ResultCard.tsx
+++ b/src/pages/ResultPage/cards/ResultCard.tsx
@ -360,7 +360,7 @@ export const ResultCard = ({ resultContract, resultData }: Props) => {
                    border: "1px solid #9A9AAF",
                    background: " #F2F3F7",
                    color: "#9A9AAF",
-                  my: "30px",
+                    my: "30px",
                  }}
                >
                  Кнопка +
--- a/src/pages/Tariffs/Tariffs.tsx
+++ b/src/pages/Tariffs/Tariffs.tsx
@ -53,10 +53,6 @@ function TariffPage() {

  if (!user || !tariffs || !discounts) return <LoadingPage />;

-  console.log("user ", user);
-  console.log("tariffs ", tariffs);
-  console.log("discounts ", discounts);
-
  const openModalHC = (tariffInfo: any) => setOpenModal(tariffInfo);
  const tryBuy = async ({ id, price }: { id: string; price: number }) => {
    openModalHC({});
--- a/src/pages/Tariffs/tariffsUtils/calcCart.ts
+++ b/src/pages/Tariffs/tariffsUtils/calcCart.ts
@ -78,7 +78,6 @@ function findCartDiscount(
      cartPurchasesAmount >= Number(discount.Condition.CartPurchasesAmount)
    );
  });
-  console.log("FCD", applicableDiscounts);

  if (!applicableDiscounts.length) return null;

--- a/src/pages/ViewPublicationPage/ContactForm.tsx
+++ b/src/pages/ViewPublicationPage/ContactForm.tsx
@ -249,7 +249,6 @@ const Inputs = (currentQuestion: any) => {

  //@ts-ignore
  const FC: any = quiz?.config.formContact.fields;
-  console.log(FC);

  //@ts-ignore
  const Name = (
--- a/src/pages/ViewPublicationPage/Footer.tsx
+++ b/src/pages/ViewPublicationPage/Footer.tsx
@ -115,15 +115,12 @@ export const Footer = ({
    }

    const isEmpty = checkEmptyData({ resultData: nextQuestion });
-    console.log("пустой результат? ", isEmpty);
    if (nextQuestion) {
      if (nextQuestion && quiz?.config.resultInfo.when === "before") {
        if (isEmpty) {
          setShowContactForm(true); //до+пустая = кидать на ФК
-          console.log("до+пустая = кидать на ФК");
        } else {
          setShowResultForm(true); //до+заполнена = показать
-          console.log("до+заполнена = показать");
        }
      }
      if (
@ -133,10 +130,8 @@ export const Footer = ({
      ) {
        if (isEmpty) {
          setShowContactForm(true); //после+пустая
-          console.log("после+пустая");
        } else {
          setShowContactForm(true); //после+заполнена = показать ФК
-          console.log("после+заполнена = показать");
        }
      }
    }
--- a/src/pages/ViewPublicationPage/ResultForm.tsx
+++ b/src/pages/ViewPublicationPage/ResultForm.tsx
@ -93,7 +93,7 @@ export const ResultForm = ({
            </Typography>
          )}

-        {resultQuestion.title &&
+        {resultQuestion.title && (
          <Typography
            sx={{
              m: "20px 0",
@ -101,8 +101,7 @@ export const ResultForm = ({
          >
            {resultQuestion.title}
          </Typography>
-        }
-
+        )}

        {resultQuestion.content.text !== "" &&
          resultQuestion.content.text !== " " && (
--- a/src/pages/startPage/ModalInfoWhyCantCreate.tsx
+++ b/src/pages/startPage/ModalInfoWhyCantCreate.tsx
@ -8,9 +8,7 @@ export const ModalInfoWhyCantCreate = () => {
  const { whyCantCreatePublic, openModalInfoWhyCantCreate } = useUiTools();

  useLayoutEffect(() => {
-    console.log(whyCantCreatePublic);
    if (Object.values(whyCantCreatePublic).length === 0) {
-      console.log("нет проблем");
      updateModalInfoWhyCantCreate(false);
    }
  }, [openModalInfoWhyCantCreate]);
--- a/src/stores/questions/actions.ts
+++ b/src/stores/questions/actions.ts
@ -439,7 +439,9 @@ export const changeQuestionType = (questionId: string, type: QuestionType) => {
    const oldRule = question.content.rule;
    oldRule.main = [];
    question.type = type;
-    question.content = defaultQuestionByType[type].content;
+    question.content = JSON.parse(
+      JSON.stringify(defaultQuestionByType[type].content),
+    );
    question.content.id = oldId;
    question.content.rule = oldRule;
  });
--- a/src/ui_kit/MediaSelectionAndDisplay.tsx
+++ b/src/ui_kit/MediaSelectionAndDisplay.tsx
@ -1,5 +1,12 @@
 import { FC } from "react";
-import { Box, Button, ButtonBase, Tooltip, Typography, useTheme } from "@mui/material";
+import {
+  Box,
+  Button,
+  ButtonBase,
+  Tooltip,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import CustomTextField from "./CustomTextField";
 import { updateQuestion, uploadQuestionImage } from "@root/questions/actions";
 import { CropModal, useCropModalState } from "@ui_kit/Modal/CropModal";
@ -19,7 +26,7 @@ interface Iprops {

 export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
  const quizQid = useCurrentQuiz()?.qid;
-  const theme = useTheme()
+  const theme = useTheme();
  const {
    isCropModalOpen,
    openCropModal,
@ -30,7 +37,6 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
  } = useCropModalState();
  const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] =
    useDisclosure();
-  console.log(resultData)
  async function handleImageUpload(file: File) {
    const url = await uploadQuestionImage(
      resultData.id,
@ -182,7 +188,7 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
              width: "48px",
              display: "flex",
              alignItems: "center",
-              my: "20px"
+              my: "20px",
            }}
          >
            <input
@ -198,7 +204,6 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
                    },
                  );
                }
-
              }}
              hidden
              accept=".mp4"
@ -213,7 +218,9 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
              }}
            />
          </ButtonBase>
-          {resultData.content.video ? <video src={resultData.content.video} width="400" controls /> : null}
+          {resultData.content.video ? (
+            <video src={resultData.content.video} width="400" controls />
+          ) : null}
        </>
      )}
    </Box>
--- a/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
+++ b/src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
@ -74,7 +74,6 @@ export default function QuizPreviewLayout() {
    observer.current.observe(PreviewWin.current);
  }, [PreviewWin, observer]);

-  console.log("current width state: ", widthPreview);
  return (
    <Paper
      ref={PreviewWin}
--- a/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx
+++ b/src/ui_kit/StartPagePreview/YoutubeEmbedIframe.tsx
@ -14,7 +14,6 @@ export default function YoutubeEmbedIframe({ videoUrl, containerSX }: Props) {
  const embedUrl = `https://www.youtube.com/embed/${videoId}?controls=0&autoplay=1&modestbranding=0&showinfo=0&disablekb=1&mute=1&loop=1`;
  // https://www.youtube.com/shorts/9VgqBPd6RPA
  // https://www.youtube.com/watch?v=I2N8hTHhvGY
-  console.log();
  return (
    <Box
      sx={{
--- a/src/ui_kit/Toolbars/ButtonRecallQuiz.tsx
+++ b/src/ui_kit/Toolbars/ButtonRecallQuiz.tsx
@ -10,7 +10,6 @@ export const ButtonRecallQuiz = () => {
  const quiz = useCurrentQuiz();
  const { whyCantCreatePublic, canCreatePublic } = useUiTools();

-  console.log(quiz?.status);
  const [buttonText, setButtonText] = useState(
    quiz?.status === "stop" ? "Опубликовать" : "Отозвать",
  );
--- a/src/utils/deleteFunc.ts
+++ b/src/utils/deleteFunc.ts
@ -66,21 +66,12 @@ export const DeleteFunction = async (
      const newRule = {};
      const parentChildren = [...parentQuestion.content.rule.children];

-      console.log(
-        "_________________УДАЛЯЕМЫЙ ВОПРОС_________________",
-        question.content.id,
-      );
-      console.log(parentChildren);
-      console.log(question.content.id);
-      console.log(parentChildren.includes(question.content.id));
-
      if (parentChildren.includes(question.content.id))
        parentChildren.splice(
          parentQuestion.content.rule.children.indexOf(question.content.id),
          1,
        );

-      console.log("получившийся массив ", parentChildren);
      newRule.main = parentQuestion.content.rule.main.filter(
        (data) => data.next !== question.content.id,
      ); //удаляем условия перехода от родителя к этому вопросу
@ -103,20 +94,14 @@ export const DeleteFunction = async (
      );

      //сделать результ родителя видимым если у него не осталось потомков
-      console.log(
-        "пришло время анализировать сделать ли результат родителя видимым",
-      );
-      console.log("количество детей ", startCountParentChildren.length);

      if (startCountParentChildren.length === 1) {
        if (parentResult) {
-          console.log("я нашел результат родителя");
          await updateQuestion(parentResult.content.id, (q) => {
            q.content.usage = true;
          });
        } else {
          //почему-то не существует результа у родителя. Создаём. Новосозданные результы видны сразу
-          console.log("я не нашел результат родителя");
          await createResult(quiz.backendId, parentQuestion.content.id);
        }
      }