Merge pull request #2208 from decentdao/issue/2162-create-role-propos…

…al-updates `2162` create role proposal updates
decentdao · Aug 5, 2024 · c4c2f25 · c4c2f25
2 parents 2fb76bd + efd0f13
commit c4c2f25
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 6 deletions.
diff --git a/src/components/pages/Roles/RoleCard.tsx b/src/components/pages/Roles/RoleCard.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, Icon, Image, Text } from '@chakra-ui/react';
-import { CaretRight } from '@phosphor-icons/react';
+import { CaretCircleRight, CaretRight } from '@phosphor-icons/react';
 import { formatDuration, intervalToDuration } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { getAddress, zeroAddress } from 'viem';
@@ -11,7 +11,7 @@ import { Card } from '../../ui/cards/Card';
 import EtherscanLink from '../../ui/links/EtherscanLink';
 import Avatar from '../../ui/page/Header/Avatar';
 import EditBadge from './EditBadge';
-import { RoleEditProps, RoleProps, SablierPayment } from './types';
+import { EditBadgeStatus, RoleEditProps, RoleProps, SablierPayment } from './types';
 
 export function AvatarAndRoleName({
   wearerAddress,
@@ -217,3 +217,37 @@ export function RoleCardEdit({
     </Card>
   );
 }
+
+export function RoleCardShort({
+  name,
+  editStatus,
+  handleRoleClick,
+}: {
+  name: string;
+  editStatus?: EditBadgeStatus;
+  handleRoleClick: () => void;
+}) {
+  return (
+    <Card onClick={handleRoleClick}>
+      <Flex justifyContent="space-between">
+        <Text
+          textStyle="display-lg"
+          color="lilac-0"
+        >
+          {name}
+        </Text>
+        <Flex
+          alignItems="center"
+          gap="1rem"
+        >
+          <EditBadge editStatus={editStatus} />
+          <Icon
+            as={CaretCircleRight}
+            color="white-0"
+            boxSize="1.5rem"
+          />
+        </Flex>
+      </Flex>
+    </Card>
+  );
+}
diff --git a/src/components/pages/Roles/forms/RoleFormCreateProposal.tsx b/src/components/pages/Roles/forms/RoleFormCreateProposal.tsx
@@ -11,7 +11,7 @@ import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkCon
 import { CustomNonceInput } from '../../../ui/forms/CustomNonceInput';
 import { InputComponent, TextareaComponent } from '../../../ui/forms/InputComponent';
 import LabelWrapper from '../../../ui/forms/LabelWrapper';
-import { RoleCardEdit } from '../RoleCard';
+import { RoleCardShort } from '../RoleCard';
 import RolesDetailsDrawer from '../RolesDetailsDrawer';
 import RolesDetailsDrawerMobile from '../RolesDetailsDrawerMobile';
 import { RoleFormValues, RoleValue } from '../types';
@@ -117,15 +117,13 @@ export default function RoleFormCreateProposal({ close }: { close: () => void })
         borderRadius="0.5rem"
       >
         {editedRoles.map((role, index) => (
-          <RoleCardEdit
+          <RoleCardShort
             key={index}
-            wearerAddress={role.wearer}
             name={role.name}
             handleRoleClick={() => {
               setDrawerViewingRole(role);
             }}
             editStatus={role.editedRole?.status}
-            payments={role.payments}
           />
         ))}
       </Box>

diff --git a/src/pages/daos/[daoAddress]/roles/edit/summary/index.tsx b/src/pages/daos/[daoAddress]/roles/edit/summary/index.tsx
@@ -1,8 +1,11 @@
 import { Box, Flex, Icon, Portal, Show, Text } from '@chakra-ui/react';
 import { ArrowLeft } from '@phosphor-icons/react';
+import { useFormikContext } from 'formik';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import RoleFormCreateProposal from '../../../../../../components/pages/Roles/forms/RoleFormCreateProposal';
+import { RoleFormValues } from '../../../../../../components/pages/Roles/types';
 import PageHeader from '../../../../../../components/ui/page/Header/PageHeader';
 import { SIDEBAR_WIDTH, useHeaderHeight } from '../../../../../../constants/common';
 import { DAO_ROUTES } from '../../../../../../constants/routes';
@@ -17,6 +20,16 @@ export default function EditProposalSummary() {
   } = useFractal();
   const { t } = useTranslation(['roles', 'breadcrumbs']);
   const { addressPrefix } = useNetworkConfig();
+  const { values } = useFormikContext<RoleFormValues>();
+
+  // @dev redirects back to roles edit page if no roles are edited (user refresh)
+  useEffect(() => {
+    const editedRoles = values.hats.filter(hat => !!hat.editedRole);
+    if (!editedRoles.length && daoAddress) {
+      navigate(DAO_ROUTES.rolesEdit.relative(addressPrefix, daoAddress));
+    }
+  }, [values.hats, daoAddress, navigate, addressPrefix]);
+
   if (!daoAddress) return null;
   return (
     <Box>
@@ -70,6 +83,7 @@ export default function EditProposalSummary() {
               base: `calc(100% - ${SIDEBAR_WIDTH})`,
               '3xl': `calc(100% - 9rem - ${SIDEBAR_WIDTH})`,
             }}
+            h={`calc(100vh - ${headerHeight})`}
           >
             <PageHeader
               title={t('proposalNew', { ns: 'breadcrumbs' })}