feat: search user cards to include tags (#8376)

* feat: tags for user cards on search page (#8256)

* new tag component, user card modifications

* revert userCard, add userHorizontal

* update test to reflect new search page layout

* remove comments

* clean up tag component

* limit height of tags div, hide overflow

---------

Co-authored-by: Eddie Jaoude <eddie@jaoudestudios.com>

* fix: search card pr

* fix: removed unused story

---------

Co-authored-by: Amanda <97615019+amandamartin-dev@users.noreply.github.com>

components/Tag.js → components/tag/Tag.js

@@ -1,5 +1,5 @@
 import { abbreviateNumber } from "@services/utils/abbreviateNumbers";
-import Badge from "./Badge";
+import Badge from "../Badge";
 
 export default function Tag({ name, total, selected, onClick }) {
   return (

components/tag/TagSimple.js

@@ -0,0 +1,7 @@
+export default function TagSimple({ name }) {
+  return (
+    <div className="text-sm px-1 mx-px mb-2 font-mono border rounded-md line-clamp-1">
+      {name}
+    </div>
+  );
+}

components/user/UserHorizontal.js

@@ -0,0 +1,51 @@
+import ReactMarkdown from "react-markdown";
+
+import Link from "@components/Link";
+import FallbackImage from "@components/FallbackImage";
+import TagSimple from "@components/tag/TagSimple";
+
+export default function UserHorizontal({ profile }) {
+  return (
+    <Link
+      href={`/${profile.username}`}
+      className="flex flex-col items-center border-2 h-[14rem] overflow-hidden rounded-lg shadow-lg transition duration-350 p-4 gap-3 hover:scale-105 duration-500 ease-in-out hover:border-tertiary-medium"
+    >
+      <div className="flex w-full items-center justify-between space-x-2 p-2">
+        <FallbackImage
+          src={`https://github.com/${profile.username}.png`}
+          alt={`Profile picture of ${profile.name}`}
+          width={60}
+          height={60}
+          className="rounded-full"
+          fallback={profile.name}
+        />
+        <div className="flex-1 wrap">
+          <div className="flex items-center space-x-3">
+            <h3 className="text-xl font-medium text-gray-900">
+              {profile.username}
+            </h3>
+          </div>
+          <ReactMarkdown
+            disallowedElements={["a"]}
+            unwrapDisallowed
+            className="text-left line-clamp-3"
+          >
+            {profile.bio}
+          </ReactMarkdown>
+        </div>
+      </div>
+      {profile.tags?.length > 0 && (
+        <div className="flex flex-wrap justify-center max-h-60 overflow-hidden">
+          {profile.tags?.length > 0 &&
+            profile.tags.map((tag, index) => {
+              const trimmedTag = tag.trim();
+              if (!trimmedTag) {
+                return null;
+              }
+              return <TagSimple name={trimmedTag} key={index} />;
+            })}
+        </div>
+      )}
+    </Link>
+  );
+}

components/user/UserProfile.js

@@ -7,7 +7,7 @@ import { useRouter } from "next/router";
 
 import FallbackImage from "@components/FallbackImage";
 import UserSocial from "./UserSocials";
-import Tag from "@components/Tag";
+import Tag from "@components/tag/Tag";
 import Link from "@components/Link";
 import Badge from "@components/Badge";
 import Button from "@components/Button";

pages/map.js

@@ -2,7 +2,7 @@ import { useState } from "react";
 import dynamic from "next/dynamic";
 
 import logger from "@config/logger";
-import Tag from "@components/Tag";
+import Tag from "@components/tag/Tag";
 import Button from "@components/Button";
 import PageHead from "@components/PageHead";
 import Page from "@components/Page";
@@ -39,7 +39,7 @@ export async function getStaticProps() {
 
   // Apply offset equally to 4 quadrants arround point
   const adjustCoords = (coords, offset, offset2, index) => {
-    switch (index % 4 ) {
+    switch (index % 4) {
       case 0:
         return [coords[0] + offset, coords[1] + offset2];
       case 1:
@@ -49,7 +49,7 @@ export async function getStaticProps() {
       default:
         return [coords[0] + offset, coords[1] - offset2];
     }
-  }
+  };
 
   data.users = data.users.map((user, index) => {
     const offset = Math.random() * 0.02; // ~2.2km
@@ -62,21 +62,18 @@ export async function getStaticProps() {
         username: user.username,
         name: user.name,
         location: user.location.provided,
-        bio: user.bio || ''
+        bio: user.bio || "",
       },
       geometry: {
         type: "Point",
-        coordinates:adjustCoords(
-          [
-            parseFloat(user.location.lon),
-            parseFloat(user.location.lat)
-          ],
+        coordinates: adjustCoords(
+          [parseFloat(user.location.lon), parseFloat(user.location.lat)],
           offset,
           offset2,
           index
-        )
-      }
-    }
+        ),
+      },
+    };
   });
 
   try {
@@ -179,7 +176,9 @@ export default function Map({ data }) {
               onClick={resetFilter}
               primary={true}
               disable={selectedTags.size == 0 ? true : false}
-            >Clear/Reset Filters</Button>
+            >
+              Clear/Reset Filters
+            </Button>
           </Badge>
           {tags &&
             tags

pages/search.js

@@ -1,11 +1,11 @@
 import { useEffect, useState, useCallback } from "react";
 import { useRouter } from "next/router";
 
-import UserCard from "@components/user/UserCard";
+import UserHorizontal from "@components/user/UserHorizontal";
 import Alert from "@components/Alert";
 import Page from "@components/Page";
 import PageHead from "@components/PageHead";
-import Tag from "@components/Tag";
+import Tag from "@components/tag/Tag";
 import Badge from "@components/Badge";
 import logger from "@config/logger";
 import Input from "@components/form/Input";
@@ -32,8 +32,8 @@ export async function getStaticProps() {
     logger.error(e, "ERROR loading tags");
   }
 
-  if (users.length > 10) {
-    data.randUsers = users.sort(() => 0.5 - Math.random()).slice(0, 10);
+  if (users.length > 9) {
+    data.randUsers = users.sort(() => 0.5 - Math.random()).slice(0, 9);
   } else {
     data.randUsers = users;
   }
@@ -78,7 +78,7 @@ export default function Search({ data: { tags, randUsers }, BASE_URL }) {
       try {
         const res = await fetch(
           `${BASE_URL}/api/search?${new URLSearchParams({
-            slug: value
+            slug: value,
           }).toString()}`
         );
         const data = await res.json();
@@ -194,18 +194,21 @@ export default function Search({ data: { tags, randUsers }, BASE_URL }) {
         </Badge>
 
         {notFound && <Alert type="error" message={notFound} />}
-        <ul className="flex flex-wrap gap-3 justify-center mt-[3rem]">
+        <ul
+          role="list"
+          className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"
+        >
           {users.length < usersPerPage &&
             users.map((user) => (
               <li key={user.username}>
-                <UserCard profile={user} />
+                <UserHorizontal profile={user} />
               </li>
             ))}
 
           {users.length > usersPerPage &&
             visibleUsers.map((user) => (
               <li key={user.username}>
-                <UserCard profile={user} />
+                <UserHorizontal profile={user} />
               </li>
             ))}
         </ul>

tests/search.spec.js

@@ -2,7 +2,7 @@
 import { test, expect } from "@playwright/test";
 import AxeBuilder from "@axe-core/playwright";
 
-const defaultUsers = 10;
+const defaultUsers = 9;
 
 test("Search has title", async ({ page }) => {
   await page.goto("/search");