import React, { useEffect, useState } from "react"; import { useSelector } from "react-redux"; import { Link, useNavigate } from "react-router-dom"; import usersService from "../../../services/UsersService"; import Icons from "../../Helpers/Icons"; import InputCom from "../../Helpers/Inputs/InputCom"; import LoadingSpinner from "../../Spinners/LoadingSpinner"; import { toast } from "react-toastify"; import { Form, Formik } from "formik"; import * as Yup from "yup"; const validationSchema = Yup.object().shape({ email: Yup.string() .email("Wrong email format") .min(3, "Minimum 3 characters") .max(50, "Maximum 50 characters") .required("Email is required"), firstname: Yup.string() .min(3, "Minimum 3 characters") .max(25, "Maximum 25 characters") .required("Firstname is required"), lastname: Yup.string() .min(3, "Minimum 3 characters") .max(25, "Maximum 25 characters") .required("Lastname is required"), city: Yup.string() .min(3, "Minimum 3 characters") .max(25, "Maximum 25 characters") .required("City is required"), state: Yup.string() .min(3, "Minimum 3 characters") .max(25, "Maximum 25 characters") .required("State is required"), }); export default function PersonalInfoTab({ datas, frstNmeHndlr, lstNmeHndlr, dscrphn, profileImg, coverImg, profileImgInput, browseProfileImg, profileImgChangHandler, coverImgInput, browseCoverImg, coverImgChangHandler, }) { let { userDetails } = useSelector((state) => state.userDetails); const apiCall = new usersService(); let navigate = useNavigate(); let [togglePromotion, setTogglePromotion] = useState(false); const initialValues = { firstname: userDetails?.firstname, lastname: userDetails?.lastname, state: userDetails?.state, city: userDetails?.city, email: userDetails?.email, }; let [profile, setProfile] = useState({ // state for requesting from load profile API loading: true, status: false, }); let [requestStatus, setRequestState] = useState({ // state for requesting from update api message: "", loading: false, status: false, }); const handleUpdateUser = (values, helpers) => { setRequestState({ message: "", loading: true, status: false }); apiCall .updateProfile(values) .then((res) => { // API CALL TO UPDATE USER DETAILS if (res.data.internal_return < 0) { setRequestState({ message: "Profile Was unable to update", loading: false, status: false, }); return; } // setRequestState({message: 'Profile update successfully', loading: false, status: true}) toast.success("Update Successful"); setTimeout(() => { navigate("/", { replace: true }); window.location.reload(true); }, 1000); }) .catch((error) => { setRequestState({ message: "Opps! an error occurred. Try Agian", loading: false, status: false, }); }); }; useEffect(() => { setProfile({ loading: false, status: true }); }, []); return profile.loading ? (
) : (
{(props) => { return (
{/* inputs starts here */} {/* username */}
{/* Email */}
{props.errors.email && props.touched.email && (

{props.errors.email}

)}
{/* first name and last name */}
{props.errors.firstname && props.touched.firstname && (

{props.errors.firstname}

)}
{props.errors.lastname && props.touched.lastname && (

{props.errors.lastname}

)}
{/* Country */}
{/* State/Province */}
{props.errors.state && props.touched.state && (

{props.errors.state}

)}
{/* City */}
{props.errors.city && props.touched.city && (

{props.errors.city}

)}
{/* Preferred Communication*/}
Email
Phone
{/* Allow Promotions */}
setTogglePromotion((prev) => !prev)} >
{/* inputs ends here */}

Update Profile

Profile of at least Size 300x300 . Gifs work too. Max 5mb .

profileImgChangHandler(e)} type="file" className="hidden" />
{requestStatus.message != "" && (

{requestStatus.message}

)}
{" "} Cancel {requestStatus.loading ? ( ) : ( )}
); }}
); }