victorAnumudu
282 lines
21 KiB
React
282 lines
21 KiB
React
import React, { useEffect, useMemo, useState } from "react";
|
|
import { Form, Formik } from "formik";
|
|
import * as Yup from "yup";
|
|
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
|
|
import getImage from "../../utils/getImage";
|
|
import queryKeys from "../../services/queryKeys";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { profileDetails } from "../../services/services";
|
|
|
|
|
|
|
|
|
|
const profileValidationSchema = Yup.object().shape({
|
|
// firstname: Yup.string().required("firstname is required"),
|
|
// lastname: Yup.string().required("lastname is required"),
|
|
// email: Yup.string().required("email is required"),
|
|
// account_name: Yup.string().required("account name is required"),
|
|
// phone: Yup.string().required("phone is required"),
|
|
// full_address: Yup.string().required("full address is required"),
|
|
})
|
|
|
|
const linksValidationSchema = Yup.object().shape({
|
|
// facebook_url: Yup.string().required("facebook is required"),
|
|
// twitter_url: Yup.string().required("twitter is required"),
|
|
// blogger_url: Yup.string().required("blog is required"),
|
|
// google_url: Yup.string().required("google is required"),
|
|
// linked_url: Yup.string().required("linkedin is required"),
|
|
// website_url: Yup.string().required("website is required"),
|
|
})
|
|
|
|
|
|
export default function Settings() {
|
|
const avtarImage = "avtar/merms-user.png";
|
|
|
|
const [intialData, setInitialData] = useState({
|
|
external_links: {},
|
|
personal_data: {},
|
|
})
|
|
|
|
const {data:profileInfo, isFetching, isError, error} = useQuery({
|
|
queryKey: queryKeys.profile_data,
|
|
queryFn: () => {
|
|
let reqData = {
|
|
token: localStorage.getItem('token'), // USER TOKEN
|
|
uid: localStorage.getItem('uid') // USER UID
|
|
}
|
|
return profileDetails(reqData)
|
|
}
|
|
})
|
|
// const profileData = profileInfo?.data // profile data
|
|
useMemo(()=>{
|
|
const data = profileInfo?.data
|
|
setInitialData({external_links: data?.external_links, personal_data: data?.personal_data})
|
|
},[profileInfo])
|
|
// console.log('INI', intialData)
|
|
|
|
|
|
const updateProfile = (values, helpers) => {
|
|
console.log('Values', values)
|
|
}
|
|
|
|
const updateLinks = (values, helpers) => {
|
|
console.log('Values', values)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<BreadcrumbComBS title='Settings' paths={['Dashboard', 'Settings']}/>
|
|
{/*<div className="row">*/}
|
|
{/* <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
|
|
{/*</div>*/}
|
|
|
|
{isFetching ?
|
|
<>
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<p className="text-mute">Loading...</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
: isError ?
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<p className="text-danger">{error?.message}</p>
|
|
</div>
|
|
</div>
|
|
:
|
|
<div className="row account-contant">
|
|
<div className="col-12">
|
|
<div className="card card-statistics">
|
|
<div className="card-body p-0" style={{backgroundColor: "#f9f9fb"}}>
|
|
<div className="row no-gutters">
|
|
<div className="col-xl-3 pb-xl-0 pb-5 border-right">
|
|
<div className="page-account-profil pt-5">
|
|
<div className="profile-img text-center rounded-circle">
|
|
<div className="pt-5">
|
|
<div className="bg-img m-auto">
|
|
{/*<img src="assets/img/avtar/01.jpg" className="img-fluid"*/}
|
|
{/* alt="users-avatar" />*/}
|
|
<img src={getImage(avtarImage)}
|
|
className="img-fluid" alt="user"/>
|
|
</div>
|
|
<div className="profile pt-4">
|
|
<h4 className="mb-1">{intialData?.personal_data?.lastname} {intialData?.personal_data?.firstname}</h4>
|
|
<div style={{padding: '10px'}}>
|
|
<hr/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="profile-btn text-center">
|
|
<div>
|
|
<button className="btn btn-light text-primary mb-2">Upload New Avatar
|
|
</button>
|
|
</div>
|
|
{/*<div>*/}
|
|
{/* <button className="btn btn-danger">Delete</button>*/}
|
|
{/*</div>*/}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-xl-5 col-md-6 col-12 border-t border-right">
|
|
<div className="page-account-form">
|
|
<div className="form-titel border-bottom p-3">
|
|
<h5 className="mb-0 py-2">Edit Your Personal Settings</h5>
|
|
</div>
|
|
<div className="p-4">
|
|
<Formik
|
|
initialValues={intialData?.personal_data}
|
|
validationSchema={profileValidationSchema}
|
|
onSubmit={updateProfile}
|
|
>
|
|
{(props) => {
|
|
return (
|
|
<Form className=''>
|
|
<div className="form-row">
|
|
<div className="form-group col-md-12">
|
|
<label htmlFor="name1">First Name {(props.errors.firstname && props.touched.firstname) && <span className="text-danger">*</span>}</label>
|
|
<input type="text" className="form-control" name="firstname" value={props.values?.firstname} onChange={props.handleChange} />
|
|
</div>
|
|
<div className="form-group col-md-12">
|
|
<label htmlFor="name1">Last Name {(props.errors.lastname && props.touched.lastname) && <span className="text-danger">*</span>}</label>
|
|
<input type="text" className="form-control" name="lastname" value={props.values?.lastname} onChange={props.handleChange} />
|
|
</div>
|
|
<div className="form-group col-md-12">
|
|
<label htmlFor="name1">Account Name {(props.errors.account_name && props.touched.account_name) && <span className="text-danger">*</span>}</label>
|
|
<input type="text" className="form-control" name="account_name" value={props.values?.account_name} onChange={props.handleChange} />
|
|
</div>
|
|
{/*<div className="form-group col-md-12">*/}
|
|
{/* <label htmlFor="title1">Email</label>*/}
|
|
{/* <input type="text" className="form-control" name="title1"*/}
|
|
{/* value="email@email.com" />*/}
|
|
{/*</div>*/}
|
|
<div className="form-group col-md-12">
|
|
<label htmlFor="phone1">Phone Number {(props.errors.phone && props.touched.phone) && <span className="text-danger">*</span>}</label>
|
|
<input type="text" className="form-control" name="phone" value={props.values?.phone} onChange={props.handleChange} />
|
|
</div>
|
|
<div className="form-group col-md-12">
|
|
<label htmlFor="email1">Email {(props.errors.email && props.touched.email) && <span className="text-danger">*</span>}</label>
|
|
<input type="text" className="form-control" name="email" value={props.values?.email} onChange={props.handleChange} />
|
|
</div>
|
|
</div>
|
|
<div className="form-group">
|
|
<label htmlFor="add1">Address {(props.errors.full_address && props.touched.full_address) && <span className="text-danger">*</span>}</label>
|
|
<input type="text" className="form-control" name="full_address" value={props.values?.full_address} onChange={props.handleChange} />
|
|
</div>
|
|
{/*<div className="form-group">*/}
|
|
{/* <label htmlFor="add2">Address 2</label>*/}
|
|
{/* <input type="text" className="form-control" id="add2"*/}
|
|
{/* value="1234 North Avenue Luke Lane, South Bend, IN 360001"/>*/}
|
|
{/*</div>*/}
|
|
|
|
{/*<div className="form-row">*/}
|
|
{/* <div className="form-group col-md-4">*/}
|
|
{/* <label htmlFor="inputState3">City</label>*/}
|
|
{/* <select id="inputState3" className="form-control">*/}
|
|
{/* <option>Choose...</option>*/}
|
|
{/* <option selected="">London</option>*/}
|
|
{/* <option>Montreal</option>*/}
|
|
{/* <option>Delhi</option>*/}
|
|
{/* <option>Tokyo</option>*/}
|
|
{/* </select>*/}
|
|
{/* </div>*/}
|
|
{/* <div className="form-group col-md-4">*/}
|
|
{/* <label htmlFor="inputState4">State</label>*/}
|
|
{/* <select id="inputState4" className="form-control">*/}
|
|
{/* <option>Choose...</option>*/}
|
|
{/* <option selected="">England</option>*/}
|
|
{/* <option>California</option>*/}
|
|
{/* <option>Texas</option>*/}
|
|
{/* <option>Scotland</option>*/}
|
|
{/* </select>*/}
|
|
{/* </div>*/}
|
|
{/* <div className="form-group col-md-4">*/}
|
|
{/* <label htmlFor="inputZip">Zip</label>*/}
|
|
{/* <input type="text" className="form-control" id="inputZip"*/}
|
|
{/* value="EC1A 1BB" />*/}
|
|
{/* </div>*/}
|
|
{/*</div>*/}
|
|
{/*<div className="form-group">*/}
|
|
{/* <div className="form-check">*/}
|
|
{/* <input className="form-check-input" type="checkbox"*/}
|
|
{/* id="gridCheck" />*/}
|
|
{/* <label className="form-check-label" htmlFor="gridCheck">*/}
|
|
{/* I agree to receive email notification.*/}
|
|
{/* </label>*/}
|
|
{/* </div>*/}
|
|
{/*</div>*/}
|
|
<div style={{textAlign: "right"}}>
|
|
<button type="submit" className="btn btn-primary">Update Profile
|
|
</button>
|
|
</div>
|
|
</Form>
|
|
);
|
|
}}
|
|
</Formik>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-xl-4 col-md-6 border-t col-12">
|
|
<div className="page-account-form">
|
|
<div className="form-titel border-bottom p-3">
|
|
<h5 className="mb-0 py-2">Your External Link</h5>
|
|
</div>
|
|
<div className="p-4">
|
|
<Formik
|
|
initialValues={intialData?.external_links}
|
|
validationSchema={linksValidationSchema}
|
|
onSubmit={updateLinks}
|
|
>
|
|
{(props) => {
|
|
return (
|
|
<Form className=''>
|
|
<div className="form-group">
|
|
<label htmlFor="fb">Facebook URL: {(props.errors.facebook_url && props.touched.facebook_url) && <span className="text-danger">*</span>}</label>
|
|
<input type="text" className="form-control" name="facebook_url" value={props.values?.facebook_url} onChange={props.handleChange} />
|
|
</div>
|
|
<div className="form-group">
|
|
<label htmlFor="tr">Twitter URL: {(props.errors.twitter_url && props.touched.twitter_url) && <span className="text-danger">*</span>}</label>
|
|
<input type="text" className="form-control" name="twitter_url" value={props.values?.twitter_url} onChange={props.handleChange} />
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="br">Blogger URL: {(props.errors.blogger_url && props.touched.blogger_url) && <span className="text-danger">*</span>}</label>
|
|
<input type="text" className="form-control" name="blogger_url" value={props.values?.blogger_url} onChange={props.handleChange} />
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="go">Google+ URL: {(props.errors.google_url && props.touched.google_url) && <span className="text-danger">*</span>}</label>
|
|
<input type="text" className="form-control" name="google_url" value={props.values?.google_url} onChange={props.handleChange} />
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="li">LinkedIn URL: {(props.errors.linked_url && props.touched.linked_url) && <span className="text-danger">*</span>}</label>
|
|
<input type="text" className="form-control" name="linked_url" value={props.values?.linked_url} onChange={props.handleChange} />
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="we">Website URL: {(props.errors.website_url && props.touched.website_url) && <span className="text-danger">*</span>}</label>
|
|
<input type="text" className="form-control" name="website_url" value={props.values?.website_url} onChange={props.handleChange} />
|
|
</div>
|
|
<div style={{textAlign: "right"}}>
|
|
<button type="submit" className="btn btn-primary">Update Links
|
|
</button>
|
|
</div>
|
|
</Form>
|
|
);
|
|
}}
|
|
</Formik>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</>
|
|
)
|
|
} |