Untitled
/** @format */ import React, { useState } from "react"; import "./ProfileAboutPage.css"; import { useParams, useNavigate } from "react-router-dom"; import { useTranslation } from "react-i18next"; import Layout from "../../../layouts/main-layout.component"; import { AiOutlineGlobal } from "react-icons/ai"; import { FaUserFriends } from "react-icons/fa"; import { useSelector, useDispatch } from "react-redux"; import { selectToken, selectUser, selectFollowing, } from "../../../redux/_user/userSelectors"; import { setPageType } from "../../../redux/_page/pageSlice"; import { fetchProfileDetails } from "../../../redux/_user/userSlice"; import { FaRegUserCircle } from "react-icons/fa"; import { FaLock } from "react-icons/fa"; import { MdOutlineAlternateEmail, MdOutlineEmail, MdOutlineLocationOn, } from "react-icons/md"; import { GoPencil } from "react-icons/go"; import { IoCallOutline } from "react-icons/io5"; import { RiShieldUserLine } from "react-icons/ri"; import { BsGenderAmbiguous } from "react-icons/bs"; import { IoIosLink } from "react-icons/io"; import { MdOutlineDateRange, MdOutlinePrivacyTip } from "react-icons/md"; import AlertDialog from "../../../components/AlertDialog/AlertDialog"; const About = () => { const navigate = useNavigate(); const { handleUn } = useParams(); const dispatch = useDispatch(); const token = useSelector(selectToken); const user = useSelector(selectUser); const userFollowing = useSelector(selectFollowing); const { t } = useTranslation(["common"]); const [profile, setProfile] = useState(null); const [isLoading, setIsLoading] = useState(false); React.useLayoutEffect(() => { dispatch(setPageType("profile_about")); }, []); const fetchData = async () => { setIsLoading(true); const data = { handleUn, token }; const result = await dispatch(fetchProfileDetails(data)); console.log("profile about::-", result); setProfile(result); setIsLoading(false); }; // *** Fetch user details React.useEffect(() => { fetchData(); }, [handleUn]); const transformData = (data) => { return Object.entries(data) .filter(([key, value]) => key !== "Add Website Link") // Skip "Add Website Link" .map(([key, value]) => { return { name: key.replace("website-", "Website-"), // Format the name link: value, // Assign the link value }; }); }; const visibilityIconMapper = { Public: <AiOutlineGlobal className="visibility_icon" />, Followers: <FaUserFriends className="visibility_icon" />, "Only me": <FaLock className="visibility_icon" />, }; return ( <Layout title="Profile Information"> <div className="profile_info_page"> {isLoading ? ( <>Loading</> ) : ( <> {profile ? ( <> <div className="profile_info"> <div className="profile_info_header"> <h3>{t("Basic Account Info")}</h3> <button onClick={() => navigate("/profile/update/user18#profile_settings") } className="info_edit_btn" > <GoPencil className="edit_icon" /> </button> </div> <ul className="info_list"> <li> <div className="info_n_icon-wrapper"> <FaRegUserCircle className="info_icon" /> <div> <h5>{profile.fn + " " + profile.ln}</h5> <p className="info_title">{t("Full Name")}</p> </div> </div> </li> <li> <div className="info_n_icon-wrapper"> <MdOutlineAlternateEmail className="info_icon" /> <div> <h5>{profile.handleUn}</h5> <p className="info_title">{t("Handle Name")}</p> </div> </div> </li> <li> <div className="info_n_icon-wrapper"> <MdOutlineEmail className="info_icon" /> <div> <h5>{profile.email}</h5> <p className="info_title">{t("Email")}</p> <p> {visibilityIconMapper[profile?.emailPrivacy]} <span>{profile?.emailPrivacy}</span> </p> </div> </div> </li> {profile.mobile && ( <li> <div className="info_n_icon-wrapper"> <IoCallOutline className="info_icon" /> <div> <h5>{profile.mobile}</h5> <p className="info_title">{t("Mobile")}</p> <p> {visibilityIconMapper[profile?.phNoPrivacy]} <span>{profile?.phNoPrivacy}</span> </p> </div> </div> </li> )} </ul> </div> <div className="profile_info"> <div className="profile_info_header"> <h3>{t("About")}</h3> <button onClick={() => navigate("/profile/update/user18#profile_settings") } className="info_edit_btn" > <GoPencil className="edit_icon" /> </button> </div> <ul className="info_list"> {profile.p_bio && ( <li> <div className="info_n_icon-wrapper"> <RiShieldUserLine className="info_icon" /> <div> <h5> {profile.p_bio || "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet."} </h5> <p className="info_title">{t("Bio")}</p> <p> {visibilityIconMapper[profile?.bioPrivacy]} <span>{profile?.bioPrivacy}</span> </p> </div> </div> </li> )} {profile.gen && ( <li> <div className="info_n_icon-wrapper"> <BsGenderAmbiguous className="info_icon" /> <div> <h5>{profile.gen || "Male"}</h5> <p className="info_title">{t("Gender")}</p> <p> {visibilityIconMapper[profile?.genderPrivacy]} <span>{profile?.genderPrivacy}</span> </p> </div> </div> </li> )} {profile.country && ( <li> <div className="info_n_icon-wrapper"> <MdOutlineLocationOn className="info_icon" /> <div> <h5>{profile.country}</h5> <p className="info_title">{t("Country")}</p> <p> {visibilityIconMapper[profile?.countryPrivacy]} <span>{profile?.countryPrivacy}</span> </p> </div> </div> </li> )} {profile.dob && ( <li> <div className="info_n_icon-wrapper"> <MdOutlineDateRange className="info_icon" /> <div> <h5>{profile.dob || "14 Nov"}</h5> <p className="info_title">{t("DOB")}</p> <p> {visibilityIconMapper[profile?.dobPrivacy]} <span>{profile?.dobPrivacy}</span> </p> </div> </div> </li> )} </ul> </div> <div className="profile_info"> <div className="profile_info_header"> <h3>{t("Websites")}</h3> <button onClick={() => navigate("/profile/update/user18#profile_settings") } className="info_edit_btn" > <GoPencil className="edit_icon" /> </button> </div> <ul className="info_list"> {transformData(profile.website_links).map((e) => ( <li> <div className="info_n_icon-wrapper"> <IoIosLink className="info_icon" /> <div> <h5>{e.link}</h5> <p> {visibilityIconMapper[profile?.websitePrivacy]} <span>{profile?.websitePrivacy}</span> </p> </div> </div> </li> ))} </ul> </div> </> ) : ( <div className="empty_profile_about"> {t("No user details found")} </div> )} </> )} </div> </Layout> ); }; export default About;
Leave a Comment