Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 9f7c8652 by Ravindra Kanojiya
Options

conflict merge

2 parents b95b2a68 0c9229e2
Inline Side-by-side
Showing 1 changed file with 459 additions and 370 deletions
components/user/MyProfile.js
import { Field, Formik } from "formik"; import { Field, Formik } from 'formik';
import Image from "next/image"; import Image from 'next/image';
import React, { Fragment, useEffect, useRef, useState } from "react"; import React, { Fragment, useEffect, useRef, useState } from 'react';
import { Button, Form, Table } from "react-bootstrap"; import { Button, Form, Table } from 'react-bootstrap';
import * as Yup from "yup"; import * as Yup from "yup";
import { renderImage } from "../../services/imageHandling"; import { renderImage } from '../../services/imageHandling';
import { useSelector } from 'react-redux';
const MyProfile = () => { const MyProfile = () => {
let formikUploadImage; let formikUploadImage;
const [readOnly, setReadOnly] = useState(true); const [readOnly, setReadOnly] = useState(true);
const { endUser } = useSelector(state => state.endUser);
console.log("users info", endUser);
const profileValidationSchema = Yup.object().shape({
first_name: Yup.string()
.required("First Name is Required"),
last_name: Yup.string()
.required("Last Name is Required"),
email: Yup.string()
.required("Email Id is Required")
.email("Please Enter An Valid Email Id"),
country_code: Yup.string()
.required("Country Code is Required"),
mobile: Yup.string()
.required("Mobile Number is Required")
.matches(/^[0-9\s]+$/, "Please Enter Correct Mobile No."),
password: Yup.string()
});
const profileValidationSchema = Yup.object().shape({ const addressesValidationSchema = Yup.object().shape({
first_name: Yup.string().required("First Name is Required"), addresses: Yup.array().of(
last_name: Yup.string().required("Last Name is Required"), Yup.object().shape({
email: Yup.string().required("Email Id is Required").email("Please Enter An Valid Email Id"), pincode: Yup.string().required('Pincode is required'),
country_code: Yup.string().required("Country Code is Required"), country: Yup.string().required('Country is required'),
mobile: Yup.string() state: Yup.string().required('State is required'),
.required("Mobile Number is Required") city: Yup.string().required('City is required'),
.matches(/^[0-9\s]+$/, "Please Enter Correct Mobile No."), addressLine1: Yup.string().required('Address Line1 is required'),
password: Yup.string() addressLine2: Yup.string().required('Adrress Line2 is required')
}); })
)
});
const addressesValidationSchema = Yup.object().shape({ const profileInitialValue = {
addresses: Yup.array().of( first_name: "John",
Yup.object().shape({ last_name: "Doe",
pincode: Yup.string().required("Pincode is required"), email: "john@gmail.com",
country: Yup.string().required("Country is required"), country_code: "+1 (406)",
state: Yup.string().required("State is required"), mobile: "785-9909",
city: Yup.string().required("City is required"), password: "*********"
addressLine1: Yup.string().required("Address Line1 is required"), }
addressLine2: Yup.string().required("Adrress Line2 is required")
})
)
});
const profileInitialValue = { // Ref for the first input field
first_name: "John", const firstFieldRef = useRef(null);
last_name: "Doe",
email: "john@gmail.com",
country_code: "+1 (406)",
mobile: "785-9909",
password: "*********"
};
// Ref for the first input field // Effect to focus on the first field when entering edit mode
const firstFieldRef = useRef(null); useEffect(() => {
console.log("firstFieldRef", readOnly, firstFieldRef.current)
if (!readOnly && firstFieldRef.current) {
firstFieldRef.current.focus();
}
}, [readOnly]);
// Effect to focus on the first field when entering edit mode const handleProfileUploadChange = (event) => {
useEffect(() => { console.log(event)
console.log("firstFieldRef", readOnly, firstFieldRef.current); console.log(event?.currentTarget?.files[0])
if (!readOnly && firstFieldRef.current) { formikUploadImage.setFieldValue("profile_image", event.currentTarget.files[0]);
firstFieldRef.current.focus(); formikUploadImage.submitForm()
} }
}, [readOnly]);
const handleProfileUploadChange = event => { return (
console.log(event); <Fragment>
console.log(event?.currentTarget?.files[0]); <div className="container">
formikUploadImage.setFieldValue("profile_image", event.currentTarget.files[0]); <div className="row">
formikUploadImage.submitForm(); <div className="col-12 col-lg-12">
}; <div className="form-container content-wraaper">
<div className='px-5'>
<h2>My Profile</h2>
return (
<Fragment>
<div className="container">
<div className="row">
<div className="col-12 col-lg-12">
<div className="form-container content-wraaper">
<div className="">
<div className="bg-white border-div">
<h2>My Profile</h2>
<Table className="abc"> {/* <Table className='abc'>
<thead> <thead>
<tr> <tr>
<th>1</th> <th>1</th>
<th>2</th> <th>2</th>
<th>3</th> <th>3</th>
<th>4</th> <th>4</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr className="main"> <tr className='main'>
<td rowSpan={3}>1</td> <td rowSpan={3}>1</td>
</tr> </tr>
<tr className="sub1"> <tr className='sub1'>
<td>11</td> <td>11</td>
<td>22</td> <td>22</td>
<td>33</td> <td>33</td>
</tr> </tr>
<tr className="sub2"> <tr className='sub2'>
<td>11</td> <td>11</td>
<td>22</td> <td>22</td>
<td>33</td> <td>33</td>
</tr> </tr>
<tr className="main"> <tr className='main'>
<td rowSpan={3}>1</td> <td rowSpan={3}>1</td>
</tr> </tr>
<tr className="sub"> <tr className='sub'>
<td>11</td> <td>11</td>
<td>22</td> <td>22</td>
<td>33</td> <td>33</td>
</tr> </tr>
<tr className="sub"> <tr className='sub'>
<td>11</td> <td>11</td>
<td>22</td> <td>22</td>
<td>33</td> <td>33</td>
</tr> </tr>
</tbody> </tbody>
</Table> </Table> */}
</div> <div className="bg-white border-div">
<div className="bg-white border-div"> <Formik
<Formik initialValues={{ profile_image: null }}
initialValues={{ profile_image: null }} validationSchema={Yup.object().shape({
validationSchema={Yup.object().shape({ profile_image: Yup.mixed().required("Profile Image is Required")
profile_image: Yup.mixed().required("Profile Image is Required") })}
})} enableReinitialize={true}
enableReinitialize={true} onSubmit={values => {
onSubmit={values => { console.log("profile image", values)
console.log("profile image", values);
// onSubmit: async (values, { setSubmitting }) => { // onSubmit: async (values, { setSubmitting }) => {
// setSubmitting(true); // setSubmitting(true);
// try { // try {
// const formData = new FormData(); // const formData = new FormData();
// formData.append("file", values.file); // formData.append("file", values.file);
// // Use Axios to send the file data to the server // // Use Axios to send the file data to the server
// const response = await axios.post("/upload", formData, { // const response = await axios.post("/upload", formData, {
// headers: { // headers: {
// "Content-Type": "multipart/form-data" // "Content-Type": "multipart/form-data"
// } // }
// }); // });
// console.log("File uploaded successfully:", response.data); // console.log("File uploaded successfully:", response.data);
// } catch (error) { // } catch (error) {
// console.error("Error uploading file:", error); // console.error("Error uploading file:", error);
// } // }
// setSubmitting(false); // setSubmitting(false);
// } // }
}} }}
innerRef={formik => { innerRef={formik => {
// Store Formik instance in a variable // Store Formik instance in a variable
formikUploadImage = formik; formikUploadImage = formik;
}} }}
> >
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => ( {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
<Form <Form
onSubmit={e => { onSubmit={e => {
e.preventDefault(); e.preventDefault();
handleSubmit(); handleSubmit();
console.log(errors); console.log(errors)
}} }}
> >
<div className="row align-items-center justify-content-between"> <div className="row align-items-center justify-content-between">
<div className="col-lg-6 d-flex align-items-center"> <div className="col-lg-12 d-flex align-items-center">
<span className="image-container me-4"> <span className="image-container me-4">
<Image layout="fill" alt="" src="/images/user/user-big.jpg" className="image" /> <Image layout="fill" alt="" src="/images/user/user-big.jpg" className="image" />
</span> </span>
<p className="username">John Doe</p> <p className="username">
</div> {endUser?.attributes?.name}
<div className="col-lg-4"> </p>
<label className="uploadProfileImage" htmlFor="file-upload"> </div>
<p className="mb-0">Upload Profile Photo</p> {/* <div className="col-lg-4">
<Image alt="" src="/images/user/icon-upload.svg" width="24" height="24" className="pb-1" /> <label className="uploadProfileImage" htmlFor="file-upload">
</label> <p className="mb-0">Upload Profile Photo</p>
<input <Image alt="" src="/images/user/icon-upload.svg" width="24" height="24" className="pb-1" />
type="file" </label>
id="file-upload" <input
name="profile_image" type="file"
onChange={handleProfileUploadChange} id="file-upload"
// onBlur={handleBlur} name="profile_image"
style={{ display: "none" }} onChange={handleProfileUploadChange}
onClick={event => { // onBlur={handleBlur}
const { target = {} } = event || {}; style={{ display: "none" }}
target.value = ""; onClick={event => {
}} const { target = {} } = event || {};
/> target.value = "";
{errors.profile_image && touched.profile_image && <span className="form-error">{errors.profile_image}</span>} }}
</div> />
</div> {errors.profile_image && touched.profile_image && (<span className="form-error">{errors.profile_image}</span>)}
</Form> </div> */}
)} </div>
</Formik> </Form>
</div> )}
<div className="bg-white border-div"> </Formik>
<Formik </div>
initialValues={profileInitialValue} <div className="bg-white border-div">
validationSchema={profileValidationSchema} <Formik
enableReinitialize={true} initialValues={profileInitialValue}
onSubmit={values => { validationSchema={profileValidationSchema}
console.log("profile personal details", values); enableReinitialize={true}
}} onSubmit={values => {
> console.log("profile personal details", values)
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => ( }}
<Form >
onSubmit={e => { {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
e.preventDefault(); <Form
handleSubmit(); onSubmit={e => {
}} e.preventDefault();
> handleSubmit();
<> }}
<div className="d-flex justify-content-between mb-4 align-items-center"> >
<h2 className="mb-0">Personal Information</h2> <>
{/* onClick={() => setReadOnly(prevState => !prevState)} */} <div className="d-flex justify-content-between mb-4">
{readOnly && ( <h2 className="mb-0">Personal Information</h2>
<div className="btn-edit"> {/* onClick={() => setReadOnly(prevState => !prevState)} */}
<span className="me-3">Edit</span> {/* {readOnly && (
<span className="image-container"> <div className="btn-edit">
<Image className="image img-fluid" layout="fill" alt="" src="/images/icons/edit-icon.svg" /> <span className="me-3">Edit</span>
</span> <i className="fa fa-edit"></i>
</div> </div>
)} )} */}
</div> </div>
<div className="row"> <div className="row">
<div className="col-12 col-lg-5"> <div className="col-12 col-lg-5">
<div className="input-group"> <div className="input-group">
<label>Your First Name</label> <label>Your Full Name</label>
<Field <Field
type="text" type="text"
name="first_name" name="first_name"
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.first_name} value={endUser?.attributes?.name}
readOnly={readOnly} readOnly={readOnly}
innerRef={firstFieldRef} innerRef={firstFieldRef}
/> />
{errors.first_name && touched.first_name && <span className="form-error">{errors.first_name}</span>} {/* {errors.first_name && touched.first_name && (<span className="form-error">{errors.first_name}</span>)} */}
</div> </div>
</div> </div>
<div className="col-12 offset-lg-1 col-lg-5"> <div className="col-12 col-lg-5">
<div className="input-group"> <div className="input-group">
<label>Your Last Name</label> <label>Email Id</label>
<Field type="text" name="last_name" onChange={handleChange} onBlur={handleBlur} value={values.last_name} readOnly={readOnly} /> <Field
{errors.last_name && touched.last_name && <span className="form-error">{errors.last_name}</span>} type="text"
</div> name="email"
</div> onChange={handleChange}
</div> onBlur={handleBlur}
<div className="row"> value={endUser?.attributes?.email}
<div className="col-12 col-lg-5"> readOnly={readOnly}
<div className="input-group"> />
<label>Email Id</label> {/* {errors.email && touched.email && (<span className="form-error">{errors.email}</span>)} */}
<Field type="text" name="email" onChange={handleChange} onBlur={handleBlur} value={values.email} readOnly={readOnly} /> </div>
{errors.email && touched.email && <span className="form-error">{errors.email}</span>} </div>
</div> {/* <div className="col-12 offset-lg-1 col-lg-5">
</div> <div className="input-group">
<div className="col-12 offset-lg-1 col-lg-5"> <label>Your Last Name</label>
<div className="input-group"> <Field
<label>Mobile Number</label> type="text"
<div className="contact-number"> name="last_name"
{readOnly && ( onChange={handleChange}
<Field onBlur={handleBlur}
type="text" value={values.last_name}
name="country_code" readOnly={readOnly}
onChange={handleChange} />
onBlur={handleBlur} {errors.last_name && touched.last_name && (<span className="form-error">{errors.last_name}</span>)}
value={values.country_code} </div>
readOnly={readOnly} </div> */}
style={{ width: "80px" }} </div>
/> <div className="row">
)} {/* <div className="col-12 col-lg-5">
{!readOnly && ( <div className="input-group">
<select id="country_code" name="country_code" onChange={handleChange} onBlur={handleBlur} style={{ width: "80px" }}> <label>Email Id</label>
<option value="+91">+91</option> <Field
<option value="+44">+44</option> type="text"
</select> name="email"
)} onChange={handleChange}
<Field type="text" name="mobile" onChange={handleChange} onBlur={handleBlur} value={values.mobile} readOnly={readOnly} /> onBlur={handleBlur}
value={values.email}
readOnly={readOnly}
/>
{errors.email && touched.email && (<span className="form-error">{errors.email}</span>)}
</div>
</div> */}
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Mobile Number</label>
<div className="contact-number">
{/* {readOnly && (
<Field
type="text"
name="country_code"
onChange={handleChange}
onBlur={handleBlur}
value={values.country_code}
readOnly={readOnly}
style={{ width: "80px" }}
/>
)} */}
{!readOnly && (
<select
id="country_code"
name="country_code"
onChange={handleChange}
onBlur={handleBlur}
style={{ width: "80px" }}
>
<option value="+91">+91</option>
<option value="+44">+44</option>
</select>
)}
<Field
className='m-0'
type="text"
name="mobile"
onChange={handleChange}
onBlur={handleBlur}
value={endUser?.attributes?.phone}
readOnly={readOnly}
/>
</div>
{/* {errors.mobile && touched.mobile && (<span className="form-error">{errors.mobile}</span>)} */}
</div>
</div>
</div>
{/* <div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Current Password</label>
<input
type="text"
name="password"
onChange={handleChange}
onBlur={handleBlur}
value={values.password}
readOnly={readOnly}
disabled={true}
/>
</div>
</div>
</div> */}
</>
</Form>
)}
</Formik>
</div> </div>
{errors.mobile && touched.mobile && <span className="form-error">{errors.mobile}</span>}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Current Password</label>
<input type="text" name="password" onChange={handleChange} onBlur={handleBlur} value={values.password} readOnly={readOnly} disabled={true} />
</div>
</div>
</div>
</>
</Form>
)}
</Formik>
</div>
<div className="bg-white border-div">
<Formik {/* <div className="bg-white border-div">
initialValues={{ <Formik
addresses: [ initialValues={{
{ addresses: [
pincode: "" {
} pincode: "",
]
}} }
validationSchema={addressesValidationSchema} ]
// enableReinitialize={true} }}
onSubmit={values => { validationSchema={addressesValidationSchema}
console.log("profile address details", values); // enableReinitialize={true}
}} onSubmit={values => {
> console.log("profile address details", values)
{({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => ( }}
<Form >
onSubmit={e => { {({ values, errors, touched, handleChange, handleBlur, handleSubmit }) => (
e.preventDefault(); <Form
handleSubmit(); onSubmit={e => {
}} e.preventDefault();
> handleSubmit();
<> }}
<div className="d-flex justify-content-between mb-4"> >
<h2 className="mb-0">Address</h2> <>
<div className="btn-edit"> <div className="d-flex justify-content-between mb-4">
<span className="me-3">Add</span> <h2 className='mb-0'>Address</h2>
<span className="image-container"> <div className="btn-edit">
<Image className="image img-fluid" layout="fill" alt="" src="/images/icons/add-icon.svg" /> <span className="me-3">Add</span>
</span> <i className="fa fa-plus"></i>
</div> </div>
</div> </div>
<div className="row"> <div className="row">
<div className="col-12 col-lg-5"> <div className="col-12 col-lg-5">
<div className="input-group"> <div className="input-group">
<label>Pincode</label> <label>Pincode</label>
<input type="text" name="pincode" onChange={handleChange} onBlur={handleBlur} value={values.pincode} /> <input
{errors.pincode && touched.pincode && <span className="form-error">{errors.pincode}</span>} type="text"
</div> name="pincode"
</div> onChange={handleChange}
<div className="col-12 offset-lg-1 col-lg-5"> onBlur={handleBlur}
<div className="input-group"> value={values.pincode}
<label>Country</label> />
<select id="country" name="country" onChange={handleChange} onBlur={handleBlur}> {errors.pincode && touched.pincode && (<span className="form-error">{errors.pincode}</span>)}
<option value="India">India</option> </div>
<option value="America">America</option> </div>
</select> <div className="col-12 offset-lg-1 col-lg-5">
{errors.country && touched.country && <span className="form-error">{errors.country}</span>} <div className="input-group">
</div> <label>Country</label>
</div> <select
</div> id="country"
<div className="row"> name="country"
<div className="col-12 col-lg-5"> onChange={handleChange}
<div className="input-group"> onBlur={handleBlur}
<label>State</label> >
<select id="state" name="state" onChange={handleChange} onBlur={handleBlur}> <option value="India">India</option>
<option value="India">India</option> <option value="America">America</option>
<option value="America">America</option> </select>
</select> {errors.country && touched.country && (<span className="form-error">{errors.country}</span>)}
{errors.state && touched.state && <span className="form-error">{errors.state}</span>} </div>
</div> </div>
</div> </div>
<div className="col-12 offset-lg-1 col-lg-5"> <div className="row">
<div className="input-group"> <div className="col-12 col-lg-5">
<label>City</label> <div className="input-group">
<select id="city" name="city" onChange={handleChange} onBlur={handleBlur}> <label>State</label>
<option value="India">India</option> <select
<option value="America">America</option> id="state"
</select> name="state"
{errors.city && touched.city && <span className="form-error">{errors.city}</span>} onChange={handleChange}
</div> onBlur={handleBlur}
</div> >
</div> <option value="India">India</option>
<div className="row"> <option value="America">America</option>
<div className="col-12 col-lg-5"> </select>
<div className="input-group"> {errors.state && touched.state && (<span className="form-error">{errors.state}</span>)}
<label>Address Line 1</label> </div>
<input type="text" name="addressLine1" onChange={handleChange} onBlur={handleBlur} value={values.addressLine1} /> </div>
{errors.addressLine1 && touched.addressLine1 && <span className="form-error">{errors.addressLine1}</span>} <div className="col-12 offset-lg-1 col-lg-5">
</div> <div className="input-group">
</div> <label>City</label>
<div className="col-12 offset-lg-1 col-lg-5"> <select
<div className="input-group"> id="city"
<label>Address Line 2</label> name="city"
<input type="text" name="addressLine2" onChange={handleChange} onBlur={handleBlur} value={values.addressLine2} /> onChange={handleChange}
{errors.addressLine2 && touched.addressLine2 && <span className="form-error">{errors.addressLine2}</span>} onBlur={handleBlur}
</div> >
<option value="India">India</option>
<option value="America">America</option>
</select>
{errors.city && touched.city && (<span className="form-error">{errors.city}</span>)}
</div>
</div>
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Address Line 1</label>
<input
type="text"
name="addressLine1"
onChange={handleChange}
onBlur={handleBlur}
value={values.addressLine1}
/>
{errors.addressLine1 && touched.addressLine1 && (<span className="form-error">{errors.addressLine1}</span>)}
</div>
</div>
<div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group">
<label>Address Line 2</label>
<input
type="text"
name="addressLine2"
onChange={handleChange}
onBlur={handleBlur}
value={values.addressLine2}
/>
{errors.addressLine2 && touched.addressLine2 && (<span className="form-error">{errors.addressLine2}</span>)}
</div>
</div>
</div>
</>
</Form>
)}
</Formik>
</div> */}
</div> </div>
</div> </div>
</> </div>
</Form>
)}
</Formik>
</div> </div>
</div>
</div> </div>
</div> </Fragment>
</div> )
</div> }
</Fragment>
);
};
export default MyProfile; export default MyProfile;
\ No newline at end of file \ No newline at end of file
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!