Merge pull request #150 from lil-lab/feat/shuffle-users

fix: shuffle users in search page and all-users page

apps/recnet/src/app/all-users/page.tsx

@@ -2,10 +2,10 @@ import { User } from "@/types/user";
 import { db } from "@/firebase/admin";
 import { UserSchema } from "@/types/user";
 import { notEmpty } from "@/utils/notEmpty";
-import { UserCard } from "@/components/UserCard";
+import { UserList } from "@/components/UserCard";
 import { DocumentData } from "firebase-admin/firestore";
 import { cn } from "@/utils/cn";
-import { Grid, Text } from "@radix-ui/themes";
+import { Text } from "@radix-ui/themes";
 import { GoBackButton } from "@/components/GoBackButton";
 import { NotFoundBlock } from "@/app/search/NotFound";
 
@@ -46,6 +46,7 @@ async function getSearchResults(): Promise<User[]> {
 
 export default async function SearchResultPage() {
   const results = await getSearchResults();
+
   return (
     <div
       className={cn(
@@ -60,22 +61,7 @@ export default async function SearchResultPage() {
     >
       <GoBackButton />
       <Text size="7" className="text-gray-12 font-medium">{`All users`}</Text>
-      {results.length === 0 ? (
-        <NotFoundBlock />
-      ) : (
-        <Grid
-          columns={{
-            initial: "1",
-            sm: "2",
-            md: "3",
-          }}
-          gap="4"
-        >
-          {results.map((user, idx) => (
-            <UserCard key={`${user.username}-${idx}`} user={user} />
-          ))}
-        </Grid>
-      )}
+      {results.length === 0 ? <NotFoundBlock /> : <UserList users={results} />}
     </div>
   );
 }

apps/recnet/src/app/search/page.tsx

@@ -3,10 +3,10 @@ import { db } from "@/firebase/admin";
 import { Filter } from "firebase-admin/firestore";
 import { UserSchema } from "@/types/user";
 import { notEmpty } from "@/utils/notEmpty";
-import { UserCard } from "@/components/UserCard";
+import { UserList } from "@/components/UserCard";
 import { DocumentData } from "firebase-admin/firestore";
 import { cn } from "@/utils/cn";
-import { Grid, Text } from "@radix-ui/themes";
+import { Text } from "@radix-ui/themes";
 import { NotFoundBlock } from "./NotFound";
 import { GoBackButton } from "@/components/GoBackButton";
 
@@ -95,6 +95,7 @@ export default async function SearchResultPage({
 }) {
   const query = searchParams["q"];
   const results = await getSearchResults(query);
+
   return (
     <div
       className={cn(
@@ -113,22 +114,7 @@ export default async function SearchResultPage({
         size="7"
         className="text-gray-12 font-medium"
       >{`${results.length} result${results.length > 1 ? "s" : ""}`}</Text>
-      {results.length === 0 ? (
-        <NotFoundBlock />
-      ) : (
-        <Grid
-          columns={{
-            initial: "1",
-            sm: "2",
-            md: "3",
-          }}
-          gap="4"
-        >
-          {results.map((user, idx) => (
-            <UserCard key={`${user.username}-${idx}`} user={user} />
-          ))}
-        </Grid>
-      )}
+      {results.length === 0 ? <NotFoundBlock /> : <UserList users={results} />}
     </div>
   );
 }

apps/recnet/src/components/UserCard.tsx

@@ -1,10 +1,33 @@
+"use client";
+
 import { User } from "@/types/user";
 import { cn } from "@/utils/cn";
-import { Flex, Text } from "@radix-ui/themes";
+import { Flex, Text, Grid } from "@radix-ui/themes";
 import { RecNetLink } from "./Link";
 import { HomeIcon, PersonIcon } from "@radix-ui/react-icons";
 import { Avatar } from "@/components/Avatar";
 import { FollowButton } from "./FollowButton";
+import { shuffleArray } from "@/utils/shuffle";
+import { useAuth } from "@/app/AuthContext";
+
+export function UserList({ users }: { users: User[] }) {
+  const { user } = useAuth();
+  const shuffledUsers = user?.seed ? shuffleArray(users, user.seed) : users;
+  return (
+    <Grid
+      columns={{
+        initial: "1",
+        sm: "2",
+        md: "3",
+      }}
+      gap="4"
+    >
+      {shuffledUsers.map((user, idx) => (
+        <UserCard key={`${user.username}-${idx}`} user={user} />
+      ))}
+    </Grid>
+  );
+}
 
 export function UserCard({ user }: { user: User }) {
   return (

apps/recnet/src/server/rec.ts

@@ -6,8 +6,8 @@ import { getNextCutOff } from "@/utils/date";
 import { notEmpty } from "@/utils/notEmpty";
 import { FieldValue } from "firebase-admin/firestore";
 import { User } from "@/types/user";
-import { Chance } from "chance";
 import { getUsersByIds } from "@/server/user";
+import { shuffleArray } from "@/utils/shuffle";
 
 export async function getRecsByUserId(
   userId: string,
@@ -43,12 +43,6 @@ export async function getRecsByUserId(
   return recs;
 }
 
-function shuffleArray<T>(_array: Array<T>, seed: string): Array<T> {
-  const chance = new Chance(seed);
-  const array = structuredClone(_array);
-  return chance.shuffle(array);
-}
-
 export async function getFeedsRecs(
   userId: string,
   cutoffTs: number

apps/recnet/src/utils/shuffle.ts

@@ -0,0 +1,7 @@
+import { Chance } from "chance";
+
+export function shuffleArray<T>(_array: Array<T>, seed: string): Array<T> {
+  const chance = new Chance(seed);
+  const array = structuredClone(_array);
+  return chance.shuffle(array);
+}

package.json

@@ -56,7 +56,6 @@
     "@typescript-eslint/parser": "^6.13.2",
     "autoprefixer": "10.4.13",
     "babel-jest": "^29.4.1",
-    "cypress": "^13.0.0",
     "eslint": "~8.48.0",
     "eslint-config-next": "14.1.0",
     "eslint-config-prettier": "^9.1.0",