111 lines
3.5 KiB
TypeScript
111 lines
3.5 KiB
TypeScript
import { useState, useContext } from 'react';
|
|
import { AccountUserProfileContext } from '../hooks';
|
|
|
|
// import { KeenIcon } from '@/components';
|
|
// import { toAbsoluteUrl } from '@/utils/Assets';
|
|
import { getAuth, useAuthContext } from '@/auth';
|
|
import { toast } from 'sonner';
|
|
|
|
interface IBasicSettingsProps {
|
|
title: string;
|
|
}
|
|
|
|
const BasicSettings = () => {
|
|
// const user = localStorage.getItem('user');
|
|
// const parsedUser = user ? JSON.parse(user) : null;
|
|
const parsedUser = getAuth()?.user;
|
|
// console.log('parsedUser :', parsedUser);
|
|
const [newUsername, setNewUsername] = useState<string>(parsedUser?.username || '');
|
|
const [newEmail, setNewEmail] = useState<string>(parsedUser?.email || '');
|
|
const [newName, setNewName] = useState<string>(parsedUser?.name || '');
|
|
|
|
const { setProfile } = useContext(AccountUserProfileContext);
|
|
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
const isChanged =
|
|
newUsername !== parsedUser?.username ||
|
|
newEmail !== parsedUser?.email ||
|
|
newName !== parsedUser?.name;
|
|
|
|
const handleChangeProfile = async () => {
|
|
setIsSubmitting(true);
|
|
try {
|
|
await setProfile({ name: newName, username: newUsername, email: newEmail });
|
|
|
|
const newCache = {
|
|
name: newName,
|
|
email: newEmail,
|
|
username: newUsername
|
|
};
|
|
|
|
localStorage.setItem('user', JSON.stringify(newCache));
|
|
} catch (error: any) {
|
|
const errorMessage =
|
|
error?.response?.data?.message ||
|
|
error?.message ||
|
|
'An error occurred while resetting the password.';
|
|
toast.error(errorMessage);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="card pb-2.5">
|
|
<div className="card-header" id="general_settings">
|
|
<h3 className="card-title">Account</h3>
|
|
</div>
|
|
|
|
<div className="card-body grid gap-5">
|
|
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
|
<label className="form-label max-w-56">Name</label>
|
|
<input
|
|
className="input"
|
|
type="text"
|
|
value={newName}
|
|
onChange={(e) => setNewName(e.target.value)}
|
|
disabled={isSubmitting}
|
|
/>
|
|
</div>
|
|
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
|
<label className="form-label max-w-56">Username</label>
|
|
<input
|
|
className="input"
|
|
type="text"
|
|
value={newUsername}
|
|
onChange={(e) => setNewUsername(e.target.value)}
|
|
disabled={isSubmitting}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
|
<label className="form-label max-w-56">Email</label>
|
|
<input
|
|
className="input"
|
|
type="email"
|
|
value={newEmail}
|
|
onChange={(e) => setNewEmail(e.target.value)}
|
|
disabled={isSubmitting}
|
|
/>
|
|
</div>
|
|
{/* <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
|
<label className="form-label max-w-56">Name</label>
|
|
<input className="input" type="text" value={parsedUser?.name} />
|
|
</div> */}
|
|
<div className="flex justify-end">
|
|
<button
|
|
className="btn btn-primary"
|
|
onClick={handleChangeProfile}
|
|
disabled={isSubmitting || !isChanged}
|
|
>
|
|
{isSubmitting ? 'loading...' : 'Save Change'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { BasicSettings, type IBasicSettingsProps };
|