Merge pull request #14 from stonith404/development

Merge development into main
2024-10-01 00:50:10 +02:00 · 2022-10-14 15:17:47 +02:00 · 2022-10-14 15:17:47 +02:00 · c4894e90cb
commit c4894e90cb
parent 0521f74cb1 e95da02866
21 changed files with 142 additions and 110 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -1,8 +1,8 @@
 backend/dist/
 backend/node_modules/
+backend/data

 frontend/node_modules/
 frontend/.next/
-frontend/dist/

 **/.git/
--- a/README.md
+++ b/README.md
@ -37,7 +37,7 @@ The website is now listening available on `http://localhost:3000`, have fun with

 ### Upgrade to a new version

-Just updated the docker container by running `docker-compose pull && docker-compose up -d`
+Just update the docker container by running `docker compose pull && docker compose up -d`

 > Note: If you installed Pingvin Share before it used Sqlite, you unfortunately have to set up the project from scratch again, sorry for that.

@ -65,3 +65,7 @@ Contact me, create an issue or directly create a pull request.
 5. Start the frontend with `npm run dev`

 You're all set!
+
+### Testing
+
+At the moment we only have system tests for the backend. To run these tests, run `npm run test:system` in the backend folder.
--- a/backend/src/share/share.service.ts
+++ b/backend/src/share/share.service.ts
@ -99,7 +99,14 @@ export class ShareService {

  async getSharesByUser(userId: string) {
    return await this.prisma.share.findMany({
-      where: { creator: { id: userId }, expiration: { gt: new Date() } },
+      where: {
+        creator: { id: userId },
+        expiration: { gt: new Date() },
+        uploadLocked: true,
+      },
+      orderBy: {
+        expiration: "desc",
+      },
    });
  }

--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@ -26,7 +26,7 @@
        "next-pwa": "^5.6.0",
        "react": "18.0.0",
        "react-dom": "18.0.0",
-        "tabler-icons-react": "^1.44.0",
+        "react-icons": "^4.4.0",
        "yup": "^0.32.11"
      },
      "devDependencies": {
@ -6381,6 +6381,14 @@
        "react": ">= 16.8 || 18.0.0"
      }
    },
+    "node_modules/react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -6971,14 +6979,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/tabler-icons-react": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/tabler-icons-react/-/tabler-icons-react-1.44.0.tgz",
-      "integrity": "sha512-AYQQGl55yVe1KHZl+zyDAAwDOcPknKZNC7vgwmjyvpmz4P5Gjb7DtpsOPa1nB0qMYW5Orsrt+1e4qnRoCKgo6A==",
-      "peerDependencies": {
-        "react": ">= 16.8.0"
-      }
-    },
    "node_modules/tapable": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@ -12479,6 +12479,12 @@
        "prop-types": "^15.8.1"
      }
    },
+    "react-icons": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
+      "integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
+      "requires": {}
+    },
    "react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -12910,12 +12916,6 @@
      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
    },
-    "tabler-icons-react": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/tabler-icons-react/-/tabler-icons-react-1.44.0.tgz",
-      "integrity": "sha512-AYQQGl55yVe1KHZl+zyDAAwDOcPknKZNC7vgwmjyvpmz4P5Gjb7DtpsOPa1nB0qMYW5Orsrt+1e4qnRoCKgo6A==",
-      "requires": {}
-    },
    "tapable": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@ -27,7 +27,7 @@
    "next-pwa": "^5.6.0",
    "react": "18.0.0",
    "react-dom": "18.0.0",
