feat: discover random profiles #2558 (#2803)

* feat: discover random profiles #2558 * fix: discover tests
EddieHubCommunity · Jan 7, 2023 · ab1d8ad · ab1d8ad
1 parent b264849
commit ab1d8ad
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 104 deletions.
diff --git a/components/navbar/Navbar.js b/components/navbar/Navbar.js
@@ -17,8 +17,8 @@ export default function Navbar() {
       url: "/",
     },
     {
-      name: "Popular",
-      url: "/popular",
+      name: "Discover",
+      url: "/discover",
     },
     {
       name: "Search",
@@ -74,7 +74,7 @@ export default function Navbar() {
                         style: { verticalAlign: "middle" },
                       }}
                     >
-                      <FaGithub aria-label="GitHub"/>
+                      <FaGithub aria-label="GitHub" />
                     </IconContext.Provider>
                   </a>
                 </div>

diff --git a/pages/api/users/discover.js b/pages/api/users/discover.js
@@ -0,0 +1,68 @@
+import fs from "fs";
+import path from "path";
+
+import connectMongo from "../../../config/mongo";
+import Profile from "../../../models/Profile";
+
+export default async function handler(req, res) {
+  await connectMongo();
+
+  // get popular profiles
+  const popularProfiles = await Profile.find({}).sort({ views: -1 }).limit(50);
+
+  if (popularProfiles.length === 0) {
+    return res.status(404).json([]);
+  }
+
+  const directoryPath = path.join(process.cwd(), "data");
+
+  const fullPopularProfiles = popularProfiles.flatMap((profile) => {
+    const filePath = path.join(directoryPath, `${profile.username}.json`);
+    try {
+      const user = JSON.parse(fs.readFileSync(filePath, "utf8"));
+
+      if (user.displayStatsPublic) {
+        return {
+          ...user,
+          ...profile._doc,
+        };
+      }
+
+      return [];
+    } catch (e) {
+      console.log(`ERROR loading profile "${filePath}"`);
+      return [];
+    }
+  });
+
+  const selectedPopularProfiles = fullPopularProfiles.slice(0, 10);
+
+  // get random profiles
+  const randomProfiles = await Profile.aggregate([{ $sample: { size: 5 } }]);
+
+  const fullRandomProfiles = randomProfiles.flatMap((profile) => {
+    const filePath = path.join(directoryPath, `${profile.username}.json`);
+    try {
+      const user = JSON.parse(fs.readFileSync(filePath, "utf8"));
+
+      if (user.displayStatsPublic) {
+        return {
+          ...user,
+          ...profile._doc,
+        };
+      }
+
+      return user;
+    } catch (e) {
+      console.log(`ERROR loading profile "${filePath}"`);
+      return [];
+    }
+  });
+
+  const profileSets = {
+    popular: selectedPopularProfiles,
+    random: fullRandomProfiles,
+  };
+
+  res.status(200).json(profileSets);
+}
diff --git a/pages/api/users/popular.js b/pages/api/users/popular.js
diff --git a/pages/discover.js b/pages/discover.js
@@ -0,0 +1,59 @@
+import Head from "next/head";
+import UserCard from "../components/user/UserCard";
+import Page from "../components/Page";
+
+export async function getServerSideProps(context) {
+  let data = [];
+  try {
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_BASE_URL}/api/users/discover`
+    );
+    data = await res.json();
+  } catch (e) {
+    console.log("ERROR loading popular profiles", e);
+  }
+
+  return {
+    props: { data },
+  };
+}
+
+export default function Popular({ data }) {
+  return (
+    <>
+      <Head>
+        <title>Discover LinkFree Profiles</title>
+        <meta
+          name="description"
+          content="Discover more people in your LinkFree community"
+        />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Page>
+        <h1 className="text-4xl mb-4 font-bold">Discover LinkFree Profiles</h1>
+
+        <div className="mb-12">
+          <h2 className="text-xl font-bold mb-4">Random LinkFree Profiles</h2>
+          <ul className="flex flex-wrap gap-3 justify-center">
+            {data.random.map((profile) => (
+              <li key={profile.username}>
+                <UserCard profile={profile} />
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="mb-12">
+          <h2 className="text-xl font-bold mb-4">Popular LinkFree Profiles</h2>
+          <ul className="flex flex-wrap gap-3 justify-center">
+            {data.popular.map((profile) => (
+              <li key={profile.username}>
+                <UserCard profile={profile} />
+              </li>
+            ))}
+          </ul>
+        </div>
+      </Page>
+    </>
+  );
+}
diff --git a/pages/popular.js b/pages/popular.js
diff --git a/tests/discover.spec.js b/tests/discover.spec.js
@@ -0,0 +1,20 @@
+// @ts-check
+import { test, expect } from "@playwright/test";
+
+test("Click on discover profile in navbar navigates to discover page", async ({
+  page,
+}) => {
+  await page.goto("/");
+  await page.getByRole("link", { name: "Discover" }).click();
+  await expect(page).toHaveURL("/discover");
+});
+
+test.fixme("Random profiles listed", async ({ page }) => {
+  // 1. navigate to discover profile page
+  // 2. check random profiles are displayed
+});
+
+test.fixme("Discover profiles listed", async ({ page }) => {
+  // 1. navigate to discover profile page
+  // 2. check the most popular profile are listed
+});
diff --git a/tests/popular.spec.js b/tests/popular.spec.js