feat: create page search users

src/pages/create/index.tsx

@@ -1,10 +1,17 @@
 import styles from './style.module.scss'
-import { Button, FormHelperText, TextField, Tooltip } from '@mui/material'
+import {
+  Box,
+  Button,
+  CircularProgress,
+  FormHelperText,
+  TextField,
+  Tooltip
+} from '@mui/material'
 import type { Identifier, XYCoord } from 'dnd-core'
 import saveAs from 'file-saver'
 import JSZip from 'jszip'
 import { Event, kinds } from 'nostr-tools'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { DndProvider, useDrag, useDrop } from 'react-dnd'
 import { MultiBackend } from 'react-dnd-multi-backend'
 import { HTML5toTouch } from 'rdndmb-html5-to-touch'
@@ -13,7 +20,11 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { UserAvatar } from '../../components/UserAvatar'
-import { MetadataController, NostrController } from '../../controllers'
+import {
+  MetadataController,
+  NostrController,
+  RelayController
+} from '../../controllers'
 import { appPrivateRoutes } from '../../routes'
 import {
   CreateSignatureEventContent,
@@ -41,7 +52,8 @@ import {
   updateUsersAppData,
   uploadToFileStorage,
   DEFAULT_TOOLBOX,
-  settleAllFullfilfedPromises
+  settleAllFullfilfedPromises,
+  debounceCustom
 } from '../../utils'
 import { Container } from '../../components/Container'
 import fileListStyles from '../../components/FileList/style.module.scss'
@@ -58,13 +70,21 @@ import {
   faGripLines,
   faPen,
   faPlus,
+  faSearch,
   faToolbox,
   faTrash,
   faUpload
 } from '@fortawesome/free-solid-svg-icons'
 import { getSigitFile, SigitFile } from '../../utils/file.ts'
-import _ from 'lodash'
 import { generateTimestamp } from '../../utils/opentimestamps.ts'
+import { Autocomplete } from '@mui/lab'
+import _, { truncate } from 'lodash'
+import nostrDefaultImage from '../../assets/images/nostr-logo.png'
+import * as React from 'react'
+
+interface FoundUsers extends Event {
+  npub: string
+}
 
 export const CreatePage = () => {
   const navigate = useNavigate()
@@ -87,6 +107,90 @@ export const CreatePage = () => {
   }
 
   const [userInput, setUserInput] = useState('')
+  const [userSearchInput, setUserSearchInput] = useState('')
+
+  const [userRole, setUserRole] = useState<UserRole>(UserRole.signer)
+  const [error, setError] = useState<string>()
+
+  const [users, setUsers] = useState<User[]>([])
+  const signers = users.filter((u) => u.role === UserRole.signer)
+  const viewers = users.filter((u) => u.role === UserRole.viewer)
+
+  const usersPubkey = useAppSelector((state) => state.auth.usersPubkey)!
+
+  const nostrController = NostrController.getInstance()
+
+  const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
+    {}
+  )
+  const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
+  const [parsingPdf, setIsParsing] = useState<boolean>(false)
+
+  const [selectedTool, setSelectedTool] = useState<DrawTool>()
+
+  const [foundUsers, setFoundUsers] = useState<FoundUsers[]>([])
+  const [searchUsersLoading, setSearchUsersLoading] = useState<boolean>(false)
+
+  /**
+   * Fired when user select
+   */
+  const handleSearchUserChange = useCallback(
+    (_event: React.SyntheticEvent, value: string | FoundUsers | null) => {
+      if (typeof value === 'object') {
+        const ndkEvent = value as FoundUsers
+        setUserInput(hexToNpub(ndkEvent.pubkey))
+      }
+    },
+    [setUserInput]
+  )
+
+  const handleSearchUsers = async (searchValue?: string) => {
+    const searchString = searchValue || userSearchInput || undefined
+
+    if (!searchString) return
+
+    setSearchUsersLoading(true)
+
+    const relayController = RelayController.getInstance()
+    const metadataController = MetadataController.getInstance()
+
+    const relaySet = await metadataController.findRelayListMetadata(usersPubkey)
+    const searchTerm = searchString.trim()
+
+    relayController
+      .fetchEvents(
+        {
+          kinds: [0],
+          search: searchTerm
+        },
+        [...relaySet.write]
+      )
+      .then((events) => {
+        const fineFilteredEvents = events
+          .filter((event) => event.content.includes(`"name":"${searchTerm}`))
+          .map((event) => ({
+            ...event,
+            npub: hexToNpub(event.pubkey)
+          }))
+
+        setFoundUsers(fineFilteredEvents)
+      })
+      .catch((error) => {
+        console.error(error)
+      })
+      .finally(() => {
+        setSearchUsersLoading(false)
+      })
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedHandleSearchUsers = useCallback(
+    debounceCustom((value: string) => {
+      if (foundUsers.length === 0) handleSearchUsers(value)
+    }, 1000),
+    []
+  )
+
   const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (
       event.code === KeyboardCode.Enter ||
@@ -96,26 +200,11 @@ export const CreatePage = () => {
       handleAddUser()
     }
   }
-  const [userRole, setUserRole] = useState<UserRole>(UserRole.signer)
-  const [error, setError] = useState<string>()
 
-  const [users, setUsers] = useState<User[]>([])
-  const signers = users.filter((u) => u.role === UserRole.signer)
-  const viewers = users.filter((u) => u.role === UserRole.viewer)
-
-  const usersPubkey = useAppSelector((state) => state.auth.usersPubkey)
-
-  const nostrController = NostrController.getInstance()
-
-  const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
-    {}
-  )
-  const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
-  const [parsingPdf, setIsParsing] = useState<boolean>(false)
   useEffect(() => {
     if (selectedFiles) {
       /**
-       * Reads the binary files and converts to internal file type
+       * Reads the binary files and converts to an internal file type
        * and sets to a state (adds images if it's a PDF)
        */
       const parsePages = async () => {
@@ -135,8 +224,6 @@ export const CreatePage = () => {
     }
   }, [selectedFiles])
 
-  const [selectedTool, setSelectedTool] = useState<DrawTool>()
-
   /**
    * Changes the drawing tool
    * @param drawTool to draw with
@@ -789,6 +876,14 @@ export const CreatePage = () => {
     }
   }
 
+  const parseContent = (event: Event) => {
+    try {
+      return JSON.parse(event.content)
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
   return (
     <>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
@@ -852,6 +947,82 @@ export const CreatePage = () => {
                   moveSigner={moveSigner}
                 />
               </div>
+
+              <div className={styles.addCounterpart}>
+                <div className={styles.inputWrapper}>
+                  <Autocomplete
+                    id="country-select-demo"
+                    sx={{ width: 300 }}
+                    options={foundUsers}
+                    onChange={handleSearchUserChange}
+                    autoHighlight
+                    freeSolo
+                    filterOptions={(x) => x}
+                    getOptionLabel={(option) => {
+                      let label = (option as FoundUsers).npub
+
+                      const contentJson = parseContent(option as FoundUsers)
+                      label = contentJson.name
+
+                      return label
+                    }}
+                    renderOption={(props, option) => {
+                      const { ...optionProps } = props
+
+                      const contentJson = parseContent(option)
+
+                      return (
+                        <Box
+                          component="li"
+                          sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+                          {...optionProps}
+                          key={option.pubkey}
+                        >
+                          <img
+                            loading="lazy"
+                            width="60"
+                            src={contentJson.picture || nostrDefaultImage}
+                            onError={({ currentTarget }) =>
+                              (currentTarget.src = nostrDefaultImage)
+                            }
+                            alt=""
+                          />
+                          {contentJson.name} (
+                          {truncate(option.npub, { length: 16 })})
+                        </Box>
+                      )
+                    }}
+                    renderInput={(params) => (
+                      <TextField
+                        {...params}
+                        key={params.id}
+                        label="Search counterparts"
+                        value={userSearchInput}
+                        // onChange={(e) => setUserSearchInput(e.target.value)}
+                        onChange={(e) => {
+                          const value = e.target.value
+                          setUserSearchInput(value)
+                          debouncedHandleSearchUsers(value)
+                        }}
+                      />
+                    )}
+                  />
+                </div>
+                <Button
+                  disabled={!userSearchInput || searchUsersLoading}
+                  onClick={() => handleSearchUsers()}
+                  variant="contained"
+                  aria-label="Add"
+                  className={styles.counterpartToggleButton}
+                >
+                  {searchUsersLoading ? (
+                    <CircularProgress size={14} />
+                  ) : (
+                    <FontAwesomeIcon icon={faSearch} />
+                  )}
+                </Button>
+              </div>
+
               <div className={styles.addCounterpart}>
                 <div className={styles.inputWrapper}>
                   <TextField
@@ -860,6 +1031,7 @@ export const CreatePage = () => {
                     value={userInput}
                     onChange={(e) => setUserInput(e.target.value)}
                     onKeyDown={handleInputKeyDown}
+                    disabled={searchUsersLoading}
                     error={!!error}
                   />
                 </div>

src/utils/utils.ts

@@ -2,6 +2,18 @@ import { TimeoutError } from '../types/errors/TimeoutError.ts'
 import { CurrentUserFile } from '../types/file.ts'
 import { SigitFile } from './file.ts'
 
+export const debounceCustom = <T extends (...args: never[]) => void>(
+  fn: T,
+  delay: number
+): ((...args: Parameters<T>) => void) => {
+  let timerId: ReturnType<typeof setTimeout>
+
+  return (...args: Parameters<T>) => {
+    clearTimeout(timerId)
+    timerId = setTimeout(() => fn(...args), delay)
+  }
+}
+
 export const compareObjects = (
   obj1: object | null | undefined,
   obj2: object | null | undefined