-    "tabler-icons-react": "^1.44.0",
+    "react-icons": "^4.4.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
--- a/frontend/src/components/Logo.tsx
+++ b/frontend/src/components/Logo.tsx
@ -0,0 +1,34 @@
+const Logo = ({ height, width }: { height: number; width: number }) => {
+  return (
+    <svg
+      id="Layer_1"
+      data-name="Layer 1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 943.11 911.62"
+      height={height}
+      width={width}
+    >
+      <ellipse cx="471.56" cy="454.28" rx="471.56" ry="454.28" fill="#46509e" />
+      <ellipse cx="471.56" cy="390.28" rx="233.66" ry="207" fill="#37474f" />
+      <path
+        d="M705.22,849c-36.69,21.14-123.09,64.32-240.64,62.57A469.81,469.81,0,0,1,237.89,849V394.76H705.22Z"
+        fill="#37474f"
+      />
+      <path
+        d="M658.81,397.7V873.49a478.12,478.12,0,0,1-374.19,0V397.7c0-95.55,83.78-173,187.1-173S658.81,302.15,658.81,397.7Z"
+        fill="#fff"
+      />
+      <polygon
+        points="565.02 431.68 471.56 514.49 378.09 431.68 565.02 431.68"
+        fill="#46509e"
+      />
+      <ellipse cx="378.09" cy="369.58" rx="23.37" ry="20.7" fill="#37474f" />
+      <ellipse cx="565.02" cy="369.58" rx="23.37" ry="20.7" fill="#37474f" />
+      <path
+        d="M658.49,400.63c0-40-36.6-72.45-81.79-72.45s-81.78,32.41-81.78,72.45a64.79,64.79,0,0,0,7.9,31.05H440.29a64.79,64.79,0,0,0,7.9-31.05c0-40-36.59-72.45-81.78-72.45s-81.79,32.41-81.79,72.45l-46.73-10.35c0-114.31,104.64-207,233.67-207s233.66,92.69,233.66,207Z"
+        fill="#37474f"
+      />
+    </svg>
+  );
+};
+export default Logo;
--- a/frontend/src/components/navBar/ActionAvatar.tsx
+++ b/frontend/src/components/navBar/ActionAvatar.tsx
@ -1,6 +1,6 @@
 import { ActionIcon, Avatar, Menu } from "@mantine/core";
 import { NextLink } from "@mantine/next";
