From 78ba14cc9849c2e7a7dc9f2e5e02922c23728d7e Mon Sep 17 00:00:00 2001 From: Malak Date: Sun, 18 Aug 2024 14:42:24 +0300 Subject: [PATCH] Added MaterialUI --- client/src/components/auth/Login.tsx | 38 ++-- client/src/components/auth/Register.tsx | 43 ++-- client/src/components/dashboard/Dashboard.tsx | 42 ++-- .../components/dashboard/DashboardActions.tsx | 38 +++- client/src/components/dashboard/Education.tsx | 15 +- .../src/components/dashboard/Experience.tsx | 12 +- client/src/components/layout/Landing.tsx | 53 +++-- client/src/components/layout/Navbar.tsx | 187 ++++++++------- client/src/components/post/CommentForm.tsx | 31 +-- client/src/components/post/CommentItem.tsx | 54 +++-- client/src/components/post/Post.tsx | 13 +- client/src/components/posts/PostForm.tsx | 32 +-- client/src/components/posts/PostItem.tsx | 86 +++---- client/src/components/posts/Posts.tsx | 19 +- .../components/profile-forms/AddEducation.tsx | 165 +++++++------- .../profile-forms/AddExperience.tsx | 160 +++++++------ .../components/profile-forms/ProfileForm.tsx | 213 ++++++++---------- client/src/components/profile/Profile.tsx | 47 ++-- .../src/components/profile/ProfileAbout.tsx | 26 +-- .../components/profile/ProfileEducation.tsx | 23 +- .../components/profile/ProfileExperience.tsx | 23 +- client/src/components/profile/ProfileTop.tsx | 18 +- .../src/components/profiles/ProfileItem.tsx | 21 +- client/src/components/profiles/Profiles.tsx | 46 ++-- 24 files changed, 738 insertions(+), 667 deletions(-) diff --git a/client/src/components/auth/Login.tsx b/client/src/components/auth/Login.tsx index 7f5c1ec..a2989b5 100755 --- a/client/src/components/auth/Login.tsx +++ b/client/src/components/auth/Login.tsx @@ -1,30 +1,27 @@ -import * as React from 'react'; +import * as React from "react"; import { Link, Navigate } from "react-router-dom"; import { useAppDispatch, useAppSelector } from "../../utils/hooks"; import { login } from "../../actions/auth"; -import Avatar from '@mui/material/Avatar'; -import Button from '@mui/material/Button'; -import CssBaseline from '@mui/material/CssBaseline'; -import TextField from '@mui/material/TextField'; -import Box from '@mui/material/Box'; -import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; -import Typography from '@mui/material/Typography'; -import Container from '@mui/material/Container'; +import Avatar from "@mui/material/Avatar"; +import Button from "@mui/material/Button"; +import TextField from "@mui/material/TextField"; +import Box from "@mui/material/Box"; +import LockOutlinedIcon from "@mui/icons-material/LockOutlined"; +import Typography from "@mui/material/Typography"; +import Container from "@mui/material/Container"; export default function Login() { - const dispatch = useAppDispatch(); const isAuthenticated = useAppSelector((state) => state.auth.isAuthenticated); const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget); - const email = data.get('email') as string - const password = data.get('pasword') as string - if (email && password) - dispatch(login(email, password)); + const email = data.get("email") as string; + const password = data.get("password") as string; + if (email && password) dispatch(login(email, password)); }; if (isAuthenticated) { @@ -33,16 +30,15 @@ export default function Login() { return ( - - + @@ -78,8 +74,10 @@ export default function Login() { LOG IN + + Don't have an account? Sign Up + -

Don't have an account? Sign Up

 ); } diff --git a/client/src/components/auth/Register.tsx b/client/src/components/auth/Register.tsx index 556323d..9e7f72b 100755 --- a/client/src/components/auth/Register.tsx +++ b/client/src/components/auth/Register.tsx @@ -3,17 +3,15 @@ import { Navigate, Link } from "react-router-dom"; import { createAlert } from "../../actions/alert"; import { register } from "../../actions/auth"; -import * as React from 'react'; -import Avatar from '@mui/material/Avatar'; -import Button from '@mui/material/Button'; -import CssBaseline from '@mui/material/CssBaseline'; -import TextField from '@mui/material/TextField'; -import Grid from '@mui/material/Grid'; -import Box from '@mui/material/Box'; -import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; -import Typography from '@mui/material/Typography'; -import Container from '@mui/material/Container'; - +import * as React from "react"; +import Avatar from "@mui/material/Avatar"; +import Button from "@mui/material/Button"; +import TextField from "@mui/material/TextField"; +import Grid from "@mui/material/Grid"; +import Box from "@mui/material/Box"; +import LockOutlinedIcon from "@mui/icons-material/LockOutlined"; +import Typography from "@mui/material/Typography"; +import Container from "@mui/material/Container"; export default function SignUp() { const isAuthenticated = useAppSelector((state) => state.auth.isAuthenticated); @@ -23,14 +21,13 @@ export default function SignUp() { const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget); - const password = data.get('password') as string - const password2 = data.get('password') as string - const email = data.get('email') as string - const name = data.get('name') as string + const password = data.get("password") as string; + const password2 = data.get("password") as string; + const email = data.get("email") as string; + const name = data.get("name") as string; if (password !== password2) { dispatch(createAlert("Passwords do not match", "danger")); } else { - console.log(name,email, password) dispatch(register({ name, email, password })); } }; @@ -41,16 +38,15 @@ export default function SignUp() { return ( - - + @@ -108,10 +104,7 @@ export default function SignUp() { - Already have an account?{' '} - - Sign in - + Already have an account? Sign in diff --git a/client/src/components/dashboard/Dashboard.tsx b/client/src/components/dashboard/Dashboard.tsx index 06b8b61..33dcf36 100755 --- a/client/src/components/dashboard/Dashboard.tsx +++ b/client/src/components/dashboard/Dashboard.tsx @@ -5,7 +5,7 @@ import DashboardActions from "./DashboardActions"; import Experience from "./Experience"; import Education from "./Education"; import { getCurrentProfile, deleteAccount } from "../../actions/profile"; -import { Box, Typography } from "@mui/material"; +import { Box, Button, Typography } from "@mui/material"; const Dashboard = () => { const dispatch = useAppDispatch(); @@ -18,30 +18,44 @@ const Dashboard = () => { const user = useAppSelector((state) => state.auth.user); const profile = useAppSelector((state) => state.profile.profile); return ( - - Dashboard - Welcome {user && user.name} + + + Dashboard{" "} + + + Welcome {user && user.name} + {profile !== null ? ( <> - -
- -
+ Delete My Account + + ) : ( <> - You have not yet setup a profile, please add some info - + + You have not yet setup a profile, please add some info + + )} diff --git a/client/src/components/dashboard/DashboardActions.tsx b/client/src/components/dashboard/DashboardActions.tsx index a092e9d..2146839 100755 --- a/client/src/components/dashboard/DashboardActions.tsx +++ b/client/src/components/dashboard/DashboardActions.tsx @@ -1,19 +1,35 @@ +import { Box, Button } from "@mui/material"; import React from "react"; import { Link } from "react-router-dom"; const DashboardActions = () => { return ( -
- - Edit Profile - - - Add Experience - - - Add Education - -
+ + + + + ); }; diff --git a/client/src/components/dashboard/Education.tsx b/client/src/components/dashboard/Education.tsx index 3c58a45..0919ff0 100755 --- a/client/src/components/dashboard/Education.tsx +++ b/client/src/components/dashboard/Education.tsx @@ -3,6 +3,7 @@ import { deleteEducation } from "../../actions/profile"; import formatDate from "../../utils/formatDate"; import { EducationType } from "../../types"; import { useAppDispatch } from "../../utils/hooks"; +import { Box, Typography } from "@mui/material"; const Education = ({ education }: { education: EducationType[] }) => { const dispatch = useAppDispatch(); @@ -24,9 +25,17 @@ const Education = ({ education }: { education: EducationType[] }) => { )); + if (education.length === 0) + return ( + + + You have no education added to your profile, consider adding some. + + + ); return ( - -

Education Credentials

+ <> + Education Credentials @@ -38,7 +47,7 @@ const Education = ({ education }: { education: EducationType[] }) => { {educations}
- + ); }; diff --git a/client/src/components/dashboard/Experience.tsx b/client/src/components/dashboard/Experience.tsx index e6324c7..2f17ef7 100755 --- a/client/src/components/dashboard/Experience.tsx +++ b/client/src/components/dashboard/Experience.tsx @@ -1,4 +1,5 @@ -import React, { Fragment } from "react"; +import { Typography } from "@mui/material"; +import React from "react"; import { deleteExperience } from "../../actions/profile"; import { ExperienceType } from "../../types"; import formatDate from "../../utils/formatDate"; @@ -24,8 +25,13 @@ const Experience = ({ experience }: { experience: ExperienceType[] }) => { )); + if (experiences.length === 0) + return ( + You have no experiences, consider adding some. + ); + return ( - + <>

Experience Credentials

@@ -38,7 +44,7 @@ const Experience = ({ experience }: { experience: ExperienceType[] }) => { {experiences}
- + ); }; diff --git a/client/src/components/layout/Landing.tsx b/client/src/components/layout/Landing.tsx index a211499..88471eb 100755 --- a/client/src/components/layout/Landing.tsx +++ b/client/src/components/layout/Landing.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import { Box, Button, Typography } from "@mui/material"; import { Link, Navigate } from "react-router-dom"; import { useAppSelector } from "../../utils/hooks"; @@ -9,25 +9,38 @@ const Landing = () => { } return ( -
-
-
-

Developer Connector

-

- Create a developer profile/portfolio, share posts and get help from - other developers -

-
- - Sign Up - - - Login - -
-
-
-
+ + Developer Connector + + Create a developer profile/portfolio, share posts and get help from + other developers + + + + + + ); }; diff --git a/client/src/components/layout/Navbar.tsx b/client/src/components/layout/Navbar.tsx index 8f805c6..714ae25 100755 --- a/client/src/components/layout/Navbar.tsx +++ b/client/src/components/layout/Navbar.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React from "react"; import { Link } from "react-router-dom"; import { logOut } from "../../reducers/auth"; import { useAppDispatch, useAppSelector } from "../../utils/hooks"; @@ -15,14 +15,14 @@ import MenuItem from "@mui/material/MenuItem"; import MenuIcon from "@mui/icons-material/Menu"; import AdbIcon from "@mui/icons-material/Adb"; -const linkStyle = { color: 'inherit', textDecoration: 'none' } +const linkStyle = { color: "inherit", textDecoration: "none" }; const Navbar = () => { const isAuthenticated = useAppSelector((state) => state.auth.isAuthenticated); const dispatch = useAppDispatch(); const [anchorElNav, setAnchorElNav] = React.useState( - null, + null ); const handleOpenNavMenu = (event: React.MouseEvent) => { setAnchorElNav(event.currentTarget); @@ -30,74 +30,39 @@ const Navbar = () => { const handleCloseNavMenu = () => { setAnchorElNav(null); }; - - const authLinksSmall = [ - ( - Developers - ), - ( - Posts - ), - ( - Profile - ), - ( - dispatch(logOut())} href="#!"> - Logout - - )] - const guestLinksSmall = [ - ( - - Developers - ), - ( - Register - ), - ( - Login - )] - const authLinksBig = [ - (), - (), - ( - ), ( - )] - - const guestLinksBig = [ - (), - (), - () + const authLinks = [ + { + id: 1, + to: "/profiles", + message: "Developers", + }, + { + id: 2, + to: "/posts", + message: "Posts", + }, + { + id: 3, + to: "/dashboard", + message: "Profile", + }, + ]; + const guestLinks = [ + { + id: 1, + to: "/profiles", + message: "Developers", + }, + { + id: 2, + to: "/register", + message: "Register", + }, + { + id: 3, + to: "/login", + message: "Login", + }, ]; return ( @@ -110,7 +75,6 @@ const Navbar = () => { { color: "inherit", textDecoration: "none", }} + component={Link} + to="/posts" > - DevConnect + DevConnect {/* Small display menu*/} { display: { xs: "block", md: "none" }, }} > - {isAuthenticated ? authLinksSmall.map(el => el) : guestLinksSmall.map(el => el)} + {isAuthenticated ? ( + <> + {" "} + {authLinks.map((el) => ( + + {el.message} + + ))} + + dispatch(logOut())} + href="#!" + > + Logout + + + , + + ) : ( + guestLinks.map((el) => ( + + {el.message} + + )) + )} {/* Icon for small display */} @@ -180,11 +181,45 @@ const Navbar = () => { textDecoration: "none", }} > - DevConnect + + DevConnect + {/* Menu bar for big display*/} - {isAuthenticated ? authLinksBig.map(el => el) : guestLinksBig.map(el => el)} + {isAuthenticated ? ( + <> + {authLinks.map((el) => ( + + ))} + + + ) : ( + guestLinks.map((el) => ( + + )) + )} diff --git a/client/src/components/post/CommentForm.tsx b/client/src/components/post/CommentForm.tsx index d38d69b..898005e 100755 --- a/client/src/components/post/CommentForm.tsx +++ b/client/src/components/post/CommentForm.tsx @@ -1,3 +1,4 @@ +import { Box, Button, Container, TextField, Typography } from "@mui/material"; import React, { useState } from "react"; import { addComment } from "../../actions/post"; import { useAppDispatch } from "../../utils/hooks"; @@ -7,30 +8,32 @@ const CommentForm = ({ postId }: { postId: string }) => { const dispatch = useAppDispatch(); return ( -
-
-

Leave a Comment

-
-
+ Leave a Comment + { e.preventDefault(); await dispatch(addComment(postId, { text })); setText(""); }} > -