feat: add admin-exclusive share-management page (#461)

* testing with all_shares

* share table

* share table

* change icon on admin page

* add share size to list

---------

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

frontend/src/pages/admin/index.tsx

@@ -10,7 +10,7 @@ import {
 } from "@mantine/core";
 import Link from "next/link";
 import { useEffect, useState } from "react";
-import { TbRefresh, TbSettings, TbUsers } from "react-icons/tb";
+import { TbLink, TbRefresh, TbSettings, TbUsers } from "react-icons/tb";
 import { FormattedMessage } from "react-intl";
 import Meta from "../../components/Meta";
 import useTranslate from "../../hooks/useTranslate.hook";
@@ -41,6 +41,11 @@ const Admin = () => {
       icon: TbUsers,
       route: "/admin/users",
     },
+    {
+      title: t("admin.button.shares"),
+      icon: TbLink,
+      route: "/admin/shares",
+    },
     {
       title: t("admin.button.config"),
       icon: TbSettings,

frontend/src/pages/admin/shares.tsx

@@ -0,0 +1,74 @@
+import { Group, Space, Text, Title } from "@mantine/core";
+import { useModals } from "@mantine/modals";
+import { useEffect, useState } from "react";
+import { FormattedMessage } from "react-intl";
+import Meta from "../../components/Meta";
+import ManageShareTable from "../../components/admin/shares/ManageShareTable";
+import useTranslate from "../../hooks/useTranslate.hook";
+import shareService from "../../services/share.service";
+import { MyShare } from "../../types/share.type";
+import toast from "../../utils/toast.util";
+
+const Shares = () => {
+  const [shares, setShares] = useState<MyShare[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const modals = useModals();
+  const t = useTranslate();
+
+  const getShares = () => {
+    setIsLoading(true);
+    shareService.list().then((shares) => {
+      setShares(shares);
+      setIsLoading(false);
+    });
+  };
+
+  const deleteShare = (share: MyShare) => {
+    modals.openConfirmModal({
+      title: t("admin.shares.edit.delete.title", {
+        id: share.id,
+      }),
+      children: (
+        <Text size="sm">
+          <FormattedMessage id="admin.shares.edit.delete.description" />
+        </Text>
+      ),
+      labels: {
+        confirm: t("common.button.delete"),
+        cancel: t("common.button.cancel"),
+      },
+      confirmProps: { color: "red" },
+      onConfirm: async () => {
+        shareService
+          .remove(share.id)
+          .then(() => setShares(shares.filter((v) => v.id != share.id)))
+          .catch(toast.axiosError);
+      },
+    });
+  };
+
+  useEffect(() => {
+    getShares();
+  }, []);
+
+  return (
+    <>
+      <Meta title={t("admin.shares.title")} />
+      <Group position="apart" align="baseline" mb={20}>
+        <Title mb={30} order={3}>
+          <FormattedMessage id="admin.shares.title" />
+        </Title>
+      </Group>
+
+      <ManageShareTable
+        shares={shares}
+        deleteShare={deleteShare}
+        isLoading={isLoading}
+      />
+      <Space h="xl" />
+    </>
+  );
+};
+
+export default Shares;