BackEnd-EditProfile-ahmed

client/src/App.js

@@ -9,7 +9,7 @@ import {
 import { toast } from "react-toastify";
 import About from "./components/About/About";
 import Contact from "./components/Contact/Contact";
-import Home from "./pages/Home";
+import Home from "./components/HomePage/Home";
 import Login from "./components/Sign-In/SignIn";
 import Register from "./components/Sign-Up/SignUp";
 import Head from "./components/Dashboard/Dashboard";

client/src/components/EditProfile/EditProfile.css

@@ -1,3 +1,12 @@
+.epcontainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  /* height: 100vh; */
+  background-color: #f8f9fa;
+  margin-bottom: 7rem;
+}
 .signup-page {
   display: flex;
   flex-direction: column;

client/src/components/EditProfile/EditProfile.js

@@ -1,8 +1,146 @@
-import React from "react";
+import React, { useState } from "react";
+import { toast } from "react-toastify";
+import { UploadOutlined } from "@ant-design/icons";
+import { Button, message, Upload } from "antd";
 import "./EditProfile.css";
+const props = {
+	name: "file",
+	action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
+	headers: {
+ authorization: "authorization-text",
+	},
+	onChange(info) {
+	if (info.file.status !== "uploading") {
+		console.log(info.file, info.fileList);
+	}
+	if (info.file.status === "done") {
+		message.success(`${info.file.name} file uploaded successfully`);
+ } else if (info.file.status === "error") {
+		message.error(`${info.file.name} file upload failed.`);
+ }
+	},
+  };
+const EditProfile = ({ setAuth }) => {
+	const [inputs, setInputs] = useState({
+		firstname: "",
+		secondname: "",
+		email: "",
+		language_speak: "",
+		language_interest: "",
+		city: "",
+		country: "",
+	});
+	const {
+		firstname,
+		secondname,
+		email,
+		language_speak,
+		language_interest,
+		city,
+		country,
+	} = inputs;
+	const onChange = (e) =>
+		setInputs({ ...inputs, [e.target.name]: e.target.value });
+		const onSubmitForm = async (e) => {
+			e.preventDefault();
+			try {
+				const body = {
+					firstname,
+					secondname,
+					email,
+					language_speak,
+					language_interest,
+					city,
+					country,
+				};
+				const response = await fetch("/api/dashboard/update/${user.id}", {
+					method: "PUT",
+					headers: {
+						"Content-type": "application/json",
+					},
+					body: JSON.stringify(body),
+				});
+				const parseRes = await response.json();
+				if (parseRes.jwtToken) {
+					localStorage.setItem("token", parseRes.jwtToken);
+					setAuth(true);
+					toast.success("Edit Successfully");
+				} else {
+					setAuth(false);
+					toast.error(parseRes);
+				}
+			} catch (err) {
+				console.error(err.message);
+			}
+		};
+	return <div className="epcontainer">
 
-const EditProfile = () => {
-	return <div>Edit Profile</div>;
+<h1 className="mt-5 text-center">Edit Profile</h1>
+			<form className="col-md-4" onSubmit={onSubmitForm}>
+				<input
+					type="text"
+					name="firstname"
+					value={firstname}
+					placeholder="first name"
+					onChange={(e) => onChange(e)}
+					className="form-control my-3"
+				/>
+				<input
+					type="text"
+					name="secondname"
+					value={secondname}
+					placeholder="last name"
+					onChange={(e) => onChange(e)}
+					className="form-control my-3"
+				/>
+				<input
+					type="text"
+					name="email"
+					value={email}
+					placeholder="email"
+					onChange={(e) => onChange(e)}
+					className="form-control my-3"
+				/>
+
+				<input
+					type="text"
+					name="language_speak"
+					value={language_speak}
+					placeholder="language I speak"
+					onChange={(e) => onChange(e)}
+					className="form-control my-3"
+				/>
+				<input
+					type="text"
+					name="language_interest"
+					value={language_interest}
+					placeholder="language of interest"
+					onChange={(e) => onChange(e)}
+					className="form-control my-3"
+				/>
+				<input
+					type="text"
+					name="city"
+					value={city}
+					placeholder="city"
+					onChange={(e) => onChange(e)}
+					className="form-control my-3"
+				/>
+				<input
+					type="text"
+					name="country"
+					value={country}
+					placeholder="country"
+					onChange={(e) => onChange(e)}
+					className="form-control my-3"
+				/>
+				 <Upload {...props}>
+    <Button icon={<UploadOutlined />}>Upload Your Profile Image</Button>
+  </Upload>
+
+				<button className="btn btn-success btn-block">Edit Profile</button>
+			</form>
+	</div>;
 };
 
 export default EditProfile;

client/src/pages/Home.js → client/src/components/HomePage/Home.js

@@ -1,4 +1,4 @@
-import Hero from "../components/HomePage/Hero/Hero";
+import Hero from "./Hero/Hero";
 //import NavBar from "../components/HomePage/NavBar/NavBar";
 import "./Home.css";
 export function Home() {

client/src/components/profile/Profile.js

@@ -44,11 +44,8 @@ const Profile = () => {
 						</h3>
 						<br />
 						<div className="bt-profile">
-							<Link to="/" className="btn-light">
-								Follow
-							</Link>
-							<Link to="/" className="btn-light">
-								Chat
+							<Link to="/editProfile" className="btn-light">
+								Edit Profile
 							</Link>
 						</div>
 					</div>

client/src/components/profile/ProfileStyle.css

@@ -25,7 +25,8 @@ header {
   .bt-profile{
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content:center;
+
   }
   .profile-header img {
     width: 150px;

client/src/index.html

@@ -9,7 +9,7 @@
 			integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
 			crossorigin="anonymous"
 		/>
-		<title>Starter Kit</title>
+		<title>Languages Exchange</title>
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>

server/routerAuth/dashboard.js

@@ -98,17 +98,11 @@ router.post("/create_events", async (req, res) => {
 // });
 
 //💫💫💫💫💫💫
-router.put("/update/:userId", async (req, res) => {
-	const { userId } = req.params;
-	const {
-		user_firstname,
-		user_secondname,
-		user_email,
-		user_language_speak,
-		user_language_interest,
-		user_city,
-		user_country,
-	} = req.body;
+router.put("/update", async (req, res) => {
+
+	res.send("Hi I'm ahmed");
+
+});
 
 router.post("/send-message", authorize, async (req, res) => {
 	try {
@@ -142,7 +136,7 @@ router.post("/send-message", authorize, async (req, res) => {
 		res.status(500).send("Server error");
 	}
 });
-});
+
 
 
 module.exports = router;