Use useFetch hook in tasks page

src/hooks/useFetch.ts

@@ -1,22 +1,28 @@
-import React from 'react';
+import { useState, useEffect } from 'react';
+import fetch from '@/helperFunctions/fetch';
 
 const useFetch = (url: string, options: object = {}) => {
-  const [response, setResponse] = React.useState(null);
-  const [error, setError] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(false);
-  React.useEffect(() => {
+  const [response, setResponse] = useState<any>({});
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
     (async () => {
       setIsLoading(true);
       try {
-        const res = await fetch(url, options);
-        const json = await res.json();
-        setResponse(json);
-        setIsLoading(false);
+        const res = await fetch({
+          url,
+          method: 'get',
+          ...options,
+        });
+        setResponse(res.data);
       } catch (err) {
         setError(err);
+      } finally {
+        setIsLoading(false);
       }
     })();
-  }, []);
+  }, [url]);
   return { response, error, isLoading };
 };
 

src/pages/index.tsx

@@ -2,41 +2,41 @@ import { FC, useState, useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import Layout from '@/components/Layout';
 import Card from '@/components/tasks/card';
-import fetch from '@/helperFunctions/fetch';
+import useFetch from '@/hooks/useFetch';
 import classNames from '@/styles/tasks.module.scss';
 import { task } from '@/components/constants/types';
 
 const TASKS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/tasks`;
 
+const renderCardList = (tasks: task[]) => tasks.map(
+  (item: task) => <Card content={item} key={item.id} />,
+);
+
 const Index: FC = () => {
   const [tasks, setTasks] = useState<task[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    (async () => {
-      setLoading(true);
-      const response = await fetch({
-        url: TASKS_URL,
-      });
-      setTasks(response.data.tasks);
-      setLoading(false);
-    })();
-  }, []);
+  const [activeTasks, setActiveTasks] = useState<any>(null);
+  const [completeTasks, setCompleteTasks] = useState<any>(null);
 
-  const completedTasks = tasks.filter(
-    (item: task) => item.status === 'Active',
-  );
-  const incompleteTasks = tasks.filter(
-    (item: task) => item.status !== 'Active',
-  );
+  const {
+    response,
+    error,
+    isLoading,
+  } = useFetch(TASKS_URL);
 
-  const activeCards = completedTasks.map(
-    (item: task) => <Card content={item} key={item.id} />,
-  );
+  useEffect(() => {
+    if ('tasks' in response) {
+      setTasks(response.tasks);
+      const active = tasks.filter(
+        (item: task) => item.status === 'Active',
+      );
+      setActiveTasks(active);
 
-  const incompletedCards = incompleteTasks.map(
-    (item: task) => <Card content={item} key={item.id} />,
-  );
+      const complete = tasks.filter(
+        (item: task) => item.status !== 'Active',
+      );
+      setCompleteTasks(complete);
+    }
+  }, [isLoading, response]);
 
   return (
     <Layout>
@@ -46,19 +46,28 @@ const Index: FC = () => {
 
       <div className="container">
         {
-          (loading)
+          (!!error) && (
+            <p>Something went wrong, please contact admin!</p>
+          )
+        }
+        {
+          (isLoading)
             ? (
               <p>Loading...</p>
             )
             : (
               <>
                 <div className={classNames.section}>
                   <div className={classNames.heading}>Active</div>
-                  <div className={classNames.cardContainer}>{activeCards}</div>
+                  <div className={classNames.cardContainer}>
+                    {renderCardList(activeTasks)}
+                  </div>
                 </div>
                 <div className={classNames.section}>
                   <div className={classNames.heading}>Completed</div>
-                  <div className={classNames.cardContainer}>{incompletedCards}</div>
+                  <div className={classNames.cardContainer}>
+                    {renderCardList(completeTasks)}
+                  </div>
                 </div>
               </>
             )