Refactor TaskPage and TaskList components

Author: codad5

src/components/TaskPage.tsx

@@ -40,7 +40,6 @@ export default function TaskPage() {
     console.log('after task object', Taskobject)
     Taskobject.getTaskCategories().then((data) => {
       setTaskCategoryList(data)
-      if (data.length > 0) setActiveTaskCategory(0)
       return data
     }).then(() => {
       Taskobject.getTasksByCategoryPosition(activeTaskCategory >= 0 ? activeTaskCategory : 0).then((data) => {
@@ -63,23 +62,25 @@ export default function TaskPage() {
 
   return (
     <div className="">
-        <Tabs variant='soft-rounded' colorScheme='green' h='80%' index={activeTaskCategory} defaultIndex={activeTaskCategory}>
+        <Tabs variant='soft-rounded' colorScheme='green' h='80%' defaultIndex={activeTaskCategory} >
           <TaskCategoryList />
         {
-          loading || taskCategoryList.length <= 0 ? (
+          loading || taskCategoryList?.length <= 0 ? (
             <Box p={4} h='90%' display='flex' justifyContent='center' alignItems='center'>
-              <Spinner size='xl' /> 
+              <Spinner size='xl' />
             </Box>) : (
-            <Box p={4} h='90%'>
-              <TabPanels>
-                <TaskList />
-              { taskCategoryList.length > 0 && activeTaskCategory >= 0 &&
-              (
-                  <AddTaskForm />
-                )
-              }
-              </TabPanels>
-              </Box>
+              <>
+                <TabPanels p={4} h='90%'>
+                  {
+                    taskCategoryList?.map((val, key) => (
+                      <TaskList key={key} taskCategory={val?.tasks ?? []} />
+                    ))
+                  }
+                </TabPanels>
+                <Box >
+                  { taskCategoryList.length > 0 && activeTaskCategory >= 0 &&  <AddTaskForm />}
+                </Box>
+              </>
             )
         }
         </Tabs>

src/components/ui/TaskCategoryList.tsx

@@ -1,10 +1,10 @@
 import { Tab, TabList } from "@chakra-ui/react";
-import { useRecoilValue, useSetRecoilState } from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
 import { activeTaskCategoryState, taskCategoriesListSelector } from "../../config/states";
 import { taskCategory } from "../../types/taskapi";
 
 export default function TaskCategoryList() {
-    const setActiveTaskCategory = useSetRecoilState<number>(activeTaskCategoryState)
+    const [activeTaskCategory, setActiveTaskCategory] = useRecoilState<number>(activeTaskCategoryState)
     const taskCategoryList = useRecoilValue<taskCategory[]>(taskCategoriesListSelector)
     return (
         <TabList w="100%" overflowX="auto" gap={2} px={2} py={1}  borderRadius="md" scrollBehavior="smooth" >

src/components/ui/TaskList.tsx

@@ -2,43 +2,45 @@ import { useRecoilValue } from "recoil"
 import { activeCategoryTasksSelector, activeCategoryTasksState } from "../../config/states"
 import { task } from "../../types/taskapi"
 import TaskItem from "./TaskItem"
-import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center } from "@chakra-ui/react"
+import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, TabPanel } from "@chakra-ui/react"
 
-export default function TaskList() {
-    const activeCategoryTasks = useRecoilValue<task[]>(activeCategoryTasksState)
+export default function TaskList({taskCategory} : {taskCategory: task[]}) {
+    const activeCategoryTasks = useRecoilValue<task[]>(activeCategoryTasksState) ?? taskCategory
 
     const unCompletedTasks = activeCategoryTasks.filter(task => !task.completed)
     const CompletedTasks = activeCategoryTasks.filter(task => task.completed)
 
 
   return (
-    <Accordion defaultIndex={[0]} allowToggle>
-      <AccordionItem>
-        <AccordionButton _expanded={{ bg: 'teal', color: 'white' }} >
-        <Box as="span" flex='1' textAlign='left'>
-          UnCompleted 
-        </Box>
-        <AccordionIcon />
-        </AccordionButton>
-        <AccordionPanel pb={4}>
-          <Box>
-            {unCompletedTasks.length > 0 ? unCompletedTasks.map((task, key) => <TaskItem key={key} task={task} />) : <Center h="40vh">Congrate you completed all your task</Center>}
+    <TabPanel>
+      <Accordion defaultIndex={[0]} allowToggle>
+        <AccordionItem>
+          <AccordionButton _expanded={{ bg: 'teal', color: 'white' }} >
+          <Box as="span" flex='1' textAlign='left'>
+            UnCompleted
           </Box>
-        </AccordionPanel>
-      </AccordionItem>
-      <AccordionItem>
-        <AccordionButton>
-        <Box as="span" flex='1' textAlign='left'>
-          Completed 
-        </Box>
-        <AccordionIcon />
-        </AccordionButton>
-        <AccordionPanel pb={4}>
-          <Box>
-          {CompletedTasks.map((task, key) => <TaskItem key={key} task={task} />)}
+          <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pb={4}>
+            <Box>
+              {unCompletedTasks.length > 0 ? unCompletedTasks.map((task, key) => <TaskItem key={key} task={task} />) : <Center h="40vh">Congrate you completed all your task</Center>}
+            </Box>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem>
+          <AccordionButton>
+          <Box as="span" flex='1' textAlign='left'>
+            Completed
           </Box>
-        </AccordionPanel>
-      </AccordionItem>
-      </Accordion>
+          <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pb={4}>
+            <Box>
+            {CompletedTasks.map((task, key) => <TaskItem key={key} task={task} />)}
+            </Box>
+          </AccordionPanel>
+        </AccordionItem>
+        </Accordion>
+    </TabPanel>
     )
 }