Merge pull request #3127 from goratt12/2409-validate-collaborator-use…

…rnames

feat(research): select and validate research collaborators usernames

packages/components/src/Select/Select.tsx

@@ -172,6 +172,7 @@ export const Select = (props: Props) => {
       options={options}
       onChange={(v) => props.onChange && props.onChange(v)}
       value={props.value}
+      onInputChange={props.onInputChange}
     />
   )
 }

src/pages/Research/Content/Common/Research.form.tsx

@@ -31,6 +31,7 @@ import {
 } from 'src/utils/validators'
 import { Box, Card, Flex, Heading, Label } from 'theme-ui'
 
+import { UserNameSelect } from '../../../common/UserNameSelect/UserNameSelect'
 import {
   RESEARCH_MAX_LENGTH,
   RESEARCH_TITLE_MAX_LENGTH,
@@ -330,8 +331,9 @@ const ResearchForm = observer((props: IProps) => {
                               </ResearchFormLabel>
                               <Field
                                 name="collaborators"
-                                component={FieldInput}
+                                component={UserNameSelect}
                                 placeholder={collaborators.placeholder}
+                                defaultOptions={[]}
                               />
                             </Flex>
                             <Flex sx={{ flexDirection: 'column' }} mb={3}>

src/pages/Research/labels.ts

@@ -41,7 +41,7 @@ export const overview: ILabels = {
     title: 'Which categories fit your research?',
   },
   collaborators: {
-    placeholder: 'A comma separated list of usernames.',
+    placeholder: 'Select collaborators or start typing to find them',
     title: 'Who have you been collaborating on this Research with?',
   },
   description: {

src/pages/common/UserNameSelect/LoadUserNameOptions.tsx

@@ -0,0 +1,36 @@
+import type { IUserPP } from 'src/models'
+import type { UserStore } from 'src/stores/User/user.store'
+
+const USER_RESULTS_LIMIT = 20
+
+export interface IOption {
+  value: string
+  label: string
+}
+
+export const loadUserNameOptions = async (
+  userStore: UserStore,
+  defaultOptions: string[] | undefined,
+  inputValue: string,
+) => {
+  // if there is no user input, use defaultOptions
+  if (inputValue == '') {
+    const selectOptions: IOption[] = defaultOptions?.length
+      ? defaultOptions
+          .filter((user) => user != '')
+          .map((user) => ({
+            value: user,
+            label: user,
+          }))
+      : []
+    return selectOptions
+  } else {
+    const usersStartingWithInput: IUserPP[] =
+      await userStore.getUsersStartingWith(inputValue, USER_RESULTS_LIMIT)
+    const selectOptions: IOption[] = usersStartingWithInput.map((user) => ({
+      value: user.userName,
+      label: user.userName,
+    }))
+    return selectOptions
+  }
+}

src/pages/common/UserNameSelect/UserNameSelect.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useState } from 'react'
+import { observer } from 'mobx-react'
+import { Select } from 'oa-components'
+import { useCommonStores } from 'src/index'
+
+import { loadUserNameOptions } from './LoadUserNameOptions'
+
+import type { IOption } from './LoadUserNameOptions'
+
+interface IProps {
+  input: {
+    value: string[]
+    onChange: (v: string[]) => void
+  }
+  defaultOptions?: string[]
+  placeholder?: string
+  isForm?: boolean
+}
+
+export const UserNameSelect = observer((props: IProps) => {
+  const { defaultOptions, input, isForm, placeholder } = props
+  const { userStore } = useCommonStores().stores
+  const [inputValue, setInputValue] = useState('')
+  const [options, setOptions] = useState<IOption[]>([])
+
+  const loadOptions = async (inputVal: string) => {
+    const selectOptions = await loadUserNameOptions(
+      userStore,
+      defaultOptions,
+      inputVal,
+    )
+    setOptions(selectOptions)
+  }
+
+  // Effect to load options whenever the input value changes
+  useEffect(() => {
+    loadOptions(inputValue)
+  }, [inputValue])
+
+  const value = input.value?.length
+    ? input.value.map((user) => ({
+        value: user,
+        label: user,
+      }))
+    : []
+
+  return (
+    <Select
+      variant={isForm ? 'form' : undefined}
+      options={options}
+      placeholder={placeholder}
+      value={value}
+      onChange={(v: IOption[]) => input.onChange(v.map((user) => user.value))}
+      onInputChange={setInputValue}
+      isClearable={true}
+      isMulti={true}
+    />
+  )
+})

src/stores/User/user.store.ts

@@ -6,6 +6,7 @@ import {
   signInWithEmailAndPassword,
   updateProfile,
 } from 'firebase/auth'
+import { uniqBy } from 'lodash'
 import { action, computed, makeObservable, observable, toJS } from 'mobx'
 import { EmailNotificationFrequency, IModerationStatus } from 'oa-shared'
 
@@ -60,6 +61,34 @@ export class UserStore extends ModuleStore {
     return this.aggregationsStore.aggregations.users_verified || {}
   }
 
+  @action
+  public getAllUsers() {
+    return this.allDocs$
+  }
+
+  @action
+  public async getUsersStartingWith(prefix: string, limit?: number) {
+    // getWhere with the '>=' operator will return every userName that is lexicographically greater than prefix, so adding filter to avoid getting not relvant userNames
+    const users: IUserPP[] = await this.db
+      .collection<IUserPP>(COLLECTION_NAME)
+      .getWhere('userName', '>=', prefix, limit)
+    const uniqueUsers: IUserPP[] = uniqBy(
+      users.filter((user) => user.userName?.startsWith(prefix)),
+      (user) => user.userName,
+    )
+    return uniqueUsers
+  }
+
+  @action
+  private updateActiveUser(user?: IUserPPDB | null) {
+    this.user = user
+  }
+
+  @action
+  public setUpdateStatus(update: keyof IUserUpdateStatus) {
+    this.updateStatus[update] = true
+  }
+
   // when registering a new user create firebase auth profile as well as database user profile
   public async registerNewUser(
     email: string,

src/stores/databaseV2/types/index.d.ts

@@ -47,7 +47,13 @@ export interface DBQueryWhereOptions {
   value: DBQueryWhereValue
 }
 
-export type DBQueryWhereOperator = '>' | '<' | '==' | '!=' | 'array-contains'
+export type DBQueryWhereOperator =
+  | '>'
+  | '>='
+  | '<'
+  | '=='
+  | '!='
+  | 'array-contains'
 export type DBQueryWhereValue = string | number
 
 /**