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';
import { Button, Form, Table } from 'react-bootstrap';
import * as Yup from "yup";
import { renderImage } from '../../services/imageHandling';
import { useSelector } from 'react-redux';
const MyProfile = () => {
let formikUploadImage;
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"),
......@@ -75,7 +77,7 @@ const MyProfile = () => {
<h2>My Profile</h2>
<Table className='abc'>
{/* <Table className='abc'>
<thead>
<tr>
<th>1</th>
......@@ -113,7 +115,7 @@ const MyProfile = () => {
<td>33</td>
</tr>
</tbody>
</Table>
</Table> */}
<div className="bg-white border-div">
<Formik
initialValues={{ profile_image: null }}
......@@ -157,14 +159,16 @@ const MyProfile = () => {
console.log(errors)
}}
>
<div className="d-flex align-items-center justify-content-between">
<div className="col-lg-6 d-flex align-items-center">
<div className="row align-items-center justify-content-between">
<div className="col-lg-12 d-flex align-items-center">
<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>
<p className="username">John Doe</p>
<p className="username">
{endUser?.attributes?.name}
</p>
</div>
<div className="col-lg-4">
{/* <div className="col-lg-4">
<label className="uploadProfileImage" htmlFor="file-upload">
<p className="mb-0">Upload Profile Photo</p>
<Image alt="" src="/images/user/icon-upload.svg" width="24" height="24" className="pb-1" />
......@@ -182,7 +186,7 @@ const MyProfile = () => {
}}
/>
{errors.profile_image && touched.profile_image && (<span className="form-error">{errors.profile_image}</span>)}
</div>
</div> */}
</div>
</Form>
)}
......@@ -208,30 +212,44 @@ const MyProfile = () => {
<div className="d-flex justify-content-between mb-4">
<h2 className="mb-0">Personal Information</h2>
{/* onClick={() => setReadOnly(prevState => !prevState)} */}
{readOnly && (
{/* {readOnly && (
<div className="btn-edit">
<span className="me-3">Edit</span>
<i className="fa fa-edit"></i>
</div>
)}
)} */}
</div>
<div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Your First Name</label>
<label>Your Full Name</label>
<Field
type="text"
name="first_name"
onChange={handleChange}
onBlur={handleBlur}
value={values.first_name}
value={endUser?.attributes?.name}
readOnly={readOnly}
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 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">
<label>Your Last Name</label>
<Field
......@@ -244,10 +262,10 @@ const MyProfile = () => {
/>
{errors.last_name && touched.last_name && (<span className="form-error">{errors.last_name}</span>)}
</div>
</div>
</div> */}
</div>
<div className="row">
<div className="col-12 col-lg-5">
{/* <div className="col-12 col-lg-5">
<div className="input-group">
<label>Email Id</label>
<Field
......@@ -260,12 +278,12 @@ const MyProfile = () => {
/>
{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="col-12 col-lg-5">
<div className="input-group">
<label>Mobile Number</label>
<div className="contact-number">
{readOnly && (
{/* {readOnly && (
<Field
type="text"
name="country_code"
......@@ -275,7 +293,7 @@ const MyProfile = () => {
readOnly={readOnly}
style={{ width: "80px" }}
/>
)}
)} */}
{!readOnly && (
<select
id="country_code"
......@@ -289,19 +307,20 @@ const MyProfile = () => {
</select>
)}
<Field
className='m-0'
type="text"
name="mobile"
onChange={handleChange}
onBlur={handleBlur}
value={values.mobile}
value={endUser?.attributes?.phone}
readOnly={readOnly}
/>
</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 className="row">
{/* <div className="row">
<div className="col-12 col-lg-5">
<div className="input-group">
<label>Current Password</label>
......@@ -316,7 +335,7 @@ const MyProfile = () => {
/>
</div>
</div>
</div>
</div> */}
</>
</Form>
)}
......@@ -324,7 +343,7 @@ const MyProfile = () => {
</div>
<div className="bg-white border-div">
{/* <div className="bg-white border-div">
<Formik
initialValues={{
addresses: [
......@@ -449,7 +468,7 @@ const MyProfile = () => {
</Form>
)}
</Formik>
</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!