feat: ability to add and delete files of existing share (#306)

* feat(share): delete file api, revert complete share api.

* feat(share): share edit page.

* feat(share): Modify the DropZone title of the edit sharing UI.

* feat(share): i18n for edit share. (en, zh)

* feat(share): allow creator get share by id.

* feat(share): add edit button in account/shares.

* style(share): lint.

* chore: some minor adjustments.

* refactor: run formatter

* refactor: remove unused return

---------

Co-authored-by: Elias Schneider <login@eliasschneider.com>

frontend/src/pages/account/shares.tsx

@@ -16,7 +16,7 @@ import { useModals } from "@mantine/modals";
 import moment from "moment";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import { TbInfoCircle, TbLink, TbTrash } from "react-icons/tb";
+import { TbEdit, TbInfoCircle, TbLink, TbTrash } from "react-icons/tb";
 import { FormattedMessage } from "react-intl";
 import Meta from "../../components/Meta";
 import showShareInformationsModal from "../../components/account/showShareInformationsModal";
@@ -110,6 +110,11 @@ const MyShares = () => {
                   </td>
                   <td>
                     <Group position="right">
+                      <Link href={`/share/${share.id}/edit`}>
+                        <ActionIcon color="orange" variant="light" size={25}>
+                          <TbEdit />
+                        </ActionIcon>
+                      </Link>
                       <ActionIcon
                         color="blue"
                         variant="light"

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

@@ -0,0 +1,65 @@
+import { LoadingOverlay } from "@mantine/core";
+import { useModals } from "@mantine/modals";
+import { GetServerSidePropsContext } from "next";
+import { useEffect, useState } from "react";
+import showErrorModal from "../../../components/share/showErrorModal";
+import shareService from "../../../services/share.service";
+import { Share as ShareType } from "../../../types/share.type";
+import useTranslate from "../../../hooks/useTranslate.hook";
+import EditableUpload from "../../../components/upload/EditableUpload";
+import Meta from "../../../components/Meta";
+
+export function getServerSideProps(context: GetServerSidePropsContext) {
+  return {
+    props: { shareId: context.params!.shareId },
+  };
+}
+
+const Share = ({ shareId }: { shareId: string }) => {
+  const t = useTranslate();
+  const modals = useModals();
+  const [isLoading, setIsLoading] = useState(true);
+  const [share, setShare] = useState<ShareType>();
+
+  useEffect(() => {
+    shareService
+      .getFromOwner(shareId)
+      .then((share) => {
+        setShare(share);
+      })
+      .catch((e) => {
+        const { error } = e.response.data;
+        if (e.response.status == 404) {
+          if (error == "share_removed") {
+            showErrorModal(
+              modals,
+              t("share.error.removed.title"),
+              e.response.data.message,
+            );
+          } else {
+            showErrorModal(
+              modals,
+              t("share.error.not-found.title"),
+              t("share.error.not-found.description"),
+            );
+          }
+        } else {
+          showErrorModal(modals, t("common.error"), t("common.error.unknown"));
+        }
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, []);
+
+  if (isLoading) return <LoadingOverlay visible />;
+
+  return (
+    <>
+      <Meta title={t("share.edit.title", { shareId })} />
+      <EditableUpload shareId={shareId} files={share?.files || []} />
+    </>
+  );
+};
+
+export default Share;

frontend/src/pages/upload/index.tsx

@@ -202,7 +202,9 @@ const Upload = ({
         showCreateUploadModalCallback={showCreateUploadModalCallback}
         isUploading={isUploading}
       />
-      {files.length > 0 && <FileList files={files} setFiles={setFiles} />}
+      {files.length > 0 && (
+        <FileList<FileUpload> files={files} setFiles={setFiles} />
+      )}
     </>
   );
 };