Merge remote-tracking branch 'stonith404/main' into main

frontend/src/components/upload/Dropzone.tsx

@@ -1,14 +1,9 @@
-import {
-  Button,
-  Center,
-  createStyles,
-  Group,
-  Text,
-} from "@mantine/core";
+import { Button, Center, createStyles, Group, Text } from "@mantine/core";
 import { Dropzone as MantineDropzone } from "@mantine/dropzone";
 import getConfig from "next/config";
 import { Dispatch, ForwardedRef, SetStateAction, useRef } from "react";
-import { CloudUpload, Upload } from "tabler-icons-react";
+import { TbCloudUpload, TbUpload } from "react-icons/tb";
+import { FileUpload } from "../../types/File.type";
 import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
 import toast from "../../utils/toast.util";
 
@@ -43,7 +38,7 @@ const Dropzone = ({
   setFiles,
 }: {
   isUploading: boolean;
-  setFiles: Dispatch<SetStateAction<File[]>>;
+  setFiles: Dispatch<SetStateAction<FileUpload[]>>;
 }) => {
   const { classes } = useStyles();
   const openRef = useRef<() => void>();
@@ -60,7 +55,11 @@ const Dropzone = ({
           if (files.length > 100) {
             toast.error("You can't upload more than 100 files per share.");
           } else {
-            setFiles(files);
+            const newFiles = files.map((file) => {
+              (file as FileUpload).uploadingProgress = 0;
+              return file as FileUpload;
+            });
+            setFiles(newFiles);
           }
         }}
         className={classes.dropzone}
@@ -68,7 +67,7 @@ const Dropzone = ({
       >
         <div style={{ pointerEvents: "none" }}>
           <Group position="center">
-            <CloudUpload size={50} />
+            <TbCloudUpload size={50} />
           </Group>
           <Text align="center" weight={700} size="lg" mt="xl">
             Upload files
@@ -90,7 +89,7 @@ const Dropzone = ({
           disabled={isUploading}
           onClick={() => openRef.current && openRef.current()}
         >
-          {<Upload />}
+          {<TbUpload />}
         </Button>
       </Center>
     </div>

frontend/src/components/upload/FileList.tsx

@@ -1,8 +1,9 @@
-import { ActionIcon, Loader, Table } from "@mantine/core";
+import { ActionIcon, Table } from "@mantine/core";
 import { Dispatch, SetStateAction } from "react";
-import { CircleCheck, Trash } from "tabler-icons-react";
+import { TbTrash } from "react-icons/tb";;
 import { FileUpload } from "../../types/File.type";
 import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
+import UploadProgressIndicator from "./UploadProgressIndicator";
 
 const FileList = ({
   files,
@@ -15,27 +16,22 @@ const FileList = ({
     files.splice(index, 1);
     setFiles([...files]);
   };
-
   const rows = files.map((file, i) => (
     <tr key={i}>
       <td>{file.name}</td>
       <td>{byteStringToHumanSizeString(file.size.toString())}</td>
       <td>
-        {file.uploadingState ? (
-          file.uploadingState != "finished" ? (
-            <Loader size={22} />
-          ) : (
-            <CircleCheck color="green" size={22} />
-          )
-        ) : (
+        {file.uploadingProgress == 0 ? (
           <ActionIcon
             color="red"
             variant="light"
             size={25}
             onClick={() => remove(i)}
           >
-            <Trash />
+            <TbTrash />
           </ActionIcon>
+        ) : (
+          <UploadProgressIndicator progress={file.uploadingProgress} />
         )}
       </td>
     </tr>

frontend/src/components/upload/UploadProgressIndicator.tsx

@@ -0,0 +1,19 @@
+import { RingProgress } from "@mantine/core";
+import { TbCircleCheck, TbCircleX } from "react-icons/tb";
+const UploadProgressIndicator = ({ progress }: { progress: number }) => {
+  if (progress > 0 && progress < 100) {
+    return (
+      <RingProgress
+        sections={[{ value: progress, color: "victoria" }]}
+        thickness={3}
+        size={25}
+      />
+    );
+  } else if (progress >= 100) {
+    return <TbCircleCheck color="green" size={22} />;
+  } else {
+    return <TbCircleX color="red" size={22} />;
+  }
+};
+
+export default UploadProgressIndicator;

frontend/src/components/upload/showCompletedUploadModal.tsx

@@ -1,86 +1,84 @@
 import {
-    ActionIcon,
-    Button,
-    Stack,
-    Text,
-    TextInput,
-    Title
+  ActionIcon,
+  Button,
+  Stack,
+  Text,
+  TextInput,
+  Title,
 } from "@mantine/core";
 import { useClipboard } from "@mantine/hooks";
 import { useModals } from "@mantine/modals";
 import { ModalsContextProps } from "@mantine/modals/lib/context";
 import moment from "moment";
+import getConfig from "next/config";
 import { useRouter } from "next/router";
-import { Copy } from "tabler-icons-react";
+import { TbCopy } from "react-icons/tb";
 import { Share } from "../../types/share.type";
 import toast from "../../utils/toast.util";
-import getConfig from "next/config";
 
-const {publicRuntimeConfig} = getConfig();
+const { publicRuntimeConfig } = getConfig();
 
-const showCompletedUploadModal = (
-    modals: ModalsContextProps,
-    share: Share,
-) => {
-    return modals.openModal({
-        closeOnClickOutside: false,
-        withCloseButton: false,
-        closeOnEscape: false,
-        title: (
-            <Stack align="stretch" spacing={0}>
-                <Title order={4}>Share ready</Title>
-            </Stack>
-        ),
-        children: <Body share={share}/>,
-    });
+const showCompletedUploadModal = (modals: ModalsContextProps, share: Share) => {
+  return modals.openModal({
+    closeOnClickOutside: false,
+    withCloseButton: false,
+    closeOnEscape: false,
+    title: (
+      <Stack align="stretch" spacing={0}>
+        <Title order={4}>Share ready</Title>
+      </Stack>
+    ),
+    children: <Body share={share} />,
+  });
 };
 
-const Body = ({share}: { share: Share }) => {
-    const clipboard = useClipboard({timeout: 500});
-    const modals = useModals();
-    const router = useRouter();
-    const link = `${window.location.origin}/share/${share.id}`;
-    return (
-        <Stack align="stretch">
-            <TextInput
-                variant="filled"
-                value={link}
-                rightSection={
-                    <ActionIcon
-                        onClick={() => {
-                            clipboard.copy(link);
-                            toast.success("Your link was copied to the keyboard.");
-                        }}
-                    >
-                        <Copy/>
-                    </ActionIcon>
-                }
-            />
-            <Text
-                size="xs"
-                sx={(theme) => ({
-                    color: theme.colors.gray[6],
-                })}
-            >
-                {/* If our share.expiration is timestamp 0, show a different message */}
-                {moment(share.expiration).unix() === 0
-                    ? "This share will never expire."
-                    : `This share will expire on ${
-                        (publicRuntimeConfig.TWELVE_HOUR_TIME === "true")
-                            ? moment(share.expiration).format("MMMM Do YYYY, h:mm a")
-                            : moment(share.expiration).format("MMMM DD YYYY, HH:mm")}`}
-            </Text>
+const Body = ({ share }: { share: Share }) => {
+  const clipboard = useClipboard({ timeout: 500 });
+  const modals = useModals();
+  const router = useRouter();
+  const link = `${window.location.origin}/share/${share.id}`;
+  return (
+    <Stack align="stretch">
+      <TextInput
+        variant="filled"
+        value={link}
+        rightSection={
+          <ActionIcon
+            onClick={() => {
+              clipboard.copy(link);
+              toast.success("Your link was copied to the keyboard.");
+            }}
+          >
+            <TbCopy />
+          </ActionIcon>
+        }
+      />
+      <Text
+        size="xs"
+        sx={(theme) => ({
+          color: theme.colors.gray[6],
+        })}
+      >
+        {/* If our share.expiration is timestamp 0, show a different message */}
+        {moment(share.expiration).unix() === 0
+          ? "This share will never expire."
+          : `This share will expire on ${
+              publicRuntimeConfig.TWELVE_HOUR_TIME === "true"
+                ? moment(share.expiration).format("MMMM Do YYYY, h:mm a")
+                : moment(share.expiration).format("MMMM DD YYYY, HH:mm")
+            }`}
+      </Text>
 
-            <Button
-                onClick={() => {
-                    modals.closeAll();
-                    router.push("/upload");
-                }}
-            >
-                Done
-            </Button>
-        </Stack>
-    );
+      <Button
+        onClick={() => {
+          modals.closeAll();
+          router.push("/upload");
+        }}
+      >
+        Done
+      </Button>
+    </Stack>
+  );
 };
 
 export default showCompletedUploadModal;