fix: add loading for modal and settings of notifications, remove unus…

…ed imports
SocialGouv · Jun 5, 2024 · c1894b9 · c1894b9
1 parent b365f9b
commit c1894b9
Show file tree

Hide file tree

Showing 4 changed files with 675 additions and 643 deletions.
diff --git a/webapp/src/components/modals/NotificationModal.tsx b/webapp/src/components/modals/NotificationModal.tsx
@@ -1,9 +1,10 @@
-import { Button, Flex, Heading, Image } from "@chakra-ui/react";
+import { Button, Center, Flex, Heading, Image } from "@chakra-ui/react";
 import BaseModal from "./BaseModal";
 import StackItems from "../offer/StackItems";
 import { useAuth } from "~/providers/Auth";
 import { api } from "~/utils/api";
 import { base64ToUint8Array } from "~/utils/tools";
+import LoadingLoader from "../LoadingLoader";
 
 const NotificationModal = ({
   onClose,
@@ -36,9 +37,26 @@ const NotificationModal = ({
       notification_subscription: sub,
     });
 
+    refetchUser();
     onClose();
   };
 
+  if (!serviceWorkerRegistration) {
+    return (
+      <BaseModal
+        onClose={onClose}
+        isOpen={isOpen}
+        hideCloseBtn={true}
+        pb={6}
+        heightModalContent="full"
+      >
+        <Center h="full">
+          <LoadingLoader />
+        </Center>
+      </BaseModal>
+    );
+  }
+
   return (
     <BaseModal
       onClose={onClose}

diff --git a/webapp/src/pages/dashboard/account/index.tsx b/webapp/src/pages/dashboard/account/index.tsx
@@ -23,7 +23,6 @@ import { UserIncluded } from "~/server/api/routers/user";
 import NewPassComponent from "~/components/NewPassComponent";
 import dynamic from "next/dynamic";
 import { push } from "@socialgouv/matomo-next";
-import { isIOS } from "~/utils/tools";
 import { ChevronLeftIcon } from "@chakra-ui/icons";
 
 const CRISP_TOKEN = process.env.NEXT_PUBLIC_CRISP_TOKEN as string;

diff --git a/webapp/src/pages/dashboard/account/notification.tsx b/webapp/src/pages/dashboard/account/notification.tsx
@@ -1,7 +1,8 @@
-import { Button, Flex, Heading, Icon, Text } from "@chakra-ui/react";
+import { Button, Center, Flex, Heading, Icon, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { HiArrowLeft } from "react-icons/hi2";
+import LoadingLoader from "~/components/LoadingLoader";
 import { useAuth } from "~/providers/Auth";
 import { api } from "~/utils/api";
 import { base64ToUint8Array } from "~/utils/tools";
@@ -44,40 +45,54 @@ export default function AccountNotifications() {
     setIsLoading(false);
   };
 
+  const WrapperNotification = ({ children }: { children: React.ReactNode }) => {
+    return (
+      <Flex flexDir="column" pt={12} px={8} h="full">
+        <Icon
+          as={HiArrowLeft}
+          w={6}
+          h={6}
+          onClick={() => router.back()}
+          cursor="pointer"
+        />
+        <Heading
+          as="h2"
+          size="lg"
+          fontWeight="extrabold"
+          mt={4}
+          textAlign="center"
+        >
+          Mes notifications
+        </Heading>
+        {children}
+      </Flex>
+    );
+  };
+
+  if (!serviceWorkerRegistration) {
+    return (
+      <WrapperNotification>
+        <Center h="25%">
+          <LoadingLoader />
+        </Center>
+      </WrapperNotification>
+    );
+  }
+
   return (
-    <Flex flexDir="column" pt={12} px={8} h="full">
-      <Icon
-        as={HiArrowLeft}
-        w={6}
-        h={6}
-        onClick={() => router.back()}
-        cursor="pointer"
-      />
-      <Heading
-        as="h2"
-        size="lg"
-        fontWeight="extrabold"
-        mt={4}
-        textAlign="center"
-      >
-        Mes notifications
-      </Heading>
+    <WrapperNotification>
       {user && (
         <Flex flexDir="column" mt={10} gap={6}>
           <Flex alignItems="center" justifyContent="space-between" gap={1}>
             <Text fontWeight="medium">Autoriser les notifications push</Text>
-            <Button
-              onClick={handleRequestNotification}
-              isLoading={isLoading}
-              isDisabled={serviceWorkerRegistration === null}
-            >
+            <Button onClick={handleRequestNotification} isLoading={isLoading}>
               {user.notification_status === "enabled"
                 ? "Désactiver"
                 : "Activer"}
             </Button>
           </Flex>
         </Flex>
       )}
-    </Flex>
+    </WrapperNotification>
   );
 }