Small refactoring

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

@@ -16,7 +16,7 @@ import FontPicker from 'react-fontpicker-ts';
 import { cardClasses, switchClasses, textClasses, textInputClasses } from 'styles';
 import type { PersonalData } from 'types';
 
-const PersonalizationSettings = () => {
+export function Personalization() {
 	const endpoint = 'api/personalData';
 	const { data: personalData, isFetching: personalDataIsFetching } = useQueryAPI({
 		endpoint: endpoint,
@@ -27,14 +27,14 @@ const PersonalizationSettings = () => {
 		personal?.enableGuacamole === 1,
 	);
 	const [defaultFont, setDefaultFont] = useState<string>(personal?.defaultFont);
-	const [update, setUpdate] = useState<any>({});
+	const [update, setUpdate] = useState<PersonalData>();
 	const [debounced] = useDebouncedValue(update, 1000);
 	const { mutateAsync } = useMutationAPI();
 	const { isMobile, theme } = useCommonHooks();
 	useEffect(() => {
-		if (Object.keys(debounced).length) {
+		if (debounced && Object.keys(debounced).length) {
 			mutateAsync({ method: 'PATCH', endpoint: endpoint, body: debounced });
-			setUpdate({});
+			setUpdate(undefined);
 		}
 	}, [debounced]);
 
@@ -322,5 +322,4 @@ const PersonalizationSettings = () => {
 			</Stack>
 		</Stack>
 	);
-};
-export default PersonalizationSettings;
+}