feat: discover page for recently updated profiles (#8615)

* feat: discover page for recently updated profiles

* fix: discover profile page title

* test: discover page test

components/navbar/Navbar.js

@@ -92,6 +92,10 @@ export default function Navbar() {
       name: "Repos",
       url: "/repos",
     },
+    {
+      name: "Discover",
+      url: "/discover",
+    },
   ];
 
   const authControls = () => (

pages/admin/profiles.js

@@ -49,7 +49,7 @@ export async function getServerSideProps(context) {
   };
 }
 
-export default function USERS({ profiles }) {
+export default function Users({ profiles }) {
   return (
     <>
       <PageHead

pages/api/discover/profiles.js

@@ -0,0 +1,33 @@
+import connectMongo from "@config/mongo";
+import logger from "@config/logger";
+import { Profile } from "@models/index";
+
+export default async function handler(req, res) {
+  if (req.method != "GET") {
+    return res
+      .status(400)
+      .json({ error: "Invalid request: GET request required" });
+  }
+
+  const profiles = await getProfiles();
+
+  res.status(200).json(profiles);
+}
+export async function getProfiles() {
+  await connectMongo();
+
+  let profiles = [];
+  try {
+    profiles = await Profile.find(
+      { name: { $exists: true }, isEnabled: true },
+      ["_id", "bio", "name", "username", "avatar", "tags", "updatedAt"]
+    )
+      .sort({ updatedAt: -1 })
+      .limit(9);
+  } catch (e) {
+    logger.error(e, "failed loading profiles");
+    return profiles;
+  }
+
+  return JSON.parse(JSON.stringify(profiles));
+}

pages/discover.js

@@ -0,0 +1,48 @@
+import { clientEnv } from "@config/schemas/clientSchema";
+
+import logger from "@config/logger";
+import Page from "@components/Page";
+import PageHead from "@components/PageHead";
+import { getProfiles } from "./api/discover/profiles";
+
+import UserHorizontal from "@components/user/UserHorizontal";
+
+export async function getServerSideProps() {
+  let profiles = [];
+  try {
+    profiles = await getProfiles();
+  } catch (e) {
+    logger.error(e, "get users failed");
+  }
+  return {
+    props: {
+      profiles,
+      BASE_URL: clientEnv.NEXT_PUBLIC_BASE_URL,
+    },
+  };
+}
+
+export default function Discover({ profiles }) {
+  return (
+    <>
+      <PageHead
+        title="Discover recently updated Profiles on LinkFree"
+        description="Discover recently updated Profiles on LinkFree"
+      />
+      <Page>
+        <h1 className="text-4xl mb-4 font-bold">Recently updated Profiles</h1>
+
+        <ul
+          role="list"
+          className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"
+        >
+          {profiles.map((profile) => (
+            <li key={profile.username}>
+              <UserHorizontal profile={profile} />
+            </li>
+          ))}
+        </ul>
+      </Page>
+    </>
+  );
+}

tests/discover.spec.js

@@ -0,0 +1,46 @@
+// @ts-check
+import { test, expect } from "@playwright/test";
+import AxeBuilder from "@axe-core/playwright";
+
+test("Discover has title", async ({ page }) => {
+  await page.goto("/discover");
+  await expect(page).toHaveTitle(/Discover/);
+});
+
+test("Navigate to the Discover page", async ({ page }) => {
+  await page.goto("/");
+  await page
+    .getByRole("navigation")
+    .getByRole("link", { name: "Discover" })
+    .click();
+  await expect(page.locator("h1")).toHaveText("Recently updated Profiles");
+});
+
+test("Discover shows Profiles", async ({ page }) => {
+  await page.goto("/search");
+  await expect(page.locator("main li")).toHaveCount(9);
+});
+
+test.describe("accessibility tests (light)", () => {
+  test.use({ colorScheme: "light" });
+
+  test("should pass axe wcag accessibility tests (light)", async ({ page }) => {
+    await page.goto("/discover");
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});
+
+test.describe("accessibility tests (dark)", () => {
+  test.use({ colorScheme: "dark" });
+
+  test("should pass axe wcag accessibility tests (dark)", async ({ page }) => {
+    await page.goto("/discover");
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
+      .analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+});