feat: remove appwrite and add nextjs backend

frontend/src/components/upload/Dropzone.tsx

@@ -0,0 +1,115 @@
+import {
+  Button,
+  Center,
+  createStyles,
+  Group,
+  MantineTheme,
+  Text,
+  useMantineTheme,
+} from "@mantine/core";
+import { Dropzone as MantineDropzone, DropzoneStatus } from "@mantine/dropzone";
+import getConfig from "next/config";
+import React, { Dispatch, ForwardedRef, SetStateAction, useRef } from "react";
+import { CloudUpload, Upload } from "tabler-icons-react";
+import toast from "../../utils/toast.util";
+
+const { publicRuntimeConfig } = getConfig()
+
+const useStyles = createStyles((theme) => ({
+  wrapper: {
+    position: "relative",
+    marginBottom: 30,
+  },
+
+  dropzone: {
+    borderWidth: 1,
+    paddingBottom: 50,
+  },
+
+  icon: {
+    color:
+      theme.colorScheme === "dark"
+        ? theme.colors.dark[3]
+        : theme.colors.gray[4],
+  },
+
+  control: {
+    position: "absolute",
+    bottom: -20,
+  },
+}));
+
+function getActiveColor(status: DropzoneStatus, theme: MantineTheme) {
+  return status.accepted
+    ? theme.colors[theme.primaryColor][6]
+    : theme.colorScheme === "dark"
+    ? theme.colors.dark[2]
+    : theme.black;
+}
+
+const Dropzone = ({
+  isUploading,
+  setFiles,
+}: {
+  isUploading: boolean;
+  setFiles: Dispatch<SetStateAction<File[]>>;
+}) => {
+  const theme = useMantineTheme();
+  const { classes } = useStyles();
+  const openRef = useRef<() => void>();
+  return (
+    <div className={classes.wrapper}>
+      <MantineDropzone
+        maxSize={parseInt(publicRuntimeConfig.MAX_FILE_SIZE!)}
+        onReject={(e) => {
+          toast.error(e[0].errors[0].message);
+        }}
+        disabled={isUploading}
+        openRef={openRef as ForwardedRef<() => void>}
+        onDrop={(files) => {
+          if (files.length > 100) {
+            toast.error("You can't upload more than 100 files per share.");
+          } else {
+            setFiles(files);
+          }
+        }}
+        className={classes.dropzone}
+        radius="md"
+      >
+        {(status) => (
+          <div style={{ pointerEvents: "none" }}>
+            <Group position="center">
+              <CloudUpload size={50} color={getActiveColor(status, theme)} />
+            </Group>
+            <Text
+              align="center"
+              weight={700}
+              size="lg"
+              mt="xl"
+              sx={{ color: getActiveColor(status, theme) }}
+            >
+              {status.accepted ? "Drop files here" : "Upload files"}
+            </Text>
+            <Text align="center" size="sm" mt="xs" color="dimmed">
+              Drag and drop your files or use the upload button to start your
+              share.
+            </Text>
+          </div>
+        )}
+      </MantineDropzone>
+      <Center>
+        <Button
+          className={classes.control}
+          variant="light"
+          size="sm"
+          radius="xl"
+          disabled={isUploading}
+          onClick={() => openRef.current && openRef.current()}
+        >
+          {<Upload />}
+        </Button>
+      </Center>
+    </div>
+  );
+};
+export default Dropzone;

frontend/src/components/upload/FileList.tsx

@@ -0,0 +1,60 @@
+import { ActionIcon, Loader, Table } from "@mantine/core";
+import { Dispatch, SetStateAction } from "react";
+import { CircleCheck, Trash } from "tabler-icons-react";
+import { FileUpload } from "../../types/File.type";
+import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
+
+const FileList = ({
+  files,
+  setFiles,
+}: {
+  files: FileUpload[];
+  setFiles: Dispatch<SetStateAction<FileUpload[]>>;
+}) => {
+  const remove = (index: number) => {
+    files.splice(index, 1);
+    setFiles([...files]);
+  };
+
+  const rows = files.map((file, i) => (
+    <tr key={i}>
+      <td>{file.name}</td>
+      <td>{file.type}</td>
+      <td>{byteStringToHumanSizeString(file.size.toString())}</td>
+      <td>
+        {file.uploadingState ? (
+          file.uploadingState != "finished" ? (
+            <Loader size={22} />
+          ) : (
+            <CircleCheck color="green" size={22} />
+          )
+        ) : (
+          <ActionIcon
+            color="red"
+            variant="light"
+            size={25}
+            onClick={() => remove(i)}
+          >
+            <Trash />
+          </ActionIcon>
+        )}
+      </td>
+    </tr>
+  ));
+
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Type</th>
+          <th>Size</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>{rows}</tbody>
+    </Table>
+  );
+};
+
+export default FileList;

frontend/src/components/upload/showCompletedUploadModal.tsx

@@ -0,0 +1,77 @@
+import {
+  ActionIcon,
+  Button,
+  Group,
+  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 { useRouter } from "next/router";
+import { Copy } from "tabler-icons-react";
+import { Share } from "../../types/share.type";
+import toast from "../../utils/toast.util";
+
+const showCompletedUploadModal = (
+  modals: ModalsContextProps,
+  share: Share,
+) => {
+  return modals.openModal({
+    closeOnClickOutside: false,
+    withCloseButton: false,
+    closeOnEscape: false,
+    title: (
+      <Group grow direction="column" spacing={0}>
+        <Title order={4}>Share ready</Title>
+      </Group>
+    ),
+    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 (
+    <Group grow direction="column">
+      <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],
+        })}
+      >
+        Your share expires at {moment(share.expiration).format("LLL")}
+      </Text>
+
+      <Button
+        onClick={() => {
+          modals.closeAll();
+          router.push("/upload");
+        }}
+      >
+        Done
+      </Button>
+    </Group>
+  );
+};
+
+export default showCompletedUploadModal;

frontend/src/components/upload/showCreateUploadModal.tsx

@@ -0,0 +1,22 @@
+import { Title } from "@mantine/core";
+import { ModalsContextProps } from "@mantine/modals/lib/context";
+import { ShareSecurity } from "../../types/share.type";
+import CreateUploadModalBody from "../share/CreateUploadModalBody";
+
+const showCreateUploadModal = (
+  modals: ModalsContextProps,
+  uploadCallback: (
+    id: string,
+    expiration: string,
+    security: ShareSecurity,
+  ) => void
+) => {
+  return modals.openModal({
+    title: <Title order={4}>Share</Title>,
+    children: (
+      <CreateUploadModalBody uploadCallback={uploadCallback} />
+    ),
+  });
+};
+
+export default showCreateUploadModal;