From 3dad253709d9b0cfc8e08c5cbf68139a34340795 Mon Sep 17 00:00:00 2001 From: Lucas Kang Date: Mon, 11 Nov 2024 13:47:15 -0500 Subject: [PATCH 1/5] finished assignment --- src/components/UserCard.tsx | 132 ++++++++++++++++++++++++++++-------- src/components/UserData.tsx | 46 +++++++++---- 2 files changed, 137 insertions(+), 41 deletions(-) diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx index d552982..761af86 100644 --- a/src/components/UserCard.tsx +++ b/src/components/UserCard.tsx @@ -3,19 +3,30 @@ import { Flex, HStack, Text, + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalFooter, + ModalBody, + ModalCloseButton, + Button, + useDisclosure, } from "@chakra-ui/react"; -import React from "react"; +import userEvent from "@testing-library/user-event"; +import axios from "axios"; +import React, { useState } from "react"; +import { apiUrl, Service } from "@hex-labs/core"; type Props = { user: any; }; - // TODO: right now, the UserCard only displays the user's name and email. Create a new modal component that // pops up when the card is clicked. In this modal, list all the user's information including name, email, phoneNumber, -// and userId. +// and userId. -// TODO: Explore if you can display the email as a link to the user's email that will open up the user's +// TODO: Explore if you can display the email as a link to the user's email that will open up the user's // email client and start a new email to that user. Also explore if you can provide a link to the user's resume. // TODO: In our database structure, every user has a userId that is unique to them. This is the primary key of the user @@ -24,31 +35,98 @@ type Props = { // and the /hexathons endpoint of the hexathons service to get a list of all the hexathons. const UserCard: React.FC = (props: Props) => { + const { isOpen, onClose, onOpen } = useDisclosure(); + const [hexathons, setHexathons] = useState([]); + + const fetchHexathons = async () => { + try { + const response = await axios.get(apiUrl(Service.HEXATHONS, "/hexathons")); + const hexathons = response.data; + + const applications = await Promise.all( + hexathons.map(async (hexathon: any) => { + const hexathonId = hexathon.id; + const userApplications = await axios.get( + apiUrl(Service.REGISTRATION, "/applications"), + { + params: { + hexathon: hexathonId, + userId: props.user.userId, + }, + } + ); + if (userApplications.data.applications.length > 0) { + return { name: hexathon.name, id: hexathon.id }; + } else { + return null; + } + }) + ); + setHexathons(applications.filter((hexathon) => hexathon != null)); + } catch (error) { + console.log("Error fetching hexathons: ", error); + } + }; return ( - - - - {`${props.user.name.first} ${props.user.name.last}`} - - - {props.user.email} - - - + <> + + + + {`${props.user.name.first} ${props.user.name.last}`} + + + {props.user.email} + + + + + + + + + {props.user.name.first} {props.user.name.last} + + + +

Email: {props.user.email}

+

Phone numebr: {props.user.phoneNumber}

+

ID: {props.user.userId}

