feat: refactor permissions

gnosisguild · May 9, 2024 · b9d1db4 · b9d1db4
1 parent 7c86f08
commit b9d1db4
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 287 deletions.
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -60,18 +60,18 @@ const App: React.FC = () => {
                   <Route path="/publications" element={<PublicationsView />} />
                   <Route path=":publicationSlug" element={<PublicationView />} />
                   {/* <Route path="/goerli/*" element={<RedirectOldRoute />} />
-                    <Route path="/mainnet/*" element={<RedirectOldRoute />} />
-                    <Route path="/gnosis_chain/*" element={<RedirectOldRoute />} />
-                    <Route path="/polygon/*" element={<RedirectOldRoute />} />
-                    <Route path="/arbitrum/*" element={<RedirectOldRoute />} />
-                    <Route path="/optimism/*" element={<RedirectOldRoute />} />
-                    <Route path=":publicationSlug">
-                      <Route path="permissions/:type" element={<PermissionView />} />
-                      <Route path="new" element={<CreateArticleView type="new" />} />
-                      <Route path=":type/preview" element={<PreviewArticleView />} />
-                      <Route path=":articleId" element={<ArticleView updateChainId={updateChainId} />} />
-                      <Route path=":articleId/edit" element={<CreateArticleView type="edit" />} />
-                    </Route> */}
+                  <Route path="/mainnet/*" element={<RedirectOldRoute />} />
+                  <Route path="/gnosis_chain/*" element={<RedirectOldRoute />} />
+                  <Route path="/polygon/*" element={<RedirectOldRoute />} />
+                  <Route path="/arbitrum/*" element={<RedirectOldRoute />} />
+                  <Route path="/optimism/*" element={<RedirectOldRoute />} /> */}
+                  <Route path=":publicationSlug">
+                    <Route path="permissions/:type" element={<PermissionView />} />
+                    {/* <Route path="new" element={<CreateArticleView type="new" />} />
+                    <Route path=":type/preview" element={<PreviewArticleView />} />
+                    <Route path=":articleId" element={<ArticleView updateChainId={updateChainId} />} />
+                    <Route path=":articleId/edit" element={<CreateArticleView type="edit" />} /> */}
+                  </Route>
                 </Routes>
               </PosterProvider>
             </ArticleProvider>

diff --git a/packages/app/src/components/commons/PermissionItem.tsx b/packages/app/src/components/commons/PermissionItem.tsx
@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from "react"
-import { Box, Grid, Stack } from "@mui/material"
+import { Box, CircularProgress, Grid, Stack } from "@mui/material"
 import { styled } from "@mui/styles"
-import { palette } from "../../theme"
-import { Permission, Publication } from "../../models/publication"
+import { palette } from "@/theme"
+import { Permission, Publication } from "@/models/publication"
 import EditIcon from "@mui/icons-material/Edit"
 import CloseIcon from "@mui/icons-material/Close"
 import { UserBadge } from "./UserBadge"
