refactor: add students modal

src/components/Modals/AddStudentsModal/AddSudentsModal.tsx

@@ -13,16 +13,14 @@ import {
 import { useDisclosure, Divider } from '@chakra-ui/react';
 import { MdGroup } from 'react-icons/md';
 
-type AddStudentsModalPropsType = {};
+type AddStudentsModalPropsType = {
-
+  isOpen: boolean;
-const AddStudentsModal: React.FC<AddStudentsModalPropsType> = () => {
+  onClose: () => void;
-  const { isOpen, onOpen, onClose } = useDisclosure();
+};
 
+const AddStudentsModal: React.FC<AddStudentsModalPropsType> = ({ isOpen, onClose }) => {
   return (
     <>
-      <Button onClick={onOpen} mt='3' size='sm' colorScheme='blue' variant='outline'>
-        Add students
-      </Button>
       <Modal isOpen={isOpen} onClose={onClose} size='md'>
         <ModalOverlay />
         <ModalContent>

src/pages/courses/edit/components/LessonList/LessonList.tsx

@@ -46,7 +46,7 @@ const CreateLessonButton: React.FC<{ id: string }> = ({ id }) => {
   const handleCreateLesson = (): void => history.push(`${id}/create-lesson`);
 
   return (
-    <Button onClick={handleCreateLesson} size='sm' colorScheme='blue' variant='outline'>
+    <Button onClick={handleCreateLesson} mt='2' size='sm' colorScheme='blue' variant='outline'>
       Create new lesson
     </Button>
   );
@@ -206,7 +206,9 @@ const LessonList: React.FC<LessonListPropsType> = ({ course }) => {
           )}
           <Flex mt='2' mb='3' padding='0 20px' alignItems='center' justifyContent='space-between'>
             <Text fontWeight='medium'>Total: ({lessons.length})</Text>
-            <Button onClick={handleCreateLesson}>Create new</Button>
+            <Button onClick={handleCreateLesson} variant='outline' colorScheme='blue'>
+              Add new
+            </Button>
           </Flex>
           <DragDropContext onDragEnd={handleDragEnd}>
             <Droppable
@@ -249,10 +251,8 @@ const LessonList: React.FC<LessonListPropsType> = ({ course }) => {
       ) : (
         <Box mt='10' textAlign='center'>
           <Text>No lessons have been added to this course yet</Text>
-          <Box p='10px 0'>
           <CreateLessonButton id={course.id} />
         </Box>
-        </Box>
       )}
     </Box>
   );

src/pages/courses/edit/components/StudentTableList/StudentTableList.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
-import { Table, Tbody, Button, Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react';
+import { Table, Tbody, Button, Input, InputGroup, InputLeftElement, Flex, Box, Text } from '@chakra-ui/react';
-import { Input, InputGroup, InputLeftElement } from '@chakra-ui/react';
+import { MdSearch } from 'react-icons/md';
-import { Flex, Box, Text } from '@chakra-ui/react';
-import { DeleteIcon, ChevronDownIcon } from '@chakra-ui/icons';
-import { MdSearch, MdImportExport, MdRemove } from 'react-icons/md';
 
 import AddStudentsModal from '@educt/components/Modals/AddStudentsModal';
+import BulkActionsMenu from './BulkActionsMenu';
 import StudentTableHead from './StudentTableHead';
 
 /**
@@ -18,7 +16,7 @@ import type { ICourse } from '@educt/interfaces';
  * Hooks
  */
 import { useCallback, useState } from 'react';
-import BulkActionsMenu from './BulkActionsMenu';
+import { useDisclosure } from '@chakra-ui/react';
 
 type StudentTableListPropsType = {
   render: React.FC<StudentTableRowPropsType>;
@@ -29,6 +27,11 @@ const StudentTableList: React.FC<StudentTableListPropsType> = ({ render: Row, st
   const [rows, setRows] = useState<ICourse['students']>(students);
   const [selected, setSelected] = useState<ICourse['students']>([]);
   const [search, setSearch] = useState<string>('');
+  const {
+    isOpen: isOpenAddStudentModal,
+    onOpen: onOpenAddStudentModal,
+    onClose: onCloseAddStudentModal,
+  } = useDisclosure();
 
   /**
    * Search for a student by input
@@ -68,15 +71,21 @@ const StudentTableList: React.FC<StudentTableListPropsType> = ({ render: Row, st
 
   if (rows.length === 0) {
     return (
+      <>
+        <AddStudentsModal isOpen={isOpenAddStudentModal} onClose={onCloseAddStudentModal} />
         <Box textAlign='center' mt='10'>
           <Text>There are no students in the course yet</Text>
-        <AddStudentsModal />
+          <Button mt='2' onClick={onOpenAddStudentModal} size='sm' colorScheme='blue' variant='outline'>
+            Add student
+          </Button>
         </Box>
+      </>
     );
   }
 
   return (
     <Box>
+      <AddStudentsModal isOpen={isOpenAddStudentModal} onClose={onCloseAddStudentModal} />
       <Flex justifyContent='space-between' flexDir={{ base: 'column', lg: 'row' }}>
         <Flex mb='2'>
           <InputGroup mr='2'>
@@ -94,12 +103,12 @@ const StudentTableList: React.FC<StudentTableListPropsType> = ({ render: Row, st
               <BulkActionsMenu selected={selected} rows={rows} setRows={setRows} />
             </>
           )}
-          <Button variant='outline' colorScheme='blue'>
+          <Button onClick={onOpenAddStudentModal} variant='outline' colorScheme='blue'>
             Add new
           </Button>
         </Flex>
       </Flex>
-      <Table overflowX='hidden' borderRadius='lg' mt='2'>
+      <Table overflow='hidden' borderRadius='lg' mt='2'>
         <StudentTableHead onSelectAll={handleSelectAll} />
         <Tbody>
           {rows.map(student => (