feat: Implemented the filter logic on the nav links (#57)

Author: hokagedemehin

src/components/GridDisplay.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import PostGrid from "./PostGrid";
+
+const GridDisplay = ({ fetchedData, activeLink }) => {
+  return (
+    <div>
+      <div className=" container grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 ">
+        {activeLink == "popular"
+          ? fetchedData.map((item, i) => <PostGrid data={item} key={i} />)
+          : activeLink == "upvoted"
+          ? fetchedData.map((item, i) => <PostGrid data={item} key={i} />)
+          : activeLink == "discussed"
+          ? fetchedData.sort((a, b) => b.issues - a.issues).map((item, i) => <PostGrid data={item} key={i} />)
+          : fetchedData
+              .sort((a, b) => a.avg_recency_score - b.avg_recency_score)
+              .map((item, i) => <PostGrid data={item} key={i} />)}
+      </div>
+    </div>
+  );
+};
+
+export default GridDisplay;

src/components/LayoutToggle.jsx

@@ -4,7 +4,7 @@ function LayoutToggle({ gridState, setGridState }) {
   const position = !!gridState ? "left-0" : "right-0";
 
   return (
-    <div className=" bg-darkestGrey md:pt-8 pb-5 md:pb-14">
+    <div className=" bg-darkestGrey pt-4 md:pt-4 pb-5">
       <div className="container flex justify-center ">
         <div className="bg-saucyRed w-20 h-8 rounded-xl flex items-center cursor-pointer relative  text-grey text-md ">
           <div className={"absolute bottom-0.1 w-10 h-10 rounded-xl bg-gray-100   " + position}></div>

src/components/ListDisplay.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import PostList from "./PostList";
+
+const ListDisplay = ({ fetchedData, activeLink }) => {
+  return (
+    <div>
+      <div className=" container space-y-3 ">
+        {activeLink == "popular"
+          ? fetchedData.map((item, i) => <PostList data={item} key={i} />)
+          : activeLink == "upvoted"
+          ? fetchedData.map((item, i) => <PostList data={item} key={i} />)
+          : activeLink == "discussed"
+          ? fetchedData.sort((a, b) => b.issues - a.issues).map((item, i) => <PostList data={item} key={i} />)
+          : fetchedData
+              .sort((a, b) => a.avg_recency_score - b.avg_recency_score)
+              .map((item, i) => <PostList data={item} key={i} />)}
+      </div>
+    </div>
+  );
+};
+
+export default ListDisplay;

src/components/PostList.jsx

@@ -1,12 +1,8 @@
 import React from "react";
-import cover1 from "./placeholders/cover1.jpg";
-import cover2 from "./placeholders/cover2.jpg";
 import humanizeNumber from "../lib/humanizeNumber";
 import getAvatar from "../lib/getAvatar";
 
 function PostList({ data }) {
-  const [repoOwner, repoName] = data.repo_name.split("/");
-
   const repoLink = `https://github.com/${data.repo_name}`;
   const handleClick = (option) => {
     option === "issues" ? window.open(`${repoLink}/issues`) : window.open(repoLink);

src/components/PostsWrap.jsx

@@ -4,26 +4,25 @@ import PostGrid from "./PostGrid.jsx";
 import PostList from "./PostList.jsx";
 import postData from "../data/hot.json";
 import Modal from "../components/Modal";
+import SecondaryNav from "./SecondaryNav";
+import GridDisplay from "./GridDisplay";
+import ListDisplay from "./ListDisplay";
 
 const PostsWrap = () => {
   const [isGrid, setIsGrid] = useState(true);
+  const [activeLink, setActiveLink] = useState("popular");
+  const fetchedData = [...postData];
+
   return (
     <>
       <Modal />
+      <SecondaryNav activeLink={activeLink} setActiveLink={setActiveLink} />
       <LayoutToggle gridState={isGrid} setGridState={setIsGrid} />
       <div className="bg-darkestGrey py-6 w-full min-h-screen">
         {isGrid ? (
-          <div className=" container grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 ">
-            {postData.map((item, i) => (
-              <PostGrid data={item} key={i} />
-            ))}
-          </div>
+          <GridDisplay fetchedData={fetchedData} activeLink={activeLink} />
         ) : (
-          <div className=" container space-y-3 ">
-            {postData.map((item, i) => (
-              <PostList data={item} key={i} />
-            ))}
-          </div>
+          <ListDisplay fetchedData={fetchedData} activeLink={activeLink} />
         )}
       </div>
     </>

src/components/SecondaryNav.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+
+const SecondaryNav = ({ activeLink, setActiveLink }) => {
+  const handleChange = (e) => {
+    e.preventDefault();
+    const linkName = e.target.getAttribute("data-name");
+    setActiveLink(linkName);
+  };
+  return (
+    <div>
+      <div className="bg-darkestGrey py-14 md:py-16">
+        <nav className="container">
+          <ul className="flex flex-col space-y-2 sm:flex-row text-xl font-righteous text-accent font-bold justify-center items-center cursor-pointer">
+            <li
+              data-name="popular"
+              onClick={(e) => handleChange(e)}
+              className={`${
+                activeLink === "popular" ? "bg-cheesyYellow rounded-xl text-grey " : " "
+              } hover:text-saucyRed transition-all duration-300 mr-3 p-2 sm:mr-11`}
+            >
+              Popular
+            </li>
+            <li
+              data-name="upvoted"
+              onClick={(e) => handleChange(e)}
+              className={`${
+                activeLink === "upvoted" ? "bg-cheesyYellow rounded-xl text-grey " : " "
+              } hover:text-saucyRed transition-all duration-300 mr-3 p-2 sm:mr-11`}
+            >
+              Upvoted
+            </li>
+            <li
+              data-name="discussed"
+              onClick={(e) => handleChange(e)}
+              className={`${
+                activeLink === "discussed" ? "bg-cheesyYellow rounded-xl text-grey " : " "
+              } hover:text-saucyRed transition-all duration-300 mr-3 p-2 sm:mr-11`}
+            >
+              Discussed
+            </li>
+            <li
+              data-name="recent"
+              onClick={(e) => handleChange(e)}
+              className={`${
+                activeLink === "recent" ? "bg-cheesyYellow rounded-xl text-grey " : " "
+              } hover:text-saucyRed transition-all duration-300 mr-3 p-2 sm:mr-11`}
+            >
+              Recent
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  );
+};
+
+export default SecondaryNav;

src/pages/index.astro

@@ -2,7 +2,6 @@
 // Component Imports
 
 import PrimaryNav from '../components/PrimaryNav.astro';
-import SecondaryNav from '../components/SecondaryNav.astro';
 import PostsWrap from '../components/PostsWrap.jsx';
 
 
@@ -49,7 +48,6 @@ let social_card = 'https://repository-images.githubusercontent.com/71359796/179e
 <!-- page -->
   <main>
     <PrimaryNav />
-    <SecondaryNav />
     <PostsWrap client:load />
   </main>
 </body>