Skip to content

Commit

Permalink
FInalize
Browse files Browse the repository at this point in the history
  • Loading branch information
@BGDanny
BGDanny committed Nov 20, 2022
1 parent 45bf2d5 commit 199283a
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 105 deletions.
Binary file added public/bg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 25 additions & 21 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Expand All @@ -24,12 +24,17 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>MatchEd</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<title>MatchEd</title>
<style>
body {
background-image: url("bg.png");
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expand All @@ -38,6 +43,5 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
--></body>
</html>
2 changes: 1 addition & 1 deletion src/layouts/HeaderFooterLayout/HeaderFooterLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const HeaderFooterLayout: React.FunctionComponent<Props> = (props) => {
return (
<Box >
<NavBar />
<Box>
<Box sx={{marginX:"80px"}}>
{props.children}
</Box>
</Box>
Expand Down
145 changes: 68 additions & 77 deletions src/pages/Home/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,19 +18,22 @@ import ListItemText from "@mui/material/ListItemText";
import ListItemAvatar from "@mui/material/ListItemAvatar";
import Avatar from "@mui/material/Avatar";

export const PeopleList: React.FC<any> = (props) => {
export const PeopleList: React.FC<{ people: any[] }> = ({ people }) => {
if(!people.length){
return null;
}
return (
<List
sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
>
{props.map((people: any) => {
{people.map((person: any) => {
return (
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar src="https://thispersondoesnotexist.com/image" />
</ListItemAvatar>
<ListItemText
primary={`${people.first_name} ${people.last_name}`}
primary={`${person.first_name} ${person.last_name}`}
secondary={
<React.Fragment>
<Typography
Expand All @@ -39,9 +42,8 @@ export const PeopleList: React.FC<any> = (props) => {
variant="body2"
color="text.primary"
>
Ali Connors
{person.email}
</Typography>
{people.email}
</React.Fragment>
}
/>
Expand All @@ -55,32 +57,25 @@ export const PeopleList: React.FC<any> = (props) => {
export const Home: React.FC = () => {
const { user, setUser } = useAuth();
const { state } = useLocation();
const [messages, setMessages] = React.useState<any[]>();
const [mentee, setMentee] = React.useState<any[]>();
const [mentor, setMentor] = React.useState<any[]>();
const [messages, setMessages] = React.useState<any[]>([]);
const [mentee, setMentee] = React.useState<any[]>([]);
const [mentor, setMentor] = React.useState<any[]>([]);

React.useEffect(() => {
if (state) {
setUser(state);
}
}, [state, setUser]);

React.useEffect(() => {
if (user) {
fetchApi("/hello?id=" + user.id)
fetchApi("/request?id=" + user.id)
.then((res) => res.json())
.then((data) => setMessages(data));
}
}, [user]);
React.useEffect(() => {
if (user) {
fetchApi("/getMentee?id=" + user.id)
fetchApi("/profile/getMentee?id=" + user.id)
.then((res) => res.json())
.then((data) => setMentee(data));
}
}, [user]);
React.useEffect(() => {
if (user) {
fetchApi("/getMentor?id=" + user.id)
fetchApi("/profile/getMentor?id=" + user.id)
.then((res) => res.json())
.then((data) => setMentor(data));
}
Expand All @@ -95,7 +90,7 @@ export const Home: React.FC = () => {
mentorId: user.id,
menteeId: id,
})
).then(window.location.reload);
).then(() => window.location.reload());
}
};

Expand All @@ -108,26 +103,10 @@ export const Home: React.FC = () => {
mentorId: user.id,
menteeId: id,
})
).then(window.location.reload);
).then(() => window.location.reload());
}
};

let peopleList;
if (user && user.type === "Mentor") {
peopleList = (
<>
<h6>Matched Mentees</h6>
<PeopleList props={mentee} />
</>
);
} else {
peopleList = (
<>
<h6>Matched Mentors</h6>
<PeopleList props={mentor} />
</>
);
}
return (
<HeaderFooterLayout>
{user ? (
Expand All @@ -143,52 +122,64 @@ export const Home: React.FC = () => {
</Typography>
<News />
{user.type === "Mentee" && <MentorList />}
{messages?.map((message) => {
return (
<Card sx={{ maxWidth: 345 }}>
<CardContent>
<Typography
gutterBottom
variant="h5"
component="div"
>
{message.first_name} {message.last_name}
</Typography>
<Typography
variant="body2"
color="text.secondary"
>
{message.match_message}
</Typography>
</CardContent>
<CardActions>
<Button
size="small"
onClick={() => handleAccept(message.id)}
>
Accept
</Button>
<Button
size="small"
onClick={() => handleReject(message.id)}
>
Reject
</Button>
</CardActions>
</Card>
);
})}
<Box sx={{ margin: "auto", marginTop:"20px" }}>
{user.type === "Mentor" ? (
<>
<Typography variant="h6" >
Matched Mentees
</Typography>
<PeopleList people={mentee} />
</>
) : (
<>
<Typography variant="h6">
Matched Mentors
</Typography>
<PeopleList people={mentor} />
</>
)}
</Box>
</>
) : (
<Box>
<CTA />
</Box>
)}

<>
{messages?.map((message, index) => {
return (
<Card sx={{ maxWidth: 345 }}>
<CardContent>
<Typography
gutterBottom
variant="h5"
component="div"
>
{message.first_name} {message.last_name}
</Typography>
<Typography
variant="body2"
color="text.secondary"
>
{message.match_message}
</Typography>
</CardContent>
<CardActions>
<Button
size="small"
onClick={() => handleAccept(message.id)}
>
Accept
</Button>
<Button
size="small"
onClick={() => handleReject(message.id)}
>
Reject
</Button>
</CardActions>
</Card>
);
})}
</>

{peopleList}
</HeaderFooterLayout>
);
};
9 changes: 3 additions & 6 deletions src/pages/MentorList/MentorList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
MenuItem,
Dialog,
TextField,
DialogTitle
DialogTitle,
} from "@mui/material";
import { interestsList } from "../SignUp/SignUp";
import { fetchApi } from "../../api";
Expand All @@ -31,14 +31,11 @@ export const MentorComponent: React.FC<any> = ({
const [matchOpen, setMatchOpen] = React.useState(false);
const [matchMessage, setMatchMessage] = React.useState("");
const { user } = useAuth();
const avatar = React.useRef(faker.image.avatar());

return (
<Card sx={{ height: "fit-content", margin: "auto" }}>
<CardMedia
component="img"
height="300"
image={faker.image.avatar()}
/>
<CardMedia component="img" height="300" image={avatar.current} />
<CardContent>
<Typography gutterBottom variant="h5" component="div">
{first_name} {last_name}
Expand Down

0 comments on commit 199283a

Please sign in to comment.