Real-Dev-Squad · whyDontI · Apr 11, 2021 · Mar 17, 2021 · Mar 19, 2021 · Mar 22, 2021
diff --git a/src/components/Accordion/Accordion.module.scss b/src/components/Accordion/Accordion.module.scss
@@ -1,7 +1,7 @@
 .container {
   border-radius: 10px;
   margin-bottom: 1rem;
-  min-width: 800px;
+  width: 750px;
 
   @media (max-width: 767px) {
     min-width: 300px;
@@ -21,6 +21,7 @@
   cursor: pointer;
   border: none;
   text-transform: capitalize;
+  margin: 0 10px;
 
   &:focus {
     outline: none;
@@ -32,7 +33,7 @@
 }
 
 .content {
-  padding: 2rem;
+  padding: 1rem;
   display: flex;
   justify-content: center;
   display: none;

diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx
@@ -3,10 +3,11 @@ import styles from '@/components/Accordion/Accordion.module.scss';
 
 type Props = {
   title: string,
+  open: boolean
 };
 
-const Accordion: FC<Props> = ({ title, children }) => {
-  const [isOpen, setIsOpen] = useState(false);
+const Accordion: FC<Props> = ({ title, open = true, children }) => {
+  const [isOpen, setIsOpen] = useState(open);
 
   function toggle() {
     setIsOpen(!isOpen);

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/components/PullRequestList/PullRequestList.module.scss b/src/components/PullRequestList/PullRequestList.module.scss
@@ -0,0 +1,19 @@
+.center_text {
+  font-size: 1.5em;
+  text-align: center;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+}
+
+.pagination_btn {
+  margin: 1rem;
+  padding: 1rem;
+  font-size: 1.5em;
+  cursor: pointer;
+  border: none;
+  background-color: #bfbfbf;
+  border-radius: 5px;
+}
diff --git a/src/components/PullRequestList/index.tsx b/src/components/PullRequestList/index.tsx
@@ -0,0 +1,110 @@
+import { FC, useState, useEffect } from 'react';
+import Head from '@/components/head';
+import Layout from '@/components/Layout';
+import PullRequest from '@/components/pullRequests';
+import CardShimmer from '@/components/Loaders/cardShimmer';
+import axios from 'axios';
+import styles from './PullRequestList.module.scss';
+
+type pullRequestType = {
+  title: string;
+  username: string;
+  createdAt: string;
+  updatedAt: string;
+  url: string;
+};
+
+type PullRequestListProps = {
+    prType: string;
+};
+
+const PullRequestList: FC<PullRequestListProps> = ({ prType }) => {
+  const [pullRequests, setPullRequests] = useState<pullRequestType[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [page, setPage] = useState(1);
+
+  const prUrl = `${process.env.NEXT_PUBLIC_BASE_URL}/pullrequests/${prType}?page=${page}`;
+
+  const fetchPRs = async () => {
+    try {
+      setLoading(true);
+      const response = await axios.get(prUrl);
+      setPullRequests(response.data.pullRequests);
+
+      if (!response.data.pullRequests.length) {
+        setError(`No more ${prType} PRs...`);
+      } else {
+        setError('');
+      }
+    } catch (err) {
+      setPullRequests([]);
+      setError('Error fetching pull requests!');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePrev = () => {
+    setPage(page > 1 ? page - 1 : 1);
+  };
+
+  const handleNext = () => {
+    setPage(pullRequests.length ? page + 1 : page);
+  };
+
+  useEffect(() => {
+    fetchPRs();
+  }, [page]);
+
+  const getPRs = () => pullRequests.map((pullRequest: pullRequestType) => {
+    const {
+      title, username, createdAt, updatedAt, url: link,
+    } = pullRequest;
+    return (
+      <PullRequest
+        key={link}
+        title={title}
+        username={username}
+        createdAt={createdAt}
+        updatedAt={updatedAt}
+        url={link}
+      />
+    );
+  });
+
+  return (
+    <Layout>
+      <Head title="PRs" />
+
+      <div className="container">
+        {loading
+          ? [...Array(10)].map((e: number) => <CardShimmer key={e} />)
+          : getPRs()}
+      </div>
+      {error ? <p className={styles.center_text}>{error}</p> : ''}
+
+      <div className={styles.pagination}>
+        <button
+          className={styles.pagination_btn}
+          type="button"
+          onClick={handlePrev}
+          disabled={page <= 1}
+        >
+          Prev
+        </button>
+
+        <button
+          className={styles.pagination_btn}
+          type="button"
+          onClick={handleNext}
+          disabled={pullRequests.length === 0}
+        >
+          Next
+        </button>
+      </div>
+    </Layout>
+  );
+};
+
+export default PullRequestList;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -49,10 +49,10 @@ const Index: FC = () => {
                 {
                   Object.keys(filteredTask).length > 0
                     ? Object.keys(filteredTask).map((key) => (
-                      <Accordion title={key} key={key}>
+                      <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,57 @@
-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;
diff --git a/src/pages/openPRs.tsx b/src/pages/openPRs.tsx
@@ -1,77 +1,6 @@
-import { FC, useState, useEffect } from 'react';
-import Head from '@/components/head';
-import Layout from '@/components/Layout';
-import PullRequest from '@/components/pullRequests';
-import fetch from '@/helperFunctions/fetch';
-import CardShimmer from '@/components/Loaders/cardShimmer';
+import { FC } from 'react';
+import PullRequestList from '@/components/PullRequestList';
 
-type pullRequestType = {
-  title: string;
-  username: string;
-  createdAt: string;
-  updatedAt: string;
-  url: string;
-};
-
-const openPRs: FC = () => {
-  const [pullRequests, setPullRequests] = useState<pullRequestType[]>([]);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    (async () => {
-      setLoading(true);
-      const response = await fetch({
-        url: `${process.env.NEXT_PUBLIC_BASE_URL}/pullrequests/open`,
-      });
-      setPullRequests(response.data.pullRequests);
-      setLoading(false);
-    })();
-  }, []);
-
-  const getPRs = () => pullRequests.map((pullRequest: pullRequestType) => {
-    const {
-      title, username, createdAt, updatedAt, url: link,
-    } = pullRequest;
-    return (
-      <>
-        <PullRequest
-          key={link}
-          title={title}
-          username={username}
-          createdAt={createdAt}
-          updatedAt={updatedAt}
-          url={link}
-        />
-      </>
-    );
-  });
-
-  return (
-    <Layout>
-      <Head title="Open PRs" />
-
-      <div className="container">
-        {
-          loading ? (
-            <>
-              <CardShimmer />
-              <CardShimmer />
-              <CardShimmer />
-              <CardShimmer />
-              <CardShimmer />
-              <CardShimmer />
-              <CardShimmer />
-              <CardShimmer />
-              <CardShimmer />
-              <CardShimmer />
-            </>
-          ) : (
-            getPRs())
-}
-
-      </div>
-    </Layout>
-  );
-};
+const openPRs: FC = () => <PullRequestList prType="open" />;
 
 export default openPRs;
diff --git a/src/pages/stale-pr.tsx b/src/pages/stale-pr.tsx
@@ -1,31 +1,6 @@
-import { FC, useState, useEffect } from 'react';
-import Head from '@/components/head';
-import Section from '@/components/pullRequests/section';
-import Layout from '@/components/Layout';
-import fetch from '@/helperFunctions/fetch';
+import { FC } from 'react';
+import PullRequestList from '@/components/PullRequestList';
 
-const stalePR: FC = () => {
-  const [pullRequests, setPullRequests] = useState<[]>([]);
-
-  useEffect(() => {
-    (async () => {
-      const res = await fetch({
-        url: `${process.env.NEXT_PUBLIC_BASE_URL}/pullrequests/stale`,
-      });
-      setPullRequests(res.data.pullRequests);
-    })();
-  }, []);
-
-  return (
-    <div>
-      <Layout>
-        <Head title="Stale PRs" />
-        <div className="container">
-          <Section heading="Stale PRs" content={pullRequests} />
-        </div>
-      </Layout>
-    </div>
-  );
-};
+const stalePR: FC = () => <PullRequestList prType="stale" />;
 
 export default stalePR;
diff --git a/src/styles/tasks.module.scss b/src/styles/tasks.module.scss
@@ -1,6 +1,7 @@
 .container {
   display: flex;
   flex-direction: column;
+  align-items: center;
   flex-wrap: nowrap;
   text-align: center;
 }