+ { + <> +

Hexathons applied:

+
    + {hexathons.map((hexathon, key) => ( +
  • {hexathon.name}
    • + ))} +
+ + } + + + + + + + + + ); }; -export default UserCard; \ No newline at end of file +export default UserCard; diff --git a/src/components/UserData.tsx b/src/components/UserData.tsx index d5aeb78..456f71f 100644 --- a/src/components/UserData.tsx +++ b/src/components/UserData.tsx @@ -1,11 +1,10 @@ import React, { useEffect, useState } from "react"; import { apiUrl, Service } from "@hex-labs/core"; -import { SimpleGrid, Text } from "@chakra-ui/react"; +import { SimpleGrid, Text, Button } from "@chakra-ui/react"; import axios from "axios"; import UserCard from "./UserCard"; const UserData: React.FC = () => { - // The useState hook is used to store state in a functional component. The // first argument is the initial value of the state, and the second argument // is a function that can be used to update the state. The useState hook @@ -19,14 +18,12 @@ const UserData: React.FC = () => { // only happen once when the component is loaded. useEffect(() => { - // This is an example of an async function. The async keyword tells the // function to wait for the axios request to finish before continuing. This // is useful because we can't use the data from the request until it is // finished. const getUsers = async () => { - // TODO: Use the apiUrl() function to make a request to the /users endpoint of our USERS service. The first argument is the URL // of the request, which is created for the hexlabs api through our custom function apiUrl(), which builds the request URL based on // the Service enum and the following specific endpoint URL. @@ -37,13 +34,27 @@ const UserData: React.FC = () => { // Postman will be your best friend here, because it's better to test out the API calls in Postman before implementing them here. // this is the endpoint you want to hit, but don't just hit it directly using axios, use the apiUrl() function to make the request - const URL = 'https://users.api.hexlabs.org/users/hexlabs'; + const URL = "https://users.api.hexlabs.org/users/hexlabs"; + + try { + const response = await axios.get( + apiUrl(Service.USERS, "/users/hexlabs") + ); + const users = response.data; + + const filteredUsers = users.filter((user: any) => + user.phoneNumber?.startsWith("470") + ); + setUsers(filteredUsers); + } catch (error) { + console.error("Error fetching users: ", error); + } // uncomment the line below to test if you have successfully made the API call and retrieved the data. The below line takes // the raw request response and extracts the actual data that we need from it. // setUsers(data?.data?.profiles); }; - document.title = "Hexlabs Users" + document.title = "Hexlabs Users"; getUsers(); }, []); // ^^ The empty array at the end of the useEffect hook tells React that the @@ -51,29 +62,36 @@ const UserData: React.FC = () => { // run every time a variable changes, you can put that variable in the array // and it will run every time that variable changes. - // TODO: Create a function that sorts the users array based on the first name of the users. Then, create a button that // calls this function and sorts the users alphabetically by first name. You can use the built in sort() function to do this. + const sortUsers = () => { + const sortedUsers = [...users].sort((a, b) => { + if (a.name.first > b.name.first) return -1; + if (a.name.first < b.name.first) return 1; + return 0; + }); + setUsers(sortedUsers); + }; return ( <> Hexlabs Users - This is an example of a page that makes an API call to the Hexlabs API to get a list of users. - - + + This is an example of a page that makes an API call to the Hexlabs API + to get a list of users. + + - {/* Here we are mapping every entry in our users array to a unique UserCard component, each with the unique respective data of each unique user in our array. This is a really important concept that we use a lot so be sure to familiarize yourself with the syntax - compartmentalizing code makes your work so much more readable. */} - { users.map((user) => ( + {users.map((user) => ( ))} - ); }; -export default UserData; \ No newline at end of file +export default UserData; From 846fc22c6dd66f5920bff42b8298b8ca01a8e9a9 Mon Sep 17 00:00:00 2001 From: Lucas Kang Date: Mon, 11 Nov 2024 14:43:40 -0500 Subject: [PATCH 2/5] added header & footer --- src/components/UserData.tsx | 30 ++++++++++++++++++++++-------- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/src/components/UserData.tsx b/src/components/UserData.tsx index 456f71f..3835f84 100644 --- a/src/components/UserData.tsx +++ b/src/components/UserData.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; -import { apiUrl, Service } from "@hex-labs/core"; -import { SimpleGrid, Text, Button } from "@chakra-ui/react"; +import { apiUrl, Service, Footer, Header, HeaderItem } from "@hex-labs/core"; +import { SimpleGrid, Text, Button, ChakraProvider } from "@chakra-ui/react"; import axios from "axios"; import UserCard from "./UserCard"; @@ -76,12 +76,23 @@ const UserData: React.FC = () => { return ( <> - Hexlabs Users - - This is an example of a page that makes an API call to the Hexlabs API - to get a list of users. - - + +
Sign Out} + rightItemMobile={Sign Out} + > + Home + Profile +
+ +
+ Hexlabs Users + + This is an example of a page that makes an API call to the Hexlabs API + to get a list of users. + + +
{/* Here we are mapping every entry in our users array to a unique UserCard component, each with the unique respective data of each unique user in our array. This is a really important concept that we use a lot so be sure to familiarize @@ -90,6 +101,9 @@ const UserData: React.FC = () => { ))} + +