add tarrifs

src/app/ui/settings/personal-data-settings.tsx

@@ -1,7 +1,9 @@
 'use client'
 
 import { useTranslations } from 'next-intl';
-import { useActionState, useState } from 'react'
+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(
@@ -11,6 +13,23 @@ export default function PersonalDataSettings() {
 		undefined
 	);
 
+	const {
+		data: userData,
+		isLoading,
+		isError,
+		error
+	} = useQuery({
+		queryKey: ['userData'],
+		queryFn: () => {
+			return getUserData();
+		}
+	});
+
+	useEffect(() => {
+		console.log('show => userData');
+		console.log(userData);
+	}, [])
+
 	const [selectedValue, setSelectedValue] = useState('male');
 
 	const t = useTranslations('Global');
@@ -26,19 +45,37 @@ export default function PersonalDataSettings() {
 						<label className="form-label">
 							{t('full-name')}:
 						</label>
-						<input type="text" name="full_name" className="form-input" />
-					</div>
-					<div className="form-group">
-						<label className="form-label">
-							{t('company')}:
-						</label>
-						<input type="text" name="company" className="form-input" />
+						<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" disabled={true}/>
+						<input
+							type="text"
+							name="email"
+							className="form-input"
+							defaultValue={userData.email}
+							disabled={true}
+						/>
 						<small>
 							{t('email-cant-change')}
 						</small>
@@ -47,7 +84,12 @@ export default function PersonalDataSettings() {
 						<label className="form-label">
 							{t('phone')}:
 						</label>
-						<input type="phone" name="phone" className="form-input" />
+						<input
+							type="phone"
+							name="phone"
+							className="form-input"
+							defaultValue={userData.phone}
+						/>
 					</div>
 					<button type="submit" className="btn btn-primary">
 						{t('save-changes')}