refactor(create): move add counterpart below, select role to toggle, remove duplicate code

src/pages/create/index.tsx

@@ -1,13 +1,4 @@
-import {
+import { Button, FormHelperText, TextField, Tooltip } from '@mui/material'
-  Button,
-  FormHelperText,
-  ListItemIcon,
-  ListItemText,
-  MenuItem,
-  Select,
-  TextField,
-  Tooltip
-} from '@mui/material'
 import type { Identifier, XYCoord } from 'dnd-core'
 import saveAs from 'file-saver'
 import JSZip from 'jszip'
@@ -932,9 +923,18 @@ export const CreatePage = () => {
           }
           right={
             <div className={styles.flexWrap}>
+              <div className={`${styles.paperGroup} ${styles.users}`}>
+                <DisplayUser
+                  metadata={metadata}
+                  users={users}
+                  handleUserRoleChange={handleUserRoleChange}
+                  handleRemoveUser={handleRemoveUser}
+                  moveSigner={moveSigner}
+                />
+              </div>
               <div className={styles.inputWrapper}>
                 <TextField
-                  placeholder="Add user"
+                  placeholder="Add counterpart"
                   value={userInput}
                   onChange={(e) => setUserInput(e.target.value)}
                   onKeyDown={handleInputKeyDown}
@@ -950,42 +950,26 @@ export const CreatePage = () => {
                     }
                   }}
                 />
