Search users in teams DB with ILIKE expression

Author: willemarcel

.env

@@ -1,2 +1,2 @@
 NEXTAUTH_URL=http://127.0.0.1:3000
-DATABASE_URL=postgres://postgres:postgres@localhost:5433/osm-teams?sslmode=disable
+DATABASE_URL=postgres://wille:wille@localhost:5432/osm-teams?sslmode=disable

.env.test

@@ -1,6 +1,6 @@
 NEXTAUTH_URL=http://127.0.0.1:3000
 NEXTAUTH_SECRET=next-auth-cypress-secret
-DATABASE_URL=postgres://postgres:postgres@localhost:5434/osm-teams-test
+DATABASE_URL=postgres://wille:wille@localhost:5432/osm-teams-test
 TESTING=true
 LOG_LEVEL=silent
 AUTH_URL=http://127.0.0.1:3000

src/components/add-member-form.js

@@ -10,6 +10,7 @@ import {
   ListIcon,
   Link,
   Code,
+  Text,
 } from '@chakra-ui/react'
 import { AtSignIcon, AddIcon } from '@chakra-ui/icons'
 import join from 'url-join'
@@ -84,14 +85,14 @@ export function AddMemberByUsernameForm({ onSubmit }) {
     if (res.status === 200) {
       const data = await res.json()
       if (data?.users.length) {
-        setSearchResult(data.users[0])
+        setSearchResult(data.users)
         setStatus('successSearch')
       } else {
-        setSearchResult({})
+        setSearchResult([])
         setStatus('noResults')
       }
     } else {
-      setSearchResult({})
+      setSearchResult([])
       setStatus('noResults')
     }
   }
@@ -102,7 +103,7 @@ export function AddMemberByUsernameForm({ onSubmit }) {
       await onSubmit({ osmId: uid, username })
       actions.setSubmitting(false)
       actions.resetForm({ username: '' })
-      setSearchResult({})
+      setSearchResult([])
     } catch (e) {
       logger.error(e)
       actions.setSubmitting(false)
@@ -153,45 +154,50 @@ export function AddMemberByUsernameForm({ onSubmit }) {
               </Button>
             </Flex>
             <Box display='flex' justifyContent='stretch' py={3} px={1}>
-              {searchResult?.id && (
-                <List spacing={5} fontSize='sm' width={'100%'}>
-                  <ListItem
-                    display='flex'
-                    alignItems='center'
-                    justifyContent='space-between'
-                  >
-                    <ListIcon as={AtSignIcon} color='brand.600' />
-                    <Link
-                      href={join(OSM_DOMAIN, '/user', searchResult.name)}
-                      isExternal
+              <List spacing={5} fontSize='sm' width={'100%'}>
+                {searchResult?.length &&
+                  searchResult.map((result) => (
+                    <ListItem
+                      key={result.id}
+                      display='flex'
+                      alignItems='center'
+                      justifyContent='space-between'
+                      marginTop='1rem'
                     >
-                      {searchResult.name}
-                    </Link>
-                    <Code ml={2}>{searchResult.id}</Code>
-                    <Button
-                      ml='auto'
-                      textTransform='lowercase'
-                      onClick={async () =>
-                        submit(searchResult.id, searchResult.name, {
-                          setStatus,
-                          setSubmitting,
-                          resetForm,
-                        })
-                      }
-                      size='sm'
-                      isLoading={isSubmitting}
-                      loadingText='Adding'
-                      isDisabled={isSubmitting}
-                      leftIcon={<AddIcon />}
-                    >
-                      Add
-                    </Button>
-                  </ListItem>
-                </List>
-              )}
-              {status === 'noResults' && (
-                <Box fontSize='md'>No results found.</Box>
-              )}
+                      <ListIcon as={AtSignIcon} color='brand.600' />
+                      <Link
+                        href={join(OSM_DOMAIN, '/user', result.name)}
+                        isExternal
+                      >
+                        {result.name}
+                      </Link>
+                      <Code ml={2}>{result.id}</Code>
+                      <Button
+                        ml='auto'
+                        textTransform='lowercase'
+                        onClick={async () =>
+                          submit(result.id, result.name, {
+                            setStatus,
+                            setSubmitting,
+                            resetForm,
+                          })
+                        }
+                        size='sm'
+                        isLoading={isSubmitting}
+                        loadingText='Adding'
+                        isDisabled={isSubmitting}
+                        leftIcon={<AddIcon />}
+                      >
+                        Add
+                      </Button>
+                    </ListItem>
+                  ))}
+                {status === 'noResults' && (
+                  <Text as='b'>
+                    No results found. Try typing the exact OSM username.
+                  </Text>
+                )}
+              </List>
             </Box>
           </>
         )

src/models/users.js

@@ -9,9 +9,9 @@ const db = require('../lib/db')
  **/
 async function list(options = {}) {
   // Apply search
-  let query = db('osm_users')
+  let query = await db('osm_users')
     .select('id', 'name')
-    .where('name', options.username)
+    .whereILike('name', `%${options.username}%`)
 
   return query
 }