feat(UserData fecthed in userProfile): tanstack query

package-lock.json

@@ -14,6 +14,7 @@
         "@premieroctet/next-crud": "^2.2.0",
         "@prisma/client": "^4.11.0",
         "@reduxjs/toolkit": "^1.9.3",
+        "@tanstack/react-query": "^4.28.0",
         "@types/react": "18.0.28",
         "@types/react-dom": "18.0.11",
         "bcrypt": "^5.1.0",
@@ -29,6 +30,7 @@
         "react-dom": "18.2.0",
         "react-hook-form": "^7.43.5",
         "react-icons": "^4.8.0",
+        "react-query": "^3.39.3",
         "socket.io": "^4.6.1",
         "socket.io-client": "^4.6.1"
       },
@@ -2173,6 +2175,41 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "4.27.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.27.0.tgz",
+      "integrity": "sha512-sm+QncWaPmM73IPwFlmWSKPqjdTXZeFf/7aEmWh00z7yl2FjqophPt0dE1EHW9P1giMC5rMviv7OUbSDmWzXXA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "4.28.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.28.0.tgz",
+      "integrity": "sha512-8cGBV5300RHlvYdS4ea+G1JcZIt5CIuprXYFnsWggkmGoC0b5JaqG0fIX3qwDL9PTNkKvG76NGThIWbpXivMrQ==",
+      "dependencies": {
+        "@tanstack/query-core": "4.27.0",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-native": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -2870,6 +2907,14 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/big-integer": {
+      "version": "1.6.51",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
+      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -2901,6 +2946,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/broadcast-channel": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
+      "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "detect-node": "^2.1.0",
+        "js-sha3": "0.8.0",
+        "microseconds": "0.2.0",
+        "nano-time": "1.0.0",
+        "oblivious-set": "1.0.0",
+        "rimraf": "3.0.2",
+        "unload": "2.2.0"
+      }
+    },
     "node_modules/buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@@ -3441,6 +3501,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@@ -5408,6 +5473,11 @@
         "url": "https://opencollective.com/js-sdsl"
       }
     },
+    "node_modules/js-sha3": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
+      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -5691,6 +5761,15 @@
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
       "dev": true
     },
+    "node_modules/match-sorter": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz",
+      "integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "remove-accents": "0.4.2"
+      }
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -5717,6 +5796,11 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/microseconds": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
+      "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -5820,6 +5904,14 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
+    "node_modules/nano-time": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
+      "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
+      "dependencies": {
+        "big-integer": "^1.6.16"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -6241,6 +6333,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/oblivious-set": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
+      "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
+    },
     "node_modules/oidc-token-hash": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/oidc-token-hash/-/oidc-token-hash-5.0.1.tgz",
@@ -6831,6 +6928,31 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-query": {
+      "version": "3.39.3",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
+      "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "broadcast-channel": "^3.4.1",
+        "match-sorter": "^6.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
@@ -7091,6 +7213,11 @@
         "url": "https://github.com/sponsors/mysticatea"
       }
     },
+    "node_modules/remove-accents": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
+      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
+    },
     "node_modules/replace-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/replace-string/-/replace-string-3.1.0.tgz",
@@ -8008,6 +8135,15 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/unload": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
+      "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2",
+        "detect-node": "^2.0.4"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -8057,6 +8193,14 @@
         }
       }
     },
+    "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",

package.json

@@ -15,6 +15,7 @@
     "@premieroctet/next-crud": "^2.2.0",
     "@prisma/client": "^4.11.0",
     "@reduxjs/toolkit": "^1.9.3",
+    "@tanstack/react-query": "^4.28.0",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "bcrypt": "^5.1.0",
@@ -30,6 +31,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.5",
     "react-icons": "^4.8.0",
+    "react-query": "^3.39.3",
     "socket.io": "^4.6.1",
     "socket.io-client": "^4.6.1"
   },

src/components/LoadingPage.jsx

@@ -0,0 +1,21 @@
+import { Flex, Spinner } from "@chakra-ui/react";
+
+export default function LoadingPage() {
+  return (
+    <Flex
+      justifyContent="center"
+      alignItems="center"
+      height="100vh"
+      width="100vw"
+      bg="gray.100"
+    >
+      <Spinner
+        thickness="4px"
+        speed="0.65s"
+        emptyColor="gray.200"
+        color="purple.500"
+        size="xl"
+      />
+    </Flex>
+  );
+}

src/components/layout/user_profile/ModalChoosePassion.jsx

@@ -10,21 +10,19 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-  Text,
-  useCheckbox,
   useCheckboxGroup,
   useDisclosure,
   useToast,
 } from "@chakra-ui/react";
