feat: Implement tab view for tasks (#432)

Real-Dev-Squad · Mar 13, 2023 · 9539220 · 9539220
1 parent 4742a1a
commit 9539220
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 16 deletions.
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -29,6 +29,8 @@ import { isUserAuthorizedContext } from '@/context/isUserAuthorized';
 import { TasksProvider } from '@/context/tasks.context';
 import TaskList from '@/components/tasks/TaskList/TaskList';
 import { TASKS_URL } from '@/components/constants/url';
+import Tabs from '@/components/Tabs';
+import { Tab } from '@/interfaces/task.type';
 
 const { SUCCESS, ERROR } = ToastTypes;
 const STATUS_ORDER = [
@@ -70,33 +72,38 @@ async function updateCardContent(id: string, cardDetails: task) {
   }
 }
 
-
 const Index: FC = () => {
   const { state: appState } = useAppContext();  
-  const [filteredTask, setFilteredTask] = useState<any>([]);
+  const [filteredTask, setFilteredTask] = useState<{[key:string]: task[]}>({});
   const { response, error, isLoading } = useFetch(TASKS_URL);
   const { isEditMode } = appState;
   const isUserAuthorized = useContext(isUserAuthorizedContext);
   const isEditable = isUserAuthorized && isEditMode;
+  const [activeTab, setActiveTab] = useState(Tab.ASSIGNED)
+
+  const onSelect = (tab: Tab) => {
+    setActiveTab(tab);
+  }
+
   useEffect(() => {
     if ('tasks' in response) {
       const tasks = updateTasksStatus(response.tasks);
       tasks.sort((a: task, b: task) => +a.endsOn - +b.endsOn);
       tasks.sort((a: task, b: task) => STATUS_ORDER.indexOf(a.status)
         - STATUS_ORDER.indexOf(b.status));
-      const taskMap: any = [];
-      tasks.forEach((item) => {
-        if (item.status in taskMap) {
-          taskMap[item.status] = [...taskMap[item.status], item];
+      const taskMap = tasks.reduce<{[key:string]: task[]}>((taskGroups,task) => {
+        if (task.status in taskGroups) {
+          taskGroups[task.status] = [...taskGroups[task.status], task];
         } else {
-          taskMap[item.status] = [item];
+          taskGroups[task.status] = [task];
         }
-      });
+        return taskGroups;
+      },{});
       setFilteredTask(taskMap);
     }
 
     return(() => {
-      setFilteredTask([]);
+      setFilteredTask({});
     });
   }, [isLoading, response]);
 
@@ -111,11 +118,14 @@ const Index: FC = () => {
             ) : (
               <>
                 {Object.keys(filteredTask).length > 0
-                  ? Object.keys(filteredTask).map((key) => (
-                    <Accordion open={(statusActiveList.includes(key))} title={key} key={key}>
-                      <TaskList tasks={filteredTask[key]} isEditable={isEditable} updateCardContent={updateCardContent} hasLimit={key == IN_PROGRESS}/>
-                    </Accordion>
-                  ))
+                  ? <div className={classNames.tasksContainer}>
+                      <div className={classNames.tabsContainer}>
+                        <Tabs tabs={Object.values(Tab) as Tab[]} onSelect={onSelect} activeTab={activeTab}/>
+                      </div>
+                      <div>
+                        {filteredTask[activeTab] ? <TaskList tasks={filteredTask[activeTab]} isEditable={isEditable} updateCardContent={updateCardContent}/>:'No Tasks Found'}
+                      </div>
+                    </div>
                   : !error && 'No Tasks Found'}
               </>
             )}

diff --git a/src/styles/tasks.module.scss b/src/styles/tasks.module.scss
@@ -3,10 +3,9 @@
   flex-direction: column;
   align-items: center;
   flex-wrap: nowrap;
-  text-align: center;
+  width: 100%;
 }
 
-
 .title {
   padding: 2rem;
   width: auto;
@@ -24,3 +23,19 @@
     font-size: 2.5rem;
   }
 }
+
+.tasksContainer {
+  width: 100%;
+  margin-top: 1rem;
+  max-width: 700px;
+}
+
+.tabsContainer {
+  display:flex;
+  width:100%;  
+  margin-bottom:1rem;
+  & > * {
+    min-width: max-content;
+    flex: 1;
+  }
+}