victorAnumudu
91 lines
3.9 KiB
React
91 lines
3.9 KiB
React
import React, { useMemo, useState } from "react";
|
|
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";
|
|
import ProfileForm from "./ProfileForm";
|
|
import LinksForm from "./LinksForm";
|
|
import ProfileImage from "./ProfileImage";
|
|
|
|
export default function Settings() {
|
|
|
|
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)
|
|
|
|
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">
|
|
<ProfileImage intialData={intialData} />
|
|
<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">
|
|
<ProfileForm data={intialData.personal_data} />
|
|
</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">
|
|
<LinksForm data={intialData.external_links} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</>
|
|
)
|
|
} |