Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 0c9229e2 by Ravindra Kanojiya
Options

user pofile

1 parent e5e68d85
Inline Side-by-side
Showing 1 changed file with 46 additions and 27 deletions
components/user/MyProfile.js
...@@ -4,11 +4,13 @@ import React, { Fragment, useEffect, useRef, useState } from 'react'; ...@@ -4,11 +4,13 @@ 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({ const profileValidationSchema = Yup.object().shape({
first_name: Yup.string() first_name: Yup.string()
.required("First Name is Required"), .required("First Name is Required"),
...@@ -75,7 +77,7 @@ const MyProfile = () => { ...@@ -75,7 +77,7 @@ const MyProfile = () => {
<h2>My Profile</h2> <h2>My Profile</h2>
<Table className='abc'> {/* <Table className='abc'>
<thead> <thead>
<tr> <tr>
<th>1</th> <th>1</th>
...@@ -113,7 +115,7 @@ const MyProfile = () => { ...@@ -113,7 +115,7 @@ const MyProfile = () => {
<td>33</td> <td>33</td>
</tr> </tr>
</tbody> </tbody>
</Table> </Table> */}
<div className="bg-white border-div"> <div className="bg-white border-div">
<Formik <Formik
initialValues={{ profile_image: null }} initialValues={{ profile_image: null }}
...@@ -157,14 +159,16 @@ const MyProfile = () => { ...@@ -157,14 +159,16 @@ const MyProfile = () => {
console.log(errors) console.log(errors)
}} }}
> >
<div className="d-flex 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">
{endUser?.attributes?.name}
</p>
</div> </div>
<div className="col-lg-4"> {/* <div className="col-lg-4">
<label className="uploadProfileImage" htmlFor="file-upload"> <label className="uploadProfileImage" htmlFor="file-upload">
<p className="mb-0">Upload Profile Photo</p> <p className="mb-0">Upload Profile Photo</p>
<Image alt="" src="/images/user/icon-upload.svg" width="24" height="24" className="pb-1" /> <Image alt="" src="/images/user/icon-upload.svg" width="24" height="24" className="pb-1" />
...@@ -182,7 +186,7 @@ const MyProfile = () => { ...@@ -182,7 +186,7 @@ const MyProfile = () => {
}} }}
/> />
{errors.profile_image && touched.profile_image && (<span className="form-error">{errors.profile_image}</span>)} {errors.profile_image && touched.profile_image && (<span className="form-error">{errors.profile_image}</span>)}
</div> </div> */}
</div> </div>
</Form> </Form>
)} )}
...@@ -208,30 +212,44 @@ const MyProfile = () => { ...@@ -208,30 +212,44 @@ const MyProfile = () => {
<div className="d-flex justify-content-between mb-4"> <div className="d-flex justify-content-between mb-4">
<h2 className="mb-0">Personal Information</h2> <h2 className="mb-0">Personal Information</h2>
{/* onClick={() => setReadOnly(prevState => !prevState)} */} {/* onClick={() => setReadOnly(prevState => !prevState)} */}
{readOnly && ( {/* {readOnly && (
<div className="btn-edit"> <div className="btn-edit">
<span className="me-3">Edit</span> <span className="me-3">Edit</span>
<i className="fa fa-edit"></i> <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">
<label>Email Id</label>
<Field
type="text"
name="email"
onChange={handleChange}
onBlur={handleBlur}
value={endUser?.attributes?.email}
readOnly={readOnly}
/>
{/* {errors.email && touched.email && (<span className="form-error">{errors.email}</span>)} */}
</div>
</div>
{/* <div className="col-12 offset-lg-1 col-lg-5">
<div className="input-group"> <div className="input-group">
<label>Your Last Name</label> <label>Your Last Name</label>
<Field <Field
...@@ -244,10 +262,10 @@ const MyProfile = () => { ...@@ -244,10 +262,10 @@ const MyProfile = () => {
/> />
{errors.last_name && touched.last_name && (<span className="form-error">{errors.last_name}</span>)} {errors.last_name && touched.last_name && (<span className="form-error">{errors.last_name}</span>)}
</div> </div>
</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>Email Id</label> <label>Email Id</label>
<Field <Field
...@@ -260,12 +278,12 @@ const MyProfile = () => { ...@@ -260,12 +278,12 @@ const MyProfile = () => {
/> />
{errors.email && touched.email && (<span className="form-error">{errors.email}</span>)} {errors.email && touched.email && (<span className="form-error">{errors.email}</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>Mobile Number</label> <label>Mobile Number</label>
<div className="contact-number"> <div className="contact-number">
{readOnly && ( {/* {readOnly && (
<Field <Field
type="text" type="text"
name="country_code" name="country_code"
...@@ -275,7 +293,7 @@ const MyProfile = () => { ...@@ -275,7 +293,7 @@ const MyProfile = () => {
readOnly={readOnly} readOnly={readOnly}
style={{ width: "80px" }} style={{ width: "80px" }}
/> />
)} )} */}
{!readOnly && ( {!readOnly && (
<select <select
id="country_code" id="country_code"
...@@ -289,19 +307,20 @@ const MyProfile = () => { ...@@ -289,19 +307,20 @@ const MyProfile = () => {
</select> </select>
)} )}
<Field <Field
className='m-0'
type="text" type="text"
name="mobile" name="mobile"
onChange={handleChange} onChange={handleChange}
onBlur={handleBlur} onBlur={handleBlur}
value={values.mobile} value={endUser?.attributes?.phone}
readOnly={readOnly} readOnly={readOnly}
/> />
</div> </div>
{errors.mobile && touched.mobile && (<span className="form-error">{errors.mobile}</span>)} {/* {errors.mobile && touched.mobile && (<span className="form-error">{errors.mobile}</span>)} */}
</div> </div>
</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>Current Password</label> <label>Current Password</label>
...@@ -316,7 +335,7 @@ const MyProfile = () => { ...@@ -316,7 +335,7 @@ const MyProfile = () => {
/> />
</div> </div>
</div> </div>
</div> </div> */}
</> </>
</Form> </Form>
)} )}
...@@ -324,7 +343,7 @@ const MyProfile = () => { ...@@ -324,7 +343,7 @@ const MyProfile = () => {
</div> </div>
<div className="bg-white border-div"> {/* <div className="bg-white border-div">
<Formik <Formik
initialValues={{ initialValues={{
addresses: [ addresses: [
...@@ -449,7 +468,7 @@ const MyProfile = () => { ...@@ -449,7 +468,7 @@ const MyProfile = () => {
</Form> </Form>
)} )}
</Formik> </Formik>
</div> </div> */}
</div> </div>
</div> </div>
</div> </div>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!