able to add invites to project

Author: mbaghel

src/routes/TeamAccess/actions/index.js

@@ -8,6 +8,7 @@ import {
   deleteTeamMember,
   deleteInvite,
   getMemberSuggestions,
+  postInvites
 } from "services/teams";
 
 export const ACTION_TYPE = {
@@ -31,6 +32,10 @@ export const ACTION_TYPE = {
   REMOVE_INVITE_PENDING: "REMOVE_INVITE_PENDING",
   REMOVE_INVITE_SUCCESS: "REMOVE_INVITE_SUCCESS",
   REMOVE_INVITE_ERROR: "REMOVE_INVITE_ERROR",
+  ADD_INVITES: "ADD_INVITES",
+  ADD_INVITES_PENDING: "ADD_INVITES_PENDING",
+  ADD_INVITES_SUCCESS: "ADD_INVITES_SUCCESS",
+  ADD_INVITES_ERROR: "ADD_INVITES_ERROR",
   CLEAR_ALL: "CLEAR_ALL",
   CLEAR_SUGGESTIONS: "CLEAR_SUGGESTIONS"
 };
@@ -141,4 +146,21 @@ export const loadSuggestions = fragment => ({
  */
 export const clearSuggestions = () => ({
   type: ACTION_TYPE.CLEAR_SUGGESTIONS
+})
+
+/**
+ * Adds invites to team
+ * 
+ * @param {string|number} teamId
+ * @param {string[]} handles
+ * @param {string[]} emails
+ * 
+ * @returns {Promise} list of successes and failures, or error
+ */
+export const addInvites = (teamId, handles, emails) => ({
+  type: ACTION_TYPE.ADD_INVITES,
+  payload: async () => {
+    const res = await postInvites(teamId, handles, emails, "customer");
+    return res.data;
+  }
 })

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

@@ -1,26 +1,64 @@
 import React, { useCallback, useState } from "react";
 import _ from 'lodash';
 import { useDispatch, useSelector } from "react-redux";
-import { loadSuggestions, clearSuggestions } from "../../actions";
+import { toastr } from "react-redux-toastr";
+import { loadSuggestions, clearSuggestions, addInvites } 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 }) {
+function AddModal({ open, onClose, teamId, validateInvites}) {
 
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState();
   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 validateSelection = () => {
+    if (validateInvites(selectedMembers)) {
+      setError(new Error("Project members can't be invited again. Please remove them from list"));
+    } else {
+      setError(undefined);
+    }
+  }
+
   const handleClose = useCallback(() => {
     setSelectedMembers([]);
     onClose()
   },[onClose])
 
+  const submitInvites = useCallback(() => {
+    const handles = [];
+    const emails = [];
+    selectedMembers.forEach(member => {
+      const val = member.label;
+      if (member.isEmail) {
+        emails.push(val);
+      } else {
+        handles.push(val);
+      }
+    })
+
+    setLoading(true);
+
+    dispatch(addInvites(teamId, handles, emails))
+      .then((res) => {
+        setLoading(false);
+        if (!res.value.failed) {
+          const numInvites = res.value.success.length;
+          const plural = numInvites !== 1 ? "s": ""; 
+          handleClose()
+          toastr.success("Invites Added", `Successfully added ${numInvites} invite${plural}`)
+        }
+      })
+
+  }, [dispatch, selectedMembers, teamId])
+
   const onInputChange = useCallback((val) => {
     const spaceIndex = val.indexOf(" ");
     const semiColonIndex = val.indexOf(";");
@@ -48,14 +86,18 @@ function AddModal({ open, onClose }) {
     }));
 
     setSelectedMembers(normalizedArr);
+    
+    validateSelection()
+
     dispatch(clearSuggestions());
   }, [dispatch])
 
   const inviteButton = (
     <Button
       type="primary"
       size="medium"
-      onClick={() => console.log('yay')}
+      onClick={submitInvites}
+      disabled={loading || selectedMembers.length < 1}
     >
       Invite
     </Button>
@@ -67,6 +109,7 @@ function AddModal({ open, onClose }) {
       onClose={handleClose}
       button={inviteButton}
       title="Invite more people"
+      disabled={loading}
     >
       <ReactSelect
         value={selectedMembers}
@@ -76,6 +119,7 @@ function AddModal({ open, onClose }) {
         isMulti
         placeholder="Enter one or more user handles"
       />
+      {error && error.message}
     </BaseModal>
   );
 }

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

@@ -3,6 +3,7 @@
  */
 
 import React, { useState } from "react";
+import _ from 'lodash';
 import PT from "prop-types";
 import CardHeader from "components/CardHeader";
 import Button from "components/Button";
@@ -21,6 +22,12 @@ function MemberList({ teamId, members, invitees }) {
   const [inviteOpen, setInviteOpen] = useState(false);
   const [isInvite, setIsInvite] = useState(false);
   const [deleteOpen, setDeleteOpen] = useState(false);
+  
+  const validateInvites = (newInvites) => {
+    return _.some(newInvites, newInvite => {
+      (members.find(member => newInvite.label === member.handle) || invitees.find(invite => newInvite.label === invite.handle))
+    })
+  }
 
   const openDeleteModal = (member, isInvite = false) => {
     setIsInvite(isInvite);
@@ -114,7 +121,7 @@ function MemberList({ teamId, members, invitees }) {
         teamId={teamId}
         isInvite={isInvite}
       />
-      <AddModal open={inviteOpen} onClose={() => setInviteOpen(false)} />
+      <AddModal open={inviteOpen} onClose={() => setInviteOpen(false)} teamId={teamId} validateInvites={validateInvites} />
     </>
   );
 }

src/routes/TeamAccess/reducers/index.js

@@ -10,6 +10,7 @@ const initialState = {
   loading: false,
   error: undefined,
   updating: false,
+  inviteError: undefined
 };
 
 const reducer = (state = initialState, action) => {
@@ -133,6 +134,31 @@ const reducer = (state = initialState, action) => {
         suggestions: []
       }
 
+    case ACTION_TYPE.ADD_INVITES_PENDING:
+      return {
+        ...state,
+        updating: true,
+        inviteError: undefined
+      }
+
+    case ACTION_TYPE.ADD_INVITES_SUCCESS:
+      return {
+        ...state,
+        invites: [...state.invites, ...action.payload.success],
+        updating: false,
+        inviteError: action.payload.failed ? { 
+          type: "SOME_FAILED", 
+          failed: action.payload.failed
+        } : undefined
+      }
+
+    case ACTION_TYPE.ADD_INVITES_ERROR:
+      return {
+        ...state,
+        updating: false,
+        inviteError: action.payload
+      }
+
     default:
       return state;
   }

src/services/teams.js

@@ -134,4 +134,33 @@ export const deleteInvite = (teamId, inviteId) => {
 export const getMemberSuggestions = (fragment) => {
   const url = `${config.API.V3}/members/_suggest/${fragment}`;
   return axios.get(url);
+}
+
+/**
+ * Post new team invites
+ * 
+ * @param {string|number} teamId team id
+ * @param {string[]} handles user handles to add
+ * @param {string[]} emails user emails to add
+ * @param {string} role role to assign to users
+ * 
+ * @returns {Promise<object>} object with successfully added invites, and failed invites
+ */
+export const postInvites = (teamId, handles, emails, role) => {
+  const url = `${config.API.V5}/projects/${teamId}/invites/?fields=id,projectId,userId,email,role,status,createdAt,updatedAt,createdBy,updatedBy,handle`;
+  const bodyObj = {};
+  if (handles && handles.length > 0) {
+    bodyObj.handles = handles;
+  }
+  if (emails && emails.length > 0 ) {
+    bodyObj.emails = emails;
+  }
+  bodyObj.role = role;
+
+  return new Promise((resolve, reject) => {
+    axios
+      .post(url, bodyObj, { validateStatus: status => ((status >= 200 && status < 300) || status === 403)})
+      .then((res) => resolve(res))
+      .catch((ex) => reject(ex))
+  })
 }