Merge pull request #85 from academic-innovation/revert-84-member-uplo…

…ad-background-task

Revert "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 = (taskStarted) => {
-    setImportResults(taskStarted);
+  const importCallback = (results) => {
+    setImportResults(results);
     closeImportMembers();
   };
 
@@ -41,7 +41,7 @@ export default function CohortDetails() {
   return (
     <>
       {importResults && (
-        <Alert variant="success" show dismissible onClose={clearResults}>A background task has been initiated to import members. Please check back later.</Alert>
+        <Alert variant="success" show dismissible onClose={clearResults}>You successfully imported {importResults} learners.</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 = (taskStarted) => {
+  const handleOnClose = (numMembersImported) => {
     setError('');
     setFilename('');
     setEmailList([]);
-    onClose(taskStarted);
+    onClose(numMembersImported);
   };
 
   const onDrop = useCallback((acceptedFiles) => {
@@ -44,15 +44,23 @@ export default function ImportMembersModal({ isOpen, onClose, cohort }) {
 
   const onImportMembersClicked = async () => {
     setError('');
-    let taskStarted = false;
+    let numMembersImported = 0;
     try {
       const response = await dispatch(importMembers({ cohort, emailList }));
-      taskStarted = [200, 201].includes(response.payload.status);
+      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.`);
+      }
     } catch (err) {
       console.error(err);
-      return setError('There was an error importing the list of members. Please verify and try again.');
+      return setError('There was an error reading the uploaded file. Please verify and try again.');
     }
-    return handleOnClose(taskStarted);
+    return handleOnClose(numMembersImported);
   };
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });

src/features/members/membersSlice.js

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

src/utils/normalize.js

@@ -0,0 +1,9 @@
+// eslint-disable-next-line
+export const noralizeSliceData = (data, key) => {
+  const normalizedData = { entities: { [key]: {} }, result: [] };
+  return data.reduce((_, item) => {
+    normalizedData.entities[key][item.id] = item;
+    normalizedData.result.push(item.id);
+    return normalizedData;
+  }, {});
+};