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,16 +20,20 @@ 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,
+  KeyboardCode,
   Meta,
   ProfileMetadata,
   SignedEvent,
   User,
-  UserRole,
+  UserRole
-  KeyboardCode
 } from '../../types'
 import {
   encryptArrayBuffer,
@@ -58,13 +69,19 @@ 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 * as React from 'react'
+import { AvatarIconButton } from '../../components/UserAvatarIconButton'
+
+type FoundUser = Event & { npub: string }
 
 export const CreatePage = () => {
   const navigate = useNavigate()
@@ -87,23 +104,16 @@ export const CreatePage = () => {
   }
 
   const [userInput, setUserInput] = useState('')
-  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+  const [userSearchInput, setUserSearchInput] = useState('')
-    if (
+
-      event.code === KeyboardCode.Enter ||
+  const [userRole] = useState<UserRole>(UserRole.signer)
-      event.code === KeyboardCode.NumpadEnter
-    ) {
-      event.preventDefault()
-      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 usersPubkey = useAppSelector((state) => state.auth.usersPubkey)!
 
   const nostrController = NostrController.getInstance()
 
@@ -112,10 +122,129 @@ export const CreatePage = () => {
   )
   const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
   const [parsingPdf, setIsParsing] = useState<boolean>(false)
+
+  const searchFieldRef = useRef<HTMLInputElement>(null)
+
+  const [selectedTool, setSelectedTool] = useState<DrawTool>()
+
+  const [foundUsers, setFoundUsers] = useState<FoundUser[]>([])
+  const [searchUsersLoading, setSearchUsersLoading] = useState<boolean>(false)
+  const [pastedUserNpubOrNip05, setPastedUserNpubOrNip05] = useState<
+    string | undefined
+  >()
+
+  /**
+   * Fired when user select
+   */
+  const handleSearchUserChange = useCallback(
+    (_event: React.SyntheticEvent, value: string | FoundUser | null) => {
+      if (typeof value === 'object') {
+        const ndkEvent = value as FoundUser
+        if (ndkEvent?.pubkey) {
+          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) => {
+        console.log('events', events)
+
+        const fineFilteredEvents: FoundUser[] = events
+          .filter((event) => {
+            const lowercaseContent = event.content.toLowerCase()
+
+            return (
+              lowercaseContent.includes(
+                `"name":"${searchTerm.toLowerCase()}"`
+              ) ||
+              lowercaseContent.includes(
+                `"display_name":"${searchTerm.toLowerCase()}"`
+              ) ||
+              lowercaseContent.includes(
+                `"username":"${searchTerm.toLowerCase()}"`
+              ) ||
+              lowercaseContent.includes(`"nip05":"${searchTerm.toLowerCase()}"`)
+            )
+          })
+          .reduce((uniqueEvents: FoundUser[], event: Event) => {
+            if (!uniqueEvents.some((e: Event) => e.pubkey === event.pubkey)) {
+              uniqueEvents.push({
+                ...event,
+                npub: hexToNpub(event.pubkey)
+              })
+            }
+            return uniqueEvents
+          }, [])
+
+        console.log('fineFilteredEvents', fineFilteredEvents)
+        setFoundUsers(fineFilteredEvents)
+      })
+      .catch((error) => {
+        console.error(error)
+      })
+      .finally(() => {
+        setSearchUsersLoading(false)
+      })
+  }
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (foundUsers.length) {
+        if (searchFieldRef.current) {
+          searchFieldRef.current.blur()
+          searchFieldRef.current.focus()
+        }
+      }
+    })
+  }, [foundUsers])
+
+  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (
+      event.code === KeyboardCode.Enter ||
+      event.code === KeyboardCode.NumpadEnter
+    ) {
+      event.preventDefault()
+
+      // If pasted user npub of nip05 is present, we just add the user to the counterparts list
+      if (pastedUserNpubOrNip05) {
+        setUserInput(pastedUserNpubOrNip05)
+        setPastedUserNpubOrNip05(undefined)
+      } else {
+        // Otherwize if search already provided some results, user must manually click the search button
+        if (!foundUsers.length) {
+          handleSearchUsers()
+        }
+      }
+    }
+  }
+
   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 +264,6 @@ export const CreatePage = () => {
     }
   }, [selectedFiles])
 
