diff --git a/src/App.tsx b/src/App.tsx
index 18ac09d..4d27036 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 =
@@ -48,14 +54,14 @@ 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 */}
+ } />
-
+
);
};
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/components/ApplicationsModal.tsx b/src/components/ApplicationsModal.tsx
new file mode 100644
index 0000000..f6c7b1c
--- /dev/null
+++ b/src/components/ApplicationsModal.tsx
@@ -0,0 +1,93 @@
+import React from "react";
+import {
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalHeader,
+ ModalCloseButton,
+ ModalBody,
+ ModalFooter,
+ Box,
+ Text,
+} from "@chakra-ui/react";
+
+import axios from "axios";
+import { useState, useEffect } from "react";
+
+import { apiUrl } from "@hex-labs/core";
+import { Service } from "@hex-labs/core";
+
+type UserModalProps = {
+ isOpen: boolean;
+ onClose: () => void;
+ user: any;
+};
+
+const ApplicationsModal: React.FC = ({
+ isOpen,
+ onClose,
+ user,
+}) => {
+ const [hexathons, setHexathons] = useState([]);
+
+ useEffect(() => {
+ if (!isOpen) {
+ return;
+ }
+ const loadApps = async () => {
+ let URL = apiUrl(Service.HEXATHONS, "/hexathons");
+ const { data } = await axios.get(URL);
+
+ const applications = await Promise.all(
+ data.map(async (hexathon: any) => {
+ const res = await axios.get(
+ apiUrl(Service.REGISTRATION, "/applications"),
+ {
+ params: {
+ hexathon: hexathon.id,
+ userId: user.userId,
+ },
+ },
+ );
+ if (res.data.applications.length > 0) {
+ return hexathon.name;
+ } else {
+ return null;
+ }
+ }),
+ );
+ const filteredHexathons = applications.filter(
+ (hexathon) => hexathon !== null,
+ );
+ setHexathons(filteredHexathons);
+ console.log(user.userId);
+ };
+ loadApps();
+ }, [isOpen, user?.userId]);
+ return (
+
+
+
+ Applications
+
+
+
+ Applied Hexathons:
+ {hexathons.length > 0 ? (
+
+ {hexathons.map((hexathon) => (
+ {hexathon}
+ ))}
+
+ ) : (
+ No hexathons applied
+ )}
+
+
+
+
+
+ );
+};
+
+export default ApplicationsModal;
diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx
index d552982..d818a80 100644
--- a/src/components/UserCard.tsx
+++ b/src/components/UserCard.tsx
@@ -1,21 +1,18 @@
-import {
- Box,
- Flex,
- HStack,
- Text,
-} from "@chakra-ui/react";
+import { Box, Flex, HStack, Text } from "@chakra-ui/react";
import React from "react";
+import { useDisclosure } from "@chakra-ui/react";
+import UserModal from "./UserModal";
+import ApplicationsModal from "./ApplicationsModal";
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 +21,50 @@ 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 userModal = useDisclosure();
+ const applicationsModal = useDisclosure();
return (
-
-
-
- {`${props.user.name.first} ${props.user.name.last}`}
-
-
- {props.user.email}
-
-
-
+ <>
+
+
+
+ {`${props.user.name.first} ${props.user.name.last}`}
+
+
+ {props.user.email}
+
+
+
+ {
+ userModal.onClose();
+ applicationsModal.onOpen();
+ }}
+ />
+
+
);
};
-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..5e89552 100644
--- a/src/components/UserData.tsx
+++ b/src/components/UserData.tsx
@@ -2,10 +2,25 @@ import React, { useEffect, useState } from "react";
import { apiUrl, Service } from "@hex-labs/core";
import { SimpleGrid, Text } from "@chakra-ui/react";
import axios from "axios";
+import { Button } from "@chakra-ui/react";
import UserCard from "./UserCard";
-const UserData: React.FC = () => {
+interface UserName {
+ first: string;
+ middle?: string;
+ last: string;
+}
+
+interface User {
+ id: string;
+ userId: string;
+ email: string;
+ phoneNumber?: string;
+ gender?: string;
+ name: UserName;
+}
+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 +34,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 +50,21 @@ 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 URL = apiUrl(Service.USERS, "/users/hexlabs");
+
+ 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);
+
+ const filteredUsers = data.filter((user: User) =>
+ 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 +72,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 handleSort = () => {
+ const sorted = [...users].sort((a, b) =>
+ a.name.first.localeCompare(b.name.first),
+ );
+ setUsers(sorted);
+ };
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;
diff --git a/src/components/UserModal.tsx b/src/components/UserModal.tsx
new file mode 100644
index 0000000..47bfec1
--- /dev/null
+++ b/src/components/UserModal.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import {
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalHeader,
+ ModalCloseButton,
+ ModalBody,
+ ModalFooter,
+ Link,
+ Button,
+ Text,
+} from "@chakra-ui/react";
+
+type UserModalProps = {
+ isOpen: boolean;
+ onClose: () => void;
+ onApplicationsOpen: () => void;
+ user: any;
+};
+
+const UserModal: React.FC = ({
+ isOpen,
+ onClose,
+ onApplicationsOpen,
+ user,
+}) => {
+ return (
+
+
+
+ {`${user.name.first} ${user.name.last}`}
+
+
+
+ Email:
+
+ {user.email}
+
+
+
+ Phone: {" "}
+ {user.phoneNumber
+ ? user.phoneNumber.slice(0, 3) +
+ "-" +
+ user.phoneNumber.slice(3, 6) +
+ "-" +
+ user.phoneNumber.slice(6)
+ : "N/A"}
+
+
+
+
+
+
+
+ );
+};
+
+export default UserModal;