From ac7a8a0872d62457186b20c029d621e7cf4f702c Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Sun, 12 Dec 2021 00:17:00 +0300
Subject: [PATCH] fix: transform to formdata helper

---
 src/helpers/index.ts                          | 12 +++---
 .../StudentTableList/BulkActionsMenu.tsx      | 34 +++++++++++----
 .../StudentTableList/StudentTableList.tsx     | 42 +++++++++++--------
 3 files changed, 59 insertions(+), 29 deletions(-)

diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index 641f21f..8b65582 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -47,12 +47,14 @@ export function transformToFormData(data: object): FormData {
    * Append value to form-data format
    */
   Object.entries(data).forEach(([key, value]) => {
-    if (Array.isArray(value)) {
-      value.forEach((v, i) => formData.append(`${key}[${i}]`, v));
-      return;
-    }
+    if (value) {
+      if (Array.isArray(value)) {
+        value.forEach((v, i) => formData.append(`${key}[${i}]`, v));
+        return;
+      }
 
-    formData.append(key, value);
+      formData.append(key, value);
+    }
   });
 
   return formData;
diff --git a/src/pages/courses/edit/components/StudentTableList/BulkActionsMenu.tsx b/src/pages/courses/edit/components/StudentTableList/BulkActionsMenu.tsx
index ba47e76..28fefe1 100644
--- a/src/pages/courses/edit/components/StudentTableList/BulkActionsMenu.tsx
+++ b/src/pages/courses/edit/components/StudentTableList/BulkActionsMenu.tsx
@@ -1,23 +1,43 @@
 import React from 'react';
-import { Button, Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react';
+import { Button, Menu, MenuButton, MenuList, MenuItem, useToast } from '@chakra-ui/react';
 import { ChevronDownIcon, DeleteIcon } from '@chakra-ui/icons';
 import { MdRemove, MdImportExport } from 'react-icons/md';
 
 import type { ICourse } from '@educt/interfaces';
+import { CourseServiceInstance } from '@educt/services';
 
 type BulkActionsMenuPropsType = {
+  courseId: string;
   selected: ICourse['students'];
   rows: ICourse['students'];
   setRows: React.Dispatch<React.SetStateAction<ICourse['students']>>;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  onRemoved: (removed: ICourse['students']) => void;
 };
 
-const BulkActionsMenu: React.FC<BulkActionsMenuPropsType> = ({ selected, rows, setRows }) => {
+const BulkActionsMenu: React.FC<BulkActionsMenuPropsType> = ({
+  courseId,
+  selected,
+  rows,
+  setRows,
+  setIsLoading,
+  onRemoved,
+}) => {
+  const toast = useToast();
+
   const handleDetach = async () => {
-    console.log(
-      `Detaching from course: `,
-      selected.map(s => s.id)
-    );
-    setRows(rows.filter(r => selected.every(s => s.id !== r.id)));
+    try {
+      setIsLoading(true);
+      const ids = selected.map(s => s.id);
+      await CourseServiceInstance.detachStudentsList(courseId, ids);
+      toast({ title: 'Students removed form course.', status: 'info' });
+      setRows(rows.filter(r => selected.every(s => s.id !== r.id)));
+      onRemoved(selected);
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
   };
   const handleDelete = async () => undefined;
   const handleExport = async () => undefined;
diff --git a/src/pages/courses/edit/components/StudentTableList/StudentTableList.tsx b/src/pages/courses/edit/components/StudentTableList/StudentTableList.tsx
index 5c60fd4..1a380d7 100644
--- a/src/pages/courses/edit/components/StudentTableList/StudentTableList.tsx
+++ b/src/pages/courses/edit/components/StudentTableList/StudentTableList.tsx
@@ -151,35 +151,43 @@ const StudentTableList: React.FC<StudentTableListPropsType> = props => {
         onAdded={users => setRows(prev => [...prev, ...users])}
       />
       <Flex justifyContent='space-between' flexDir={{ base: 'column', lg: 'row' }}>
-        <Flex mb='2'>
-          <InputGroup mr='2' borderRadius='lg'>
-            <InputLeftElement pointerEvents='none'>
-              <MdSearch color='gray.300' />
-            </InputLeftElement>
-            <Input value={search} size='sm' onChange={handleSearch} type='text' placeholder='Search for student...' />
-          </InputGroup>
+        <Flex mb='2' alignItems='center'>
+          <Box>
+            <InputGroup mr='2' borderRadius='lg' h='full'>
+              <InputLeftElement pointerEvents='none'>
+                <MdSearch color='gray.300' />
+              </InputLeftElement>
+              <Input value={search} size='sm' onChange={handleSearch} type='text' placeholder='Search for student...' />
+            </InputGroup>
+          </Box>
+          {isLoading && (
+            <Flex alignItems='center'>
+              <Text fontSize='sm' ml='3' mr='3' mt='2' mb='2'>
+                Loading...
+              </Text>
+              <BeatLoader size={4} color='gray' />
+            </Flex>
+          )}
         </Flex>
-
         <Flex alignItems='center' justifyContent='space-between' pr={{ base: '8px', lg: '0' }}>
           {selected.length !== 0 && (
             <>
               <Text mr='4'>
                 You have selected <b>{selected.length}</b> student(s).
               </Text>
-              <BulkActionsMenu selected={selected} rows={rows} setRows={setRows} />
+              <BulkActionsMenu
+                courseId={course.id}
+                selected={selected}
+                rows={rows}
+                setRows={setRows}
+                setIsLoading={setIsLoading}
+                onRemoved={removed => setSelected(prev => prev.filter(s => removed.every(r => s.id !== r.id)))}
+              />
             </>
           )}
           <AddButton onClick={onOpenAddStudentModal} />
         </Flex>
       </Flex>
-      {isLoading && (
-        <Flex alignItems='center' justifyContent={'flex-end'}>
-          <BeatLoader size={6} color='gray' />
-          <Text fontSize='sm' ml='3' mt='2' mb='2'>
-            Loading...
-          </Text>
-        </Flex>
-      )}
       <Table overflow='hidden' borderRadius='lg' mt='2'>
         <StudentTableHead onSelectAll={handleSelectAll} />
         <Tbody>