Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Krish Mathur Onboarding Project #12

Open
wants to merge 1 commit into
base: startercode
Choose a base branch
from
Open

Krish Mathur Onboarding Project #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 84 additions & 23 deletions src/components/UserCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,28 @@ import {
Flex,
HStack,
Text,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
Link,
Button,
} from "@chakra-ui/react";
import React from "react";
import React, { useState, useEffect } from "react";
import { apiUrl, Service} from "@hex-labs/core";
import axios from "axios";


type Props = {
user: any;
};
type Hexathon = {
id: number;
name: string;
};


// TODO: right now, the UserCard only displays the user's name and email. Create a new modal component <UserModal> that
Expand All @@ -24,30 +40,75 @@ type Props = {
// and the /hexathons endpoint of the hexathons service to get a list of all the hexathons.

const UserCard: React.FC<Props> = (props: Props) => {
const [isOpen, setIsOpen] = useState(false);
const [hexathons, setHexathons] = useState<Hexathon[]>([]);

const handleOpenModal = () => {
setIsOpen(true);
};

const handleCloseModal = () => {
setIsOpen(false);
};

return (
<Box
borderWidth="1px"
rounded="lg"
boxShadow="lg"
height="175px"
fontWeight="bold"
alignItems="center"
>
<Flex padding="2" flexDirection="column">
<HStack align="flex-end" justify="space-between">
<Text fontSize='xl'>{`${props.user.name.first} ${props.user.name.last}`}</Text>
</HStack>
<Text
fontSize="sm"
fontWeight="semibold"
justifyContent="justify"
mt="2"
>
{props.user.email}
</Text>
</Flex>
</Box>
<>
<Box
borderWidth="1px"
rounded="lg"
boxShadow="lg"
height="175px"
p="4"
onClick={handleOpenModal}
cursor="pointer"
transition="all 0.3s"
_hover={{
borderColor: "blue.400",
}}
>
<Flex flexDirection="column" justify="space-between" h="100%">
<HStack justify="space-between" mb="2">
<Text fontSize="xl" fontWeight="bold">
{`${props.user.name.first} ${props.user.name.last}`}
</Text>
</HStack>
<Text fontSize="sm" fontWeight="semibold" color="gray.600">
{props.user.email}
</Text>
</Flex>
</Box>

<Modal isOpen={isOpen} onClose={handleCloseModal} size="md">
<ModalOverlay />
<ModalContent>
<ModalHeader>User Info</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Text mb="2">
<Text as="span" fontWeight="bold">Name:</Text>{" "}
{`${props.user.name.first} ${props.user.name.last}`}
</Text>
<Text mb="2">
<Text as="span" fontWeight="bold">Email:</Text> {props.user.email}
</Text>
<Text mb="2">
<Text as="span" fontWeight="bold">Phone Number:</Text>{" "}
{props.user.phoneNumber}
</Text>
<Text>
<Text as="span" fontWeight="bold">User ID:</Text> {props.user.userId}
</Text>
</ModalBody>

<ModalFooter>
<Button colorScheme="purple" mr={3} onClick={handleCloseModal}>
Close
</Button>
<Button variant="ghost">View Hexathons</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
};

Expand Down
88 changes: 35 additions & 53 deletions src/components/UserData.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,61 @@
import React, { useEffect, useState } from "react";
import { apiUrl, Service } from "@hex-labs/core";
import { SimpleGrid, Text } from "@chakra-ui/react";
import { Button, SimpleGrid, Text, Center } 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<any[]>([]);

// 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.

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);
const fetchData = async () => {
try {
const myUrl = apiUrl(Service.USERS, '/users/hexlabs');
const response = await axios.get(myUrl);
const fetchedUsers = response.data;
const numberUsers = fetchedUsers.filter((user: any) => user.phoneNumber?.startsWith('470'));
setUsers(shuffleArray(numberUsers)); //this makes it so that it spawns randomly.
} catch (error) {
console.error("Error fetching users:", error);
}
};
document.title = "Hexlabs Users"
getUsers();

document.title = "Hexlabs Users";
fetchData();
}, []);
// ^^ 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.

const shuffleArray = (array: any[]) => {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
};

// 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 sortUsers = () => {
const sortedUsers = [...users].sort((userA, userB) => {
const nameA = userA.name.first.toLowerCase();
const nameB = userB.name.first.toLowerCase();
return nameA.localeCompare(nameB);
});

setUsers(sortedUsers);
};

return (
<>
<Text fontSize="4xl">Hexlabs Users</Text>
<Text fontSize="2xl">This is an example of a page that makes an API call to the Hexlabs API to get a list of users.</Text>


<Center>
<Button onClick={sortUsers}>Sort by First Name</Button>
</Center>
<SimpleGrid columns={[2, 3, 5]} spacing={6} padding={10}>

{/* 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) => (
<UserCard user={user} />
{users.map((user) => (
<UserCard key={user.Id} user={user} />
))}

</SimpleGrid>
</>
);
};

export default UserData;
export default UserData;