From 386f40952ee00325815f39960b1eb707b9793103 Mon Sep 17 00:00:00 2001
From: Vivian Phung <dev+github@vivianphung.com>
Date: Mon, 13 May 2024 20:39:01 -0400
Subject: [PATCH] member list cleanup

---
 .../projects/project/settings/MemberCard.tsx  | 61 +++++-------
 .../Project/Settings/MemberCard.stories.tsx   | 98 +++++++++++++++++++
 2 files changed, 122 insertions(+), 37 deletions(-)
 create mode 100644 packages/frontend/src/stories/Project/Settings/MemberCard.stories.tsx

diff --git a/packages/frontend/src/components/projects/project/settings/MemberCard.tsx b/packages/frontend/src/components/projects/project/settings/MemberCard.tsx
index a3535ae0..8a1f8e0c 100644
--- a/packages/frontend/src/components/projects/project/settings/MemberCard.tsx
+++ b/packages/frontend/src/components/projects/project/settings/MemberCard.tsx
@@ -1,18 +1,15 @@
 import { useCallback, useState } from 'react';
-import { Permission, User } from 'gql-client';
 
-import {
-  Select,
-  Option,
-  Chip,
-} from '@snowballtools/material-tailwind-react-fork';
-
-import { formatAddress } from 'utils/format';
 import { RemoveMemberDialog } from 'components/projects/Dialog/RemoveMemberDialog';
+import { Select, SelectOption } from 'components/shared/Select';
+import { LoaderIcon } from 'components/shared/CustomIcon';
 import { Tooltip } from 'components/shared/Tooltip';
 import { Button } from 'components/shared/Button';
+import { Permission, User } from 'gql-client';
+import { formatAddress } from 'utils/format';
+import { Tag } from 'components/shared/Tag';
 
-const PERMISSION_OPTIONS = [
+const PERMISSION_OPTIONS: SelectOption[] = [
   {
     label: 'View only',
     value: 'View',
@@ -23,7 +20,7 @@ const PERMISSION_OPTIONS = [
   },
 ];
 
-const DROPDOWN_OPTIONS = [
+const DROPDOWN_OPTIONS: SelectOption[] = [
   ...PERMISSION_OPTIONS,
   { label: 'Remove member', value: 'remove' },
 ];
@@ -50,16 +47,21 @@ const MemberCard = ({
   onUpdateProjectMember,
 }: MemberCardProps) => {
   const [ethAddress, emailDomain] = member.email.split('@');
-  const [selectedPermission, setSelectedPermission] = useState(
-    permissions.join('+'),
+  const [selectedPermission, setSelectedPermission] = useState<SelectOption>(
+    PERMISSION_OPTIONS.map((value) => {
+      permissions.join('+') === value.value;
+    }).pop() ?? {
+      label: 'View only',
+      value: 'View',
+    },
   );
   const [removeMemberDialogOpen, setRemoveMemberDialogOpen] = useState(false);
 
   const handlePermissionChange = useCallback(
-    async (value: string) => {
+    async (value: SelectOption) => {
       setSelectedPermission(value);
 
-      if (value === 'remove') {
+      if (value.value === 'remove') {
         setRemoveMemberDialogOpen((prevVal) => !prevVal);
         // To display updated label in next render
         setTimeout(() => {
@@ -67,7 +69,7 @@ const MemberCard = ({
         });
       } else {
         if (onUpdateProjectMember) {
-          const permissions = value.split('+') as Permission[];
+          const permissions = value.value.split('+') as Permission[];
           await onUpdateProjectMember({ permissions });
         }
       }
@@ -95,34 +97,19 @@ const MemberCard = ({
       <div className="basis-1/2">
         {!isPending ? (
           <Select
-            size="lg"
+            options={DROPDOWN_OPTIONS}
+            size="md"
             label={isOwner ? 'Owner' : ''}
             disabled={isOwner}
             value={selectedPermission}
-            onChange={(value) => handlePermissionChange(value!)}
-            selected={(_, index) => (
-              <span>{DROPDOWN_OPTIONS[index!]?.label}</span>
-            )}
-          >
-            {DROPDOWN_OPTIONS.map((permission, key) => (
-              <Option key={key} value={permission.value}>
-                ^ {permission.label}
-                {permission.value === selectedPermission && (
-                  <p className="float-right">^</p>
-                )}
-              </Option>
-            ))}
-          </Select>
+            onChange={(value) => handlePermissionChange(value as SelectOption)}
+          />
         ) : (
           <div className="flex justify-end gap-2">
             <div>
-              <Chip
-                value="Pending"
-                variant="outlined"
-                color="orange"
-                size="sm"
-                icon={'^'}
-              />
+              <Tag type="positive" size="sm" leftIcon={<LoaderIcon />}>
+                Pending
+              </Tag>
             </div>
             <div>
               <Button
diff --git a/packages/frontend/src/stories/Project/Settings/MemberCard.stories.tsx b/packages/frontend/src/stories/Project/Settings/MemberCard.stories.tsx
new file mode 100644
index 00000000..f63029b0
--- /dev/null
+++ b/packages/frontend/src/stories/Project/Settings/MemberCard.stories.tsx
@@ -0,0 +1,98 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { User } from 'gql-client';
+import MemberCard from 'components/projects/project/settings/MemberCard';
+
+const meta: Meta<typeof MemberCard> = {
+  title: 'Project/Settings/MemberCard',
+  component: MemberCard,
+  tags: ['autodocs'],
+  argTypes: {
+    member: {
+      control: 'object',
+    },
+    isFirstCard: {
+      control: 'boolean',
+    },
+    isOwner: {
+      control: 'boolean',
+    },
+    isPending: {
+      control: 'boolean',
+    },
+    permissions: {
+      control: 'object',
+    },
+  },
+} as Meta<typeof MemberCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof MemberCard>;
+
+const defaultUser = {
+  id: 'hellodsadass',
+  name: 'Vivian',
+  email: 'welcome@helloworld.com',
+  isVerified: true,
+  createdAt: 'blah',
+  updatedAt: 'blah',
+  gitHubToken: 'blah',
+} as User;
+
+export const Owner: Story = {
+  render: ({ member, isFirstCard, isOwner, isPending, permissions }) => (
+    <MemberCard
+      member={member}
+      isFirstCard={isFirstCard}
+      isOwner={isOwner}
+      isPending={isPending}
+      permissions={permissions}
+    />
+  ),
+  args: {
+    member: defaultUser,
+    isFirstCard: true,
+    isOwner: true,
+    isPending: false,
+    permissions: [],
+  },
+};
+
+export const ViewPlusEditMember: Story = {
+  render: ({ member, isFirstCard, isOwner, isPending, permissions }) => (
+    <MemberCard
+      member={member}
+      isFirstCard={isFirstCard}
+      isOwner={isOwner}
+      isPending={isPending}
+      permissions={permissions}
+    />
+  ),
+  args: {
+    member: defaultUser,
+    isFirstCard: true,
+    isOwner: false,
+    isPending: false,
+    permissions: ['View+Edit'],
+  },
+};
+
+export const ViewMember: Story = {
+  render: ({ member, isFirstCard, isOwner, isPending, permissions }) => (
+    <MemberCard
+      member={member}
+      isFirstCard={isFirstCard}
+      isOwner={isOwner}
+      isPending={isPending}
+      permissions={permissions}
+    />
+  ),
+  args: {
+    member: defaultUser,
+    isFirstCard: true,
+    isOwner: false,
+    isPending: false,
+    permissions: ['View'],
+  },
+};