working suggestions and reactselect element

Author: mbaghel

config/dev.js

@@ -21,5 +21,6 @@ module.exports = {
 
   API: {
     V5: "https://api.topcoder-dev.com/v5",
+    V3: "https://api.topcoder-dev.com/v3"
   },
 };

config/prod.js

@@ -21,5 +21,6 @@ module.exports = {
 
   API: {
     V5: "https://api.topcoder.com/v5",
+    V3: "https://api.topcoder.com/v3"
   },
 };

src/components/ReactSelect/index.jsx

@@ -62,6 +62,9 @@ const ReactSelect = (props) => {
       textAlign: "left",
       borderRadius: "5px",
     }),
+    dropdownIndicator: () => ({
+      display: "none"
+    }),
   };
 
   return (
@@ -76,6 +79,7 @@ const ReactSelect = (props) => {
         onBlur={props.onBlur}
         onFocus={props.onFocus}
         placeholder={props.placeholder}
+        onInputChange={props.onInputChange}
       />
     </div>
   );
@@ -89,6 +93,7 @@ ReactSelect.propTypes = {
   isMulti: PT.bool,
   onBlur: PT.func,
   onFocus: PT.func,
+  onInputChange: PT.func,
   options: PT.arrayOf(
     PT.shape({
       value: PT.string.isRequired,

src/routes/TeamAccess/actions/index.js

@@ -7,6 +7,7 @@ import {
   getTeamInvitees,
   deleteTeamMember,
   deleteInvite,
+  getMemberSuggestions,
 } from "services/teams";
 
 export const ACTION_TYPE = {
@@ -18,6 +19,10 @@ export const ACTION_TYPE = {
   LOAD_INVITES_PENDING: "LOAD_INVITES_PENDING",
   LOAD_INVITES_SUCCESS: "LOAD_INVITES_SUCCESS",
   LOAD_INVITES_ERROR: "LOAD_INVITES_ERROR",
+  LOAD_SUGGESTIONS: "LOAD_SUGGESTIONS",
+  LOAD_SUGGESTIONS_PENDING: "LOAD_SUGGESTIONS_PENDING",
+  LOAD_SUGGESTIONS_SUCCESS: "LOAD_SUGGESTIONS_SUCCESS",
+  LOAD_SUGGESTIONS_ERROR: "LOAD_SUGGESTIONS_ERROR",
   REMOVE_MEMBER: "REMOVE_MEMBER",
   REMOVE_MEMBER_PENDING: "REMOVE_MEMBER_PENDING",
   REMOVE_MEMBER_SUCCESS: "REMOVE_MEMBER_SUCCESS",
@@ -27,6 +32,7 @@ export const ACTION_TYPE = {
   REMOVE_INVITE_SUCCESS: "REMOVE_INVITE_SUCCESS",
   REMOVE_INVITE_ERROR: "REMOVE_INVITE_ERROR",
   CLEAR_ALL: "CLEAR_ALL",
+  CLEAR_SUGGESTIONS: "CLEAR_SUGGESTIONS"
 };
 
 /**
@@ -95,8 +101,10 @@ export const removeTeamMember = (teamId, memberId) => ({
 /**
  * Removes an invite
  *
- * @para {string|number} teamId
+ * @param {string|number} teamId
  * @param {string|number} REMOVE_INVITE_PENDING
+ * 
+ * @returns {Promise} deleted invite id or error
  */
 export const removeInvite = (teamId, inviteId) => ({
   type: ACTION_TYPE.REMOVE_INVITE,
@@ -109,3 +117,28 @@ export const removeInvite = (teamId, inviteId) => ({
     inviteId,
   },
 });
+
+/**
+ * Loads suggestions for invites
+ * 
+ * @param {string} fragment
+ * 
+ * @returns {Promise<object[]>} list of suggestions or error 
+ */
+export const loadSuggestions = fragment => ({
+  type: ACTION_TYPE.LOAD_SUGGESTIONS,
+  payload: async () => {
+    const res = await getMemberSuggestions(fragment);
+    return res.data.result.content;
+  },
+  meta: {
+    fragment
+  }
+})
+
+/**
+ * Clears invite suggestions
+ */
+export const clearSuggestions = () => ({
+  type: ACTION_TYPE.CLEAR_SUGGESTIONS
+})

src/routes/TeamAccess/components/AddModal/index.jsx

@@ -1,20 +1,61 @@
-import React from "react";
+import React, { useCallback, useState } from "react";
+import _ from 'lodash';
+import { useDispatch, useSelector } from "react-redux";
+import { loadSuggestions, clearSuggestions } from "../../actions";
 import Button from "components/Button";
 import BaseModal from "components/BaseModal";
 import ReactSelect from "components/ReactSelect";
 
+const SUGGESTION_TRIGGER_LENGTH = 3;
+
 function AddModal({ open, onClose }) {
-  const options = [
-    { value: "chocolate", label: "Chocolate" },
-    { value: "strawberry", label: "Strawberry" },
-    { value: "vanilla", label: "Vanilla" },
-  ];
+
+  const [selectedMembers, setSelectedMembers] = useState([]);
+  const options = useSelector(state => state.teamMembers.suggestions.map(sugg => ({ label: sugg.handle, value: sugg.handle })));
+  const dispatch = useDispatch();
+
+  const debouncedLoadSuggestions = _.debounce(arg => {dispatch(loadSuggestions(arg))}, 500, {leading: true});
+
+  const handleClose = useCallback(() => {
+    setSelectedMembers([]);
+    onClose()
+  },[onClose])
+
+  const onInputChange = useCallback((val) => {
+    const spaceIndex = val.indexOf(" ");
+    const semiColonIndex = val.indexOf(";");
+
+    // use space or semi-colon to add a member
+    if (spaceIndex === 0 || semiColonIndex === 0) return "";
+    if (spaceIndex >= 1 || semiColonIndex >= 1) {
+      val = val.slice(0, -1);
+      onUpdate([...selectedMembers, {label: val, value: val}])
+      return "";
+    }
+
+    // load suggestions
+    if (val.length >= SUGGESTION_TRIGGER_LENGTH) {
+      debouncedLoadSuggestions(val);
+    } else {
+      dispatch(clearSuggestions());
+    }
+  }, [dispatch])
+
+  const onUpdate = useCallback((arr) => {
+    const normalizedArr = arr.map(member => ({
+      ...member,
+      isEmail: (/(.+)@(.+){2,}\.(.+){2,}/).test(member.label)
+    }));
+
+    setSelectedMembers(normalizedArr);
+    dispatch(clearSuggestions());
+  }, [dispatch])
 
   const inviteButton = (
     <Button
       type="primary"
       size="medium"
-      onClick={() => console.log("You clicked invite")}
+      onClick={() => console.log('yay')}
     >
       Invite
     </Button>
@@ -23,15 +64,16 @@ function AddModal({ open, onClose }) {
   return (
     <BaseModal
       open={open}
-      onClose={onClose}
+      onClose={handleClose}
       button={inviteButton}
       title="Invite more people"
     >
       <ReactSelect
-        value=""
-        onChange={(e) => console.log(e)}
+        value={selectedMembers}
+        onChange={onUpdate}
         options={options}
-        isMulti={true}
+        onInputChange={onInputChange}
+        isMulti
         placeholder="Enter one or more user handles"
       />
     </BaseModal>

src/routes/TeamAccess/hooks/useTeamMembers.js

@@ -4,7 +4,6 @@ import {
   loadMembers,
   loadInvites,
   clearAll,
-  removeTeamMember,
 } from "../actions";
 
 /**

src/routes/TeamAccess/reducers/index.js

@@ -6,6 +6,7 @@ import { ACTION_TYPE } from "../actions";
 const initialState = {
   members: undefined,
   invites: undefined,
+  suggestions: [],
   loading: false,
   error: undefined,
   updating: false,
@@ -104,6 +105,34 @@ const reducer = (state = initialState, action) => {
         error: action.payload,
       };
 
+    case ACTION_TYPE.LOAD_SUGGESTIONS_PENDING:
+      return {
+        ...state,
+        loading: true,
+        error: undefined,
+      }
+
+    case ACTION_TYPE.LOAD_SUGGESTIONS_SUCCESS:
+      return {
+        ...state,
+        suggestions: action.payload,
+        loading: false,
+        error: undefined,
+      }
+
+    case ACTION_TYPE.LOAD_SUGGESTIONS_ERROR:
+      return {
+        ...state,
+        loading: false,
+        error: action.payload
+      }
+
+    case ACTION_TYPE.CLEAR_SUGGESTIONS:
+      return {
+        ...state,
+        suggestions: []
+      }
+
     default:
       return state;
   }

src/services/teams.js

@@ -123,3 +123,15 @@ export const deleteInvite = (teamId, inviteId) => {
       .catch((ex) => reject(ex));
   });
 };
+
+/**
+ * Get member suggestions
+ * 
+ * @param {string} fragment text for suggestions
+ * 
+ * @returns {Promise} 
+ */
+export const getMemberSuggestions = (fragment) => {
+  const url = `${config.API.V3}/members/_suggest/${fragment}`;
+  return axios.get(url);
+}