-                <Select
+                <Button
-                  name="add-user-role"
+                  onClick={() =>
-                  aria-label="role"
+                    setUserRole(
-                  value={userRole}
+                      userRole === UserRole.signer
-                  variant="filled"
+                        ? UserRole.viewer
-                  // Hide arrow for dropdown
+                        : UserRole.signer
-                  IconComponent={() => null}
+                    )
-                  renderValue={(value) => (
-                    <FontAwesomeIcon
-                      color="var(--primary-main)"
-                      icon={value === UserRole.signer ? faPen : faEye}
-                    />
-                  )}
-                  onChange={(e) => setUserRole(e.target.value as UserRole)}
-                  sx={{
-                    fontSize: '16px',
-                    minWidth: '44px',
-                    '& .MuiInputBase-input': {
-                      padding: '7px 14px!important',
-                      textOverflow: 'unset!important'
                   }
+                  variant="contained"
+                  aria-label="Toggle User Role"
+                  sx={{
+                    minWidth: '44px',
+                    padding: '11.5px 12px',
+                    borderRadius: 0
                   }}
                 >
-                  <MenuItem value={UserRole.signer}>
+                  <FontAwesomeIcon
-                    <ListItemIcon>
+                    icon={userRole === UserRole.signer ? faPen : faEye}
-                      <FontAwesomeIcon icon={faPen} />
+                  />
-                    </ListItemIcon>
+                </Button>
-                    <ListItemText>{UserRole.signer}</ListItemText>
-                  </MenuItem>
-                  <MenuItem value={UserRole.viewer} sx={{}}>
-                    <ListItemIcon>
-                      <FontAwesomeIcon icon={faEye} />
-                    </ListItemIcon>
-                    <ListItemText>{UserRole.viewer}</ListItemText>
-                  </MenuItem>
-                </Select>
                 <Button
                   disabled={!userInput}
                   onClick={handleAddUser}
@@ -1001,17 +985,6 @@ export const CreatePage = () => {
                   <FontAwesomeIcon icon={faPlus} />
                 </Button>
               </div>
-
-              <div className={`${styles.paperGroup} ${styles.users}`}>
-                <DisplayUser
-                  metadata={metadata}
-                  users={users}
-                  handleUserRoleChange={handleUserRoleChange}
-                  handleRemoveUser={handleRemoveUser}
-                  moveSigner={moveSigner}
-                />
-              </div>
-
               <Button onClick={handleCreate} variant="contained">
                 Publish
               </Button>
@@ -1088,8 +1061,8 @@ const DisplayUser = ({
         {users
           .filter((user) => user.role === UserRole.signer)
           .map((user, index) => (
-            <SignerRow
+            <SignerCounterpart
-              key={`signer-${index}`}
+              key={`signer-${user.pubkey}`}
               userMeta={metadata[user.pubkey]}
               user={user}
               index={index}
@@ -1101,72 +1074,16 @@ const DisplayUser = ({
       </DndProvider>
       {users
         .filter((user) => user.role === UserRole.viewer)
-        .map((user, index) => {
+        .map((user) => {
-          const userMeta = metadata[user.pubkey]
           return (
-            <div className={styles.user} key={index}>
+            <div className={styles.user} key={`viewer-${user.pubkey}`}>
-              <div className={styles.avatar}>
+              <Counterpart
-                <UserAvatar
+                userMeta={metadata[user.pubkey]}
-                  pubkey={user.pubkey}
+                user={user}
-                  name={
+                handleUserRoleChange={handleUserRoleChange}
-                    userMeta?.display_name ||
+                handleRemoveUser={handleRemoveUser}
-                    userMeta?.name ||
-                    shorten(hexToNpub(user.pubkey))
-                  }
-                  image={userMeta?.picture}
               />
             </div>
-              <Select
-                name={`change-user-role-${user.pubkey}`}
-                aria-label="role"
-                value={user.role}
-                variant="outlined"
-                IconComponent={() => null}
-                renderValue={(value) => (
-                  <FontAwesomeIcon
-                    fontSize={'14px'}
-                    color="var(--primary-main)"
-                    icon={value === UserRole.signer ? faPen : faEye}
-                  />
-                )}
-                onChange={(e) =>
-                  handleUserRoleChange(e.target.value as UserRole, user.pubkey)
-                }
-                sx={{
-                  fontSize: '16px',
-                  minWidth: '34px',
-                  maxWidth: '34px',
-                  minHeight: '34px',
-                  maxHeight: '34px',
-                  '& .MuiInputBase-input': {
-                    padding: '10px !important',
-                    textOverflow: 'unset!important'
-                  },
-                  '& .MuiOutlinedInput-notchedOutline': {
-                    display: 'none'
-                  }
-                }}
-              >
-                <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
-                <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
-              </Select>
-              <Tooltip title="Remove User" arrow>
-                <Button
-                  onClick={() => handleRemoveUser(user.pubkey)}
-                  sx={{
-                    minWidth: '34px',
-                    height: '34px',
-                    padding: 0,
-                    color: 'rgba(0, 0, 0, 0.35)',
-                    '&:hover': {
-                      color: 'white'
-                    }
-                  }}
-                >
-                  <FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
-                </Button>
-              </Tooltip>
-            </div>
           )
         })}
     </>
@@ -1179,23 +1096,26 @@ interface DragItem {
   type: string
 }
 
-type SignerRowProps = {
+type CounterpartProps = {
   userMeta: ProfileMetadata
   user: User
-  index: number
-  moveSigner: (dragIndex: number, hoverIndex: number) => void
   handleUserRoleChange: (role: UserRole, pubkey: string) => void
   handleRemoveUser: (pubkey: string) => void
 }
 
-const SignerRow = ({
+type SignerCounterpartProps = CounterpartProps & {
+  index: number
+  moveSigner: (dragIndex: number, hoverIndex: number) => void
+}
+
+const SignerCounterpart = ({
   userMeta,
   user,
   index,
   moveSigner,
   handleUserRoleChange,
   handleRemoveUser
-}: SignerRowProps) => {
+}: SignerCounterpartProps) => {
   const ref = useRef<HTMLTableRowElement>(null)
 
   const [{ handlerId }, drop] = useDrop<
@@ -1280,6 +1200,24 @@ const SignerRow = ({
       ref={ref}
     >
       <FontAwesomeIcon width={'14px'} fontSize={'14px'} icon={faGripLines} />
+      <Counterpart
+        user={user}
+        userMeta={userMeta}
+        handleRemoveUser={handleRemoveUser}
+        handleUserRoleChange={handleUserRoleChange}
+      />
+    </div>
+  )
+}
+
+const Counterpart = ({
+  userMeta,
+  user,
+  handleUserRoleChange,
+  handleRemoveUser
+}: CounterpartProps) => {
+  return (
+    <>
       <div className={styles.avatar}>
         <UserAvatar
           pubkey={user.pubkey}
@@ -1291,41 +1229,31 @@ const SignerRow = ({
           image={userMeta?.picture}
         />
       </div>
-      <Select
+      <Tooltip title="Toggle User Role" arrow disableInteractive>
-        name={`change-user-role-${user.pubkey}`}
+        <Button
-        aria-label="role"
+          onClick={() =>
-        value={user.role}
+            handleUserRoleChange(
-        variant="outlined"
+              user.role === UserRole.signer ? UserRole.viewer : UserRole.signer,
-        IconComponent={() => null}
+              user.pubkey
-        renderValue={(value) => (
+            )
-          <FontAwesomeIcon
-            fontSize={'14px'}
-            color="var(--primary-main)"
-            icon={value === UserRole.signer ? faPen : faEye}
-          />
-        )}
-        onChange={(e) =>
-          handleUserRoleChange(e.target.value as UserRole, user.pubkey)
           }
           sx={{
-          fontSize: '16px',
             minWidth: '34px',
-          maxWidth: '34px',
+            height: '34px',
-          minHeight: '34px',
+            padding: 0,
-          maxHeight: '34px',
+            color: 'var(--primary-main)',
-          '& .MuiInputBase-input': {
+            '&:hover': {
-            padding: '10px !important',
+              color: 'white'
-            textOverflow: 'unset!important'
-          },
-          '& .MuiOutlinedInput-notchedOutline': {
-            display: 'none'
             }
           }}
         >
-        <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
+          <FontAwesomeIcon
-        <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
+            fontSize={'14px'}
-      </Select>
+            icon={user.role === UserRole.signer ? faPen : faEye}
-      <Tooltip title="Remove User" arrow>
+          />
+        </Button>
+      </Tooltip>
+      <Tooltip title="Remove User" arrow disableInteractive>
         <Button
           onClick={() => handleRemoveUser(user.pubkey)}
           sx={{
@@ -1341,6 +1269,6 @@ const SignerRow = ({
           <FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
         </Button>
       </Tooltip>
-    </div>
+    </>
   )
 }