первый стор для создания квизов

package-lock.json

@@ -25,7 +25,8 @@
                 "react-router-dom": "^6.6.2",
                 "react-scripts": "5.0.1",
                 "typescript": "^4.4.2",
-                "web-vitals": "^2.1.0"
+                "web-vitals": "^2.1.0",
+                "zustand": "^4.3.8"
             },
             "devDependencies": {
                 "craco-alias": "^3.0.1"
@@ -16624,6 +16625,14 @@
                 "requires-port": "^1.0.0"
             }
         },
+        "node_modules/use-sync-external-store": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+            "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/util-deprecate": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -17675,6 +17684,29 @@
             "funding": {
                 "url": "https://github.com/sponsors/sindresorhus"
             }
+        },
+        "node_modules/zustand": {
+            "version": "4.3.8",
+            "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.8.tgz",
+            "integrity": "sha512-4h28KCkHg5ii/wcFFJ5Fp+k1J3gJoasaIbppdgZFO4BPJnsNxL0mQXBSFgOgAdCdBj35aDTPvdAJReTMntFPGg==",
+            "dependencies": {
+                "use-sync-external-store": "1.2.0"
+            },
+            "engines": {
+                "node": ">=12.7.0"
+            },
+            "peerDependencies": {
+                "immer": ">=9.0",
+                "react": ">=16.8"
+            },
+            "peerDependenciesMeta": {
+                "immer": {
+                    "optional": true
+                },
+                "react": {
+                    "optional": true
+                }
+            }
         }
     },
     "dependencies": {
@@ -29355,6 +29387,12 @@
                 "requires-port": "^1.0.0"
             }
         },
+        "use-sync-external-store": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+            "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+            "requires": {}
+        },
         "util-deprecate": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -30173,6 +30211,14 @@
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
             "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+        },
+        "zustand": {
+            "version": "4.3.8",
+            "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.3.8.tgz",
+            "integrity": "sha512-4h28KCkHg5ii/wcFFJ5Fp+k1J3gJoasaIbppdgZFO4BPJnsNxL0mQXBSFgOgAdCdBj35aDTPvdAJReTMntFPGg==",
+            "requires": {
+                "use-sync-external-store": "1.2.0"
+            }
         }
     }
 }

package.json

@@ -20,7 +20,8 @@
         "react-router-dom": "^6.6.2",
         "react-scripts": "5.0.1",
         "typescript": "^4.4.2",
-        "web-vitals": "^2.1.0"
+        "web-vitals": "^2.1.0",
+        "zustand": "^4.3.8"
     },
     "scripts": {
         "start": "craco start",

src/pages/createQuize/MyQuizzesFull.tsx

@@ -1,17 +1,17 @@
-import {Typography, useTheme, Box, Button, SxProps, Theme} from "@mui/material";
+import {Typography, Box, Button, SxProps, Theme} from "@mui/material";
 import ComplexNavText from "./ComplexNavText";
 import QuizCard from "./QuizCard";
 import SectionWrapper from "@ui_kit/SectionWrapper";
 import React from "react";
-
+import {quizStore} from "@root/quizes";
 interface Props {
     outerContainerSx?: SxProps<Theme>;
     children?: React.ReactNode;
 }
 
 export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
-    const theme = useTheme();
+    const store = quizStore.getState()
-
+    console.log(Object.values(store))
     return (
         <SectionWrapper
             maxWidth="lg"
@@ -44,8 +44,11 @@ export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
                     mb: "60px",
                 }}
             >
-                <QuizCard name="Название" openCount={0} applicationCount={0} conversionPercent={0}/>
+                {Object.values(store).map((e, i) =>(
-                <QuizCard name="Название" openCount={0} applicationCount={0} conversionPercent={0}/>
+                    <QuizCard name={e.name} openCount={0} applicationCount={0} conversionPercent={0}/>
+                    )
+                )}
+
             </Box>
             {children}
         </SectionWrapper>

src/stores/quizes.ts

@@ -0,0 +1,87 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface QuizStore {
+    [key: number]: Quizes;
+
+}
+
+interface Quizes {
+    id: number,
+    qid: string,
+    deleted: boolean,
+    archived: boolean,
+    fingerprinting: boolean,
+    repeatable: boolean,
+    note_prevented: boolean,
+    mail_notifications: boolean,
+    "unique_answers": boolean,
+    name: string,
+    description: string,
+    config: string,
+    status: string,
+    limit: number,
+    due_to: number,
+    time_of_passing: number,
+    pausable: boolean,
+    version: number,
+    version_comment: string,
+    created_at: string,
+    updated_at: string,
+    question_cnt: number,
+    passed_count: number,
+    average_time: number,
+    super: true,
+    group_id: number
+}
+
+export const quizStore = create<QuizStore>()(
+    persist(
+        (set, get) => ({
+                1: {
+                    "id": 0,
+                    "qid": "string",
+                    "deleted": false,
+                    "archived": true,
+                    "fingerprinting": true,
+                    "repeatable": true,
+                    "note_prevented": true,
+                    "mail_notifications": true,
+                    "unique_answers": true,
+                    "name": "string",
+                    "description": "string",
+                    "config": "string",
+                    "status": "string",
+                    "limit": 0,
+                    "due_to": 0,
+                    "time_of_passing": 0,
+                    "pausable": true,
+                    "version": 0,
+                    "version_comment": "string",
+                    "created_at": "string",
+                    "updated_at": "string",
+                    "question_cnt": 0,
+                    "passed_count": 0,
+                    "average_time": 0,
+                    "super": true,
+                    "group_id": 0
+                }
+        }),
+        {
+            name: "quizes",
+        }
+    )
+);
+
+// export const Update = (newQuiz: Quizes) => {
+//
+//     const state = quizStore.getState();
+//     if (typeof state[newQuiz.id] !== "undefined") {
+// //ключ есть
+//     }else{
+//         quizStore.setState(state => {newQuiz.id: newQuiz})
+//     }
+//     quizStore.setState({
+//
+//     });
+// }

tsconfig.extend.json

@@ -7,6 +7,9 @@
       ],
       "@icons/*":[
         "./assets/icons/*"
+      ],
+      "@root/*": [
+        "./stores/*"
       ]
     }
   }