-import usePublication from "../../services/publications/hooks/usePublication"
-import { PermissionFormType } from "../views/publication/PermissionView"
-import usePoster from "../../services/poster/hooks/usePoster"
-import { useNavigate, useParams } from "react-router-dom"
+import { useNavigate } from "react-router-dom"
+import usePublications from "@/services/publications/hooks/usePublications"
+import { TransactionStatus } from "@/hooks/useContract"
+import { usePublicationContext } from "@/services/publications/contexts"
 
 const PermissionItemContainer = styled(Box)({
   alignItems: "center",
@@ -40,60 +40,31 @@ type PermissionItemProps = {
   onClick: (id: string) => void
 }
 const PermissionItem: React.FC<PermissionItemProps> = ({ publication, permission, canEdit, showRemove, onClick }) => {
-  const { publicationSlug } = useParams<{ publicationSlug: string }>()
   const { address, id } = permission
   const navigate = useNavigate()
   const [deleteLoading, setDeleteLoading] = useState<boolean>(false)
-  const {
-    indexing: deleteIndexing,
-    setExecutePollInterval: deleteInterval,
-    transactionCompleted: deleteTransaction,
-    setCurrentUserPermission,
-  } = usePublication(publicationSlug || "")
 
-  const { givePermission } = usePoster()
-  const handlePermission = async (data: PermissionFormType) => {
-    if (publication) {
-      await givePermission({
-        action: "publication/permissions",
-        id: publication.id,
-        account: permission?.address || "",
-        permissions: {
-          "article/create": data.articleCreate,
-          "article/update": data.articleUpdate,
-          "article/delete": data.articleDelete,
-          "publication/delete": data.publicationDelete,
-          "publication/update": data.publicationUpdate,
-          "publication/permissions": data.publicationPermissions,
-        },
-      }).then((res) => {
-        if (res && res.error) {
-          setDeleteLoading(false)
-        } else {
-          deleteInterval(true)
-        }
-      })
-    }
-  }
+  const { givePermission, status, txLoading } = usePublications()
+  const { savePermission } = usePublicationContext()
 
   useEffect(() => {
-    if (deleteTransaction) {
+    if (status === TransactionStatus.Success) {
+      savePermission(undefined)
       navigate(-1)
     }
-  }, [deleteTransaction, navigate])
+  }, [navigate, savePermission, status])
 
-  const handleDeletePermission = () => {
-    if (publication && publication.permissions) {
+  const handleDeletePermission = async () => {
+    if (publication?.id && permission) {
       setDeleteLoading(true)
-      setCurrentUserPermission(publication.permissions)
-      handlePermission({
+      await givePermission(publication.id, {
         articleCreate: false,
         articleDelete: false,
         articleUpdate: false,
         publicationDelete: false,
         publicationPermissions: false,
         publicationUpdate: false,
-        account: "",
+        account: permission?.address,
       })
     }
   }
@@ -105,7 +76,7 @@ const PermissionItem: React.FC<PermissionItemProps> = ({ publication, permission
         {canEdit && (
           <PermissionItemEditContainer
             onClick={() => {
-              if (!deleteLoading || !deleteIndexing) {
+              if (!deleteLoading) {
                 canEdit && onClick(id ? id : "")
               }
             }}
@@ -129,11 +100,13 @@ const PermissionItem: React.FC<PermissionItemProps> = ({ publication, permission
               },
             }}
             onClick={() => {
-              if (!deleteLoading || !deleteIndexing) {
+              if (!deleteLoading) {
                 handleDeletePermission()
               }
             }}
           >
+            {" "}
+            {txLoading.update || (deleteLoading && <CircularProgress size={20} sx={{ marginRight: 1 }} />)}
             <CloseIcon
               sx={{ color: palette.whites[1000], stroke: palette.whites[1000], width: 10, height: 10, strokeWidth: 1 }}
             />

diff --git a/packages/app/src/components/commons/WalletBadge.tsx b/packages/app/src/components/commons/WalletBadge.tsx
@@ -1,7 +1,9 @@
 import React from "react"
-import { Avatar } from "@mui/material"
+import { Avatar, Box, Typography } from "@mui/material"
 import * as blockies from "blockies-ts"
 import { useNotification } from "@/hooks/useNotification"
+import { typography } from "@/theme"
+import { shortAddress } from "@/utils/string-handler"
 
 type WalletBadgeProps = {
   copyable?: boolean
@@ -25,17 +27,23 @@ export const WalletBadge: React.FC<WalletBadgeProps> = ({ address, copyable }) =
     }
   }
   return (
-    <Avatar
-      src={avatarSrc}
-      sx={{
-        width: 24,
-        height: 24,
-        cursor: "pointer",
-        "&:hover": {
-          opacity: 0.8,
-        },
-      }}
-      onClick={handleAddressClick}
-    />
+    <Box sx={{ display: "flex", alignItems: "center" }}>
+      <Avatar
+        src={avatarSrc}
+        sx={{
+          width: 24,
+          height: 24,
+          cursor: "pointer",
+          "&:hover": {
+            opacity: 0.8,
+          },
+          marginRight: 2,
+        }}
+        onClick={handleAddressClick}
+      />
+      <Typography sx={{ fontFamily: typography.fontFamilies.monospace, whiteSpace: "nowrap" }} variant="body2">
+        {shortAddress(address).toLowerCase()}
+      </Typography>
+    </Box>
   )
 }