Merge pull request 'Create page: search users' (#259) from issue-56 into staging

Reviewed-on: #259

src/App.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { useAppSelector } from './hooks'
+import { useAppSelector } from './hooks/store'
 import { Navigate, Route, Routes } from 'react-router-dom'
 import { AuthController } from './controllers'
 import { MainLayout } from './layouts/Main'
@@ -29,11 +29,9 @@ const App = () => {
 
   const handleRootRedirect = () => {
     if (authState.loggedIn) return appPrivateRoutes.homePage
-
     const callbackPathEncoded = btoa(
       window.location.href.split(`${window.location.origin}/#`)[1]
     )
-
     return `${appPublicRoutes.login}?callbackPath=${callbackPathEncoded}`
   }
 

src/components/DisplaySigit/index.tsx

@@ -42,7 +42,8 @@ export const DisplaySigit = ({
     <div className={styles.itemWrapper}>
       {signedStatus === SigitStatus.Complete && (
         <Link
-          to={`${appPublicRoutes.verify}/${sigitCreateId}`}
+          to={appPublicRoutes.verify}
+          state={{ meta }}
           className={styles.insetLink}
         ></Link>
       )}

src/controllers/AuthController.ts

@@ -14,6 +14,7 @@ import {
   compareObjects,
   getAuthToken,
   getRelayMap,
+  getVisitedLink,
   saveAuthToken,
   unixNow
 } from '../utils'
@@ -90,33 +91,21 @@ export class AuthController {
         store.dispatch(setRelayMapAction(relayMap.map))
     }
 
-    /**
-     * This block was added before we started using the `nostr-login` package
-     * At this point it seems it's not needed anymore and it's even blocking the flow (reloading on /verify)
-     * TODO to remove this if app works fine
-     */
-    // const currentLocation = window.location.hash.replace('#', '')
+    const currentLocation = window.location.hash.replace('#', '')
 
-    // if (!Object.values(appPrivateRoutes).includes(currentLocation)) {
-    //   // Since verify is both public and private route, we don't use the `visitedLink`
-    //   // value for it. Otherwise, when linking to /verify/:id we get redirected
-    //   // to the root `/`
-    //   if (currentLocation.includes(appPublicRoutes.verify)) {
-    //     return Promise.resolve(currentLocation)
-    //   }
-    //
-    //   // User did change the location to one of the private routes
-    //   const visitedLink = getVisitedLink()
-    //
-    //   if (visitedLink) {
-    //     const { pathname, search } = visitedLink
-    //
-    //     return Promise.resolve(`${pathname}${search}`)
-    //   } else {
-    //     // Navigate user in
-    //     return Promise.resolve(appPrivateRoutes.homePage)
-    //   }
-    // }
+    if (!Object.values(appPrivateRoutes).includes(currentLocation)) {
+      // User did change the location to one of the private routes
+      const visitedLink = getVisitedLink()
+
+      if (visitedLink) {
+        const { pathname, search } = visitedLink
+
+        return Promise.resolve(`${pathname}${search}`)
+      } else {
+        // Navigate user in
+        return Promise.resolve(appPrivateRoutes.homePage)
+      }
+    }
   }
 
   checkSession() {

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,
-  KeyboardCode
+  UserRole
 } 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>) => {
-    if (
-      event.code === KeyboardCode.Enter ||
-      event.code === KeyboardCode.NumpadEnter
-    ) {
-      event.preventDefault()
-      handleAddUser()
-    }
-  }
-  const [userRole, setUserRole] = useState<UserRole>(UserRole.signer)
+  const [userSearchInput, setUserSearchInput] = useState('')
+
+  const [userRole] = 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
-                    fullWidth
-                    placeholder="Add counterpart"
-                    value={userInput}
-                    onChange={(e) => setUserInput(e.target.value)}
-                    onKeyDown={handleInputKeyDown}
-                    error={!!error}
+                  <Autocomplete
+                    sx={{ width: 300 }}
+                    options={foundUsers}
+                    onChange={handleSearchUserChange}
+                    inputValue={userSearchInput}
+                    disableClearable
+                    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
-                  onClick={() =>
-                    setUserRole(
-                      userRole === UserRole.signer
-                        ? UserRole.viewer
-                        : UserRole.signer
-                    )
-                  }
-                  variant="contained"
-                  aria-label="Toggle User Role"
-                  className={styles.counterpartToggleButton}
-                >
-                  <FontAwesomeIcon
-                    icon={userRole === UserRole.signer ? faPen : faEye}
-                  />
-                </Button>
-                <Button
-                  disabled={!userInput}
-                  onClick={handleAddUser}
-                  variant="contained"
-                  aria-label="Add"
-                  className={styles.counterpartToggleButton}
-                >
-                  <FontAwesomeIcon icon={faPlus} />
-                </Button>
+                {!pastedUserNpubOrNip05 ? (
+                  <Button
+                    disabled={!userSearchInput || searchUsersLoading}
+                    onClick={() => handleSearchUsers()}
+                    variant="contained"
+                    aria-label="Add"
+                    className={styles.counterpartToggleButton}
+                  >
+                    {searchUsersLoading ? (
+                      <CircularProgress size={14} />
+                    ) : (
+                      <FontAwesomeIcon icon={faSearch} />
+                    )}
+                  </Button>
+                ) : (
+                  <Button
+                    onClick={handleAddUser}
+                    variant="contained"
+                    aria-label="Add"
+                    className={styles.counterpartToggleButton}
+                  >
+                    <FontAwesomeIcon icon={faPlus} />
+                  </Button>
+                )}
               </div>
 
               <div className={`${styles.paperGroup} ${styles.toolbox}`}>

src/pages/verify/index.tsx

@@ -26,10 +26,10 @@ import {
   sendNotification
 } from '../../utils'
 import styles from './style.module.scss'
-import { useLocation, useParams } from 'react-router-dom'
+import { useLocation } from 'react-router-dom'
 import axios from 'axios'
 import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
-import { useAppSelector } from '../../hooks'
+import { useAppSelector } from '../../hooks/store'
 import { getLastSignersSig } from '../../utils/sign.ts'
 import { saveAs } from 'file-saver'
 import { Container } from '../../components/Container'
@@ -165,9 +165,6 @@ const SlimPdfView = ({
 
 export const VerifyPage = () => {
   const location = useLocation()
-  const params = useParams()
-
-  const usersAppData = useAppSelector((state) => state.userAppData)
   const usersPubkey = useAppSelector((state) => state.auth.usersPubkey)
 
   const nostrController = NostrController.getInstance()
@@ -179,27 +176,8 @@ export const VerifyPage = () => {
    * uploadedZip will be received from home page when a user uploads a sigit zip wrapper that contains meta.json
    * meta will be received in navigation from create & home page in online mode
    */
-  let metaInNavState = location?.state?.meta || undefined
-  const { uploadedZip } = location.state || {}
+  const { uploadedZip, meta: metaInNavState } = location.state || {}
   const [selectedFile, setSelectedFile] = useState<File | null>(null)
-
-  /**
-   * If `userAppData` is present it means user is logged in and we can extract list of `sigits` from the store.
-   * If ID is present in the URL we search in the `sigits` list
-   * Otherwise sigit is set from the `location.state.meta`
-   */
-  if (usersAppData) {
-    const sigitCreateId = params.id
-
-    if (sigitCreateId) {
-      const sigit = usersAppData.sigits[sigitCreateId]
-
-      if (sigit) {
-        metaInNavState = sigit
-      }
-    }
-  }
-
   useEffect(() => {
     if (uploadedZip) {
       setSelectedFile(uploadedZip)
@@ -207,7 +185,6 @@ export const VerifyPage = () => {
   }, [uploadedZip])
 
   const [meta, setMeta] = useState<Meta>(metaInNavState)
-
   const {
     submittedBy,
     zipUrl,

src/routes/index.tsx

@@ -90,7 +90,7 @@ export const publicRoutes: PublicRouteProps[] = [
     element: <ProfilePage />
   },
   {
-    path: `${appPublicRoutes.verify}/:id?`,
+    path: appPublicRoutes.verify,
     element: <VerifyPage />
   }
 ]

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