replaced memberIds input with autocomplete

Author: mgorkove

packages/groups/src/components/Form.jsx

@@ -8,13 +8,13 @@
 
 import { useEffect, useReducer } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
-import { useServices } from '@kernel/common'
+import { useServices, AutocompleteInput } from '@kernel/common'
 
 import AppConfig from 'App.config'
 
 const MODES = { create: 'create', update: 'update' }
-const KEYS = ['name', 'memberIdsText']
-const STATE_KEYS = ['group', 'groups', 'member', 'members', 'error', 'status', 'taskService']
+const KEYS = ['name', 'memberIdsText', 'groupMembers']
+const STATE_KEYS = ['group', 'groups', 'member', 'members', 'profiles', 'error', 'status', 'taskService']
 const INITIAL_STATE = STATE_KEYS.concat(KEYS)
   .reduce((acc, k) => Object.assign(acc, { [k]: '' }), {})
 
@@ -23,6 +23,8 @@ Object.keys(INITIAL_STATE)
   .forEach((k) => {
     actions[k] = (state, e) => Object.assign({}, state, { [k]: e })
   })
+INITIAL_STATE.groupMembers = []
+INITIAL_STATE.profiles = []
 
 const reducer = (state, action) => {
   try {
@@ -36,6 +38,8 @@ const reducer = (state, action) => {
 }
 
 const change = (dispatch, type, e) => {
+  console.log('in change')
+  console.log(e)
   try {
     e.preventDefault()
     const payload = e.target.value
@@ -50,8 +54,14 @@ const value = (state, type) => {
 }
 
 // dedupe, sort
-const textToArray = (s) => [...new Set(s.split(',').map((e) => e.trim()))].sort()
-const arrayToText = (arr) => arr.join(', ')
+const getMemberIds = (groupMembers) => groupMembers.map(groupMember => groupMember.id)
+const transformProfiles = (profiles) => {
+  const out = []
+  for (const [, v] of Object.entries(profiles)) {
+    out.push({ id: v.data.memberId, name: v.data.name })
+  }
+  return out
+}
 const resetAlerts = (dispatch) => {
   dispatch({ type: 'error', payload: '' })
   dispatch({ type: 'status', payload: 'submitting' })
@@ -60,15 +70,17 @@ const resetAlerts = (dispatch) => {
 const create = async (state, dispatch, e) => {
   e.preventDefault()
   resetAlerts(dispatch)
-  const { groups, memberIdsText, name, taskService } = state
-  const memberIds = textToArray(memberIdsText)
-  if (!name.length || !memberIdsText.length) {
+  const { groups, groupMembers, name, taskService } = state
+  const memberIds = getMemberIds(groupMembers)
+  if (!name.length || !groupMembers.length) {
     dispatch({ type: 'error', payload: 'name and member ids are required' })
     return
   }
   try {
     const group = await groups.create({ name })
     const groupId = group.id
+    console.log('groupid')
+    console.log(group.id)
     await groups.updateMeta(groupId, { owner: groupId })
     await taskService.syncGroupMembers({ groupId, memberIds })
     dispatch({ type: 'status', payload: 'Group creation submitted' })
@@ -80,9 +92,9 @@ const create = async (state, dispatch, e) => {
 const update = async (state, dispatch, e) => {
   e.preventDefault()
   resetAlerts(dispatch)
-  const { group, groups, memberIdsText, name, taskService } = state
+  const { group, groups, groupMembers, name, taskService } = state
   const groupId = group.id
-  const memberIds = textToArray(memberIdsText)
+  const memberIds = getMemberIds(groupMembers)
   try {
     if (group.data.name !== name) {
       await groups.patch(groupId, { name })
@@ -117,14 +129,17 @@ const Form = () => {
   useEffect(() => {
     (async () => {
       dispatch({ type: 'status', payload: 'Loading' })
-      const { entityFactory, taskService } = await services()
+      const { entityFactory, taskService, queryService } = await services()
       dispatch({ type: 'taskService', payload: taskService })
       const members = await entityFactory({ resource: 'member' })
       const member = await members.get(user.iss)
       const groups = await entityFactory({ resource: 'group' })
+      const { profiles } = await queryService.recommend()
+      const transformedProfiles = transformProfiles(profiles)
       dispatch({ type: 'members', payload: members })
       dispatch({ type: 'member', payload: member })
       dispatch({ type: 'groups', payload: groups })
+      dispatch({ type: 'profiles', payload: transformedProfiles })
       if (mode === MODES.update) {
         const entity = await groups.get(group)
         dispatch({ type: 'group', payload: entity })
@@ -133,10 +148,9 @@ const Form = () => {
           .forEach(([k, v]) => {
             let type = k
             let payload = v
-            // TODO: more ergonomic way to select group memebers
             if (k === 'memberIds') {
-              type = 'memberIdsText'
-              payload = arrayToText(v)
+              type = 'groupMembers'
+              payload = transformedProfiles.filter(item => v.includes(item.id))
             }
             dispatch({ type, payload })
           })
@@ -155,10 +169,11 @@ const Form = () => {
         />
       </label>
       <label className='block'>
-        <span className='text-gray-700'>Member Ids (comma separated)</span>
-        <input
-          type='text' multiple className={formClass}
-          value={value(state, 'memberIdsText')} onChange={change.bind(null, dispatch, 'memberIdsText')}
+        <span className='text-gray-700'>Member Names</span>
+        <AutocompleteInput
+          items={value(state, 'profiles')}
+          selectedItems={value(state, 'groupMembers')}
+          setSelectedItems={items => dispatch({ type: 'groupMembers', payload: items })}
         />
       </label>
       <label className='block'>