TriggerFrontend/src/pages/settings/components/Personalization/Personalization.tsx

import { Card, Grid, GridCol, Overlay, Stack, TextInput } from '@mantine/core';
import { useDebouncedValue } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { cardClasses, textInputClasses } from 'styles';
import type { PersonalData } from 'types';
import SettingsHeader from '../Shared/SettingsHeader';
const PersonalizationSettings = () => {
	const endpoint = 'api/personalData';
	const {
		data: personalData,
		isFetched: personalIsFetched,
		isFetching: personalIsFetching,
	} = useQueryAPI({
		endpoint: endpoint,
	});
	const [personal, setPersonal] = useState<PersonalData>();
	const [update, setUpdate] = useState<any>({});
	const [debounced] = useDebouncedValue(update, 1000);
	const { mutateAsync: editRow } = useMutationAPI();
	const { isMobile } = useCommonHooks();
	useEffect(() => {
		if (personalData && personalIsFetched) {
			setPersonal(personalData[0]);
		}
	}, [personalData, personalIsFetched]);

	useEffect(() => {
		if (Object.keys(debounced).length) {
			setPersonal(update);
			editRow({ method: 'PATCH', endpoint: endpoint, body: debounced });
			setUpdate({});
		}
	}, [debounced]);

	useEffect(() => {
		if (update !== personal && Object.keys(update).length) {
			setPersonal(update);
		}
	}, [update]);

	return (
		<Stack>
			<SettingsHeader
				setDragging={undefined}
				openModal={() => {}}
				title={'Personalization'}
				tooltip={{
					title: 'The personalization section allows you to update basic information.',
					highlightList: [
						'first name',
						'last name',
						'name',
						'first',
						'last',
						'physical address',
					],
					description:
						'The first and last name fields will be used for greetings, and the physical address field will be used for weather.',
				}}
				searchValue={undefined}
				setSearchValue={() => {}}
				searchPlaceholder={undefined}
			/>
			<Stack
				align='center'
				style={{ marginTop: '6rem', marginBottom: '1rem', width: '100%' }}
			>
				<Grid w={'75%'} pos={'relative'}>
					{personalIsFetching && (
						<Overlay
							style={{
								borderRadius: '10px',
								margin: '-8px',
								backdropFilter: 'blur(10px) brightness(1.2)',
							}}
						/>
					)}
					<GridCol span={isMobile ? 12 : 4}>
						<Card className={cardClasses.settingsItem} classNames={cardClasses}>
							<TextInput
								label={'First Name'}
								className={textInputClasses.settingsItem}
								classNames={textInputClasses}
								defaultValue={personal?.firstName}
								onChange={(event) => {
									const updatedPersonal = {
										...personal,
										firstName: event.currentTarget.value,
									};
									setUpdate(updatedPersonal);
								}}
							/>
						</Card>
					</GridCol>
					<GridCol span={isMobile ? 12 : 4}>
						<Card className={cardClasses.settingsItem} classNames={cardClasses}>
							<TextInput
								label={'Last Name'}
								className={textInputClasses.settingsItem}
								classNames={textInputClasses}
								defaultValue={personal?.lastName}
								onChange={(event) => {
									const updatedPersonal = {
										...personal,
										lastName: event.currentTarget.value,
									};
									setUpdate(updatedPersonal);
								}}
							/>
						</Card>
					</GridCol>
					<GridCol span={isMobile ? 12 : 4}>
						<Card className={cardClasses.settingsItem} classNames={cardClasses}>
							<TextInput
								label={'Email'}
								className={textInputClasses.settingsItem}
								classNames={textInputClasses}
								defaultValue={personal?.email}
								onChange={(event) => {
									const updatedPersonal = {
										...personal,
										email: event.currentTarget.value,
									};
									setUpdate(updatedPersonal);
								}}
							/>
						</Card>
					</GridCol>
					<GridCol span={12}>
						<Card className={cardClasses.settingsItem} classNames={cardClasses}>
							<TextInput
								label={'Physical Address'}
								className={textInputClasses.settingsItem}
								classNames={textInputClasses}
								defaultValue={personal?.physicalAddress}
								onChange={(event) => {
									const updatedPersonal = {
										...personal,
										physicalAddress: event.currentTarget.value,
									};
									setUpdate(updatedPersonal);
								}}
							/>
						</Card>
					</GridCol>
				</Grid>
			</Stack>
		</Stack>
	);
};
export default PersonalizationSettings;