refactor(create): move add counterpart below, select role to toggle, remove duplicate code
This commit is contained in:
parent
7d0d4fcb48
commit
fa7f0e2fc0
@ -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 type { Identifier, XYCoord } from 'dnd-core'
|
||||||
import saveAs from 'file-saver'
|
import saveAs from 'file-saver'
|
||||||
import JSZip from 'jszip'
|
import JSZip from 'jszip'
|
||||||
@ -932,9 +923,18 @@ export const CreatePage = () => {
|
|||||||
}
|
}
|
||||||
right={
|
right={
|
||||||
<div className={styles.flexWrap}>
|
<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}>
|
<div className={styles.inputWrapper}>
|
||||||
<TextField
|
<TextField
|
||||||
placeholder="Add user"
|
placeholder="Add counterpart"
|
||||||
value={userInput}
|
value={userInput}
|
||||||
onChange={(e) => setUserInput(e.target.value)}
|
onChange={(e) => setUserInput(e.target.value)}
|
||||||
onKeyDown={handleInputKeyDown}
|
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
|
variant="contained"
|
||||||
color="var(--primary-main)"
|
aria-label="Toggle User Role"
|
||||||
icon={value === UserRole.signer ? faPen : faEye}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
onChange={(e) => setUserRole(e.target.value as UserRole)}
|
|
||||||
sx={{
|
sx={{
|
||||||
fontSize: '16px',
|
|
||||||
minWidth: '44px',
|
minWidth: '44px',
|
||||||
'& .MuiInputBase-input': {
|
padding: '11.5px 12px',
|
||||||
padding: '7px 14px!important',
|
borderRadius: 0
|
||||||
textOverflow: 'unset!important'
|
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<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
|
<Button
|
||||||
disabled={!userInput}
|
disabled={!userInput}
|
||||||
onClick={handleAddUser}
|
onClick={handleAddUser}
|
||||||
@ -1001,17 +985,6 @@ export const CreatePage = () => {
|
|||||||
<FontAwesomeIcon icon={faPlus} />
|
<FontAwesomeIcon icon={faPlus} />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={`${styles.paperGroup} ${styles.users}`}>
|
|
||||||
<DisplayUser
|
|
||||||
metadata={metadata}
|
|
||||||
users={users}
|
|
||||||
handleUserRoleChange={handleUserRoleChange}
|
|
||||||
handleRemoveUser={handleRemoveUser}
|
|
||||||
moveSigner={moveSigner}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button onClick={handleCreate} variant="contained">
|
<Button onClick={handleCreate} variant="contained">
|
||||||
Publish
|
Publish
|
||||||
</Button>
|
</Button>
|
||||||
@ -1088,8 +1061,8 @@ const DisplayUser = ({
|
|||||||
{users
|
{users
|
||||||
.filter((user) => user.role === UserRole.signer)
|
.filter((user) => user.role === UserRole.signer)
|
||||||
.map((user, index) => (
|
.map((user, index) => (
|
||||||
<SignerRow
|
<SignerCounterpart
|
||||||
key={`signer-${index}`}
|
key={`signer-${user.pubkey}`}
|
||||||
userMeta={metadata[user.pubkey]}
|
userMeta={metadata[user.pubkey]}
|
||||||
user={user}
|
user={user}
|
||||||
index={index}
|
index={index}
|
||||||
@ -1101,71 +1074,15 @@ const DisplayUser = ({
|
|||||||
</DndProvider>
|
</DndProvider>
|
||||||
{users
|
{users
|
||||||
.filter((user) => user.role === UserRole.viewer)
|
.filter((user) => user.role === UserRole.viewer)
|
||||||
.map((user, index) => {
|
.map((user) => {
|
||||||
const userMeta = metadata[user.pubkey]
|
|
||||||
return (
|
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>
|
</div>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
@ -1179,23 +1096,26 @@ interface DragItem {
|
|||||||
type: string
|
type: string
|
||||||
}
|
}
|
||||||
|
|
||||||
type SignerRowProps = {
|
type CounterpartProps = {
|
||||||
userMeta: ProfileMetadata
|
userMeta: ProfileMetadata
|
||||||
user: User
|
user: User
|
||||||
index: number
|
|
||||||
moveSigner: (dragIndex: number, hoverIndex: number) => void
|
|
||||||
handleUserRoleChange: (role: UserRole, pubkey: string) => void
|
handleUserRoleChange: (role: UserRole, pubkey: string) => void
|
||||||
handleRemoveUser: (pubkey: string) => void
|
handleRemoveUser: (pubkey: string) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
const SignerRow = ({
|
type SignerCounterpartProps = CounterpartProps & {
|
||||||
|
index: number
|
||||||
|
moveSigner: (dragIndex: number, hoverIndex: number) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const SignerCounterpart = ({
|
||||||
userMeta,
|
userMeta,
|
||||||
user,
|
user,
|
||||||
index,
|
index,
|
||||||
moveSigner,
|
moveSigner,
|
||||||
handleUserRoleChange,
|
handleUserRoleChange,
|
||||||
handleRemoveUser
|
handleRemoveUser
|
||||||
}: SignerRowProps) => {
|
}: SignerCounterpartProps) => {
|
||||||
const ref = useRef<HTMLTableRowElement>(null)
|
const ref = useRef<HTMLTableRowElement>(null)
|
||||||
|
|
||||||
const [{ handlerId }, drop] = useDrop<
|
const [{ handlerId }, drop] = useDrop<
|
||||||
@ -1280,6 +1200,24 @@ const SignerRow = ({
|
|||||||
ref={ref}
|
ref={ref}
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon width={'14px'} fontSize={'14px'} icon={faGripLines} />
|
<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}>
|
<div className={styles.avatar}>
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
pubkey={user.pubkey}
|
pubkey={user.pubkey}
|
||||||
@ -1291,41 +1229,31 @@ const SignerRow = ({
|
|||||||
image={userMeta?.picture}
|
image={userMeta?.picture}
|
||||||
/>
|
/>
|
||||||
</div>
|
</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) => (
|
)
|
||||||
|
}
|
||||||
|
sx={{
|
||||||
|
minWidth: '34px',
|
||||||
|
height: '34px',
|
||||||
|
padding: 0,
|
||||||
|
color: 'var(--primary-main)',
|
||||||
|
'&:hover': {
|
||||||
|
color: 'white'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
fontSize={'14px'}
|
fontSize={'14px'}
|
||||||
color="var(--primary-main)"
|
icon={user.role === UserRole.signer ? faPen : faEye}
|
||||||
icon={value === UserRole.signer ? faPen : faEye}
|
|
||||||
/>
|
/>
|
||||||
)}
|
</Button>
|
||||||
onChange={(e) =>
|
</Tooltip>
|
||||||
handleUserRoleChange(e.target.value as UserRole, user.pubkey)
|
<Tooltip title="Remove User" arrow disableInteractive>
|
||||||
}
|
|
||||||
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
|
<Button
|
||||||
onClick={() => handleRemoveUser(user.pubkey)}
|
onClick={() => handleRemoveUser(user.pubkey)}
|
||||||
sx={{
|
sx={{
|
||||||
@ -1341,6 +1269,6 @@ const SignerRow = ({
|
|||||||
<FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
|
<FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
|
||||||
</Button>
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user