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 */}
} />
-
+
);
};
diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx
index d552982..b9b5efa 100644
--- a/src/components/UserCard.tsx
+++ b/src/components/UserCard.tsx
@@ -3,13 +3,32 @@ import {
Flex,
HStack,
Text,
+ Modal,
+ ModalBody,
+ ModalOverlay,
+ ModalContent,
+ ModalHeader,
+ ModalCloseButton,
+ ModalFooter,
+ Button,
+ useDisclosure,
+ UnorderedList,
+ ListItem
} from "@chakra-ui/react";
-import React from "react";
+import { apiUrl, Service } from "@hex-labs/core";
+import axios from "axios";
+import React, { useState, useEffect } 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 +42,83 @@ 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 = (props: ModalProps) => {
+
+ // State variable and setter for hexathons
+ const [hexathons, setHexathons] = useState([]);
+
+ const getHexathons = async () => {
+ try {
+ // fetches all hexathons
+ const response = await axios.get(apiUrl(Service.HEXATHONS, "/hexathons"));
+ const allHexathons = response.data;
+ // fetches all applications for the specific user for each hexathon
+ // uses Promise for series of async calls
+ const userApps = await Promise.all(allHexathons.map(async (hexathon: any) => {
+ const res = await axios.get(apiUrl(Service.REGISTRATION, "/applications"), {
+ params: {
+ hexathon: hexathon.id,
+ userId: props.user.userId
+ }
+ });
+ // returns hexathon if user has applied
+ return res.data.length > 0 ? hexathon : null;
+ }));
+ // filters for non-null hexathons
+ const filteredHexathons = userApps.filter((hexathon) => hexathon !== null);
+ setHexathons(filteredHexathons);
+
+ } catch (error) {
+ console.error("Error: " + error);
+ }
+
+ }
+
+ useEffect(() => {
+ if (props.isOpen) {
+ getHexathons();
+ }
+ }, [props.isOpen]);
+
+ return (
+
+
+
+ User Information
+
+
+ Name: {`${props.user.name.first} ${props.user.name.last}`}
+ Email: {props.user.email}
+ Phone Number: {props.user.phoneNumber || "Not provided"}
+ User ID: {props.user.userId}
+
+ Applied Hexathons:
+ { hexathons.length > 0 ?
+ (
+ {hexathons.map((hexathon) => (
+
+ {hexathon.name}
+
+ ))}
+ ) : No hexathons applied
+ }
+
+
+
+
+
+
+
+ );
+};
+
+
+
const UserCard: React.FC = (props: Props) => {
+ const { isOpen, onOpen, onClose } = useDisclosure();
return (
+ <>
= (props: Props) => {
height="175px"
fontWeight="bold"
alignItems="center"
+ onClick={onOpen}
>
@@ -48,6 +142,9 @@ const UserCard: React.FC = (props: Props) => {
+
+
+
);
};
diff --git a/src/components/UserData.tsx b/src/components/UserData.tsx
index d5aeb78..bcafc9a 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, HStack } 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,20 @@ 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.
+
+ Hexlabs Users
+
+
+ This is an example of a page that makes an API call to the Hexlabs API to get a list of users.