98 lines
2.1 KiB
TypeScript
98 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import { useTranslations } from 'next-intl';
|
|
import { useActionState, useState, useEffect } from 'react';
|
|
import { getUserData } from '@/app/actions/action';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
|
|
export default function PersonalDataSettings() {
|
|
const [errorMessage, formAction, isPending] = useActionState(
|
|
(state: void | undefined, formData: FormData) => {
|
|
console.log(formData);
|
|
},
|
|
undefined
|
|
);
|
|
|
|
const {
|
|
data: userData,
|
|
isLoading,
|
|
isError,
|
|
error
|
|
} = useQuery({
|
|
queryKey: ['userData'],
|
|
queryFn: () => {
|
|
return getUserData();
|
|
}
|
|
});
|
|
|
|
useEffect(() => {
|
|
console.log(userData)
|
|
}, [userData]);
|
|
|
|
const t = useTranslations('Global');
|
|
|
|
return (
|
|
<div className="settings-form">
|
|
<div className="form-section">
|
|
<h3 className="form-section-title">
|
|
{t('personal-data')}
|
|
</h3>
|
|
<form action={formAction}>
|
|
<div className="form-group">
|
|
<label className="form-label">
|
|
{t('full-name')}:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="full_name"
|
|
className="form-input"
|
|
defaultValue={userData?.fullName}
|
|
/>
|
|
</div>
|
|
{userData?.company && (
|
|
<div className="form-group">
|
|
<label className="form-label">
|
|
{t('company')}:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="company"
|
|
className="form-input"
|
|
defaultValue={userData?.company}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="form-group">
|
|
<label className="form-label">
|
|
{t('email')}:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
name="email"
|
|
className="form-input"
|
|
defaultValue={userData?.email}
|
|
disabled={true}
|
|
/>
|
|
<small>
|
|
{t('email-cant-change')}
|
|
</small>
|
|
</div>
|
|
<div className="form-group">
|
|
<label className="form-label">
|
|
{t('phone')}:
|
|
</label>
|
|
<input
|
|
type="phone"
|
|
name="phone"
|
|
className="form-input"
|
|
defaultValue={userData?.phone}
|
|
/>
|
|
</div>
|
|
<button type="submit" className="btn btn-primary">
|
|
{t('save-changes')}
|
|
</button>
|
|
</form>
|
|
</div >
|
|
</div >
|
|
)
|
|
} |