refactor: migrate to mantine v5

frontend/src/components/share/CreateUploadModalBody.tsx

@@ -3,10 +3,10 @@ import {
   Button,
   Col,
   Grid,
-  Group,
   NumberInput,
   PasswordInput,
   Select,
+  Stack,
   Text,
   TextInput,
 } from "@mantine/core";
@@ -46,7 +46,7 @@ const CreateUploadModalBody = ({
       maxViews: undefined,
       expiration: "1-day",
     },
-    schema: yupResolver(validationSchema),
+    validate: yupResolver(validationSchema),
   });
 
   return (
@@ -63,7 +63,7 @@ const CreateUploadModalBody = ({
         }
       })}
     >
-      <Group direction="column" grow>
+      <Stack align="stretch">
         <Grid align={form.errors.link ? "center" : "flex-end"}>
           <Col xs={9}>
             <TextInput
@@ -115,10 +115,10 @@ const CreateUploadModalBody = ({
         />
         <Accordion>
           <Accordion.Item
-            label="Security options"
+            value="Security options"
             sx={{ borderBottom: "none" }}
           >
-            <Group direction="column" grow>
+            <Stack align="stretch">
               <PasswordInput
                 variant="filled"
                 placeholder="No password"
@@ -134,11 +134,11 @@ const CreateUploadModalBody = ({
                 label="Maximal views"
                 {...form.getInputProps("maxViews")}
               />
-            </Group>
+            </Stack>
           </Accordion.Item>
         </Accordion>
         <Button type="submit">Share</Button>
-      </Group>
+      </Stack>
     </form>
   );
 };

frontend/src/components/share/DownloadAllButton.tsx

@@ -19,10 +19,13 @@ const DownloadAllButton = ({ shareId }: { shareId: string }) => {
       .catch(() => {});
 
     const timer = setInterval(() => {
-      shareService.getMetaData(shareId).then((share) => {
-        setIsZipReady(share.isZipReady);
-        if (share.isZipReady) clearInterval(timer);
-      }).catch(() => {});
+      shareService
+        .getMetaData(shareId)
+        .then((share) => {
+          setIsZipReady(share.isZipReady);
+          if (share.isZipReady) clearInterval(timer);
+        })
+        .catch(() => {});
     }, 5000);
     return () => {
       clearInterval(timer);
@@ -32,7 +35,6 @@ const DownloadAllButton = ({ shareId }: { shareId: string }) => {
   if (!isZipReady)
     return (
       <Tooltip
-        wrapLines
         position="bottom"
         width={220}
         withArrow

frontend/src/components/share/FileList.tsx

@@ -1,5 +1,4 @@
 import { ActionIcon, Loader, Skeleton, Table } from "@mantine/core";
-import { useRouter } from "next/router";
 import { CircleCheck, Download } from "tabler-icons-react";
 import shareService from "../../services/share.service";
 
@@ -14,8 +13,6 @@ const FileList = ({
   shareId: string;
   isLoading: boolean;
 }) => {
-  const router = useRouter();
-
   const skeletonRows = [...Array(5)].map((c, i) => (
     <tr key={i}>
       <td>

frontend/src/components/share/showEnterPasswordModal.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, PasswordInput, Text, Title } from "@mantine/core";
+import { Button, Group, PasswordInput, Stack, Text, Title } from "@mantine/core";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import { useState } from "react";
 
@@ -27,7 +27,7 @@ const Body = ({ submitCallback }: { submitCallback: any }) => {
   const [passwordWrong, setPasswordWrong] = useState(false);
   return (
     <>
-      <Group grow direction="column">
+      <Stack align="stretch">
         <PasswordInput
           variant="filled"
           placeholder="Password"
@@ -50,7 +50,7 @@ const Body = ({ submitCallback }: { submitCallback: any }) => {
         >
           Submit
         </Button>
-      </Group>
+      </Stack>
     </>
   );
 };

frontend/src/components/share/showErrorModal.tsx

@@ -1,4 +1,4 @@
-import { Button, Group, Text, Title } from "@mantine/core";
+import { Button, Group, Stack, Text, Title } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import { useRouter } from "next/router";
@@ -23,7 +23,7 @@ const Body = ({ text }: { text: string }) => {
   const router = useRouter();
   return (
     <>
-      <Group grow direction="column">
+      <Stack align="stretch">
         <Text size="sm">{text}</Text>
         <Button
           onClick={() => {
@@ -33,7 +33,7 @@ const Body = ({ text }: { text: string }) => {
         >
           Go back
         </Button>
-      </Group>
+      </Stack>
     </>
   );
 };