-import { DoorExit, Link } from "tabler-icons-react";
+import { TbDoorExit, TbLink } from "react-icons/tb";;
 import authService from "../../services/auth.service";

 const ActionAvatar = () => {
@ -15,7 +15,7 @@ const ActionAvatar = () => {
        <Menu.Item
          component={NextLink}
          href="/account/shares"
-          icon={<Link size={14} />}
+          icon={<TbLink size={14} />}
        >
          My shares
        </Menu.Item>
@ -23,7 +23,7 @@ const ActionAvatar = () => {
          onClick={async () => {
            authService.signOut();
          }}
-          icon={<DoorExit size={14} />}
+          icon={<TbDoorExit size={14} />}
        >
          Sign out
        </Menu.Item>
--- a/frontend/src/components/navBar/NavBar.tsx
+++ b/frontend/src/components/navBar/NavBar.tsx
@ -5,7 +5,6 @@ import {
  createStyles,
  Group,
  Header,
-  Image,
  Paper,
  Stack,
  Text,
@ -16,6 +15,7 @@ import { NextLink } from "@mantine/next";
 import getConfig from "next/config";
 import { ReactNode, useEffect, useState } from "react";
 import useUser from "../../hooks/user.hook";
+import Logo from "../Logo";
 import ActionAvatar from "./ActionAvatar";

 const { publicRuntimeConfig } = getConfig();
@ -180,12 +180,7 @@ const NavBar = () => {
      <Container className={classes.header}>
        <NextLink href="/">
          <Group>
-            <Image
-              src="/img/logo.svg"
-              alt="Pinvgin Share Logo"
-              height={35}
-              width={35}
-            />
+            <Logo height={35} width={35} />
            <Text weight={600}>Pingvin Share</Text>
          </Group>
        </NextLink>
--- a/frontend/src/components/share/DownloadAllButton.tsx
+++ b/frontend/src/components/share/DownloadAllButton.tsx
@ -1,6 +1,7 @@
-import { Button, Tooltip } from "@mantine/core";
+import { Button } from "@mantine/core";
 import { useEffect, useState } from "react";
 import shareService from "../../services/share.service";
+import toast from "../../utils/toast.util";

 const DownloadAllButton = ({ shareId }: { shareId: string }) => {
  const [isZipReady, setIsZipReady] = useState(false);
@ -32,21 +33,18 @@ const DownloadAllButton = ({ shareId }: { shareId: string }) => {
    };
  }, []);

-  if (!isZipReady)
  return (
-      <Tooltip
-        position="bottom"
-        width={220}
-        withArrow
-        label="The share is preparing. This can take a few minutes."
+    <Button
+      variant="outline"
+      loading={isLoading}
+      onClick={() => {
+        if (!isZipReady) {
+          toast.error("The share is preparing. Try again in a few minutes.");
+        } else {
+          downloadAll();
+        }
+      }}
    >
-        <Button variant="outline" onClick={downloadAll} disabled>
-          Download all
-        </Button>
-      </Tooltip>
-    );
-  return (
-    <Button variant="outline" loading={isLoading} onClick={downloadAll}>
      Download all
    </Button>
  );
--- a/frontend/src/components/share/FileList.tsx
+++ b/frontend/src/components/share/FileList.tsx
@ -1,5 +1,5 @@
 import { ActionIcon, Loader, Skeleton, Table } from "@mantine/core";
-import { CircleCheck, Download } from "tabler-icons-react";
+import { TbCircleCheck, TbDownload } from "react-icons/tb";;
 import shareService from "../../services/share.service";

 import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
@ -39,7 +39,7 @@ const FileList = ({
          file.uploadingState != "finished" ? (
            <Loader size={22} />
          ) : (
-            <CircleCheck color="green" size={22} />
+            <TbCircleCheck color="green" size={22} />
          )
        ) : (
          <ActionIcon
@ -48,7 +48,7 @@ const FileList = ({
              await shareService.downloadFile(shareId, file.id);
            }}
          >
-            <Download />
+            <TbDownload />
          </ActionIcon>
        )}
      </td>
--- a/frontend/src/components/upload/Dropzone.tsx
+++ b/frontend/src/components/upload/Dropzone.tsx
@ -2,7 +2,7 @@ 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";
@ -67,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
@ -89,7 +89,7 @@ const Dropzone = ({
          disabled={isUploading}
          onClick={() => openRef.current && openRef.current()}
        >
-          {<Upload />}
+          {<TbUpload />}
        </Button>
      </Center>
    </div>
--- a/frontend/src/components/upload/FileList.tsx
+++ b/frontend/src/components/upload/FileList.tsx
@ -1,6 +1,6 @@
 import { ActionIcon, Table } from "@mantine/core";
 import { Dispatch, SetStateAction } from "react";
-import { 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";
@ -28,7 +28,7 @@ const FileList = ({
            size={25}
            onClick={() => remove(i)}
          >
-            <Trash />
+            <TbTrash />
          </ActionIcon>
        ) : (
          <UploadProgressIndicator progress={file.uploadingProgress} />
--- a/frontend/src/components/upload/UploadProgressIndicator.tsx
+++ b/frontend/src/components/upload/UploadProgressIndicator.tsx
@ -1,6 +1,5 @@
 import { RingProgress } from "@mantine/core";
-import { CircleCheck, CircleX } from "tabler-icons-react";
-
+import { TbCircleCheck, TbCircleX } from "react-icons/tb";
 const UploadProgressIndicator = ({ progress }: { progress: number }) => {
  if (progress > 0 && progress < 100) {
    return (
@ -10,10 +9,10 @@ const UploadProgressIndicator = ({ progress }: { progress: number }) => {
        size={25}
      />
    );
-  } else if (progress == 100) {
-    return <CircleCheck color="green" size={22} />;
+  } else if (progress >= 100) {
+    return <TbCircleCheck color="green" size={22} />;
  } else {
-    return <CircleX color="red" size={22} />;
+    return <TbCircleX color="red" size={22} />;
  }
 };

--- a/frontend/src/components/upload/showCompletedUploadModal.tsx
+++ b/frontend/src/components/upload/showCompletedUploadModal.tsx
@ -1,25 +1,20 @@
 import {
  ActionIcon,
  Button,
-  Group,
  Stack,
  Text,
  TextInput,
-  Title
+  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 { TbCopy } from "react-icons/tb";
 import { Share } from "../../types/share.type";
 import toast from "../../utils/toast.util";
-
-const showCompletedUploadModal = (
-  modals: ModalsContextProps,
-  share: Share,
-) => {
+const showCompletedUploadModal = (modals: ModalsContextProps, share: Share) => {
  return modals.openModal({
    closeOnClickOutside: false,
    withCloseButton: false,
@ -50,7 +45,7 @@ const Body = ({ share }: { share: Share }) => {
              toast.success("Your link was copied to the keyboard.");
            }}
          >
-            <Copy />
+            <TbCopy />
          </ActionIcon>
        }
      />
--- a/frontend/src/pages/_app.tsx
+++ b/frontend/src/pages/_app.tsx
@ -8,9 +8,6 @@ import {
 import { useColorScheme } from "@mantine/hooks";
 import { ModalsProvider } from "@mantine/modals";
 import { NotificationsProvider } from "@mantine/notifications";
-import { setCookies } from "cookies-next";
-import { GetServerSidePropsContext } from "next";
-import cookies from "next-cookies";
 import type { AppProps } from "next/app";
 import { useEffect, useState } from "react";
 import Footer from "../components/Footer";
@ -23,14 +20,10 @@ import globalStyle from "../styles/mantine.style";
 import { CurrentUser } from "../types/user.type";
 import { GlobalLoadingContext } from "../utils/loading.util";

-function App(props: AppProps & { colorScheme: ColorScheme }) {
-  const { Component, pageProps } = props;
-
+function App({ Component, pageProps }: AppProps) {
  const systemTheme = useColorScheme();

-  const [colorScheme, setColorScheme] = useState<ColorScheme>(
-    props.colorScheme
-  );
+  const [colorScheme, setColorScheme] = useState<ColorScheme>();
  const [isLoading, setIsLoading] = useState(true);
  const [user, setUser] = useState<CurrentUser | null>(null);

@ -47,9 +40,6 @@ function App(props: AppProps & { colorScheme: ColorScheme }) {
  }, []);

  useEffect(() => {
-    setCookies("color-schema", systemTheme, {
-      maxAge: 60 * 60 * 24 * 30,
-    });
    setColorScheme(systemTheme);
  }, [systemTheme]);

@ -87,9 +77,3 @@ function App(props: AppProps & { colorScheme: ColorScheme }) {
 }

 export default App;
-
-App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => {
-  return {
-    colorScheme: cookies(ctx)["color-schema"] || "light",
-  };
-};
--- a/frontend/src/pages/account/shares.tsx
+++ b/frontend/src/pages/account/shares.tsx
@ -15,8 +15,8 @@ import { useModals } from "@mantine/modals";
 import { NextLink } from "@mantine/next";
 import moment from "moment";
 import { useRouter } from "next/router";
-import { useState } from "react";
-import { Link, Trash } from "tabler-icons-react";
+import { useEffect, useState } from "react";
+import { TbLink, TbTrash } from "react-icons/tb";;
 import Meta from "../../components/Meta";
 import useUser from "../../hooks/user.hook";
 import shareService from "../../services/share.service";
@ -31,9 +31,9 @@ const MyShares = () => {

  const [shares, setShares] = useState<MyShare[]>();

-  // useEffect(() => {
-  //   shareService.getMyShares().then((shares) => setShares(shares));
-  // }, []);
+  useEffect(() => {
+    shareService.getMyShares().then((shares) => setShares(shares));
+  }, []);

  if (!user) {
    router.replace("/");
@ -89,7 +89,7 @@ const MyShares = () => {
                          );
                        }}
                      >
-                        <Link />
+                        <TbLink />
                      </ActionIcon>
                      <ActionIcon
                        color="red"
@ -116,7 +116,7 @@ const MyShares = () => {
                          });
                        }}
                      >
-                        <Trash />
+                        <TbTrash />
                      </ActionIcon>
                    </Group>
                  </td>
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@ -12,10 +12,9 @@ import { NextLink } from "@mantine/next";
 import getConfig from "next/config";
 import Image from "next/image";
 import { useRouter } from "next/router";
-import { Check } from "tabler-icons-react";
+import { TbCheck } from "react-icons/tb";
 import Meta from "../components/Meta";
 import useUser from "../hooks/user.hook";
-
 const { publicRuntimeConfig } = getConfig();

 const useStyles = createStyles((theme) => ({
@ -101,7 +100,7 @@ export default function Home() {
                size="sm"
                icon={
                  <ThemeIcon size={20} radius="xl">
-                    <Check size={12} />
+                    <TbCheck size={12} />
                  </ThemeIcon>
                }
              >
--- a/frontend/src/pages/share/[shareId].tsx
+++ b/frontend/src/pages/share/[shareId].tsx
@ -1,6 +1,6 @@
 import { Group } from "@mantine/core";
 import { useModals } from "@mantine/modals";
-import { useRouter } from "next/router";
+import { GetServerSidePropsContext } from "next";
 import { useEffect, useState } from "react";
 import Meta from "../../components/Meta";
 import DownloadAllButton from "../../components/share/DownloadAllButton";
@ -9,10 +9,14 @@ import showEnterPasswordModal from "../../components/share/showEnterPasswordModa
 import showErrorModal from "../../components/share/showErrorModal";
 import shareService from "../../services/share.service";

-const Share = () => {
-  const router = useRouter();
+export function getServerSideProps(context: GetServerSidePropsContext) {
+  return {
+    props: { shareId: context.params!.shareId },
+  };
+}
+
+const Share = ({ shareId }: { shareId: string }) => {
  const modals = useModals();
-  const shareId = router.query.shareId as string;
  const [fileList, setFileList] = useState<any[]>([]);

  const getShareToken = async (password?: string) => {
--- a/frontend/src/pages/upload.tsx
+++ b/frontend/src/pages/upload.tsx
@ -56,13 +56,27 @@ const Upload = () => {
          files[i].uploadingProgress = -1;
        }

-        if (!files.some((f) => f.uploadingProgress != 100)) {
-          await shareService.completeShare(share.id);
+        if (
+          files.every(
+            (file) =>
+              file.uploadingProgress >= 100 || file.uploadingProgress == -1
+          )
+        ) {
+          const fileErrorCount = files.filter(
+            (file) => file.uploadingProgress == -1
+          ).length;
          setisUploading(false);
+          if (fileErrorCount > 0) {
+            toast.error(
+              `${fileErrorCount} file(s) failed to upload. Try again.`
+            );
+          } else {
+            await shareService.completeShare(share.id);
            showCompletedUploadModal(modals, share);
            setFiles([]);
          }
        }
+      }
    } catch (e) {
      if (axios.isAxiosError(e)) {
        toast.error(e.response?.data?.message ?? "An unkown error occured.");
--- a/frontend/src/services/share.service.ts
+++ b/frontend/src/services/share.service.ts
@ -72,7 +72,7 @@ const uploadFile = async (
  file: File,
  progressCallBack: (uploadingProgress: number) => void
 ) => {
-  var formData = new FormData();
+  let formData = new FormData();
  formData.append("file", file);

  return (
--- a/frontend/src/utils/toast.util.tsx
+++ b/frontend/src/utils/toast.util.tsx
@ -1,9 +1,8 @@
 import { showNotification } from "@mantine/notifications";
-import { Check, X } from "tabler-icons-react";
-
+import { TbCheck, TbX } from "react-icons/tb";
 const error = (message: string) =>
  showNotification({
-    icon: <X />,
+    icon: <TbX />,
    color: "red",
    radius: "md",
    title: "Error",
@ -13,7 +12,7 @@ const error = (message: string) =>

 const success = (message: string) =>
  showNotification({
-    icon: <Check />,
+    icon: <TbCheck />,
    color: "green",
    radius: "md",
    title: "Success",