From 76f6570cf1acd04e4c5fe00e6a669aadabc05eae Mon Sep 17 00:00:00 2001 From: shaunakkarnik Date: Mon, 11 Nov 2024 23:49:29 -0500 Subject: [PATCH 1/2] did first four tasks --- src/components/UserCard.tsx | 49 +++++++++++++++++++++++++++++++++++++ src/components/UserData.tsx | 21 +++++++++++++--- 2 files changed, 67 insertions(+), 3 deletions(-) diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx index d552982..be646fc 100644 --- a/src/components/UserCard.tsx +++ b/src/components/UserCard.tsx @@ -3,13 +3,30 @@ import { Flex, HStack, Text, + Modal, + ModalBody, + ModalOverlay, + ModalContent, + ModalHeader, + ModalCloseButton, + ModalFooter, + Button, + useDisclosure } from "@chakra-ui/react"; +import { apiUrl, Service } from "@hex-labs/core"; +import axios from "axios"; import React from "react"; type Props = { user: any; }; +type ModalProps = { + isOpen: boolean; + onClose: () => void; + 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, @@ -23,9 +40,37 @@ type Props = { // the hexathons that the user has applied to. You can use the /applications endpoint of the registration service to do this // and the /hexathons endpoint of the hexathons service to get a list of all the hexathons. +const UserModal: React.FC = ({ isOpen, onClose, user }) => { + return ( + + + + User Information + + + Name: {`${user.name.first} ${user.name.last}`} + Email: {user.email} + Phone Number: {user.phoneNumber || "Not provided"} + User ID: {user.userId} + + + + + + + ); +}; + +const getUsers = async (user: any) => { +// complete +} + const UserCard: React.FC = (props: Props) => { + const { isOpen, onOpen, onClose } = useDisclosure(); + return ( + <> = (props: Props) => { height="175px" fontWeight="bold" alignItems="center" + onClick={onOpen} > @@ -48,6 +94,9 @@ const UserCard: React.FC = (props: Props) => { + + + ); }; diff --git a/src/components/UserData.tsx b/src/components/UserData.tsx index d5aeb78..f3bf36d 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 } from "@chakra-ui/react"; +import { filter, SimpleGrid, Text, Button } from "@chakra-ui/react"; import axios from "axios"; import UserCard from "./UserCard"; @@ -39,9 +39,19 @@ const UserData: React.FC = () => { // 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'; + try { + // API call + const response = await axios.get(apiUrl(Service.USERS, "/users/hexlabs")); + const users = response.data; + // filters by numbers stating with 470 + const filteredUsers = users.filter((user: any) => user.phoneNumber && user.phoneNumber.startsWith("470")); + setUsers(filteredUsers); + } catch (error) { + console.error("Error: " + 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" getUsers(); @@ -54,13 +64,18 @@ const UserData: React.FC = () => { // 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. - + function sortByFirstName() { + // makes shallow copy of users and sorts by first name + const sortedUsers = [...users].sort((a, b) => a.name.first.localeCompare(b.name.first)); + 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. + From a80609223b9481e381a394dbf8f22b607c7bfdf4 Mon Sep 17 00:00:00 2001 From: shaunakkarnik Date: Tue, 12 Nov 2024 11:45:19 -0500 Subject: [PATCH 2/2] completed all tasks --- src/App.tsx | 6 +-- src/components/UserCard.tsx | 74 ++++++++++++++++++++++++++++++------- src/components/UserData.tsx | 10 +++-- 3 files changed, 70 insertions(+), 20 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 18ac09d..54a7725 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'; @@ -48,12 +48,12 @@ export const App = () => { // useAuth hook to retrieve the user's login details. return ( - +
{/* Setting up our React Router to route to all the different pages we may have */} } /> - +