feat: add description field to share

frontend/src/components/share/FileList.tsx

@@ -9,35 +9,10 @@ const FileList = ({
   shareId,
   isLoading,
 }: {
-  files: any[];
+  files?: any[];
   shareId: string;
   isLoading: boolean;
 }) => {
-  const rows = files.map((file) => (
-    <tr key={file.name}>
-      <td>{file.name}</td>
-      <td>{byteStringToHumanSizeString(file.size)}</td>
-      <td>
-        {file.uploadingState ? (
-          file.uploadingState != "finished" ? (
-            <Loader size={22} />
-          ) : (
-            <TbCircleCheck color="green" size={22} />
-          )
-        ) : (
-          <ActionIcon
-            size={25}
-            onClick={async () => {
-              await shareService.downloadFile(shareId, file.id);
-            }}
-          >
-            <TbDownload />
-          </ActionIcon>
-        )}
-      </td>
-    </tr>
-  ));
-
   return (
     <Table>
       <thead>
@@ -47,7 +22,34 @@ const FileList = ({
           <th></th>
         </tr>
       </thead>
-      <tbody>{isLoading ? skeletonRows : rows}</tbody>
+      <tbody>
+        {isLoading
+          ? skeletonRows
+          : files!.map((file) => (
+              <tr key={file.name}>
+                <td>{file.name}</td>
+                <td>{byteStringToHumanSizeString(file.size)}</td>
+                <td>
+                  {file.uploadingState ? (
+                    file.uploadingState != "finished" ? (
+                      <Loader size={22} />
+                    ) : (
+                      <TbCircleCheck color="green" size={22} />
+                    )
+                  ) : (
+                    <ActionIcon
+                      size={25}
+                      onClick={async () => {
+                        await shareService.downloadFile(shareId, file.id);
+                      }}
+                    >
+                      <TbDownload />
+                    </ActionIcon>
+                  )}
+                </td>
+              </tr>
+            ))}
+      </tbody>
     </Table>
   );
 };

frontend/src/components/upload/modals/showCreateUploadModal.tsx

@@ -12,6 +12,7 @@ import {
   Select,
   Stack,
   Text,
+  Textarea,
   TextInput,
   Title,
 } from "@mantine/core";
@@ -22,7 +23,7 @@ import { useState } from "react";
 import { TbAlertCircle } from "react-icons/tb";
 import * as yup from "yup";
 import shareService from "../../../services/share.service";
-import { ShareSecurity } from "../../../types/share.type";
+import { CreateShare } from "../../../types/share.type";
 import ExpirationPreview from "../ExpirationPreview";
 
 const showCreateUploadModal = (
@@ -32,12 +33,7 @@ const showCreateUploadModal = (
     allowUnauthenticatedShares: boolean;
     enableEmailRecepients: boolean;
   },
-  uploadCallback: (
-    id: string,
-    expiration: string,
-    recipients: string[],
-    security: ShareSecurity
-  ) => void
+  uploadCallback: (createShare: CreateShare) => void
 ) => {
   return modals.openModal({
     title: <Title order={4}>Share</Title>,
@@ -54,12 +50,7 @@ const CreateUploadModalBody = ({
   uploadCallback,
   options,
 }: {
-  uploadCallback: (
-    id: string,
-    expiration: string,
-    recipients: string[],
-    security: ShareSecurity
-  ) => void;
+  uploadCallback: (createShare: CreateShare) => void;
   options: {
     isUserSignedIn: boolean;
     allowUnauthenticatedShares: boolean;
@@ -88,6 +79,7 @@ const CreateUploadModalBody = ({
       recipients: [] as string[],
       password: undefined,
       maxViews: undefined,
+      description: undefined,
       expiration_num: 1,
       expiration_unit: "-days",
       never_expires: false,
@@ -116,9 +108,15 @@ const CreateUploadModalBody = ({
             const expiration = form.values.never_expires
               ? "never"
               : form.values.expiration_num + form.values.expiration_unit;
-            uploadCallback(values.link, expiration, values.recipients, {
-              password: values.password,
-              maxViews: values.maxViews,
+            uploadCallback({
+              id: values.link,
+              expiration: expiration,
+              recipients: values.recipients,
+              description: values.description,
+              security: {
+                password: values.password,
+                maxViews: values.maxViews,
+              },
             });
             modals.closeAll();
           }
@@ -258,6 +256,18 @@ const CreateUploadModalBody = ({
                 </Accordion.Panel>
               </Accordion.Item>
             )}
+            <Accordion.Item value="description" sx={{ borderBottom: "none" }}>
+              <Accordion.Control>Description</Accordion.Control>
+              <Accordion.Panel>
+                <Stack align="stretch">
+                  <Textarea
+                    variant="filled"
+                    placeholder="Note for the recepients"
+                    {...form.getInputProps("description")}
+                  />
+                </Stack>
+              </Accordion.Panel>
+            </Accordion.Item>
             <Accordion.Item value="security" sx={{ borderBottom: "none" }}>
               <Accordion.Control>Security options</Accordion.Control>
               <Accordion.Panel>