<pre>import React, { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { v4 } from "uuid"; import { auth, database } from "./firebase"; import "./Home.css"; import bigProfileImg from "./icons/account-circle-line.svg"; import Modal from "./Modal.js"; import Navbar from "./Navbar"; import dogPost1 from "./Photos/dog-img-1.jpg"; import dogPost2 from "./Photos/dog-img-2.jpg"; import dogPost3 from "./Photos/dog-img-3.jpg"; import dogPost4 from "./Photos/dog-img-4.jpg"; import dogPost5 from "./Photos/dog-img-5.jpg"; import dogPost6 from "./Photos/dog-img-6.jpg"; import { onValue } from "firebase/database"; import { ref as myRef } from "firebase/storage"; import settingsImg from "./icons/settings-line.svg"; import reelsImg from "./Photos/reels-icon.webp"; function Profile() { const [users, setUsers] = useState([]); const navigate = useNavigate(); const [usernameValue, setUsernameValue] = useState(""); const [bioValue, setBioValue] = useState(""); const [nameValue, setNameValue] = useState(""); const [phoneNumberValue, setPhoneNumberValue] = useState(""); useEffect(() => { auth.onAuthStateChanged((user) => { user ? navigate("/") : navigate("/login"); }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { onValue(myRef(database, "/users/devcontractoruhkgmailcom/"), (snapshot) => { console.log(snapshot.val()); }); }); const [openModal, setOpenModal] = useState(false); function hidden() { if (document.getElementById("hidden").style.visibility === "visible") { document.getElementById("hidden").style.visibility = "hidden"; document.getElementById("move").style.marginLeft = "59.8%"; document.getElementById("visible-content").style.visibility = "visible"; } else { document.getElementById("hidden").style.visibility = "visible"; document.getElementById("move").style.marginLeft = "36.65%"; document.getElementById("visible-content").style.visibility = "hidden"; } } return ( <> <Navbar /> <div className="top_left_img"> <img className="profile-img" src={bigProfileImg} alt="" /> </div> <div className="top_mid_user-details"> <div className="username_settings"> {} <img onClick={() => { setOpenModal(true); }} className="settings_icon" src={settingsImg} alt="" /> </div> <br /> <div className="post_follower_following_counter"> <div className="post-counter">0 posts</div> <div className="follower-counter">0 followers</div>; <div className="following-counter">0 following</div> </div> <div className="name_description"> {users.map((user) => { return ( <p key={v4()} className="name"> {user.name} </p> ); })} {users.map((user) => { return ( <p key={v4()} className="description"> {user.description} </p> ); })} </div> </div> <div className="line1"></div> <br /> <div className="line2" id="move"></div> <div className="nav2"> <div className="nav2_post" onClick={hidden}> <div className="nav2_post-icon"> <div className="box-1"></div> <div className="box-2"></div> <div className="box-3"></div> <div className="box-4"></div> <div className="box-5"></div> <div className="box-6"></div> <div className="box-7"></div> <div className="box-8"></div> <div className="box-9"></div> </div> POSTS </div> <div className="nav2_reels" onClick={hidden}> <img className="nav2_reels-icon" src={reelsImg} alt="" /> REELS </div> </div> <div className="all_user_posts" id="hidden"> <div className="post"> <img className="post-1" src={dogPost1} alt="" /> </div> <div className="post"> <img className="post-2" src={dogPost2} alt="" /> </div> <div className="post"> <img className="post-3" src={dogPost3} alt="" /> </div> <div className="post"> <img className="post-4" src={dogPost4} alt="" /> </div> <div className="post"> <img className="post-5" src={dogPost5} alt="" /> </div> <div className="post"> <img className="post-6" src={dogPost6} alt="" /> </div> </div> <div className="all_user_reels" id="visible-content"> <img className="reels-icon-2" src={reelsImg} alt="" /> <p> No reels has been uploaded here!</p> </div> {openModal && <Modal closeModal={setOpenModal} />} </> ); } export default Profile;
undefined
path
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)