feat: ability to change the order of signers in create screen #61
80
package-lock.json
generated
80
package-lock.json
generated
@ -19,12 +19,15 @@
|
||||
"axios": "1.6.7",
|
||||
"crypto-hash": "3.0.0",
|
||||
"crypto-js": "^4.2.0",
|
||||
"dnd-core": "16.0.1",
|
||||
"file-saver": "2.0.5",
|
||||
"jszip": "3.10.1",
|
||||
"lodash": "4.17.21",
|
||||
"mui-file-input": "4.0.4",
|
||||
"nostr-tools": "2.3.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dnd": "16.0.1",
|
||||
"react-dnd-html5-backend": "16.0.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-redux": "9.1.0",
|
||||
"react-router-dom": "6.22.1",
|
||||
@ -1641,6 +1644,21 @@
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-dnd/asap": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-5.0.2.tgz",
|
||||
"integrity": "sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A=="
|
||||
},
|
||||
"node_modules/@react-dnd/invariant": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-4.0.2.tgz",
|
||||
"integrity": "sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw=="
|
||||
},
|
||||
"node_modules/@react-dnd/shallowequal": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
|
||||
"integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.1.tgz",
|
||||
@ -2020,7 +2038,7 @@
|
||||
"version": "20.11.20",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.20.tgz",
|
||||
"integrity": "sha512-7/rR21OS+fq8IyHTgtLkDK949uzsa6n8BkziAKtPVpugIkO6D+/ooXMvzXxDnZrmtXVfjb1bKQafYpb8s89LOg==",
|
||||
"dev": true,
|
||||
"devOptional": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~5.26.4"
|
||||
@ -2762,6 +2780,24 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/dnd-core": {
|
||||
"version": "16.0.1",
|
||||
"resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-16.0.1.tgz",
|
||||
"integrity": "sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==",
|
||||
"dependencies": {
|
||||
"@react-dnd/asap": "^5.0.1",
|
||||
"@react-dnd/invariant": "^4.0.1",
|
||||
"redux": "^4.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dnd-core/node_modules/redux": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
|
||||
"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.9.2"
|
||||
}
|
||||
},
|
||||
"node_modules/doctrine": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
|
||||
@ -3212,8 +3248,7 @@
|
||||
"node_modules/fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
|
||||
"dev": true
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
|
||||
},
|
||||
"node_modules/fast-glob": {
|
||||
"version": "3.3.2",
|
||||
@ -4392,6 +4427,43 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dnd": {
|
||||
"version": "16.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
|
||||
"integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
|
||||
"dependencies": {
|
||||
"@react-dnd/invariant": "^4.0.1",
|
||||
"@react-dnd/shallowequal": "^4.0.1",
|
||||
"dnd-core": "^16.0.1",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"hoist-non-react-statics": "^3.3.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/hoist-non-react-statics": ">= 3.3.1",
|
||||
"@types/node": ">= 12",
|
||||
"@types/react": ">= 16",
|
||||
"react": ">= 16.14"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/hoist-non-react-statics": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/node": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-dnd-html5-backend": {
|
||||
"version": "16.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
|
||||
"integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
|
||||
"dependencies": {
|
||||
"dnd-core": "^16.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dom": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||
@ -4989,7 +5061,7 @@
|
||||
"version": "5.26.5",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
|
||||
"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
|
||||
"dev": true,
|
||||
"devOptional": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/update-browserslist-db": {
|
||||
|
||||
@ -25,12 +25,15 @@
|
||||
"axios": "1.6.7",
|
||||
"crypto-hash": "3.0.0",
|
||||
"crypto-js": "^4.2.0",
|
||||
"dnd-core": "16.0.1",
|
||||
"file-saver": "2.0.5",
|
||||
"jszip": "3.10.1",
|
||||
"lodash": "4.17.21",
|
||||
"mui-file-input": "4.0.4",
|
||||
"nostr-tools": "2.3.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dnd": "16.0.1",
|
||||
"react-dnd-html5-backend": "16.0.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-redux": "9.1.0",
|
||||
"react-router-dom": "6.22.1",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Clear } from '@mui/icons-material'
|
||||
import { Clear, DragHandle } from '@mui/icons-material'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
@ -20,7 +20,7 @@ import {
|
||||
} from '@mui/material'
|
||||
import JSZip from 'jszip'
|
||||
import { MuiFileInput } from 'mui-file-input'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { toast } from 'react-toastify'
|
||||
@ -43,6 +43,10 @@ import {
|
||||
uploadToFileStorage
|
||||
} from '../../utils'
|
||||
import styles from './style.module.scss'
|
||||
import { DndProvider } from 'react-dnd'
|
||||
import { HTML5Backend } from 'react-dnd-html5-backend'
|
||||
import type { Identifier, XYCoord } from 'dnd-core'
|
||||
import { useDrag, useDrop } from 'react-dnd'
|
||||
|
||||
export const CreatePage = () => {
|
||||
const navigate = useNavigate()
|
||||
@ -132,7 +136,7 @@ export const CreatePage = () => {
|
||||
setLoadingSpinnerDesc('')
|
||||
})
|
||||
|
||||
if (nip05Profile) {
|
||||
if (nip05Profile && nip05Profile.pubkey) {
|
||||
const pubkey = nip05Profile.pubkey
|
||||
addUser(pubkey)
|
||||
setUserInput('')
|
||||
@ -145,25 +149,34 @@ export const CreatePage = () => {
|
||||
setError('Invalid input! Make sure to provide correct npub or nip05.')
|
||||
}
|
||||
|
||||
const handleUserRoleChange = (role: UserRole, index: number) => {
|
||||
setUsers((prevUsers) => {
|
||||
// Create a shallow copy of the previous state
|
||||
const updatedUsers = [...prevUsers]
|
||||
// Create a shallow copy of the user object at the specified index
|
||||
const updatedUser = { ...updatedUsers[index] }
|
||||
// Update the role property of the copied user object
|
||||
updatedUser.role = role
|
||||
// Update the user object at the specified index in the copied array
|
||||
updatedUsers[index] = updatedUser
|
||||
// Return the updated array
|
||||
return updatedUsers
|
||||
const handleUserRoleChange = (role: UserRole, pubkey: string) => {
|
||||
setUsers((prevUsers) =>
|
||||
prevUsers.map((user) => {
|
||||
if (user.pubkey === pubkey) {
|
||||
return {
|
||||
...user,
|
||||
role
|
||||
}
|
||||
}
|
||||
|
||||
return user
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
const handleRemoveUser = (pubkey: string) => {
|
||||
setUsers((prev) => prev.filter((user) => user.pubkey !== pubkey))
|
||||
}
|
||||
|
||||
const moveSinger = (dragIndex: number, hoverIndex: number) => {
|
||||
setUsers((prevUsers) => {
|
||||
const updatedUsers = [...prevUsers]
|
||||
const [draggedUser] = updatedUsers.splice(dragIndex, 1)
|
||||
updatedUsers.splice(hoverIndex, 0, draggedUser)
|
||||
return updatedUsers
|
||||
})
|
||||
}
|
||||
|
||||
const handleSelectFiles = (files: File[]) => {
|
||||
setDisplayUserInput(true)
|
||||
setSelectedFiles((prev) => {
|
||||
@ -435,6 +448,7 @@ export const CreatePage = () => {
|
||||
users={users}
|
||||
handleUserRoleChange={handleUserRoleChange}
|
||||
handleRemoveUser={handleRemoveUser}
|
||||
moveSigner={moveSinger}
|
||||
/>
|
||||
<Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
|
||||
<Button onClick={handleCreate} variant="contained">
|
||||
@ -450,14 +464,16 @@ export const CreatePage = () => {
|
||||
|
||||
type DisplayUsersProps = {
|
||||
users: User[]
|
||||
handleUserRoleChange: (role: UserRole, index: number) => void
|
||||
handleUserRoleChange: (role: UserRole, pubkey: string) => void
|
||||
handleRemoveUser: (pubkey: string) => void
|
||||
moveSigner: (dragIndex: number, hoverIndex: number) => void
|
||||
}
|
||||
|
||||
const DisplayUser = ({
|
||||
users,
|
||||
handleUserRoleChange,
|
||||
handleRemoveUser
|
||||
handleRemoveUser,
|
||||
moveSigner
|
||||
}: DisplayUsersProps) => {
|
||||
const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
|
||||
{}
|
||||
@ -494,13 +510,29 @@ const DisplayUser = ({
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell className={styles.tableCell}>User</TableCell>
|
||||
<TableCell className={styles.tableCell}>Role</TableCell>
|
||||
<TableCell className={styles.tableHeaderCell}>User</TableCell>
|
||||
<TableCell className={styles.tableHeaderCell}>Role</TableCell>
|
||||
<TableCell>Action</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{users.map((user, index) => {
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
{users
|
||||
.filter((user) => user.role === UserRole.signer)
|
||||
.map((user, index) => (
|
||||
<SignerRow
|
||||
userMeta={metadata[user.pubkey]}
|
||||
user={user}
|
||||
index={index}
|
||||
moveSigner={moveSigner}
|
||||
handleUserRoleChange={handleUserRoleChange}
|
||||
handleRemoveUser={handleRemoveUser}
|
||||
/>
|
||||
))}
|
||||
</DndProvider>
|
||||
{users
|
||||
.filter((user) => user.role === UserRole.viewer)
|
||||
.map((user, index) => {
|
||||
const userMeta = metadata[user.pubkey]
|
||||
return (
|
||||
<TableRow key={index}>
|
||||
@ -520,7 +552,10 @@ const DisplayUser = ({
|
||||
fullWidth
|
||||
value={user.role}
|
||||
onChange={(e) =>
|
||||
handleUserRoleChange(e.target.value as UserRole, index)
|
||||
handleUserRoleChange(
|
||||
e.target.value as UserRole,
|
||||
user.pubkey
|
||||
)
|
||||
}
|
||||
>
|
||||
<MenuItem value={UserRole.signer}>
|
||||
@ -546,3 +581,146 @@ const DisplayUser = ({
|
||||
</TableContainer>
|
||||
)
|
||||
}
|
||||
|
||||
interface DragItem {
|
||||
index: number
|
||||
id: string
|
||||
type: string
|
||||
}
|
||||
|
||||
type SignerRowProps = {
|
||||
userMeta: ProfileMetadata
|
||||
user: User
|
||||
index: number
|
||||
moveSigner: (dragIndex: number, hoverIndex: number) => void
|
||||
handleUserRoleChange: (role: UserRole, pubkey: string) => void
|
||||
handleRemoveUser: (pubkey: string) => void
|
||||
}
|
||||
|
||||
const SignerRow = ({
|
||||
userMeta,
|
||||
user,
|
||||
index,
|
||||
moveSigner,
|
||||
handleUserRoleChange,
|
||||
handleRemoveUser
|
||||
}: SignerRowProps) => {
|
||||
const ref = useRef<HTMLTableRowElement>(null)
|
||||
|
||||
const [{ handlerId }, drop] = useDrop<
|
||||
DragItem,
|
||||
void,
|
||||
{ handlerId: Identifier | null }
|
||||
>({
|
||||
accept: 'row',
|
||||
collect(monitor) {
|
||||
return {
|
||||
handlerId: monitor.getHandlerId()
|
||||
}
|
||||
},
|
||||
hover(item: DragItem, monitor) {
|
||||
if (!ref.current) {
|
||||
return
|
||||
}
|
||||
const dragIndex = item.index
|
||||
const hoverIndex = index
|
||||
|
||||
// Don't replace items with themselves
|
||||
if (dragIndex === hoverIndex) {
|
||||
return
|
||||
}
|
||||
|
||||
// Determine rectangle on screen
|
||||
const hoverBoundingRect = ref.current?.getBoundingClientRect()
|
||||
|
||||
// Get vertical middle
|
||||
const hoverMiddleY =
|
||||
(hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
|
||||
|
||||
// Determine mouse position
|
||||
const clientOffset = monitor.getClientOffset()
|
||||
|
||||
// Get pixels to the top
|
||||
const hoverClientY = (clientOffset as XYCoord).y - hoverBoundingRect.top
|
||||
|
||||
// Only perform the move when the mouse has crossed half of the items height
|
||||
// When dragging downwards, only move when the cursor is below 50%
|
||||
// When dragging upwards, only move when the cursor is above 50%
|
||||
|
||||
// Dragging downwards
|
||||
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
|
||||
return
|
||||
}
|
||||
|
||||
// Dragging upwards
|
||||
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
|
||||
return
|
||||
}
|
||||
|
||||
// Time to actually perform the action
|
||||
moveSigner(dragIndex, hoverIndex)
|
||||
|
||||
// Note: we're mutating the monitor item here!
|
||||
// Generally it's better to avoid mutations,
|
||||
// but it's good here for the sake of performance
|
||||
// to avoid expensive index searches.
|
||||
item.index = hoverIndex
|
||||
}
|
||||
})
|
||||
|
||||
const [{ isDragging }, drag] = useDrag({
|
||||
type: 'row',
|
||||
item: () => {
|
||||
return { id: user.pubkey, index }
|
||||
},
|
||||
collect: (monitor: any) => ({
|
||||
isDragging: monitor.isDragging()
|
||||
})
|
||||
})
|
||||
|
||||
const opacity = isDragging ? 0 : 1
|
||||
drag(drop(ref))
|
||||
|
||||
return (
|
||||
<TableRow
|
||||
sx={{ cursor: 'move', opacity }}
|
||||
data-handler-id={handlerId}
|
||||
ref={ref}
|
||||
>
|
||||
<TableCell
|
||||
className={styles.tableCell}
|
||||
sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}
|
||||
>
|
||||
<DragHandle />
|
||||
<UserComponent
|
||||
pubkey={user.pubkey}
|
||||
name={
|
||||
userMeta?.display_name ||
|
||||
userMeta?.name ||
|
||||
shorten(hexToNpub(user.pubkey))
|
||||
}
|
||||
image={userMeta?.picture}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className={styles.tableCell}>
|
||||
<Select
|
||||
fullWidth
|
||||
value={user.role}
|
||||
onChange={(e) =>
|
||||
handleUserRoleChange(e.target.value as UserRole, user.pubkey)
|
||||
}
|
||||
>
|
||||
<MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
|
||||
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
|
||||
</Select>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Tooltip title="Remove User" arrow>
|
||||
<IconButton onClick={() => handleRemoveUser(user.pubkey)}>
|
||||
<Clear style={{ color: 'red' }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)
|
||||
}
|
||||
|
||||
@ -17,8 +17,13 @@
|
||||
border-bottom: 0.5px solid;
|
||||
}
|
||||
|
||||
.tableHeaderCell {
|
||||
border-right: 1px solid rgba(224, 224, 224, 1);
|
||||
}
|
||||
|
||||
.tableCell {
|
||||
border-right: 1px solid rgba(224, 224, 224, 1);
|
||||
height: 56px;
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user