отрисовка от плоских данных к вложенным в создании вопроса

src/create/createQuestion.tsx

@@ -218,8 +218,25 @@ export default () => {
             if (stockroom[index].isFocus) {
                 setFocus(undefined)
             }
-            let newArr = stockroom
+
-            newArr.splice(index, 1)
+            let newArr:any = []
+            //Если удалённый объект был хранилищем (контейнером, или селектом), мы не вложим в новый массив его и его потомков
+            if (stockroom[index].type === 1 || stockroom[index].type === 7) {
+                stockroom.forEach((e:any, i:number) => {
+                    if (e.id !== id) {
+                        if (e.parent !== id) {
+                            newArr.push(e)
+                        } else {
+                            if (e.isFocus) {
+                                setFocus(undefined)
+                            }
+                        }
+                    }
+                })
+            } else {
+                newArr = stockroom
+                newArr.splice(index, 1)
+            }
             setStockroom([...newArr])
             saveCondition("stockroom", newArr)
         }
@@ -237,7 +254,7 @@ export default () => {
                 onSubmit={(values, actions) => {
                     // console.log(JSON.stringify(values))
                     console.log(getCondition())
-                    console.log(focus)
+                    console.log(stockroom)
                 }}
             >
                 {(props: FormikProps<Values>) => (

src/create/viewer.tsx

@@ -27,7 +27,7 @@ export default (props:any) => {
                                 e.type === 5 ?
                                     <Text>Описание</Text>
                                     :
-                                    <Text>{e.text}</Text>
+                                    <Text>{e.text} {e.id}</Text>
                             }
 
                             <Button

src/create/workSpace.tsx

@@ -7,26 +7,104 @@ import {Box} from "@chakra-ui/react";
 
 export default ({stockroom, changeFocus} : any) => {
     if (stockroom.length !== 0) {
-        // Перед работой проверяем все вложенности. На основе хранилища с плоскими объектами строится хранилище с вложенностями.
+        // На основе хранилища с плоскими объектами строится хранилище с вложенностями.
-        let newStorage:any = []
 
-        stockroom.forEach((e:any,i:number) => {
+        console.log("строю с нуля на основании этого массива")
-            if (e.parent === undefined) {
+        console.log(stockroom)
-                newStorage.push(e)
+
-            } else {
+        //Мы разворачиваем стартовый массив и вкладываем элементы в начало результирующего массива.
-                newStorage.forEach()
+        let reverseStockroom: any
+        let arrayStorage: any = {}
+        let newStorage: any = []
+
+        //Создаём хранилище со всеми вложенностями. Ключи - id родителя
+        stockroom.reverse().forEach((e: any, i: number) => {
+            if (e.parent !== undefined) {
+                if (arrayStorage[e.parent] === undefined) {
+                    arrayStorage[e.parent] = []
+                }
+                arrayStorage[e.parent].unshift(e)
             }
         })
 
-        return(
+        //Если есть какие-то вложенности
-            <Types
+        if (Object.keys(arrayStorage).length !== 0) {
-                element={stockroom[0]} keyInfo={0} changeFocus={changeFocus}
+            //Теперь у нас есть массив со всеми вложенностями.
-            />
+
-        )
+            //Будем проходиться по хранилищу задом наперёд, ибо не имеем пометок где заканчивается хранилище, но знаем где оно начинается
+            reverseStockroom = stockroom.reverse();
+
+            //Важно помнить, что мы проходимся по массиву линейно и совпадение id текущего элемента и id в arrayStorage может быть единожды.
+            //Это значит, что найдя id в arrayStorage мы можем что-либо сделать с этим массивом и больше уже больше никогда его не тронем.
+            //Возможны 4 состояния объекта:
+            //родитель_дети
+            //нет_______нет - просто вложить в результирующий массив
+            //нет________да - вложить в результирующий массив с полем children
+            //да________нет - этот объект уже был использован в массиве arrayStorage. Оставить в покое
+            //да_________да - этот объект уже был использован в массиве arrayStorage. В его поле children нужно вложить массив его детей
+            // в массиве arrayStorage вложить в поле children родителя массив с детьми и ждать, пока очередь дойдёт до родителя
+
+            reverseStockroom.forEach((e: any, i: number) => {
+                if (arrayStorage[e.id] === undefined) {
+                    //Объект не содержит потомков. Дети - нет
+                    if (e.parent === undefined) {
+                        //Родитель - нет
+                        newStorage.push(e)
+                    } //else Родитель - да
+                } else {
+                    //Объект содержит потомков. Дети - да
+                    if (e.parent === undefined) { //является ли объект вложенным?
+                        //Родитель - нет
+                        e.children = arrayStorage[e.id]
+                        newStorage.push(e)
+                    } else {
+                        //Родитель - да
+                        arrayStorage[e.parent].forEach((el:any) => {
+                            if (el.id === e.id) {
+                                el.children = arrayStorage[e.id]
+                            }
+                        })
+                    }
+                }
+            })
+            console.log("Я нашёл вложенности")
+            console.log(newStorage)
+            function isContains (e:any) {
+                return(
+                    e.map((element:any) => {
+                        console.log(element)
+                        if (element.children === undefined) {
+                            console.log("элемент без потомков")
+                            return(
+                                <Types
+                                    element={element} keyInfo={element.id} changeFocus={changeFocus} key={element.id}
+                                />
+                            )
+                        } else {
+                            console.log("элемент с потомками")
+                            return(
+                                <div key={element.id} style={{border:"solid black 1px", padding: "10px"}}>
+                                    {isContains(element.children)}
+                                </div>
+                            )
+                        }
+                    })
+                )
+            }
+
+            return isContains(newStorage)
+        } else {
+            //Если вложенностей нет
+            console.log("Вложенностей нет")
+            return(stockroom.map((e: any, i: number) => {
+                return (
+                    <Types
+                        element={e} keyInfo={e.id} changeFocus={changeFocus} key={e.id}
+                    />
+                )
+            }))
+        }
     } else {
-        return null
+        return <></>
     }
 }
-// if (e.type === 1 || e.type === 7) {
-//
-// }

src/index.tsx

@@ -13,7 +13,7 @@ const root = ReactDOM.createRoot(
 );
 root.render(
 
-  <React.StrictMode>
+  // <React.StrictMode>
       <ChakraProvider>
           <SnackbarProvider maxSnack={3}>
               <BrowserRouter>
@@ -26,5 +26,5 @@ root.render(
               </BrowserRouter>
           </SnackbarProvider>
         </ChakraProvider>
-  </React.StrictMode>
+  // </React.StrictMode>
 );