-  const [selectedTool, setSelectedTool] = useState<DrawTool>()
-
   /**
    * Changes the drawing tool
    * @param drawTool to draw with
@@ -209,7 +336,7 @@ export const CreatePage = () => {
     }
   }, [usersPubkey])
 
-  const handleAddUser = async () => {
+  const handleAddUser = useCallback(async () => {
     setError(undefined)
 
     const addUser = (pubkey: string) => {
@@ -251,6 +378,8 @@ export const CreatePage = () => {
 
     const input = userInput.toLowerCase()
 
+    setUserSearchInput('')
+
     if (input.startsWith('npub')) {
       return handleAddNpubUser(input)
     }
@@ -300,7 +429,20 @@ export const CreatePage = () => {
       }
       return
     }
-  }
+  }, [
+    userInput,
+    userRole,
+    setError,
+    setUsers,
+    setUserSearchInput,
+    setIsLoading,
+    setLoadingSpinnerDesc,
+    setUserInput
+  ])
+
+  useEffect(() => {
+    if (userInput?.length > 0) handleAddUser()
+  }, [handleAddUser, userInput])
 
   const handleUserRoleChange = (role: UserRole, pubkey: string) => {
     setUsers((prevUsers) =>
@@ -789,6 +931,61 @@ export const CreatePage = () => {
     }
   }
 
+  /**
+   * Handles the user search textfield change
+   * If it's not valid npub or nip05, search will be automatically triggered
+   */
+  const handleSearchAutocompleteTextfieldChange = async (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const value = e.target.value
+
+    const disarmAddOnEnter = () => {
+      setPastedUserNpubOrNip05(undefined)
+    }
+
+    // Seems like it's npub format
+    if (value.startsWith('npub')) {
+      // We will try to convert npub to hex and if it's successfull that means
+      // npub is valid
+      const validHexPubkey = npubToHex(value)
+
+      if (validHexPubkey) {
+        // Arm the manual user npub add after enter is hit, we don't want to trigger search
+        setPastedUserNpubOrNip05(value)
+      } else {
+        disarmAddOnEnter()
+      }
+    } else if (value.includes('@')) {
+      // Seems like it's nip05 format
+      const { pubkey } = await queryNip05(value).catch((err) => {
+        console.error(err)
+        return { pubkey: null }
+      })
+
+      if (pubkey) {
+        // Arm the manual user npub add after enter is hit, we don't want to trigger search
+        setPastedUserNpubOrNip05(hexToNpub(pubkey))
+      } else {
+        disarmAddOnEnter()
+      }
+    } else {
+      // Disarm the add user on enter hit, and trigger search after 1 second
+      disarmAddOnEnter()
+    }
+
+    setUserSearchInput(value)
+  }
+
+  const parseContent = (event: Event) => {
+    try {
+      return JSON.parse(event.content)
+    } catch (e) {
+      return undefined
+      console.error(e)
+    }
+  }
+
   return (
     <>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
@@ -852,42 +1049,108 @@ export const CreatePage = () => {
                   moveSigner={moveSigner}
                 />
               </div>
+
               <div className={styles.addCounterpart}>
                 <div className={styles.inputWrapper}>
-                  <TextField
+                  <Autocomplete
-                    fullWidth
+                    sx={{ width: 300 }}
-                    placeholder="Add counterpart"
+                    options={foundUsers}
-                    value={userInput}
+                    onChange={handleSearchUserChange}
-                    onChange={(e) => setUserInput(e.target.value)}
+                    inputValue={userSearchInput}
-                    onKeyDown={handleInputKeyDown}
+                    disableClearable
-                    error={!!error}
+                    openOnFocus
+                    autoHighlight
+                    freeSolo
+                    filterOptions={(x) => x}
+                    getOptionLabel={(option) => {
+                      let label: string = (option as FoundUser).npub
+
+                      const contentJson = parseContent(option as FoundUser)
+
+                      if (contentJson?.name) {
+                        label = contentJson.name
+                      } else {
+                        label = option as string
+                      }
+
+                      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}
+                        >
+                          <AvatarIconButton
+                            src={contentJson.picture}
+                            hexKey={option.pubkey}
+                            color="inherit"
+                            sx={{
+                              padding: '0 10px 0 0'
+                            }}
+                          />
+
+                          <div>
+                            {contentJson.name}{' '}
+                            {usersPubkey === option.pubkey ? (
+                              <span
+                                style={{
+                                  color: '#4c82a3',
+                                  fontWeight: 'bold'
+                                }}
+                              >
+                                Me
+                              </span>
+                            ) : (
+                              ''
+                            )}{' '}
+                            ({truncate(option.npub, { length: 16 })})
+                          </div>
+                        </Box>
+                      )
+                    }}
+                    renderInput={(params) => (
+                      <TextField
+                        {...params}
+                        key={params.id}
+                        inputRef={searchFieldRef}
+                        label="Add/Search counterpart"
+                        onKeyDown={handleInputKeyDown}
+                        onChange={handleSearchAutocompleteTextfieldChange}
+                      />
+                    )}
                   />
                 </div>
-                <Button
+                {!pastedUserNpubOrNip05 ? (
-                  onClick={() =>
+                  <Button
-                    setUserRole(
+                    disabled={!userSearchInput || searchUsersLoading}
-                      userRole === UserRole.signer
+                    onClick={() => handleSearchUsers()}
-                        ? UserRole.viewer
+                    variant="contained"
-                        : UserRole.signer
+                    aria-label="Add"
-                    )
+                    className={styles.counterpartToggleButton}
-                  }
+                  >
-                  variant="contained"
+                    {searchUsersLoading ? (
-                  aria-label="Toggle User Role"
+                      <CircularProgress size={14} />
-                  className={styles.counterpartToggleButton}
+                    ) : (
-                >
+                      <FontAwesomeIcon icon={faSearch} />
-                  <FontAwesomeIcon
+                    )}
-                    icon={userRole === UserRole.signer ? faPen : faEye}
+                  </Button>
-                  />
+                ) : (
-                </Button>
+                  <Button
-                <Button
+                    onClick={handleAddUser}
-                  disabled={!userInput}
+                    variant="contained"
-                  onClick={handleAddUser}
+                    aria-label="Add"
-                  variant="contained"
+                    className={styles.counterpartToggleButton}
-                  aria-label="Add"
+                  >
-                  className={styles.counterpartToggleButton}
+                    <FontAwesomeIcon icon={faPlus} />
-                >
+                  </Button>
-                  <FontAwesomeIcon icon={faPlus} />
+                )}
-                </Button>
               </div>
 
               <div className={`${styles.paperGroup} ${styles.toolbox}`}>

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