feat: add description field to share

frontend/src/pages/share/[shareId].tsx

@@ -1,4 +1,4 @@
-import { Group } from "@mantine/core";
+import { Box, Group, Text, Title } from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { GetServerSidePropsContext } from "next";
 import { useEffect, useState } from "react";
@@ -8,6 +8,7 @@ import FileList from "../../components/share/FileList";
 import showEnterPasswordModal from "../../components/share/showEnterPasswordModal";
 import showErrorModal from "../../components/share/showErrorModal";
 import shareService from "../../services/share.service";
+import { Share as ShareType } from "../../types/share.type";
 
 export function getServerSideProps(context: GetServerSidePropsContext) {
   return {
@@ -17,7 +18,7 @@ export function getServerSideProps(context: GetServerSidePropsContext) {
 
 const Share = ({ shareId }: { shareId: string }) => {
   const modals = useModals();
-  const [files, setFiles] = useState<any[]>([]);
+  const [share, setShare] = useState<ShareType>();
 
   const getShareToken = async (password?: string) => {
     await shareService
@@ -41,7 +42,7 @@ const Share = ({ shareId }: { shareId: string }) => {
     shareService
       .get(shareId)
       .then((share) => {
-        setFiles(share.files);
+        setShare(share);
       })
       .catch((e) => {
         const { error } = e.response.data;
@@ -77,12 +78,16 @@ const Share = ({ shareId }: { shareId: string }) => {
         title={`Share ${shareId}`}
         description="Look what I've shared with you."
       />
-      {files.length > 1 && (
-        <Group position="right" mb="lg">
-          <DownloadAllButton shareId={shareId} />
-        </Group>
-      )}
-      <FileList files={files} shareId={shareId} isLoading={files.length == 0} />
+
+      <Group position="apart" mb="lg">
+        <Box style={{ maxWidth: "70%" }}>
+          <Title order={3}>{share?.id}</Title>
+          <Text size="sm">{share?.description}</Text>
+        </Box>
+        {share?.files.length > 1 && <DownloadAllButton shareId={shareId} />}
+      </Group>
+
+      <FileList files={share?.files} shareId={shareId} isLoading={!share} />
     </>
   );
 };

frontend/src/pages/upload.tsx

@@ -13,10 +13,10 @@ import useConfig from "../hooks/config.hook";
 import useUser from "../hooks/user.hook";
 import shareService from "../services/share.service";
 import { FileUpload } from "../types/File.type";
-import { Share, ShareSecurity } from "../types/share.type";
+import { CreateShare, Share } from "../types/share.type";
 import toast from "../utils/toast.util";
 
-let share: Share;
+let createdShare: Share;
 const promiseLimit = pLimit(3);
 
 const Upload = () => {
@@ -28,12 +28,7 @@ const Upload = () => {
   const [files, setFiles] = useState<FileUpload[]>([]);
   const [isUploading, setisUploading] = useState(false);
 
-  const uploadFiles = async (
-    id: string,
-    expiration: string,
-    recipients: string[],
-    security: ShareSecurity
-  ) => {
+  const uploadFiles = async (share: CreateShare) => {
     setisUploading(true);
     try {
       setFiles((files) =>
@@ -42,7 +37,8 @@ const Upload = () => {
           return file;
         })
       );
-      share = await shareService.create(id, expiration, recipients, security);
+      createdShare = await shareService.create(share);
+
       const uploadPromises = files.map((file, i) => {
         // Callback to indicate current upload progress
         const progressCallBack = (progress: number) => {
@@ -91,9 +87,9 @@ const Upload = () => {
         toast.error(`${fileErrorCount} file(s) failed to upload. Try again.`);
       } else {
         shareService
-          .completeShare(share.id)
+          .completeShare(createdShare.id)
           .then(() => {
-            showCompletedUploadModal(modals, share);
+            showCompletedUploadModal(modals, createdShare);
             setFiles([]);
           })
           .catch(() =>