fix: transform to formdata helper

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 (value) {
       if (Array.isArray(value)) {
         value.forEach((v, i) => formData.append(`${key}[${i}]`, v));
         return;
       }
 
       formData.append(key, value);
+    }
   });
 
   return formData;

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)
-    );
+    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;

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'>
+        <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>