diff --git a/src/App.tsx b/src/App.tsx
index 18ac09d..a8ae4d9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,9 +5,15 @@ 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';
+import UserData from "./components/UserData";
// a little bee ascii art
// const art =
@@ -46,16 +52,18 @@ export const App = () => {
// Sets up the AuthProvider so that any part of the application can use the
// useAuth hook to retrieve the user's login details.
+ // header and footer from core package
return (
+
{/* Setting up our React Router to route to all the different pages we may have */}
} />
-
+
);
};
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx
index d552982..0c8111e 100644
--- a/src/components/UserCard.tsx
+++ b/src/components/UserCard.tsx
@@ -3,19 +3,30 @@ import {
Flex,
HStack,
Text,
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalHeader,
+ ModalCloseButton,
+ ModalBody,
+ TextDecorationProps,
+ Link,
+ Button,
+ useDisclosure,
} from "@chakra-ui/react";
-import React from "react";
+import { apiUrl, Service } from "@hex-labs/core";
+import React, { useEffect, useState } from "react";
+import axios from "axios";
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,141 @@ 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, onOpen, onClose } = useDisclosure();
+ return (
+ <>
+
+
+
+ {`${props.user.name.first} ${props.user.name.last}`}
+
+
+ {props.user.email}
+
+
+
+
+
+ );
+};
+
+const UserModal: React.FC<{
+ user: any;
+ isOpen: boolean;
+ onClose: () => void;
+}> = ({ user, isOpen, onClose }) => {
+ const {
+ isOpen: isHexOpen,
+ onOpen: onHexOpen,
+ onClose: onHexClose,
+ } = useDisclosure();
+ return (
+ <>
+
+
+
+ {`${user.name.first} ${user.name.last}`}
+
+
+
+ Email:{" "}
+
+ {user.email}
+
+
+
+ Phone: {user.phoneNumber}
+
+
+ User ID: {user.userId}
+
+
+ Resume:{" "}
+ {user.resume ? (
+ // not quite sure how to get link to get resume?? but this is my attempt
+
+ View Resume
+
+ ) : (
+ "N/A"
+ )}
+
+
+
+
+
+
+
+ );
+};
+
+const UserHexathons: React.FC<{
+ user: any;
+ isOpen: boolean;
+ onClose: () => void;
+}> = ({ user, isOpen, onClose }) => {
+ const [hexathons, setHexathons] = useState([]);
+
+ const userHackathons = async () => {
+ const hexRes = await axios.get(apiUrl(Service.HEXATHONS, "/hexathons"));
+ const hexathons = hexRes.data;
+ const userApps = await Promise.all(
+ hexathons.map(async (hexathon: any) => {
+ const applicationsRes = await axios.get(
+ apiUrl(Service.REGISTRATION, "/applications"),
+ {
+ params: {
+ hexathon: hexathon.id,
+ userId: user.userId,
+ },
+ }
+ );
+ return applicationsRes.data.length > 0 ? hexathon : null;
+ })
+ );
+ setHexathons(userApps.filter((hexathon) => hexathon !== null));
+ };
+ useEffect(() => {
+ if (isOpen) {
+ userHackathons();
+ }
+ }, [isOpen]);
return (
-
-
-
- {`${props.user.name.first} ${props.user.name.last}`}
-
-
- {props.user.email}
-
-
-
+
+
+
+ Hexathons Applied To:
+
+
+ {hexathons.length > 0 ? (
+ hexathons.map((hex: any) => {hex.name})
+ ) : (
+ None
+ )}
+
+
+
);
};
-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..b1761f9 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,22 @@ 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";
+ const res = await axios.get(apiUrl(Service.USERS, URL));
+ const users = res.data;
+ //setUsers(users);
// 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(users); //basic retrieval of users
+
+ //filtering of users based on phone number starting with 470
+ const filteredUsers = users.filter(
+ (user: any) => user.phoneNumber && user.phoneNumber.startsWith("470")
+ );
+ setUsers(filteredUsers);
};
- 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 +57,37 @@ 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.
-
-
+ function sortUsersByFirstName() {
+ 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.
-
+
-
{/* 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;