New settings pages

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

@@ -0,0 +1,128 @@
+import { Card, Grid, GridCol, Overlay, Stack, Text, TextInput } from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
+import { useMutationAPI, useQueryAPI } from 'hooks';
+import { useEffect, useState } from 'react';
+import { cardClasses, textClasses, textInputClasses } from 'styles';
+const PersonalizationSettings = () => {
+	const endpoint = 'api/personalData';
+	const {
+		data: personalData,
+		isFetched: personalIsFetched,
+		isFetching: personalIsFetching,
+	} = useQueryAPI({
+		endpoint: endpoint,
+	});
+	const [personal, setPersonal] = useState<any>({});
+	const [update, setUpdate] = useState({});
+	const [debounced] = useDebouncedValue(update, 1000);
+	const { mutateAsync: editRow } = useMutationAPI();
+	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 (
+		<>
+			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				Personalization
+			</Text>
+			<Stack w={'100%'} align='center'>
+				<Grid w={'75%'} pos={'relative'}>
+					{personalIsFetching && (
+						<Overlay
+							style={{
+								borderRadius: '10px',
+								margin: '-8px',
+								backdropFilter: 'blur(10px) brightness(1.2)',
+							}}
+						/>
+					)}
+					<GridCol span={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={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={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>
+		</>
+	);
+};
+export default PersonalizationSettings;