From 28d8cc83206bc75098ee7da96da546d9d7a1350e Mon Sep 17 00:00:00 2001 From: nflnkr Date: Tue, 14 Nov 2023 16:13:10 +0300 Subject: [PATCH] start page settings now uses new store --- src/pages/startPage/StartPageSettings.tsx | 1689 ++++++++++----------- src/pages/startPage/dropZone.tsx | 243 ++- 2 files changed, 924 insertions(+), 1008 deletions(-) diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx index cd4b47c7..618d234d 100755 --- a/src/pages/startPage/StartPageSettings.tsx +++ b/src/pages/startPage/StartPageSettings.tsx @@ -1,20 +1,4 @@ -import { ChangeEvent, useState } from "react"; -import { - Box, - Button, - ButtonBase, - Checkbox, - FormControl, - FormControlLabel, - MenuItem, - Select, - Tooltip, - Typography, - useMediaQuery, - useTheme, -} from "@mui/material"; -import { createPortal } from "react-dom"; -import CustomCheckbox from "@ui_kit/CustomCheckbox"; +import AlignCenterIcon from "@icons/AlignCenterIcon"; import AlignLeftIcon from "@icons/AlignLeftIcon"; import AlignRightIcon from "@icons/AlignRightIcon"; import ArrowDown from "@icons/ArrowDownIcon"; @@ -23,905 +7,858 @@ import LayoutCenteredIcon from "@icons/LayoutCenteredIcon"; import LayoutExpandedIcon from "@icons/LayoutExpandedIcon"; import LayoutStandartIcon from "@icons/LayoutStandartIcon"; import MobilePhoneIcon from "@icons/MobilePhoneIcon"; -import UploadIcon from "../../assets/icons/UploadIcon"; -import SelectableButton from "@ui_kit/SelectableButton"; -import SelectableIconButton from "./SelectableIconButton"; -import UploadBox from "@ui_kit/UploadBox"; +import { QuizStartpageType } from "@model/quizSettings"; +import { + Box, + Button, + ButtonBase, + Checkbox, + FormControl, + FormControlLabel, + MenuItem, + Select, + Tooltip, + Typography, + useMediaQuery, + useTheme, +} from "@mui/material"; +import { incrementCurrentStep } from "@root/quizes/actions"; +import { useCurrentQuiz } from "@root/quizes/hooks"; +import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomTextField from "@ui_kit/CustomTextField"; -import { quizStore } from "@root/quizes"; -import { useParams } from "react-router-dom"; -import * as React from "react"; -import ModalSizeImage from "./ModalSizeImage"; -import { DropZone } from "./dropZone"; -import Extra from "./extra"; -import AlignCenterIcon from "@icons/AlignCenterIcon"; -import DropFav from "./dropfavicon"; -import { createQuestion } from "@root/questions"; +import SelectableButton from "@ui_kit/SelectableButton"; import { StartPagePreview } from "@ui_kit/StartPagePreview"; +import UploadBox from "@ui_kit/UploadBox"; +import { useState } from "react"; +import { createPortal } from "react-dom"; +import UploadIcon from "../../assets/icons/UploadIcon"; +import ModalSizeImage from "./ModalSizeImage"; +import SelectableIconButton from "./SelectableIconButton"; +import { DropZone } from "./dropZone"; +import DropFav from "./dropfavicon"; +import Extra from "./extra"; + const designTypes = [ - [ - "standard", - (color: string) => , - "Standard", - ], - [ - "expanded", - (color: string) => , - "Expanded", - ], - [ - "centered", - (color: string) => , - "Centered", - ], + [ + "standard", + (color: string) => , + "Standard", + ], + [ + "expanded", + (color: string) => , + "Expanded", + ], + [ + "centered", + (color: string) => , + "Centered", + ], ] as const; // type DesignType = typeof designTypes[number][0]; -type BackgroundType = "image" | "video"; -type AlignType = "left" | "right" | "center"; export default function StartPageSettings() { - const [alignType, setAlignType] = useState("left"); - const [formState, setFormState] = useState<"design" | "content">("design"); - const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore(); - const params = Number(useParams().quizId); - const theme = useTheme(); - const designType = listQuizes[params].startpage; - const [backgroundType, setBackgroundType] = useState( - listQuizes[params].config.startpage.background.type - ); - const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500)); - const isTablet = useMediaQuery(theme.breakpoints.down(950)); + const theme = useTheme(); + const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1500)); + const isTablet = useMediaQuery(theme.breakpoints.down(950)); + const { quiz, updateQuiz } = useCurrentQuiz(); + const [formState, setFormState] = useState<"design" | "content">("design"); - const handleNext = () => { - updateQuizesList(params, { step: listQuizes[params].step + 1 }); - }; + const designType = quiz?.config?.startpageType; - const videoHC = (videoInp: HTMLInputElement) => { - const file = videoInp.files?.[0]; + const videoHC = (videoInp: HTMLInputElement) => { + const file = videoInp.files?.[0]; - if (file) { - setVideo(URL.createObjectURL(file)); - } - }; + if (file) { + setVideo(URL.createObjectURL(file)); + } + }; - const [video, setVideo] = React.useState(""); + const [video, setVideo] = useState(""); - const mutationHC = (e: ChangeEvent) => { - let SPageClone = listQuizes[params].config; - SPageClone.startpage.description = e.target.value; - updateQuizesList(params, { config: SPageClone }); - }; + const [mobileVersion, setMobileVersion] = useState(false); + const MobileVersionHC = (bool: boolean) => { + setMobileVersion(bool); + }; + + if (!quiz) return null; // TODO throw and catch with error boundary - const mutationButtonHC = (e: ChangeEvent) => { - let SPageClone = listQuizes[params].config; - SPageClone.startpage.button = e.target.value; - updateQuizesList(params, { config: SPageClone }); - }; - - const mutationPhoneHC = (e: ChangeEvent) => { - let SPageClone = listQuizes[params].config; - SPageClone.info.phonenumber = e.target.value; - updateQuizesList(params, { config: SPageClone }); - }; - - const mutationSiteHC = (e: ChangeEvent) => { - let SPageClone = listQuizes[params].config; - SPageClone.info.site = e.target.value; - updateQuizesList(params, { config: SPageClone }); - }; - - const mutationLawHC = (e: ChangeEvent) => { - let SPageClone = listQuizes[params].config; - SPageClone.info.law = e.target.value; - updateQuizesList(params, { config: SPageClone }); - }; - - const mutationOrgNameHC = (e: ChangeEvent) => { - let SPageClone = listQuizes[params].config; - SPageClone.info.orgname = e.target.value; - updateQuizesList(params, { config: SPageClone }); - }; - - const mutationPositionHC = (e: ChangeEvent) => { - let SPageClone = listQuizes[params].config; - SPageClone.startpage.position = e.target.value; - updateQuizesList(params, { config: SPageClone }); - }; - - const [mobileVersion, setMobileVersion] = React.useState(false); - const MobileVersionHC = (bool: boolean) => { - setMobileVersion(bool); - }; - - return ( - <> - - Стартовая страница - - {isSmallMonitor && ( - - - - - )} - + + + + )} + - {(!isSmallMonitor || (isSmallMonitor && formState === "design")) && ( - - - Дизайн - - - - - - Фон - - - { - setBackgroundType("image"); - let SPageClone = listQuizes[params].config; - SPageClone.startpage.background.type = "image"; - updateQuizesList(params, { config: SPageClone }); - }} - > - Изображение - - { - setBackgroundType("video"); - let SPageClone = listQuizes[params].config; - SPageClone.startpage.background.type = "video"; - updateQuizesList(params, { config: SPageClone }); - }} - > - Видео - - - - - - - Изображение - - - - - - - - } - checkedIcon={} - /> - } - label="мобильная версия" - sx={{ - color: theme.palette.brightPurple.main, - textDecorationLine: "underline", - textDecorationColor: theme.palette.brightPurple.main, - ml: "-9px", - userSelect: "none", - }} - onClick={() => { - MobileVersionHC(!mobileVersion); - }} - /> - {mobileVersion ? ( - - - Изображение для мобильной версии - - - - ) : ( - <> + + Дизайн + + + + + + Фон + + + updateQuiz(quiz => { + quiz.config.startpage.background.type = "image"; + })} + > + Изображение + + updateQuiz(quiz => { + quiz.config.startpage.background.type = "video"; + })} + > + Видео + + + + + + + Изображение + + + + + + + + } + checkedIcon={} + /> + } + label="мобильная версия" + sx={{ + color: theme.palette.brightPurple.main, + textDecorationLine: "underline", + textDecorationColor: theme.palette.brightPurple.main, + ml: "-9px", + userSelect: "none", + }} + onClick={() => { + MobileVersionHC(!mobileVersion); + }} + /> + {mobileVersion ? ( + + + Изображение для мобильной версии + + + + ) : ( + <> + )} + + + + + + + Добавить видео + + + + + + + + + videoHC(event.target)} + hidden + accept=".mp4" + multiple + type="file" + /> + } + sx={{ + height: "48px", + width: "48px", + marginBottom: "20px", + }} + /> + + {video ? + + + Расположение элементов + + + updateQuiz(quiz => { + quiz.config.startpage.position = "left"; + })} + isActive={quiz.config.startpage.position === "left"} + Icon={AlignLeftIcon} + /> + updateQuiz(quiz => { + quiz.config.startpage.position = "center"; + })} + isActive={quiz.config.startpage.position === "center"} + Icon={AlignCenterIcon} + sx={{ display: designType === "centered" ? "flex" : "none" }} + /> + updateQuiz(quiz => { + quiz.config.startpage.position = "right"; + })} + isActive={quiz.config.startpage.position === "right"} + Icon={AlignRightIcon} + /> + + + {(isTablet || !isSmallMonitor) && ( + <> + + + Логотип + + + + + + Favicon + + + + + + 5 MB максимум + + + + )} + )} - - - - - - - Добавить видео - - - - - - - - - videoHC(event.target)} - hidden - accept=".mp4" - multiple - type="file" - /> - } - sx={{ - height: "48px", - width: "48px", - marginBottom: "20px", - }} - /> - - {video ? - - - Расположение элементов - - - { - setAlignType("left"); - let SPageClone = listQuizes[params].config; - SPageClone.startpage.position = "ltr"; - updateQuizesList(params, { config: SPageClone }); - }} - isActive={alignType === "left"} - Icon={AlignLeftIcon} - /> - { - setAlignType("center"); - let SPageClone = listQuizes[params].config; - SPageClone.startpage.position = "cnt"; - updateQuizesList(params, { config: SPageClone }); - }} - isActive={alignType === "center"} - Icon={AlignCenterIcon} - sx={{ display: designType === "centered" ? "flex" : "none" }} - /> - { - setAlignType("right"); - let SPageClone = listQuizes[params].config; - SPageClone.startpage.position = "rtl"; - updateQuizesList(params, { config: SPageClone }); - }} - isActive={alignType === "right"} - Icon={AlignRightIcon} - /> - - - {(isTablet || !isSmallMonitor) && ( - <> + {/*Правая сторона*/} - - Логотип - - - - - - Favicon - - - + {!isTablet && isSmallMonitor && formState === "design" && ( + <> + + + Логотип + + + - - 5 MB максимум - + + Favicon + + + + + + 5 MB максимум + + + + )} + {(!isSmallMonitor || (isSmallMonitor && formState === "content")) && ( + <> + + Заголовок + + updateQuiz(quiz => { + quiz.name = e.target.value; + })} + /> + + Текст + + updateQuiz(quiz => { + quiz.config.startpage.description = e.target.value; + })} + /> + + Текст кнопки + + updateQuiz(quiz => { + quiz.config.startpage.button = e.target.value; + })} + /> + + Телефон + + updateQuiz(quiz => { + quiz.config.info.phonenumber = e.target.value; + })} + /> + updateQuiz(quiz => { + quiz.config.info.clickable = e.target.checked; + })} + /> + + Название или слоган компании + + updateQuiz(quiz => { + quiz.config.info.orgname = e.target.value; + })} + /> + + Сайт + + updateQuiz(quiz => { + quiz.config.info.site = e.target.value; + })} + /> + + Юридическая информация + + updateQuiz(quiz => { + quiz.config.info.law = e.target.value; + })} + /> + + + )} + + + {isSmallMonitor && ( + + {formState === "content" && ( + + )} + {formState === "design" && ( + + )} - )} - - )} - {/*Правая сторона*/} - - {!isTablet && isSmallMonitor && formState === "design" && ( - <> - - - Логотип - - - - - - Favicon - - - - - - 5 MB максимум - - - - )} - {(!isSmallMonitor || (isSmallMonitor && formState === "content")) && ( - <> - - Заголовок - - - updateQuizesList(params, { name: e.target.value }) - } - /> - - Текст - - - - Текст кнопки - - - - Телефон - - - { - let SPageClone = listQuizes[params].config; - SPageClone.info.clickable = e.target.checked; - updateQuizesList(params, { config: SPageClone }); - }} - /> - - Название или слоган компании - - - - Сайт - - - - Юридическая информация - - - - - )} - - - {isSmallMonitor && ( - - {formState === "content" && ( - - )} - {formState === "design" && ( - - )} - - )} - - + Отключить стартовую страницу + + } + checkedIcon={ + + } + sx={{ + borderRadius: 0, + padding: 0, + }} + onChange={e => updateQuiz(quiz => { + quiz.config.noStartPage = e.target.checked; + })} + checked={quiz.config.noStartPage} + /> + } + label="" + sx={{ + color: theme.palette.brightPurple.main, + margin: "0", + userSelect: "none", + justifyContent: "flex-end", + }} + /> - } - checkedIcon={ - - } - sx={{ - borderRadius: 0, - padding: 0, - }} - onChange={(e) => { - let SPageClone = listQuizes[params].config; - SPageClone.noStartPage = e.target.checked; - updateQuizesList(params, { config: SPageClone }); - }} - checked={listQuizes[params].config.noStartPage} - /> - } - label="" - sx={{ - color: theme.palette.brightPurple.main, - margin: "0", - userSelect: "none", - justifyContent: "flex-end", - }} - /> - - - {createPortal(, document.body)} - - ); + + {createPortal(, document.body)} + + ); } function IconCheck() { - return ( - - ); + return ( + + ); } diff --git a/src/pages/startPage/dropZone.tsx b/src/pages/startPage/dropZone.tsx index a9036853..ac9ce698 100644 --- a/src/pages/startPage/dropZone.tsx +++ b/src/pages/startPage/dropZone.tsx @@ -1,151 +1,130 @@ import { useState } from "react"; -import { useParams } from "react-router-dom"; import { - Box, - ButtonBase, - useTheme, - Typography, - SxProps, - Theme, + Box, + ButtonBase, + useTheme, + Typography, + SxProps, + Theme, } from "@mui/material"; import { SnackbarProvider, enqueueSnackbar } from "notistack"; - -import { quizStore } from "@root/quizes"; - import UploadIcon from "@icons/UploadIcon"; +import { useCurrentQuiz } from "@root/quizes/hooks"; + interface Props { - text?: string; - sx?: SxProps; - heightImg: string; - widthImg?: string; + text?: string; + sx?: SxProps; + heightImg: string; + widthImg?: string; } //Научи функцию принимать данные для валидации export const DropZone = ({ text, sx, heightImg, widthImg }: Props) => { - const quizId = Number(useParams().quizId); - const { listQuizes, updateQuizesList } = quizStore(); - const [ready, setReady] = useState(false); - const theme = useTheme(); - const quiz = listQuizes[quizId]; - console.log(quiz.config.startpage.background.desktop); + const theme = useTheme(); + const { quiz, updateQuiz } = useCurrentQuiz(); + const [ready, setReady] = useState(false); - const imgHC = (imgInp: HTMLInputElement) => { - const file = imgInp.files?.[0]; - if (file) { - if (file.size < 5242880) { - updateQuizesList(quizId, { - config: { - ...quiz.config, - startpage: { - ...quiz.config.startpage, - background: { - ...quiz.config.startpage.background, - desktop: URL.createObjectURL(file), - }, - }, - }, - }); - } else { - enqueueSnackbar("Размер картинки слишком велик"); - } - } - }; + if (!quiz) return null; // TODO throw and catch with error boundary - const dragenterHC = () => { - setReady(true); - }; + const imgHC = (imgInp: HTMLInputElement) => { + const file = imgInp.files?.[0]; + if (file) { + if (file.size < 5242880) { + updateQuiz(quiz => { + quiz.config.startpage.background.desktop = URL.createObjectURL(file); + }); + } else { + enqueueSnackbar("Размер картинки слишком велик"); + } + } + }; - const dragexitHC = () => { - setReady(false); - }; + const dragenterHC = () => { + setReady(true); + }; - const dropHC = (event: React.DragEvent) => { - event.preventDefault(); - setReady(false); + const dragexitHC = () => { + setReady(false); + }; - const file = event.dataTransfer.files[0]; - if (file.size < 5242880) { - updateQuizesList(quizId, { - config: { - ...quiz.config, - startpage: { - ...quiz.config.startpage, - background: { - ...quiz.config.startpage.background, - desktop: URL.createObjectURL(file), - }, - }, - }, - }); - } else { - enqueueSnackbar("Размер картинки слишком велик"); - } - }; + const dropHC = (event: React.DragEvent) => { + event.preventDefault(); + setReady(false); - const dragOverHC = (event: React.DragEvent) => { - event.preventDefault(); - }; + const file = event.dataTransfer.files[0]; + if (file.size < 5242880) { + updateQuiz(quiz => { + quiz.config.startpage.background.desktop = URL.createObjectURL(file); + }); + } else { + enqueueSnackbar("Размер картинки слишком велик"); + } + }; - return ( - - imgHC(event.target)} - hidden - accept="image/*" - multiple - type="file" - /> - - - - {text} - - - {quiz.config.startpage.background.desktop && ( - img - )} - - - ); + const dragOverHC = (event: React.DragEvent) => { + event.preventDefault(); + }; + + return ( + + imgHC(event.target)} + hidden + accept="image/*" + multiple + type="file" + /> + + + + {text} + + + {quiz.config.startpage.background.desktop && ( + img + )} + + + ); };