-import { useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
 import { RiEditBoxLine } from "react-icons/ri";
 import CustomCheckbox from "./CustomCheckbox";
 
 export default function ModalChoosePassion(props) {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { user, passions } = props;
-  const toast = useToast();
+  const toast = useToast({ position: "top", isClosable: true });
+  const client = useQueryClient();
 
   const { value, getCheckboxProps } = useCheckboxGroup({
     defaultValue: user.PassionID,
@@ -46,8 +44,8 @@ export default function ModalChoosePassion(props) {
           title: "Centres d'intérêts mis à jour",
           status: "success",
           duration: 9000,
-          isClosable: true,
         });
+        client.invalidateQueries("user");
         onClose();
       })
       .catch((err) => {
@@ -98,7 +96,9 @@ export default function ModalChoosePassion(props) {
             <Button
               colorScheme="purple"
               mr={3}
-              onClick={() => savePassions(value)}
+              onClick={() => {
+                savePassions(value);
+              }}
             >
               Save
             </Button>

src/components/layout/user_profile/ModalModifyImages.jsx

@@ -13,8 +13,10 @@ import {
   ModalHeader,
   ModalOverlay,
   useDisclosure,
+  useQuery,
   useToast,
 } from "@chakra-ui/react";
+import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
 import { RiEditBoxLine } from "react-icons/ri";
 
@@ -22,7 +24,9 @@ export default function ModalModifyImages(props) {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { images, user, userData, setUserData } = props;
   const [listImage, setlistImage] = useState(images);
-  const toast = useToast();
+  const toast = useToast({ position: "top", isClosable: true });
+
+  const client = useQueryClient();
 
   const uploadImage = async (file) => {
     const body = new FormData();
@@ -187,10 +191,7 @@ export default function ModalModifyImages(props) {
               colorScheme="purple"
               mr={3}
               onClick={(e) => {
-                setUserData({
+                client.invalidateQueries("user");
-                  ...userData,
-                  images: [...listImage],
-                });
                 onClose();
               }}
             >

src/pages/_app.tsx

@@ -1,14 +1,22 @@
-import '@/styles/globals.css';
+import "@/styles/globals.css";
-import type {AppProps} from 'next/app';
+import type { AppProps } from "next/app";
-import {ChakraProvider} from '@chakra-ui/react';
+import { ChakraProvider } from "@chakra-ui/react";
-import { SessionProvider } from "next-auth/react"
+import { SessionProvider } from "next-auth/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-export default function App({Component, pageProps: { session, ...pageProps }}: AppProps) {
+const queryClient = new QueryClient();
+
+export default function App({
+  Component,
+  pageProps: { session, ...pageProps },
+}: AppProps) {
   return (
+    <QueryClientProvider client={queryClient}>
       <ChakraProvider>
         <SessionProvider session={session}>
           <Component {...pageProps} />
         </SessionProvider>
       </ChakraProvider>
+    </QueryClientProvider>
   );
 }

src/pages/admin/settings.tsx

@@ -1,91 +1,95 @@
 import {
-    Box,
+  Box,
-    Button,
+  Button,
-    Flex,
+  Flex,
-    FormControl,
+  FormControl,
-    FormErrorMessage,
+  FormErrorMessage,
-    FormLabel,
+  FormLabel,
-    Input,
+  Input,
-    useToast,
+  useToast,
-  } from '@chakra-ui/react';
+} from "@chakra-ui/react";
-import { useSession } from 'next-auth/react';
+import { useSession } from "next-auth/react";
-import { useRouter } from 'next/router';
+import { useRouter } from "next/router";
-import { useState } from 'react';
+import { useState } from "react";
-import { useForm } from 'react-hook-form';
+import { useForm } from "react-hook-form";
-  
-  export default function settings() {
 
-    const router = useRouter();
+export default function settings() {
-    const toast = useToast();
+  const router = useRouter();
+  const toast = useToast({ position: "top", isClosable: true });
 
-    const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
-    const {
+  const {
-        handleSubmit,
+    handleSubmit,
-        register,
+    register,
-        formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting },
-      } = useForm()
+  } = useForm();
 
-    const [userData, setUserData] = useState({});
+  const [userData, setUserData] = useState({});
 
-    const { data: session, status } = useSession();
+  const { data: session, status } = useSession();
-    if (status === "unauthenticated") router.push("/login");
+  if (status === "unauthenticated") router.push("/login");
 
-    if (status === "authenticated") {
+  if (status === "authenticated") {
-        const { user } = session as unknown as Session;
+    const { user } = session as unknown as Session;
 
-        if (user.role !== "ADMIN") router.push("/login");
+    if (user.role !== "ADMIN") router.push("/login");
 
-        const savePassion = (passion: any) => {
+    const savePassion = (passion: any) => {
-            const options = {
+      const options = {
-                method: "POST",
+        method: "POST",
-                headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json" },
-                body: JSON.stringify(passion),
+        body: JSON.stringify(passion),
-            };
+      };
-            
-            fetch(`/api/passions`, options)
-            .then((res) => {
-                setIsLoading(false);
-                toast({
-                  position:'top',
-                  title: `Passion ajoutée`,
-                  status: "success",
-                  isClosable: true,
-                });
-              })
-              .catch((err) => {
-                setIsLoading(false);
-                toast({
-                  title: `Erreur lors de l'ajout`,
-                  position :'top',
-                  status: "error",
-                  isClosable: true,
-                });
-              });
-        }
 
-        return (
+      fetch(`/api/passions`, options)
-        <>
+        .then((res) => {
-            <Box as="form" id='form_passion' width={"80%"} onSubmit={handleSubmit(savePassion)}>
+          setIsLoading(false);
-            <FormControl isInvalid={errors.name}>
+          toast({
-                <FormLabel htmlFor='passion'>Passion</FormLabel>
+            title: `Passion ajoutée`,
-                <Input
+            status: "success",
-                    id='passion'
+          });
-                    placeholder='passion'
+        })
-                    {...register('name', {
+        .catch((err) => {
-                        required: 'This is required',
+          setIsLoading(false);
-                    })}
+          toast({
-                />
+            title: `Erreur lors de l'ajout`,
-                <FormErrorMessage>
+            status: "error",
-                    {errors.name && errors.name.message}
+          });
-                </FormErrorMessage>
+        });
-            </FormControl>
+    };
-            <Button mt={4} colorScheme='purple' isLoading={isSubmitting} type='submit'>
+
-                Submit
+    return (
-            </Button>
+      <>
-            </Box>
+        <Box
-        </>
+          as="form"
-        );
+          id="form_passion"
-    }
+          width={"80%"}
+          onSubmit={handleSubmit(savePassion)}
+        >
+          <FormControl isInvalid={errors.name}>
+            <FormLabel htmlFor="passion">Passion</FormLabel>
+            <Input
+              id="passion"
+              placeholder="passion"
+              {...register("name", {
+                required: "This is required",
+              })}
+            />
+            <FormErrorMessage>
+              {errors.name && errors.name.message}
+            </FormErrorMessage>
+          </FormControl>
+          <Button
+            mt={4}
+            colorScheme="purple"
+            isLoading={isSubmitting}
+            type="submit"
+          >
+            Submit
+          </Button>
+        </Box>
+      </>
+    );
   }
-  
+}

src/pages/userProfile.tsx

@@ -18,7 +18,6 @@ import {
   FormErrorMessage,
   FormLabel,
   HStack,
-  Input,
   Radio,
   RadioGroup,
   Text,
@@ -29,15 +28,17 @@ import {
 import ModalModifyImages from "@/components/layout/user_profile/ModalModifyImages";
 import ModalChoosePassion from "@/components/layout/user_profile/ModalChoosePassion";
 import ProfileTagList from "@/components/layout/user_profile/ProfileTagList";
+import LoadingPage from "@/components/LoadingPage";
 
 import { useEffect, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
+import { useQuery } from "@tanstack/react-query";
 
 export default function UserProfile() {
   const router = useRouter();
-  const toast = useToast();
+  const toast = useToast({ position: "top", isClosable: true });
 
-  const [isLoading, setIsLoading] = useState(false);
+  const [currentlyLoading, setCurrentlyLoading] = useState(false);
   const [passions, setPassions] = useState(null);
 
   const {
@@ -58,320 +59,347 @@ export default function UserProfile() {
   }, []);
   // faire un useEffect ou je fetch user
 
-  const [userData, setUserData] = useState({});
-
   const { data: session, status } = useSession();
-  if (status === "unauthenticated") router.push("/login");
 
-  if (status === "authenticated") {
+  // if (status === "unauthenticated") router.push("/login");
-    const { user } = session as unknown as Session;
 
-    const getTextGender = (gender) => {
+  // if (status === "authenticated") {
-      switch (gender) {
+
-        case Gender.MALE:
+  const {
-          return "Homme";
+    isLoading,
-        case Gender.FEMALE:
+    isError,
-          return "Femme";
+    data: userData,
-        case Gender.OTHER:
+    error,
-          return "Autre";
+  } = useQuery({
-        case Gender.UNKNOWN:
+    queryKey: ["user"],
-          return "Non renseigné";
+    enabled: status === "authenticated",
+    queryFn: async () => {
+      const { user } = session as unknown as Session;
+
+      return fetch(`/api/users/${user.id}`)
+        .then((res) => res.json())
+        .catch((err) => {
+          return err;
+        });
+    },
+  });
+
+  if (isLoading) {
+    return <LoadingPage />;
+  }
+
+  if (isError) {
+    return <span>Error: {error.message}</span>;
+  }
+
+  const getTextGender = (gender) => {
+    switch (gender) {
+      case Gender.MALE:
+        return "Homme";
+      case Gender.FEMALE:
+        return "Femme";
+      case Gender.OTHER:
+        return "Autre";
+      case Gender.UNKNOWN:
+        return "Non renseigné";
+    }
+  };
+
+  const saveData = (values: any) => {
+    const trueValues = Object.keys(values).reduce((acc, key) => {
+      if (values[key] !== "" && values[key] !== undefined) {
+        acc[key] = values[key];
       }
+      return acc;
+    }, {});
+
+    const options = {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(trueValues),
     };
 
-    const saveData = (values: any) => {
+    if (Object.keys(trueValues).length > 0) {
-      const trueValues = Object.keys(values).reduce((acc, key) => {
+      setCurrentlyLoading(true);
-        if (values[key] !== "" && values[key] !== undefined) {
+      fetch(`/api/users/${userData.id}`, options)
-          acc[key] = values[key];
+        .then((res) => {
-        }
+          setCurrentlyLoading(false);
-        return acc;
+          toast({
-      }, {});
+            position: "top",
-
+            title: `Modifications effectuées`,
-      const options = {
+            status: "success",
-        method: "PATCH",
+            isClosable: true,
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(trueValues),
-      };
-
-      if (Object.keys(trueValues).length > 0) {
-        setIsLoading(true);
-        fetch(`/api/users/${user.id}`, options)
-          .then((res) => {
-            setIsLoading(false);
-            toast({
-              position: "top",
-              title: `Modifications effectuées`,
-              status: "success",
-              isClosable: true,
-            });
-            // router.reload();
-          })
-          .catch((err) => {
-            setIsLoading(false);
-            toast({
-              title: `Erreur lors de l'envoi des modifications`,
-              position: "top",
-              status: "error",
-              isClosable: true,
-            });
-            console.log(err);
           });
-      }
+          // router.reload();
-    };
+        })
+        .catch((err) => {
+          setCurrentlyLoading(false);
+          toast({
+            title: `Erreur lors de l'envoi des modifications`,
+            position: "top",
+            status: "error",
+            isClosable: true,
+          });
+          console.log(err);
+        });
+    }
+  };
 
-    const formateDate = (dateString: string) => {
+  const formateDate = (dateString: string) => {
-      var options = { year: "numeric", month: "long", day: "numeric" };
+    var options = { year: "numeric", month: "long", day: "numeric" };
-      return new Date(dateString).toLocaleDateString([], options);
+    return new Date(dateString).toLocaleDateString([], options);
-    };
+  };
 
-    return (
+  return (
-      <Box bgColor={"purple.50"}>
+    <Box bgColor={"purple.50"}>
-        <Container justifyContent={"center"} maxW={"70rem"} mt={"1rem"}>
+      <Container justifyContent={"center"} maxW={"70rem"} mt={"1rem"}>
-          <Flex flexDirection={"column"} alignItems={"center"} gap={"1rem"}>
+        <Flex flexDirection={"column"} alignItems={"center"} gap={"1rem"}>
-            <Box width={"50%"}>
+          <Box width={"50%"}>
-              {userData.images ? (
+            {userData.images ? (
-                <Carousel
+              <Carousel
-                  images={userData.images}
-                  borderRadius={"1rem"}
-                ></Carousel>
-              ) : (
-                <Carousel images={user.images} borderRadius={"1rem"}></Carousel>
-              )}
-            </Box>
-            {/* {modal} */}
-
-            {!userData.images ? (
-              <ModalModifyImages
-                setUserData={setUserData}
-                userData={userData}
-                user={user}
-                images={user.images}
-              />
-            ) : (
-              <ModalModifyImages
-                setUserData={setUserData}
-                userData={userData}
-                user={user}
                 images={userData.images}
-              />
+                borderRadius={"1rem"}
+              ></Carousel>
+            ) : (
+              <Carousel
+                images={userData.images}
+                borderRadius={"1rem"}
+              ></Carousel>
             )}
+          </Box>
+          {/* {modal} */}
 
-            <Divider colorScheme={"purple"} />
+          {!userData.images ? (
-            <Text align={"center"} as="i" color={"grey"}>
+            <ModalModifyImages
-              Modifiez les champs en les selectionnants
+              userData={userData}
-            </Text>
+              user={userData}
+              images={userData.images}
+            />
+          ) : (
+            <ModalModifyImages
+              userData={userData}
+              user={userData}
+              images={userData.images}
+            />
+          )}
 
-            <Box as="form" onSubmit={handleSubmit(saveData)} width={"80%"}>
+          <Divider colorScheme={"purple"} />
-              <Flex width={"100%"} justify={"space-between"} mb={"1rem"}>
+          <Text align={"center"} as="i" color={"grey"}>
-                <Box>
+            Modifiez les champs en les selectionnants
-                  <FormControl id="firstName" isInvalid={errors.firstName}>
+          </Text>
-                    <FormLabel as="legend" htmlFor={"firstName"}>
+
-                      Prénom :
+          <Box as="form" onSubmit={handleSubmit(saveData)} width={"80%"}>
-                    </FormLabel>
+            <Flex width={"100%"} justify={"space-between"} mb={"1rem"}>
-                    <Controller
+              <Box>
-                      name={"firstName"}
+                <FormControl id="firstName" isInvalid={errors.firstName}>
-                      control={control}
+                  <FormLabel as="legend" htmlFor={"firstName"}>
-                      defaultValue={
+                    Prénom :
-                        user.firstName === null ? "" : user.firstName
+                  </FormLabel>
-                      }
+                  <Controller
-                      rules={{
+                    name={"firstName"}
-                        required: { value: true, message: "Prénom requis" },
+                    control={control}
-                      }}
+                    defaultValue={
-                      render={({ field }) => {
+                      userData.firstName === null ? "" : userData.firstName
-                        return (
+                    }
-                          <Editable
+                    rules={{
-                            {...field}
+                      required: { value: true, message: "Prénom requis" },
-                            id={"firstName"}
+                    }}
-                            as={"b"}
+                    render={({ field }) => {
-                            placeholder={"Non renseigné"}
+                      return (
-                          >
-                            <EditablePreview />
-                            <EditableInput />
-                          </Editable>
-                        );
-                      }}
-                    />
-                    <FormErrorMessage as="b">
-                      {errors.firstName?.message}
-                    </FormErrorMessage>
-                  </FormControl>
-                </Box>
-                <Box>
-                  <FormControl id="lastName" isInvalid={errors.lastName}>
-                    <FormLabel as={"legend"} htmlFor={"lastName"}>
-                      Nom :
-                    </FormLabel>
-                    <Controller
-                      name={"lastName"}
-                      control={control}
-                      defaultValue={user.lastName === null ? "" : user.lastName}
-                      rules={{
-                        required: { value: true, message: "Nom requis" },
-                      }}
-                      render={({ field }) => (
                         <Editable
                           {...field}
-                          id={"lastName"}
+                          id={"firstName"}
                           as={"b"}
                           placeholder={"Non renseigné"}
                         >
                           <EditablePreview />
                           <EditableInput />
                         </Editable>
-                      )}
+                      );
-                    />
+                    }}
-                    <FormErrorMessage as={"b"}>
+                  />
-                      {errors.lastName?.message}
+                  <FormErrorMessage as="b">
-                    </FormErrorMessage>
+                    {errors.firstName?.message}
-                  </FormControl>
+                  </FormErrorMessage>
-                </Box>
+                </FormControl>
-                <Box>
+              </Box>
-                  <FormLabel as={"legend"} htmlFor={"birthdate"}>
+              <Box>
-                    Date de naissance :
+                <FormControl id="lastName" isInvalid={errors.lastName}>
-                  </FormLabel>
+                  <FormLabel as={"legend"} htmlFor={"lastName"}>
-                  <Editable
+                    Nom :
-                    id={"birthdate"}
-                    as="b"
-                    color={"grey"}
-                    isDisabled={true}
-                    defaultValue={
-                      user.birthdate === null
-                        ? "Non renseigné"
-                        : formateDate(user.birthdate.toString())
-                    }
-                  >
-                    <EditablePreview />
-                  </Editable>
-                </Box>
-              </Flex>
-              <Divider colorScheme={"purple"} />
-              <Flex justify={"space-between"} my={"1rem"}>
-                <Box>
-                  <FormLabel as={"legend"} htmlFor={"location"}>
-                    Ville :
-                  </FormLabel>
-                  <Editable
-                    id={"location"}
-                    as="b"
-                    color={"grey"}
-                    isDisabled={true}
-                    defaultValue={
-                      user.location === null || user.location === ""
-                        ? "Rendez vous sur la carte"
-                        : user.location
-                    }
-                  >
-                    <EditablePreview />
-                  </Editable>
-                </Box>
-                <Box>
-                  <FormLabel as={"legend"} htmlFor={"email"}>
-                    Adresse mail :
-                  </FormLabel>
-                  <Editable
-                    id={"email"}
-                    as="b"
-                    color={"grey"}
-                    isDisabled={true}
-                    defaultValue={user.email}
-                  >
-                    <EditablePreview />
-                  </Editable>
-                </Box>
-              </Flex>
-              <Divider colorScheme={"purple"} />
-              <Box my={"1rem"}>
-                <FormControl id="lastName" isInvalid={errors.bio}>
-                  <FormLabel as={"legend"} htmlFor={"bio"}>
-                    À propos :
                   </FormLabel>
                   <Controller
-                    name={"bio"}
+                    name={"lastName"}
                     control={control}
-                    defaultValue={user.bio === null ? "" : user.bio}
+                    defaultValue={
+                      userData.lastName === null ? "" : userData.lastName
+                    }
                     rules={{
-                      maxLength: {
+                      required: { value: true, message: "Nom requis" },
-                        value: 240,
-                        message: "240 caractères maximum",
-                      },
                     }}
                     render={({ field }) => (
                       <Editable
                         {...field}
-                        id={"bio"}
+                        id={"lastName"}
-                        as="b"
+                        as={"b"}
-                        width={"100%"}
                         placeholder={"Non renseigné"}
-                        defaultValue={user.bio === null ? "" : user.bio}
-                        onSubmit={(value) => {
-                          setUserData({ ...userData, bio: value });
-                        }}
                       >
                         <EditablePreview />
-                        <EditableTextarea />
+                        <EditableInput />
                       </Editable>
                     )}
                   />
-                  <FormErrorMessage as="b">
+                  <FormErrorMessage as={"b"}>
-                    {errors.bio?.message}
+                    {errors.lastName?.message}
                   </FormErrorMessage>
                 </FormControl>
               </Box>
-              <Divider colorScheme={"purple"} />
+              <Box>
-              <Box my={"1rem"}>
+                <FormLabel as={"legend"} htmlFor={"birthdate"}>
-                <Box>
+                  Date de naissance :
-                  <FormLabel as={"legend"} htmlFor={"passion"}>
+                </FormLabel>
-                    Centre d'intéret :
+                <Editable
-                  </FormLabel>
+                  id={"birthdate"}
-                  <VStack gap={"1rem"} align="start">
+                  as="b"
-                    <ProfileTagList
+                  color={"grey"}
-                      userPassions={
+                  isDisabled={true}
-                        user.PassionID !== undefined ? user.PassionID : []
+                  defaultValue={
-                      }
+                    userData.birthdate === undefined
-                      passions={passions}
+                      ? "Non renseigné"
-                    />
+                      : formateDate(userData.birthdate.toString())
-                    <ModalChoosePassion user={user} passions={passions} />
+                  }
-                  </VStack>
+                >
-                </Box>
+                  <EditablePreview />
+                </Editable>
               </Box>
-              <Divider colorScheme={"purple"} />
+            </Flex>
-              <Box my={"1rem"}>
+            <Divider colorScheme={"purple"} />
-                <Box>
+            <Flex justify={"space-between"} my={"1rem"}>
-                  <FormLabel as={"legend"} htmlFor={"gender"}>
+              <Box>
-                    Genre :
+                <FormLabel as={"legend"} htmlFor={"location"}>
-                  </FormLabel>
+                  Ville :
-                  <Controller
+                </FormLabel>
-                    name={"gender"}
+                <Editable
-                    control={control}
+                  id={"location"}
-                    render={({ field }) => (
+                  as="b"
-                      <RadioGroup
+                  color={"grey"}
-                        {...field}
+                  isDisabled={true}
-                        colorScheme={"purple"}
+                  defaultValue={
-                        id={"gender"}
+                    userData.location === null || userData.location === ""
-                        as="b"
+                      ? "Rendez vous sur la carte"
-                        defaultValue={
+                      : userData.location
-                          user.gender === null ? Gender.UNKNOWN : user.gender
+                  }
-                        }
+                >
-                      >
+                  <EditablePreview />
-                        <HStack spacing={"0.5rem"}>
+                </Editable>
-                          <Radio value={Gender.MALE}>
+              </Box>
-                            {getTextGender(Gender.MALE)}
+              <Box>
-                          </Radio>
+                <FormLabel as={"legend"} htmlFor={"email"}>
-                          <Radio value={Gender.FEMALE}>
+                  Adresse mail :
-                            {getTextGender(Gender.FEMALE)}
+                </FormLabel>
-                          </Radio>
+                <Editable
-                          <Radio value={Gender.OTHER}>
+                  id={"email"}
-                            {getTextGender(Gender.OTHER)}
+                  as="b"
-                          </Radio>
+                  color={"grey"}
-                          <Radio value={Gender.UNKNOWN}>
+                  isDisabled={true}
-                            {getTextGender(Gender.UNKNOWN)}
+                  defaultValue={userData.email}
-                          </Radio>
+                >
-                        </HStack>
+                  <EditablePreview />
-                      </RadioGroup>
+                </Editable>
-                    )}
+              </Box>
+            </Flex>
+            <Divider colorScheme={"purple"} />
+            <Box my={"1rem"}>
+              <FormControl id="lastName" isInvalid={errors.bio}>
+                <FormLabel as={"legend"} htmlFor={"bio"}>
+                  À propos :
+                </FormLabel>
+                <Controller
+                  name={"bio"}
+                  control={control}
+                  defaultValue={userData.bio === null ? "" : userData.bio}
+                  rules={{
+                    maxLength: {
+                      value: 240,
+                      message: "240 caractères maximum",
+                    },
+                  }}
+                  render={({ field }) => (
+                    <Editable
+                      {...field}
+                      id={"bio"}
+                      as="b"
+                      width={"100%"}
+                      placeholder={"Non renseigné"}
+                      defaultValue={userData.bio === null ? "" : userData.bio}
+                    >
+                      <EditablePreview />
+                      <EditableTextarea />
+                    </Editable>
+                  )}
+                />
+                <FormErrorMessage as="b">
+                  {errors?.bio?.message ?? ""}
+                </FormErrorMessage>
+              </FormControl>
+            </Box>
+            <Divider colorScheme={"purple"} />
+            <Box my={"1rem"}>
+              <Box>
+                <FormLabel as={"legend"} htmlFor={"passion"}>
+                  Centre d'intéret :
+                </FormLabel>
+                <VStack gap={"1rem"} align="start">
+                  <ProfileTagList
+                    userPassions={
+                      userData.PassionID !== undefined ? userData.PassionID : []
+                    }
+                    passions={passions}
                   />
-                </Box>
+                  <ModalChoosePassion user={userData} passions={passions} />
-                {/* <Box>
+                </VStack>
+              </Box>
+            </Box>
+            <Divider colorScheme={"purple"} />
+            <Box my={"1rem"}>
+              <Box>
+                <FormLabel as={"legend"} htmlFor={"gender"}>
+                  Genre :
+                </FormLabel>
+                <Controller
+                  name={"gender"}
+                  control={control}
+                  render={({ field }) => (
+                    <RadioGroup
+                      {...field}
+                      colorScheme={"purple"}
+                      id={"gender"}
+                      as="b"
+                      defaultValue={
+                        userData.gender === null
+                          ? Gender.UNKNOWN
+                          : userData.gender
+                      }
+                    >
+                      <HStack spacing={"0.5rem"}>
+                        <Radio value={Gender.MALE}>
+                          {getTextGender(Gender.MALE)}
+                        </Radio>
+                        <Radio value={Gender.FEMALE}>
+                          {getTextGender(Gender.FEMALE)}
+                        </Radio>
+                        <Radio value={Gender.OTHER}>
+                          {getTextGender(Gender.OTHER)}
+                        </Radio>
+                        <Radio value={Gender.UNKNOWN}>
+                          {getTextGender(Gender.UNKNOWN)}
+                        </Radio>
+                      </HStack>
+                    </RadioGroup>
+                  )}
+                />
+              </Box>
+              {/* <Box>
                  <FormLabel as={"legend"} htmlFor={"preference"}>
                     Préference :
                   </FormLabel>
@@ -379,13 +407,10 @@ export default function UserProfile() {
                     id={"preference"}
                     as="b"
                     value={
-                      user.preference === null
+                      userData.preference === null
                         ? Gender.UNKNOWN
-                        : user.preference
+                        : userData.preference
                     }
-                    onChange={(value) => {
-                      setUserData({ ...userData, preference: value });
-                    }}
                   >
                     <HStack spacing={"0.5rem"}>
                       <Radio value={Gender.MALE}>
@@ -403,28 +428,28 @@ export default function UserProfile() {
                     </HStack>
                   </RadioGroup>
                 </Flex> */}
-              </Box>
-              <Divider colorScheme={"purple"} />
-              <Center gap={"1rem"} my={"1rem"}>
-                <Button
-                  colorScheme={"purple"}
-                  isLoading={isLoading}
-                  type="submit"
-                >
-                  Sauvegarder les modifications
-                </Button>
-                <Button
-                  colorScheme={"purple"}
-                  variant="outline"
-                  onClick={() => router.push("/dashboard")}
-                >
-                  Retour
-                </Button>
-              </Center>
             </Box>
-          </Flex>
+            <Divider colorScheme={"purple"} />
-        </Container>
+            <Center gap={"1rem"} my={"1rem"}>
-      </Box>
+              <Button
-    );
+                colorScheme={"purple"}
-  }
+                isLoading={currentlyLoading}
+                type="submit"
+              >
+                Sauvegarder les modifications
+              </Button>
+              <Button
+                colorScheme={"purple"}
+                variant="outline"
+                onClick={() => router.push("/dashboard")}
+              >
+                Retour
+              </Button>
+            </Center>
+          </Box>
+        </Flex>
+      </Container>
+    </Box>
+  );
+  // }
 }

yarn.lock

@@ -35,7 +35,7 @@
     "chalk" "^2.0.0"
     "js-tokens" "^4.0.0"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.9.2":
   "integrity" "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw=="
   "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz"
   "version" "7.21.0"
@@ -1295,11 +1295,26 @@
   "resolved" "https://registry.npmjs.org/@prisma/prisma-fmt-wasm/-/prisma-fmt-wasm-4.11.0-57.8fde8fef4033376662cad983758335009d522acb.tgz"
   "version" "4.11.0-57.8fde8fef4033376662cad983758335009d522acb"
 
+"@reduxjs/toolkit@^1.9.3":
+  "integrity" "sha512-GU2TNBQVofL09VGmuSioNPQIu6Ml0YLf4EJhgj0AvBadRlCGzUWet8372LjvO4fqKZF2vH1xU0htAa7BrK9pZg=="
+  "resolved" "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.3.tgz"
+  "version" "1.9.3"
+  dependencies:
+    "immer" "^9.0.16"
+    "redux" "^4.2.0"
+    "redux-thunk" "^2.4.2"
+    "reselect" "^4.1.7"
+
 "@rushstack/eslint-patch@^1.1.3":
   "integrity" "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg=="
   "resolved" "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz"
   "version" "1.2.0"
 
+"@socket.io/component-emitter@~3.1.0":
+  "integrity" "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
+  "resolved" "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz"
+  "version" "3.1.0"
+
 "@swc/helpers@0.4.14":
   "integrity" "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw=="
   "resolved" "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz"
@@ -1307,6 +1322,19 @@
   dependencies:
     "tslib" "^2.4.0"
 
+"@tanstack/query-core@4.27.0":
+  "integrity" "sha512-sm+QncWaPmM73IPwFlmWSKPqjdTXZeFf/7aEmWh00z7yl2FjqophPt0dE1EHW9P1giMC5rMviv7OUbSDmWzXXA=="
+  "resolved" "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.27.0.tgz"
+  "version" "4.27.0"
+
+"@tanstack/react-query@^4.28.0":
+  "integrity" "sha512-8cGBV5300RHlvYdS4ea+G1JcZIt5CIuprXYFnsWggkmGoC0b5JaqG0fIX3qwDL9PTNkKvG76NGThIWbpXivMrQ=="
+  "resolved" "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.28.0.tgz"
+  "version" "4.28.0"
+  dependencies:
+    "@tanstack/query-core" "4.27.0"
+    "use-sync-external-store" "^1.2.0"
+
 "@tootallnate/once@2":
   "integrity" "sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A=="
   "resolved" "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz"
@@ -1339,6 +1367,18 @@
   dependencies:
     "@types/node" "*"
 
+"@types/cookie@^0.4.1":
+  "integrity" "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q=="
+  "resolved" "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz"
+  "version" "0.4.1"
+
+"@types/cors@^2.8.12":
+  "integrity" "sha512-RG8AStHlUiV5ysZQKq97copd2UmVYw3/pRMLefISZ3S1hK104Cwm7iLQ3fTKx+lsUH2CE8FlLaYeEA2LSeqYUA=="
+  "resolved" "https://registry.npmjs.org/@types/cors/-/cors-2.8.13.tgz"
+  "version" "2.8.13"
+  dependencies:
+    "@types/node" "*"
+
 "@types/cross-spawn@6.0.2":
   "integrity" "sha512-KuwNhp3eza+Rhu8IFI5HUXRP0LIhqH5cAjubUvGXXthh4YYBuP2ntwEX+Cz8GJoZUHlKo247wPWOfA9LYEq4cw=="
   "resolved" "https://registry.npmjs.org/@types/cross-spawn/-/cross-spawn-6.0.2.tgz"
@@ -1375,7 +1415,7 @@
   "resolved" "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz"
   "version" "0.7.31"
 
-"@types/node@*", "@types/node@^18.15.1":
+"@types/node@*", "@types/node@^18.15.1", "@types/node@>=10.0.0":
   "integrity" "sha512-U2TWca8AeHSmbpi314QBESRk7oPjSZjDsR+c+H4ECC1l+kFgpZf8Ydhv3SJpPy51VyZHHqxlb6mTTqYNNRVAIw=="
   "resolved" "https://registry.npmjs.org/@types/node/-/node-18.15.1.tgz"
   "version" "18.15.1"
@@ -1480,6 +1520,14 @@
   "resolved" "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz"
   "version" "1.1.1"
 
+"accepts@~1.3.4":
+  "integrity" "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw=="
+  "resolved" "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz"
+  "version" "1.3.8"
+  dependencies:
+    "mime-types" "~2.1.34"
+    "negotiator" "0.6.3"
+
 "acorn-jsx@^5.3.2":
   "integrity" "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
   "resolved" "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
@@ -1725,6 +1773,11 @@
   "resolved" "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz"
   "version" "1.5.1"
 
+"base64id@~2.0.0", "base64id@2.0.0":
+  "integrity" "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog=="
+  "resolved" "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz"
+  "version" "2.0.0"
+
 "bcrypt@^5.1.0":
   "integrity" "sha512-RHBS7HI5N5tEnGTmtR/pppX0mmDSBpQ4aCBsj7CEQfYXDcO74A8sIBYcJMuCsis2E81zDxeENYhv66oZwLiA+Q=="
   "resolved" "https://registry.npmjs.org/bcrypt/-/bcrypt-5.1.0.tgz"
@@ -1733,6 +1786,11 @@
     "@mapbox/node-pre-gyp" "^1.0.10"
     "node-addon-api" "^5.0.0"
 
+"big-integer@^1.6.16":
+  "integrity" "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg=="
+  "resolved" "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz"
+  "version" "1.6.51"
+
 "bl@^4.0.3", "bl@^4.1.0":
   "integrity" "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w=="
   "resolved" "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz"
@@ -1764,6 +1822,20 @@
   dependencies:
     "fill-range" "^7.0.1"
 
+"broadcast-channel@^3.4.1":
+  "integrity" "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg=="
+  "resolved" "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz"
+  "version" "3.7.0"
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    "detect-node" "^2.1.0"
+    "js-sha3" "0.8.0"
+    "microseconds" "0.2.0"
+    "nano-time" "1.0.0"
+    "oblivious-set" "1.0.0"
+    "rimraf" "3.0.2"
+    "unload" "2.2.0"
+
 "buffer-crc32@^0.2.1", "buffer-crc32@^0.2.13":
   "integrity" "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ=="
   "resolved" "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz"
@@ -1958,6 +2030,11 @@
   "resolved" "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz"
   "version" "0.5.0"
 
+"cookie@~0.4.1":
+  "integrity" "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA=="
+  "resolved" "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz"
+  "version" "0.4.2"
+
 "copy-to-clipboard@3.3.3":
   "integrity" "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA=="
   "resolved" "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz"
@@ -1970,6 +2047,14 @@
   "resolved" "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz"
   "version" "1.0.3"
 
+"cors@~2.8.5":
+  "integrity" "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g=="
+  "resolved" "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz"
+  "version" "2.8.5"
+  dependencies:
+    "object-assign" "^4"
+    "vary" "^1"
+
 "cosmiconfig@^7.0.0":
   "integrity" "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA=="
   "resolved" "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz"
@@ -2037,7 +2122,7 @@
   dependencies:
     "ms" "^2.1.1"
 
-"debug@^4.1.1", "debug@^4.3.2", "debug@^4.3.4", "debug@4", "debug@4.3.4":
+"debug@^4.1.1", "debug@^4.3.2", "debug@^4.3.4", "debug@~4.3.1", "debug@~4.3.2", "debug@4", "debug@4.3.4":
   "integrity" "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ=="
   "resolved" "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
   "version" "4.3.4"
@@ -2126,6 +2211,11 @@
   "resolved" "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz"
   "version" "1.1.0"
 
+"detect-node@^2.0.4", "detect-node@^2.1.0":
+  "integrity" "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
+  "resolved" "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz"
+  "version" "2.1.0"
+
 "dezalgo@^1.0.4":
   "integrity" "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig=="
   "resolved" "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz"
@@ -2182,6 +2272,38 @@
   dependencies:
     "once" "^1.4.0"
 
+"engine.io-client@~6.4.0":
+  "integrity" "sha512-GyKPDyoEha+XZ7iEqam49vz6auPnNJ9ZBfy89f+rMMas8AuiMWOZ9PVzu8xb9ZC6rafUqiGHSCfu22ih66E+1g=="
+  "resolved" "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.4.0.tgz"
+  "version" "6.4.0"
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    "debug" "~4.3.1"
+    "engine.io-parser" "~5.0.3"
+    "ws" "~8.11.0"
+    "xmlhttprequest-ssl" "~2.0.0"
+
+"engine.io-parser@~5.0.3":
+  "integrity" "sha512-tjuoZDMAdEhVnSFleYPCtdL2GXwVTGtNjoeJd9IhIG3C1xs9uwxqRNEu5WpnDZCaozwVlK/nuQhpodhXSIMaxw=="
+  "resolved" "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.6.tgz"
+  "version" "5.0.6"
+
+"engine.io@~6.4.1":
+  "integrity" "sha512-JFYQurD/nbsA5BSPmbaOSLa3tSVj8L6o4srSwXXY3NqE+gGUNmmPTbhn8tjzcCtSqhFgIeqef81ngny8JM25hw=="
+  "resolved" "https://registry.npmjs.org/engine.io/-/engine.io-6.4.1.tgz"
+  "version" "6.4.1"
+  dependencies:
+    "@types/cookie" "^0.4.1"
+    "@types/cors" "^2.8.12"
+    "@types/node" ">=10.0.0"
+    "accepts" "~1.3.4"
+    "base64id" "2.0.0"
+    "cookie" "~0.4.1"
+    "cors" "~2.8.5"
+    "debug" "~4.3.1"
+    "engine.io-parser" "~5.0.3"
+    "ws" "~8.11.0"
+
 "enhanced-resolve@^5.10.0":
   "integrity" "sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ=="
   "resolved" "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz"
@@ -3013,6 +3135,11 @@
   "resolved" "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz"
   "version" "5.2.4"
 
+"immer@^9.0.16":
+  "integrity" "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA=="
+  "resolved" "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz"
+  "version" "9.0.21"
+
 "import-fresh@^3.0.0", "import-fresh@^3.2.1":
   "integrity" "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw=="
   "resolved" "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
@@ -3292,6 +3419,11 @@
   "resolved" "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.3.0.tgz"
   "version" "4.3.0"
 
+"js-sha3@0.8.0":
+  "integrity" "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
+  "resolved" "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz"
+  "version" "0.8.0"
+
 "js-tokens@^3.0.0 || ^4.0.0", "js-tokens@^4.0.0":
   "integrity" "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
   "resolved" "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
@@ -3473,6 +3605,14 @@
   "resolved" "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz"
   "version" "1.3.6"
 
+"match-sorter@^6.0.2":
+  "integrity" "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw=="
+  "resolved" "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz"
+  "version" "6.3.1"
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "remove-accents" "0.4.2"
+
 "merge-stream@^2.0.0":
   "integrity" "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
   "resolved" "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"
@@ -3491,12 +3631,17 @@
     "braces" "^3.0.2"
     "picomatch" "^2.3.1"
 
+"microseconds@0.2.0":
+  "integrity" "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
+  "resolved" "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz"
+  "version" "0.2.0"
+
 "mime-db@1.52.0":
   "integrity" "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
   "resolved" "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
   "version" "1.52.0"
 
-"mime-types@^2.1.12":
+"mime-types@^2.1.12", "mime-types@~2.1.34":
   "integrity" "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="
   "resolved" "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
   "version" "2.1.35"
@@ -3574,6 +3719,13 @@
   "resolved" "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
   "version" "2.1.3"
 
+"nano-time@1.0.0":
+  "integrity" "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA=="
+  "resolved" "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz"
+  "version" "1.0.0"
+  dependencies:
+    "big-integer" "^1.6.16"
+
 "nanoid@^3.3.4":
   "integrity" "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
   "resolved" "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz"
@@ -3584,6 +3736,11 @@
   "resolved" "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   "version" "1.4.0"
 
+"negotiator@0.6.3":
+  "integrity" "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg=="
+  "resolved" "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz"
+  "version" "0.6.3"
+
 "new-github-issue-url@0.2.1":
   "integrity" "sha512-md4cGoxuT4T4d/HDOXbrUHkTKrp/vp+m3aOA7XXVYwNsUNMK49g3SQicTSeV5GIz/5QVGAeYRAOlyp9OvlgsYA=="
   "resolved" "https://registry.npmjs.org/new-github-issue-url/-/new-github-issue-url-0.2.1.tgz"
@@ -3721,7 +3878,7 @@
   "resolved" "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz"
   "version" "0.9.15"
 
-"object-assign@^4.1.1":
+"object-assign@^4", "object-assign@^4.1.1":
   "integrity" "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
   "resolved" "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
   "version" "4.1.1"
@@ -3794,6 +3951,11 @@
     "define-properties" "^1.1.4"
     "es-abstract" "^1.20.4"
 
+"oblivious-set@1.0.0":
+  "integrity" "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
+  "resolved" "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz"
+  "version" "1.0.0"
+
 "oidc-token-hash@^5.0.1":
   "integrity" "sha512-EvoOtz6FIEBzE+9q253HsLCVRiK/0doEJ2HCvvqMQb3dHZrP3WlJKYtJ55CRTw4jmYomzH4wkPuCj/I3ZvpKxQ=="
   "resolved" "https://registry.npmjs.org/oidc-token-hash/-/oidc-token-hash-5.0.1.tgz"
@@ -4088,7 +4250,7 @@
   dependencies:
     "@babel/runtime" "^7.12.13"
 
-"react-dom@^17.0.2 || ^18", "react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>=18", "react-dom@18.2.0":
+"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.2 || ^18", "react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>=18", "react-dom@18.2.0":
   "integrity" "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   "version" "18.2.0"
@@ -4128,6 +4290,15 @@
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   "version" "16.13.1"
 
+"react-query@^3.39.3":
+  "integrity" "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g=="
+  "resolved" "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz"
+  "version" "3.39.3"
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "broadcast-channel" "^3.4.1"
+    "match-sorter" "^6.0.2"
+
 "react-remove-scroll-bar@^2.3.3":
   "integrity" "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A=="
   "resolved" "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz"
@@ -4156,7 +4327,7 @@
     "invariant" "^2.2.4"
     "tslib" "^2.0.0"
 
-"react@*", "react@^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^17.0.2 || ^18", "react@^18.0.0", "react@^18.2.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>=16.8.0", "react@>=18", "react@18.2.0":
+"react@*", "react@^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17 || ^18", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.9.0 || ^17.0.0 || ^18", "react@^17.0.2 || ^18", "react@^18.0.0", "react@^18.2.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>=16.8.0", "react@>=18", "react@18.2.0":
   "integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
   "resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   "version" "18.2.0"
@@ -4224,6 +4395,18 @@
   dependencies:
     "minimatch" "^5.1.0"
 
+"redux-thunk@^2.4.2":
+  "integrity" "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q=="
+  "resolved" "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz"
+  "version" "2.4.2"
+
+"redux@^4", "redux@^4.2.0":
+  "integrity" "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w=="
+  "resolved" "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz"
+  "version" "4.2.1"
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 "regenerator-runtime@^0.13.11":
   "integrity" "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
   "resolved" "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz"
@@ -4243,11 +4426,21 @@
   "resolved" "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz"
   "version" "3.2.0"
 
+"remove-accents@0.4.2":
+  "integrity" "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
+  "resolved" "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz"
+  "version" "0.4.2"
+
 "replace-string@3.1.0":
   "integrity" "sha512-yPpxc4ZR2makceA9hy/jHNqc7QVkd4Je/N0WRHm6bs3PtivPuPynxE5ejU/mp5EhnCv8+uZL7vhz8rkluSlx+Q=="
   "resolved" "https://registry.npmjs.org/replace-string/-/replace-string-3.1.0.tgz"
   "version" "3.1.0"
 
+"reselect@^4.1.7":
+  "integrity" "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A=="
+  "resolved" "https://registry.npmjs.org/reselect/-/reselect-4.1.7.tgz"
+  "version" "4.1.7"
+
 "resolve-from@^4.0.0":
   "integrity" "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
   "resolved" "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
@@ -4406,6 +4599,43 @@
     "astral-regex" "^2.0.0"
     "is-fullwidth-code-point" "^3.0.0"
 
+"socket.io-adapter@~2.5.2":
+  "integrity" "sha512-87C3LO/NOMc+eMcpcxUBebGjkpMDkNBS9tf7KJqcDsmL936EChtVva71Dw2q4tQcuVC+hAUy4an2NO/sYXmwRA=="
+  "resolved" "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-2.5.2.tgz"
+  "version" "2.5.2"
+  dependencies:
+    "ws" "~8.11.0"
+
+"socket.io-client@^4.6.1":
+  "integrity" "sha512-5UswCV6hpaRsNg5kkEHVcbBIXEYoVbMQaHJBXJCyEQ+CiFPV1NIOY0XOFWG4XR4GZcB8Kn6AsRs/9cy9TbqVMQ=="
+  "resolved" "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.6.1.tgz"
+  "version" "4.6.1"
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    "debug" "~4.3.2"
+    "engine.io-client" "~6.4.0"
+    "socket.io-parser" "~4.2.1"
+
+"socket.io-parser@~4.2.1":
+  "integrity" "sha512-DJtziuKypFkMMHCm2uIshOYC7QaylbtzQwiMYDuCKy3OPkjLzu4B2vAhTlqipRHHzrI0NJeBAizTK7X+6m1jVw=="
+  "resolved" "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.2.tgz"
+  "version" "4.2.2"
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    "debug" "~4.3.1"
+
+"socket.io@^4.6.1":
+  "integrity" "sha512-KMcaAi4l/8+xEjkRICl6ak8ySoxsYG+gG6/XfRCPJPQ/haCRIJBTL4wIl8YCsmtaBovcAXGLOShyVWQ/FG8GZA=="
+  "resolved" "https://registry.npmjs.org/socket.io/-/socket.io-4.6.1.tgz"
+  "version" "4.6.1"
+  dependencies:
+    "accepts" "~1.3.4"
+    "base64id" "~2.0.0"
+    "debug" "~4.3.2"
+    "engine.io" "~6.4.1"
+    "socket.io-adapter" "~2.5.2"
+    "socket.io-parser" "~4.2.1"
+
 "source-map-js@^1.0.2":
   "integrity" "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
   "resolved" "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
@@ -4841,6 +5071,14 @@
   "resolved" "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz"
   "version" "2.0.0"
 
+"unload@2.2.0":
+  "integrity" "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA=="
+  "resolved" "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz"
+  "version" "2.2.0"
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+    "detect-node" "^2.0.4"
+
 "uri-js@^4.2.2":
   "integrity" "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="
   "resolved" "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
@@ -4863,6 +5101,11 @@
     "detect-node-es" "^1.1.0"
     "tslib" "^2.0.0"
 
+"use-sync-external-store@^1.2.0":
+  "integrity" "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA=="
+  "resolved" "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
+  "version" "1.2.0"
+
 "util-deprecate@^1.0.1", "util-deprecate@~1.0.1":
   "integrity" "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
   "resolved" "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
@@ -4891,6 +5134,11 @@
     "spdx-correct" "^3.0.0"
     "spdx-expression-parse" "^3.0.0"
 
+"vary@^1":
+  "integrity" "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
+  "resolved" "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz"
+  "version" "1.1.2"
+
 "wcwidth@^1.0.1":
   "integrity" "sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg=="
   "resolved" "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz"
@@ -4968,6 +5216,16 @@
   "resolved" "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
   "version" "1.0.2"
 
+"ws@~8.11.0":
+  "integrity" "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg=="
+  "resolved" "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz"
+  "version" "8.11.0"
+
+"xmlhttprequest-ssl@~2.0.0":
+  "integrity" "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
+  "resolved" "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz"
+  "version" "2.0.0"
+
 "yallist@^4.0.0":
   "integrity" "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
   "resolved" "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"