From 09b198857ff31fcb2fafc3e0e8953f4705b6cd15 Mon Sep 17 00:00:00 2001 From: pchryss Date: Wed, 12 Nov 2025 14:57:55 -0500 Subject: [PATCH 1/3] Add buttons and modal --- src/components/UserData.tsx | 104 +++++++++++++++++++++++++++++------- 1 file changed, 86 insertions(+), 18 deletions(-) diff --git a/src/components/UserData.tsx b/src/components/UserData.tsx index d5aeb78..5e14eca 100644 --- a/src/components/UserData.tsx +++ b/src/components/UserData.tsx @@ -1,9 +1,37 @@ import React, { useEffect, useState } from "react"; import { apiUrl, Service } from "@hex-labs/core"; -import { SimpleGrid, Text } from "@chakra-ui/react"; +import { + Button, + SimpleGrid, + Text, + useDisclosure, + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalBody, + ModalFooter, + ModalCloseButton, + Box, +} from "@chakra-ui/react"; import axios from "axios"; import UserCard from "./UserCard"; +enum SortBy { + FIRST = "first", + LAST = "last" +} + +interface User { + userId: string; + name: { + first: string; + last: string; + }; + email: string; + phoneNumber?: string; +} + const UserData: React.FC = () => { // The useState hook is used to store state in a functional component. The @@ -13,6 +41,8 @@ const UserData: React.FC = () => { // element being the function to update the state. const [users, setUsers] = useState([]); + const [modalUser, setModalUser] = useState(null); + const { isOpen, onOpen, onClose } = useDisclosure(); // The useEffect hook basicaly runs the code inside of it when the component // mounts. This is useful for making API calls and other things that should @@ -27,21 +57,14 @@ const UserData: React.FC = () => { 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. - - // TODO: Also explore some of the other ways to configure the api call such as filtering and pagination. - // Try to filter all the users with phone numbers starting with 470 or increase the amount of users returned from the default 50 (don't go above 100). - // Postman will be your best friend here, because it's better to test out the API calls in Postman before implementing them here. + // builds url endpoint at users/hexlabs for the USERS service + const URL = apiUrl(Service.USERS, "users/hexlabs"); - // 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'; + // fetches data using axios from the URL + const { data } = await axios.get(URL); - // 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); + setUsers(data); }; document.title = "Hexlabs Users" getUsers(); @@ -51,27 +74,72 @@ 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. + const openUserModal = (user: User) => { + setModalUser(user); + onOpen(); + } + + const sortByName = (field: SortBy) => { + const sortedUsers = [...users].sort((a, b) => { + const lastA = a.name?.[field]?.toLowerCase() || ""; + const lastB = b.name?.[field]?.toLowerCase() || ""; + return lastA.localeCompare(lastB); + }); + setUsers(sortedUsers); + }; - // 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. 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. - - + + {/* 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) => ( - + openUserModal(user)}> + + ))} + + + + + User Details + + + {modalUser ? ( + <> + + {modalUser.name.first} {modalUser.name.last} + + Email: {modalUser.email} + {modalUser.phoneNumber && ( + Phone: {modalUser.phoneNumber} + )} + + ) : ( + No user selected. + )} + + + + + + ); }; From 6a20aaacca16936aed32ebfa8f9ac02bb2d76966 Mon Sep 17 00:00:00 2001 From: pchryss Date: Thu, 13 Nov 2025 14:35:25 -0500 Subject: [PATCH 2/3] changes --- src/App.tsx | 4 +- src/components/UserApplied.tsx | 120 +++++++++++++++++++++++++++++++++ src/components/UserCard.tsx | 18 ++--- src/components/UserData.tsx | 96 +++++--------------------- src/components/UserModal.tsx | 119 ++++++++++++++++++++++++++++++++ 5 files changed, 265 insertions(+), 92 deletions(-) create mode 100644 src/components/UserApplied.tsx create mode 100644 src/components/UserModal.tsx diff --git a/src/App.tsx b/src/App.tsx index 18ac09d..401d97a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,7 +5,7 @@ import { Routes, Route } from "react-router-dom"; import axios from "axios"; import { initializeApp } from "firebase/app"; import { setPersistence, getAuth, inMemoryPersistence } from "firebase/auth"; -import { useLogin, LoadingScreen, AuthProvider } from "@hex-labs/core"; +import { useLogin, LoadingScreen, AuthProvider, Header, Footer } from "@hex-labs/core"; import UserData from './components/UserData'; @@ -50,9 +50,11 @@ export const App = () => { {/* Setting up our React Router to route to all the different pages we may have */} +
} /> +