diff --git a/src/App.tsx b/src/App.tsx
index 18ac09d..ea6f83b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,60 +1,56 @@
-/* eslint-disable */
import React from "react";
import "./App.css";
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 { ChakraProvider, Flex, Box } from "@chakra-ui/react";
import UserData from './components/UserData';
-// a little bee ascii art
-// const art =
-// ".' '. buzz buzz\n. . . (__\\ \n . . . -{{_(|8)\n ' . . ' ' . . ' (__/";
-
-// Initialized the Firebase app through the credentials provided
export const app = initializeApp({
apiKey: "AIzaSyCsukUZtMkI5FD_etGfefO4Sr7fHkZM7Rg",
authDomain: "auth.hexlabs.org",
});
-// Sets the Firebase persistence to in memory since we use cookies for session
-// management. These cookies are set by the backend on login/logout.
setPersistence(getAuth(app), inMemoryPersistence);
-
-// By default sends axios requests with user session cookies so that the backend
-// can verify the user's identity.
axios.defaults.withCredentials = true;
export const App = () => {
- // Retrieves the user's login state. This hook will also make requests to log
- // the user in
const [loading, loggedIn] = useLogin(app);
- // If loading, show a loading screen
if (loading) {
return ;
}
- // If the user is not logged in, redirect to the login frontend with a redirect
- // param so that the user can login and come back to the page they were on.
if (!loggedIn) {
window.location.href = `https://login.hexlabs.org?redirect=${window.location.href}`;
return ;
}
- // Sets up the AuthProvider so that any part of the application can use the
- // 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 */}
-
- } />
-
-
-
+
+
+
+
+ header.Original
+
+
+
+ } />
+
+
+
+
+
+
);
};
diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx
index d552982..646db4d 100644
--- a/src/components/UserCard.tsx
+++ b/src/components/UserCard.tsx
@@ -3,51 +3,138 @@ import {
Flex,
HStack,
Text,
+ Modal,
+ ModalOverlay,
+ ModalContent,
+ ModalHeader,
+ ModalBody,
+ ModalCloseButton,
+ useDisclosure,
+ Link,
+ Button,
+ VStack,
+ Spinner,
} from "@chakra-ui/react";
-import React from "react";
+import React, { useState } from "react";
+import axios from "axios";
+import { apiUrl, Service } from "@hex-labs/core";
type Props = {
user: any;
};
+const UserCard: React.FC = (props: Props) => {
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const [hexathons, setHexathons] = useState([]);
+ const [loading, setLoading] = useState(false);
-// 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.
+ const fetchHexathons = async () => {
+ setLoading(true);
+ try {
+ const applicationsResponse = await axios.get(
+ apiUrl(Service.REGISTRATION, '/applications'),
+ {
+ params: {
+ filter: {
+ userId: props.user.userId
+ }
+ }
+ }
+ );
-// 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.
+ const hexathonIds = applicationsResponse.data.applications.map(
+ (app: any) => app.hexathonId
+ );
-// TODO: In our database structure, every user has a userId that is unique to them. This is the primary key of the user
-// and is referenced in their applications to all of our hexathons. Create a button that when clicked, will retrieve all of
-// 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 hexathonsResponse = await axios.get(
+ apiUrl(Service.HEXATHONS, '/hexathons'),
+ {
+ params: {
+ filter: {
+ _id: { $in: hexathonIds }
+ }
+ }
+ }
+ );
-const UserCard: React.FC = (props: Props) => {
+ setHexathons(hexathonsResponse.data.hexathons);
+ } catch (error) {
+ console.error('Error fetching hexathons:', error);
+ }
+ setLoading(false);
+ };
return (
-
-
-
- {`${props.user.name.first} ${props.user.name.last}`}
-
-
- {props.user.email}
-
-
-
+ <>
+
+
+
+ {`${props.user.name.first} ${props.user.name.last}`}
+
+
+ {props.user.email}
+
+
+
+
+
+
+
+ User Details
+
+
+
+ Name: {props.user.name.first} {props.user.name.last}
+
+ Email:{' '}
+
+ {props.user.email}
+
+
+ Phone: {props.user.phoneNumber}
+ {props.user.resume && (
+
+ View Resume
+
+ )}
+
+
+
+ {loading ? (
+
+ ) : (
+ hexathons.length > 0 && (
+
+ Applied Hexathons:
+ {hexathons.map((hexathon) => (
+ {hexathon.name}
+ ))}
+
+ )
+ )}
+
+
+
+
+
);
};
diff --git a/src/components/UserData.tsx b/src/components/UserData.tsx
index d5aeb78..01a6d44 100644
--- a/src/components/UserData.tsx
+++ b/src/components/UserData.tsx
@@ -1,76 +1,63 @@
import React, { useEffect, useState } from "react";
import { apiUrl, Service } from "@hex-labs/core";
-import { SimpleGrid, Text } from "@chakra-ui/react";
+import { SimpleGrid, Text, Button, HStack } 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
- // returns an array with the first element being the state and the second
- // element being the function to update the state.
-
const [users, setUsers] = useState([]);
-
- // 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
- // only happen once when the component is loaded.
+ const [sortAscending, setSortAscending] = useState(true);
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.
-
- // 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.
-
- // 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';
-
- // 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);
+ try {
+ const response = await axios.get(
+ apiUrl(Service.USERS, '/users/hexlabs'),
+ {
+ params: {
+ filter: {
+ phoneNumber: {
+ $regex: '^470'
+ }
+ },
+ limit: 100
+ }
+ }
+ );
+ setUsers(response?.data?.profiles || []);
+ } catch (error) {
+ console.error('Error fetching users:', error);
+ }
};
+
document.title = "Hexlabs Users"
getUsers();
}, []);
- // ^^ The empty array at the end of the useEffect hook tells React that the
- // hook should only run once when the component is mounted. If you want it to
- // 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 sortedUsers = [...users].sort((a, b) => {
+ const comparison = a.name.first.localeCompare(b.name.first);
+ return sortAscending ? comparison : -comparison;
+ });
+ setUsers(sortedUsers);
+ setSortAscending(!sortAscending);
+ };
return (
<>
Hexlabs UsersThis 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) => (
+
))}
-
);