From 738582342acd70ff94740d383ab685cc3bfb3f75 Mon Sep 17 00:00:00 2001 From: hoseacodes Date: Tue, 9 Jul 2024 09:47:07 -0500 Subject: [PATCH] fix(*): update profile edit page --- src/Pages/User/update.css | 119 +++++++++++++++++++++ src/Pages/User/update.jsx | 210 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 329 insertions(+) create mode 100644 src/Pages/User/update.css create mode 100644 src/Pages/User/update.jsx diff --git a/src/Pages/User/update.css b/src/Pages/User/update.css new file mode 100644 index 0000000..3e97e36 --- /dev/null +++ b/src/Pages/User/update.css @@ -0,0 +1,119 @@ +.update { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 999; +} + +.update .wrapper { + margin: auto; + width: 40%; + height: 70%; + background-color: #fff; /* Replace with the actual background color */ + padding: 50px; + z-index: 999; + display: flex; + flex-direction: column; + gap: 20px; + box-shadow: 0px 0px 15px 1px rgba(0, 0, 0, 0.09); + position: relative; + overflow: auto; +} + +@media (max-width: 768px) { + .update .wrapper { + width: 100%; + height: 100%; + } + + .update .wrapper h1 { + font-size: 20px; + } +} + +.update .wrapper h1 { + color: lightgrey; +} + +.update .wrapper form { + display: flex; + flex-direction: column; + gap: 20px; +} + +.update .wrapper form .files { + display: flex; + flex-wrap: wrap; + gap: 50px; +} + +.update .wrapper form label { + display: flex; + flex-direction: column; + gap: 10px; + color: gray; + font-size: 14px; +} + +.imageContainer { + align-items: center; + display: flex; + justify-content: center; + flex-direction: column; + gap: inherit; +} + +.update .wrapper form label .imageContainer { + position: relative; +} + +.update .wrapper form label .imageContainer img { + width: 100px; + height: 100px; + object-fit: cover; +} + +.update .wrapper form label .imageContainer .icon { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + font-size: 30px; + color: lightgray; + cursor: pointer; +} + +.update .wrapper form input { + padding: 5px; + border: none; + border-bottom: 1px solid #ccc; /* Replace with the actual border color */ + color: gray; + background-color: transparent; +} + +.update .wrapper form button { + border: none; + padding: 10px; + cursor: pointer; + color: white; + background-color: #5271ff; +} + +.update .wrapper .close { + position: absolute; + top: 10px; + right: 20px; + border: none; + background-color: #f0544f; + padding: 5px; + cursor: pointer; + color: white; +} diff --git a/src/Pages/User/update.jsx b/src/Pages/User/update.jsx new file mode 100644 index 0000000..f94861c --- /dev/null +++ b/src/Pages/User/update.jsx @@ -0,0 +1,210 @@ +import React, { useState, useRef, useContext } from "react"; +import "./update.css"; +// import { useMutation, useQueryClient } from "@tanstack/react-query"; +import { IoCloudUploadOutline } from "react-icons/io5"; +import { Button } from "../../Components/Button/Button"; +import axios from "axios"; +import { GlobalState } from "../../GlobalState"; + +const Update = ({ setOpenUpdate, user }) => { + const state = useContext(GlobalState); + const [token] = state.token; + const [cover, setCover] = useState(null); + const [profile, setProfile] = useState({ + email: user.email, + password: user.password, + name: user.name, + city: user.city, + website: user.website, + }); + const fileInputRef = useRef(null); + const coverInputRef = useRef(null); + const handleFileClick = (ref) => { + ref.current.click(); + }; + const [loading, setLoading] = useState(false); + const [avatar, setAvatar] = useState(user.avatar); + + + const handleUpload = async (e, imageType) => { + e.preventDefault(); + try { + const file = e.target.files[0]; + if (!file) return alert("File not exist"); + if (file.size > 1024 * 1024) return alert("Size too large"); + if (file.type !== "image/jpeg" && file.type !== "image/png") + return alert("File format is incorrect"); + + const formData = new FormData(); + formData.append("file", file); + + setLoading(true); + + if (token) { + const res = await axios.post("/api/upload", formData, { + headers: { "content-type": "multipart/form-data", Authorization: token }, + }); + setLoading(false); + if (imageType === "cover") { + setCover(res.data.result.secure_url); + } else { + setAvatar(res.data.result); + } + } + } catch (err) { + alert(err.response.data.msg); + } + }; + + const handleDestory = async () => { + try { + setLoading(true); + await axios.post("/api/destroy", { public_id: avatar.public_id }); + setLoading(false); + setAvatar(""); + history.push("/profile"); + } catch (err) { + alert(err.response.data.msg); + } + }; + + const handleChange = (e) => { + // setTexts((prev) => ({ ...prev, [e.target.name]: [e.target.value] })); + const { name, value } = e.target; + setProfile((prev) => ({ ...prev, [name]: value })); + }; + + const handleSubmit = async (e) => { + console.log("clicks"); + console.log("submit profile", ...profile, avatar); + e.preventDefault(); + try { + console.log("submit profile", ...profile, avatar); + if (!avatar || !cover) return alert("No Image Upload") + await axios.put(`/api/user/${user._id}`, { ...profile, avatar, cover }) + setOpenUpdate(false); + setCover(null); + setProfile(null); + } catch (err) { + console.log("error"); + console.log(err); + alert(err); + } + }; + + console.log("user", profile, cover, avatar); + + return ( +
+
+

Update Your Profile

+
+
+ + +
+ + + + + + + + + + + +
+ +
+
+ ); +}; + +export default Update;