Merge pull request #89 from saxenaaman628/mine

Completed Mine Task
Real-Dev-Squad · Apr 10, 2021 · a5dc91e · a5dc91e
2 parents 22aa2d7 + 44a2aac
commit a5dc91e
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 7 deletions.
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -34,6 +34,8 @@ const Layout: FC<Props> = ({ children }) => (
     <div className={styles.header}>
       {navBarContent('Tasks', '/')}
       |
+      {navBarContent('Mine', '/mine')}
+      |
       {navBarContent('DS', '/challenges')}
       |
       {navBarContent('Open PRs', '/openPRs')}

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -52,7 +52,7 @@ const Index: FC = () => {
                       <Accordion open title={key} key={key}>
                         {renderCardList(filteredTask[key])}
                       </Accordion>
-                    )) : 'No Tasks Found'
+                    )) : (!error && 'No Tasks Found')
                 }
               </>
             )

diff --git a/src/pages/mine.tsx b/src/pages/mine.tsx
@@ -1,11 +1,54 @@
-import { FC } from 'react';
+import { FC, useState, useEffect } from 'react';
 import Head from '@/components/head';
 import Layout from '@/components/Layout';
+import Card from '@/components/tasks/card';
+import useFetch from '@/hooks/useFetch';
+import classNames from '@/styles/tasks.module.scss';
+import { task } from '@/components/constants/types';
 
-const Mine: FC = () => (
-  <Layout>
-    <Head title="Mine" />
-  </Layout>
-);
+const TASKS_URL = `${process.env.NEXT_PUBLIC_BASE_URL}/task/self`;
 
+function CardList(tasks: task[]) {
+  return tasks.map(
+    (item: task) => <Card content={item} key={item.id} />,
+  );
+}
+
+const Mine: FC = () => {
+  const [tasks, setTasks] = useState<task[]>([]);
+  const {
+    response,
+    error,
+    isLoading,
+  } = useFetch(TASKS_URL);
+
+  useEffect(() => {
+    if ('tasks' in response) { setTasks(response.tasks); }
+  }, [isLoading, response]);
+  return (
+    <Layout>
+      <Head title="Mine" />
+      <div className={classNames.container}>
+        {!!error && <p>Something went wrong, please contact admin!</p>}
+        {
+          isLoading
+            ? (
+              <p>Loading...</p>
+            ) : (
+              <>
+                {
+                  tasks.length > 0
+                    ? (
+                      <div>
+                        {CardList(tasks)}
+                      </div>
+                    ) : (!error && 'No Tasks Found')
+                }
+              </>
+            )
+        }
+      </div>
+    </Layout>
+  );
+};
 export default Mine;