Смена вёрстки на версию Глеба. Начало сохранения состояния в localeStorage

src/create/createQuestion.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { useField, Form, FormikProps, Formik } from 'formik';
 import {
-    Select, Textarea, VStack, Checkbox, Button,
+    Select, Textarea, VStack, Checkbox, Button, HStack,
 } from '@chakra-ui/react'
 import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File
-import Description from "./description";
 import Settings from "./settings";
-import Types from "./types";
+import WorkSpace from "./workSpace";
-
+import Header from "./header";
+import { saveCondition, getCondition } from "./lsBacking";
+import type {ElementsOfObject} from "./questionTypes"
 //Значения, собираемые для отправки на бэк
 interface Values {
     title: string;
@@ -15,13 +16,7 @@ interface Values {
     children: string;
     description: string;
 }
-//Поля объектов, используемых для отображения созданных пользователем инструментов
+
-interface ElementsOfObject {
-    text: string;
-    id: number;
-    isFocus: boolean;
-    color?: string;
-}
 
 const types = [
     {desc:"текст", value:"text"},
@@ -108,7 +103,6 @@ const getIndexById = (id:number, array:Array<ElementsOfObject>):number => {
 
 export default () => {
 
-
     const [type, setType] = React.useState<number>(4)
     const [stockroom, setStockroom] = React.useState<Array<ElementsOfObject>>([])
     const [focus, setFocus] = React.useState<number | undefined>() //Хранит id объекта
@@ -118,6 +112,8 @@ export default () => {
     const typeHC = (value:number): void => {
         setType(value)
         setStockroom([])
+        saveCondition("type", value)
+        saveCondition("stockroom", [])
     }
     const changeFocus = (id: number): void => {
         //Не менять фокус если снова выбрано то же окно
@@ -133,6 +129,7 @@ export default () => {
 
             //Устанавливаем новый фокус и пересоздаём массив
             setFocus(id)
+            saveCondition("focus", id)
 
             newArr[index].isFocus = true
             setStockroom([...newArr])
@@ -142,17 +139,19 @@ export default () => {
         if (focus !== undefined) {
             let index = getIndexById(focus, stockroom)
 
-            let list = stockroom
+            let newArr = stockroom
-            list[index].color = color
+            newArr[index].color = color
-            setStockroom([...list])
+            setStockroom([...newArr])
+            saveCondition("stockroom", newArr)
         }
     }
     const changeText = (text: string): void => {
         if (focus !== undefined) {
             let index = getIndexById(focus, stockroom)
-            let list = stockroom
+            let newArr = stockroom
-            list[index].text = text
+            newArr[index].text = text
-            setStockroom([...list])
+            setStockroom([...newArr])
+            saveCondition("stockroom", newArr)
         }
     }
 
@@ -172,6 +171,7 @@ export default () => {
         if (focus === undefined){ //фокуса нет - добавляем в конец массива
             newArr.push(obj)
             setStockroom([...newArr])
+            saveCondition("stockroom", newArr)
             //Говорим стейту с фокусом, что фокус изменился
             setFocus(newArr.length - 1)
         } else { //фокус есть - добавляем после объекта с фокусом
@@ -181,6 +181,7 @@ export default () => {
             //Говорим стейту с фокусом, что фокус изменился
             setFocus(index + 1)
             setStockroom([...newArr])
+            saveCondition("stockroom", newArr)
         }
     }
     const deleteObject = (id: number): void => {
@@ -194,6 +195,7 @@ export default () => {
             let newArr = stockroom
             newArr.splice(index, 1)
             setStockroom([...newArr])
+            saveCondition("stockroom", newArr)
         }
     }
 
@@ -209,36 +211,56 @@ export default () => {
 
                 onSubmit={(values, actions) => {
                     console.log(JSON.stringify(values))
+                    console.log(getCondition())
                 }}
             >
                 {(props: FormikProps<Values>) => (
 
                     <Form>
-                        <VStack>
+                        <Header/>
-                            <TextField placeholder="Заголовок" name="title" type="text" />
+                        <HStack
-                            <Description name="description"/>
+                            justifyContent="space-between"
-                            <Types
+                            alignItems="normal"
-                                type={type}
+                        >
-                                stockroom={stockroom}
+                            <VStack
-                                changeFocus={changeFocus}
+                                minWidth="200px"
-                            />
+                                bgColor="lightgray"
-                        </VStack>
+                                height="98vh"
+                                padding="10px"
+                                >
 
-                        <Settings
+                            </VStack>
-                            types={types}
+
-                            stockroom={stockroom}
+                            <VStack>
-                            typeHC={typeHC}
+                                <WorkSpace
-                            type={type}
+                                    type={type}
-                            focus={focus}
+                                    stockroom={stockroom}
-                            changeFocus={changeFocus}
+                                    changeFocus={changeFocus}
-                            changeBgColor={changeBgColor}
+                                />
-                            changeText={changeText}
+                            </VStack>
-                            getIndexById={getIndexById}
+
-                            createObject={createObject}
+                            <VStack
-                            deleteObject={deleteObject}
+                                minWidth="200px"
-                        />
+                                bgColor="lightgray"
+                                height="98vh"
+                                padding="10px"
+                                >
+                                <Settings
+                                    types={types}
+                                    stockroom={stockroom}
+                                    typeHC={typeHC}
+                                    type={type}
+                                    focus={focus}
+                                    changeFocus={changeFocus}
+                                    changeBgColor={changeBgColor}
+                                    changeText={changeText}
+                                    getIndexById={getIndexById}
+                                    createObject={createObject}
+                                    deleteObject={deleteObject}
+                                />
+                            </VStack>
+                        </HStack>
                     </Form>
-
                 )}
             </Formik>
         </>

src/create/header.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {HStack} from "@chakra-ui/react";
+
+export default () => {
+    return(
+        <HStack
+            height="2vh"
+            bgColor="gray"
+
+        >
+
+        </HStack>
+    )
+}

src/create/lsBacking.tsx

@@ -0,0 +1,18 @@
+export function saveCondition (key:string, value:any) {
+    let ls : any = window.localStorage.getItem("condition")
+    if (ls !== null) {
+        ls = JSON.parse(ls)
+    } else {
+        ls = {}
+    }
+    ls[key] = value
+    localStorage.setItem("condition", JSON.stringify(ls))
+}
+export function getCondition () {
+    let ls : any = window.localStorage.getItem("condition")
+    if (ls !== null) {
+        return JSON.parse(ls)
+    } else {
+        return null
+    }
+}

src/create/questionTypes.tsx

@@ -0,0 +1,19 @@
+//Поля объектов, используемых для отображения созданных пользователем инструментов
+interface ElementsOfObject {
+    text?: string;
+    id: number;
+    isFocus: boolean;
+    color?: string;
+}
+interface QuestionProps {
+    type: number;
+    stockroom: Array<ElementsOfObject>;
+    focus: number;
+    changeFocus: (id?: number) => void;
+    changeBgColor: (text?:string) => void;
+    changeText: (text?:string) => void;
+    createObject?: (obj?:ElementsOfObject) => void;
+    deleteObject: (id?:number) => void;
+    getIndexById: (id?:number, array?:ElementsOfObject) => number;
+}
+export type {ElementsOfObject, QuestionProps}

src/create/settings.tsx

@@ -5,15 +5,7 @@ import Buttons from "./tools/buttons"
 export default (props: any) => {
 
     return (
-        <Container
+        <>
-            bgColor="lightgray"
-            padding="10px"
-            minWidth="100%"
-            maxHeight="45vh"
-            borderRadius="5px"
-            position="fixed"
-            bottom={0}
-        >
             <Select
                 placeholder='тип вопроса'
                 value={props.type}
@@ -27,7 +19,6 @@ export default (props: any) => {
                     ))
                 }
             </Select>
-            <Box>
                 <Buttons
                     stockroom={props.stockroom}
                     focus={props.focus}
@@ -39,7 +30,6 @@ export default (props: any) => {
                     getIndexById={props.getIndexById}
                 />
                 <Button type="submit">Создать вопрос</Button>
-            </Box>
+        </>
-        </Container>
     )
 }

src/create/tools/buttons.tsx

@@ -3,23 +3,9 @@ import { Button, VStack, HStack, Textarea} from "@chakra-ui/react";
 import {ChromePicker} from "react-color";
 import Viewer from "./viewer";
 import { useSnackbar } from 'notistack';
-interface ElementOfObject {
+import type {ElementsOfObject, QuestionProps} from "../questionTypes"
-    text: string;
-    isFocus: boolean;
-    color?: string;
-}
-interface Component {
-    stockroom: any;
-    focus: number;
-    changeFocus: (id: number) => void;
-    changeBgColor: (text:string) => void;
-    changeText: (text:string) => void;
-    createObject: (obj:ElementOfObject) => void;
-    deleteObject: (id:number) => void;
-    getIndexById: (id:number, array:ElementOfObject) => number;
-}
 
-export default ({stockroom, focus, changeFocus, changeText, changeBgColor, createObject, deleteObject, getIndexById}: Component) => {
+export default ({stockroom = [], focus, changeFocus, changeText, changeBgColor, createObject, deleteObject, getIndexById}: any) => {
     const { enqueueSnackbar, closeSnackbar } = useSnackbar();
 
     let current
@@ -32,10 +18,7 @@ export default ({stockroom, focus, changeFocus, changeText, changeBgColor, creat
     }
 
     return(
-        <HStack
+        <>
-            overflow="auto"
-            padding="5px"
-        >
 
             <ChromePicker
                 disableAlpha
@@ -77,7 +60,7 @@ export default ({stockroom, focus, changeFocus, changeText, changeBgColor, creat
                         <VStack style={{
                             boxShadow:"rgba(0, 0, 0, 0.3) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 8px",
                             padding:"5px",
-                            width:"400px",
+                            width:"150px",
                             borderRadius:"4px",
                             maxHeight:"30vh",
                             overflow:"auto",
@@ -89,6 +72,6 @@ export default ({stockroom, focus, changeFocus, changeText, changeBgColor, creat
                             />
                         </VStack>
                 }
-        </HStack>
+        </>
     )
 }

src/create/types.tsx

@@ -3,9 +3,11 @@ import {
     Select, Checkbox, Button,
 } from '@chakra-ui/react'
 import {TextField} from "./createQuestion";
+import type {QuestionProps} from "./questionTypes"
 
-export default (props:any) => {
+export default ({type, stockroom = [], changeFocus} : any) => {
-    switch(props.type) {
+
+    switch(type) {
         case 0://Тип вопроса - текст?
             return (<TextField name="text" placeholder="текст" type="text" />)
             break;
@@ -13,7 +15,7 @@ export default (props:any) => {
             return (
                 <Select>
                     {
-                        props.stockroom.map((e: any, i: number) => {
+                        stockroom.map((e: any, i: number) => {
                             return <option key={i}>{e.text}</option>
                         })
                     }
@@ -24,7 +26,7 @@ export default (props:any) => {
             return(
                 <>
                     {
-                        props.stockroom.map((e:any, i:number) => {
+                        stockroom.map((e:any, i:number) => {
                             return <Checkbox key={i}>{e.text}</Checkbox>
                         })
                     }
@@ -38,12 +40,12 @@ export default (props:any) => {
             return(
                 <>
                     {
-                        props.stockroom.map((e:any, i:number) => {
+                        stockroom.map((e:any, i:number) => {
                             return <Button
                                 backgroundColor={e.color}
                                 key={i}
                                 onClick={(event: any) => {
-                                    props.changeFocus(e.id)
+                                    changeFocus(e.id)
                                     event.target.blur()
                                 }}
                             >{e.text}</Button>

src/create/workSpace.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Types from "./types"
+import {QuestionProps} from "./questionTypes";
+import Description from "./description";
+import {TextField} from "./createQuestion";
+
+export default ({type, stockroom, changeFocus} : any) => {
+    //компонент для разворачивания вёрстки из хранилища
+    return(
+    <>
+        <TextField placeholder="Заголовок" name="title" type="text" />
+        <Description name="description"/>
+        <Types
+            type={type}
+            stockroom={stockroom}
+            changeFocus={changeFocus}
+        />
+    </>
+    )
+}