Mapped out search results upon click

client/src/components/Search.tsx

@@ -1,23 +1,30 @@
 import { Box, HStack, FormControl, FormLabel, Button, Select } from "@chakra-ui/react";
 import { useState } from "react";
 import UserCard from "./UserCard";
+import { UserProfile } from "../types";
+import { searchResultSchema } from "../schemas";
 
 export default function Search() {
+  const [results, setResults] = useState<UserProfile[]>([]);
   const [budget, setBudget] = useState("");
   const [cleanliness, setCleanliness] = useState("");
   const [loudness, setLoudness] = useState("");
   const [coed, setCoed] = useState("");
   const [searchLoading, setSearchLoading] = useState(false);
+
   const handleSearch = async () => {
     const query = `?budget=${budget}&cleanliness=${cleanliness}&loudness=${loudness}&coEd=${coed}`;
     try {
       const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/search${query}`);
       const data = await response.json();
+      const dataResults = searchResultSchema.parse(data);
+      setResults(dataResults);
       console.log(data);
     } catch (error) {
       console.error("Error fetching search results:", error);
     }
   };
+
   return (
     <Box bg="#156087" minH="100vh">
       <HStack textColor="white" gap="60px" mx="70px" p="30px" alignItems="flex-end">
@@ -69,7 +76,7 @@ export default function Search() {
             colorScheme="orange"
             width="100%"
             borderRadius="6px"
-            onClick={() => {
+            onClick={async () => {
               setSearchLoading(true);
               handleSearch().then(() => setSearchLoading(false));
             }}
@@ -79,7 +86,7 @@ export default function Search() {
           </Button>
         </FormControl>
       </HStack>
-      <UserCard />
+      {results.map(result => <UserCard profile={result}/>)}
     </Box>
   );
 }

client/src/components/UserCard.tsx

@@ -1,6 +1,7 @@
 import { Card, Image, Stack, CardBody, Heading, Text, Box, Button } from "@chakra-ui/react";
+import { UserProfile } from "../types";
 
-export default function UserCard() {
+export default function UserCard(props: {profile: UserProfile}) {
   return (
     <Card
       bg="#07354f"
@@ -12,8 +13,8 @@ export default function UserCard() {
     >
       <Box margin="20px" display="flex" justifyContent="center" alignItems="center">
         <Image
-          src="https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60"
-          alt="Caffe Latte"
+          src={props.profile.profilePic}
+          alt="Profile Picture"
           borderRadius="full"
           boxSize="100px"
         />
@@ -22,9 +23,11 @@ export default function UserCard() {
       <Stack>
         <CardBody px="0">
           <Heading size="md">First Name Last Name</Heading>
-          <Text>Gender:</Text>
-          <Text>About:</Text>
-          <Text>Preferences:</Text>
+          <Text>Gender: {props.profile.gender}</Text>
+          <Text>Budget: {props.profile.budget}</Text>
+          <Text>Loudness: {props.profile.loudness}</Text>
+          <Text>Cleanliness: {props.profile.cleanliness}</Text>
+          <Text>Co-Ed: {props.profile.cleanliness}</Text>
         </CardBody>
       </Stack>
 

client/src/schemas.ts

@@ -4,18 +4,22 @@ export const apiErrorSchema = z.object({
   errorMessage: z.string(),
 });
 
-export const userProfileSchema = z
-  .object({
-    profilePic: z.string().optional(),
-    displayName: z.string().min(1),
-    budget: z.literal(1).or(z.literal(2)).or(z.literal(3)).or(z.literal(4)),
-    gender: z.string().min(1),
-    cleanliness: z.literal(1).or(z.literal(2)).or(z.literal(3)),
-    loudness: z.literal(1).or(z.literal(2)).or(z.literal(3)),
-    coed: z.boolean(),
-  })
+const userProfileBodySchema = z
+.object({
+  profilePic: z.string().optional(),
+  budget: z.literal(1).or(z.literal(2)).or(z.literal(3)).or(z.literal(4)),
+  cleanliness: z.literal(1).or(z.literal(2)).or(z.literal(3)),
+  coed: z.boolean(),
+  displayName: z.string().min(1),
+  gender: z.string().min(1),
+  loudness: z.literal(1).or(z.literal(2)).or(z.literal(3)),
+});
+
+export const userProfileSchema = userProfileBodySchema
   .or(apiErrorSchema);
 
+export const searchResultSchema = z.array(userProfileBodySchema);
+
 export const tokenMessageSchema = z.object({
   token: z.string(),
 });