Merge pull request #84 from academic-innovation/member-upload-backgro…

…und-task

Update cohort membership import flow to accommodate background task

src/features/cohorts/CohortDetail.jsx

@@ -31,8 +31,8 @@ export default function CohortDetails() {
     return <Spinner animation="border" className="mie-3" screenReaderText="loading" />;
   }
 
-  const importCallback = (results) => {
-    setImportResults(results);
+  const importCallback = (taskStarted) => {
+    setImportResults(taskStarted);
     closeImportMembers();
   };
 
@@ -41,7 +41,7 @@ export default function CohortDetails() {
   return (
     <>
       {importResults && (
-        <Alert variant="success" show dismissible onClose={clearResults}>You successfully imported {importResults} learners.</Alert>
+        <Alert variant="success" show dismissible onClose={clearResults}>A background task has been initiated to import members. Please check back later.</Alert>
       )}
       <PartnerHeading partnerName={partner?.name}>
         <Button variant="inverse-outline-primary" href={`/${partnerSlug}/details`}>View</Button>

src/features/members/ImportMembersModal.jsx

@@ -15,11 +15,11 @@ export default function ImportMembersModal({ isOpen, onClose, cohort }) {
   const [filename, setFilename] = useState('');
   const [errorMessage, setError] = useState('');
 
-  const handleOnClose = (numMembersImported) => {
+  const handleOnClose = (taskStarted) => {
     setError('');
     setFilename('');
     setEmailList([]);
-    onClose(numMembersImported);
+    onClose(taskStarted);
   };
 
   const onDrop = useCallback((acceptedFiles) => {
@@ -44,23 +44,15 @@ export default function ImportMembersModal({ isOpen, onClose, cohort }) {
 
   const onImportMembersClicked = async () => {
     setError('');
-    let numMembersImported = 0;
+    let taskStarted = false;
     try {
       const response = await dispatch(importMembers({ cohort, emailList }));
-      const newMembers = response.payload?.members;
-
-      numMembersImported = Object.keys(newMembers).map(
-        memberId => newMembers[memberId],
-      ).length;
-      const expectedNumMembers = emailList.length;
-      if (numMembersImported !== expectedNumMembers) {
-        return setError(`The uploaded list contained duplicates or invalid emails. Added ${numMembersImported} out of ${expectedNumMembers} expected members.`);
-      }
+      taskStarted = [200, 201].includes(response.payload.status);
     } catch (err) {
       console.error(err);
-      return setError('There was an error reading the uploaded file. Please verify and try again.');
+      return setError('There was an error importing the list of members. Please verify and try again.');
     }
-    return handleOnClose(numMembersImported);
+    return handleOnClose(taskStarted);
   };
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

src/features/members/membersSlice.js

@@ -4,7 +4,6 @@ import {
 import {
   camelCaseObject, snakeCaseObject,
 } from '@edx/frontend-platform';
-import { noralizeSliceData } from '../../utils/normalize';
 import { setupRequest } from '../../utils/requests';
 
 const membersAdapter = createEntityAdapter({
@@ -59,12 +58,11 @@ export const importMembers = createAsyncThunk(
   async (args) => {
     const { cohort, emailList } = args;
     const { client, baseUrl } = setupRequest();
-    const { data } = await client.post(
+    const response = await client.post(
       `${baseUrl}/api/partnerships/v0/memberships/${cohort}/`,
       snakeCaseObject(emailList.map(email => ({ email }))),
     );
-    const normalized = noralizeSliceData(camelCaseObject(data), 'members');
-    return normalized.entities;
+    return response;
   },
 );
 
@@ -107,9 +105,8 @@ const membersSlice = createSlice({
         state.status = 'loading';
         state.currentRequestId = action.meta.requestId;
       })
-      .addCase(importMembers.fulfilled, (state, action) => {
+      .addCase(importMembers.fulfilled, (state) => {
         state.status = 'success';
-        membersAdapter.upsertMany(state, action.payload.members);
       })
       .addCase(importMembers.rejected, (state, action) => {
         state.status = 'failed';