Prettified Code!

socialincome-san · Feb 5, 2024 · b38ac54 · b38ac54
1 parent 8af620f
commit b38ac54
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 72 deletions.
diff --git a/shared/locales/de/website-me.json b/shared/locales/de/website-me.json
@@ -88,12 +88,12 @@
 			"title": "Möchtest du dich abmelden?",
 			"button": "Abmelden"
 		}
-	}, 
+	},
 	"work-info": {
 		"work": "Arbeiten",
 		"add-employer": "Neuen Arbeitgeber hinzufügen",
 		"submit-button": "Hinzufügen",
-		"current-employers": "Aktueller Arbeitgeber", 
+		"current-employers": "Aktueller Arbeitgeber",
 		"empty-state": "Sie haben keinen Arbeitgeber angegeben",
 		"delete-employer": "Löschen",
 		"past-employers": "Frühere Arbeitgeber",

diff --git a/shared/locales/en/website-me.json b/shared/locales/en/website-me.json
@@ -91,12 +91,12 @@
 	},
 	"work-info": {
 		"work": "Work",
-		"add-employer": "Add new employer", 
-		"submit-button": "Add", 
-		"current-employer": "Current Employer", 
-		"empty-state": "You didn't specify any employer", 
-		"delete-employer": "Delete", 
-		"past-employers": "Past Employers", 
+		"add-employer": "Add new employer",
+		"submit-button": "Add",
+		"current-employer": "Current Employer",
+		"empty-state": "You didn't specify any employer",
+		"delete-employer": "Delete",
+		"past-employers": "Past Employers",
 		"no-longer-work-here": "I no longer work here"
 	}
 }
diff --git a/shared/src/types/employers.ts b/shared/src/types/employers.ts
@@ -1,11 +1,10 @@
-import { Timestamp } from "firebase-admin/firestore";
+import { Timestamp } from 'firebase-admin/firestore';
 
 export const EMPLOYERS_FIRESTORE_PATH = 'employers';
 
 export type Employer = {
-	userId: string,
-	isCurrent: boolean,
-	employerName: string,
-	created: Timestamp,
+	userId: string;
+	isCurrent: boolean;
+	employerName: string;
+	created: Timestamp;
 };
-
diff --git a/website/src/app/[lang]/[region]/(website)/me/work-info/add-employer-form.tsx b/website/src/app/[lang]/[region]/(website)/me/work-info/add-employer-form.tsx
@@ -1,20 +1,20 @@
-'use client'
+'use client';
 
-import { Form, FormField, FormItem, FormControl, Input, FormMessage, Button } from '@socialincome/ui';
-import * as z from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
+import { Employer } from '@socialincome/shared/src/types/employers';
+import { Button, Form, FormControl, FormField, FormItem, FormMessage, Input } from '@socialincome/ui';
 import { Timestamp, addDoc, collection } from 'firebase/firestore';
+import { useForm } from 'react-hook-form';
 import { useFirestore } from 'reactfire';
+import * as z from 'zod';
 import { useUserContext } from '../user-context-provider';
-import { Employer } from '@socialincome/shared/src/types/employers';
 
 export type AddEmployerFormProps = {
 	translations: {
-		addEmployer: string,
-		submitButton: string,
-	},
-	onNewEmployerSubmitted: () => void,
+		addEmployer: string;
+		submitButton: string;
+	};
+	onNewEmployerSubmitted: () => void;
 };
 
 export function AddEmployerForm({ onNewEmployerSubmitted, translations }: AddEmployerFormProps) {
@@ -30,40 +30,41 @@ export function AddEmployerForm({ onNewEmployerSubmitted, translations }: AddEmp
 		resolver: zodResolver(formSchema),
 		defaultValues: {
 			employerName: '',
-		}
+		},
 	});
 
 	const onSubmit = async (values: FormSchema) => {
 		if (user) {
 			const userId = user!.id;
-			await addDoc<Partial<Employer>>(collection(firestore, "employers"), { ...values, isCurrent: true, userId: userId, created: Timestamp.now() }).then(() => {
+			await addDoc<Partial<Employer>>(collection(firestore, 'employers'), {
+				...values,
+				isCurrent: true,
+				userId: userId,
+				created: Timestamp.now(),
+			}).then(() => {
 				form.reset();
 				onNewEmployerSubmitted();
 			});
-
 		}
 	};
 
 	return (
 		<Form {...form}>
-			<form className="flex flex-col md:flex-row gap-x-4" onSubmit={form.handleSubmit(onSubmit)} >
+			<form className="flex flex-col gap-x-4 md:flex-row" onSubmit={form.handleSubmit(onSubmit)}>
 				<FormField
 					control={form.control}
 					name="employerName"
 					render={({ field }) => (
-						<FormItem className='grow'>
+						<FormItem className="grow">
 							<FormControl>
 								<Input type="text" {...field} placeholder={translations.addEmployer} />
 							</FormControl>
 							<FormMessage />
 						</FormItem>
 					)}
 				/>
-				<Button type="submit">
-					{translations.submitButton}
-				</Button>
+				<Button type="submit">{translations.submitButton}</Button>
 			</form>
 		</Form>
 	);
 }
-
diff --git a/website/src/app/[lang]/[region]/(website)/me/work-info/employers-list.tsx b/website/src/app/[lang]/[region]/(website)/me/work-info/employers-list.tsx
@@ -5,22 +5,22 @@ import { EMPLOYERS_FIRESTORE_PATH } from '@socialincome/shared/src/types/employe
 
 import { Table, TableBody, TableCell, TableRow, Typography } from '@socialincome/ui';
 import { useQuery } from '@tanstack/react-query';
-import { collection, getDocs, query, deleteDoc, updateDoc, doc, where, orderBy } from 'firebase/firestore';
+import { collection, deleteDoc, doc, getDocs, orderBy, query, updateDoc, where } from 'firebase/firestore';
 import { useContext } from 'react';
 import { useFirestore } from 'reactfire';
-import { AddEmployerForm, AddEmployerFormProps } from './add-employer-form';
 import { DefaultParams } from '../../..';
+import { AddEmployerForm, AddEmployerFormProps } from './add-employer-form';
 
 type EmployersListProps = {
 	translations: {
 		employersList: {
-			emptyState: string,
-			deleteEmployer: string,
-			noLongerWorkHere: string,
-			pastEmployers: string,
-		},
-		addEmployerForm: AddEmployerFormProps['translations']
-	}
+			emptyState: string;
+			deleteEmployer: string;
+			noLongerWorkHere: string;
+			pastEmployers: string;
+		};
+		addEmployerForm: AddEmployerFormProps['translations'];
+	};
 } & DefaultParams;
 
 export function EmployersList({ translations }: EmployersListProps) {
@@ -34,7 +34,7 @@ export function EmployersList({ translations }: EmployersListProps) {
 					query(
 						collection(firestore, EMPLOYERS_FIRESTORE_PATH),
 						where('userId', '==', user.id),
-						orderBy('created', 'desc')
+						orderBy('created', 'desc'),
 					),
 				);
 			} else return null;
@@ -49,47 +49,51 @@ export function EmployersList({ translations }: EmployersListProps) {
 
 	const onArchiveEmployer = async (employer_id: String) => {
 		const employerRef = doc(firestore, EMPLOYERS_FIRESTORE_PATH, employer_id);
-		await updateDoc(employerRef, { isCurrent: false }).then(() => onEmployersUpdated())
+		await updateDoc(employerRef, { isCurrent: false }).then(() => onEmployersUpdated());
 	};
 
 	const onEmployersUpdated = async () => {
 		await refetch();
-	}
+	};
 
 	if (isLoading) {
-		return <span>Loading ...</span>
+		return <span>Loading ...</span>;
 	}
 
 	const currentEmployers = data!.docs.filter((e) => e.get('isCurrent'));
 	const pastEmployers = data!.docs.filter((e) => !e.get('isCurrent'));
 
 	return (
 		<>
-			{currentEmployers.length > 0
-				? <Table>
+			{currentEmployers.length > 0 ? (
+				<Table>
 					<TableBody>
 						{currentEmployers.map((employer, index) => {
 							return (
 								<TableRow key={index}>
 									<TableCell>
-										<div className='flex flex-row'>
-											<Typography size="lg" weight='medium' className='grow'>{employer.get('employerName')}</Typography>
-											<div className='flex flex-col'>
+										<div className="flex flex-row">
+											<Typography size="lg" weight="medium" className="grow">
+												{employer.get('employerName')}
+											</Typography>
+											<div className="flex flex-col">
 												<button onClick={() => onArchiveEmployer(employer.id)}>
-													<Typography className='underline'>{translations.employersList.noLongerWorkHere}</Typography>
+													<Typography className="underline">{translations.employersList.noLongerWorkHere}</Typography>
 												</button>
 											</div>
 										</div>
 									</TableCell>
-								</TableRow>)
+								</TableRow>
+							);
 						})}
 					</TableBody>
 				</Table>
-				: <Typography>{translations.employersList.emptyState}</Typography>
-			}
+			) : (
+				<Typography>{translations.employersList.emptyState}</Typography>
+			)}
 
 			<AddEmployerForm onNewEmployerSubmitted={onEmployersUpdated} translations={translations.addEmployerForm} />
-			{pastEmployers.length > 0 &&
+			{pastEmployers.length > 0 && (
 				<>
 					<Typography size="2xl" weight="medium" className="-mt-10 mb-4 md:mt-0">
 						{translations.employersList.pastEmployers}
@@ -100,21 +104,24 @@ export function EmployersList({ translations }: EmployersListProps) {
 								return (
 									<TableRow key={index}>
 										<TableCell>
-											<div className='flex flex-row'>
-												<Typography size="lg" weight='medium' className='grow'>{employer.get('employerName')}</Typography>
-												<div className='flex flex-col'>
+											<div className="flex flex-row">
+												<Typography size="lg" weight="medium" className="grow">
+													{employer.get('employerName')}
+												</Typography>
+												<div className="flex flex-col">
 													<button onClick={() => onDeleteEmployer(employer.id)}>
-														<Typography className='underline'>{translations.employersList.deleteEmployer}</Typography>
+														<Typography className="underline">{translations.employersList.deleteEmployer}</Typography>
 													</button>
 												</div>
 											</div>
 										</TableCell>
-									</TableRow>)
+									</TableRow>
+								);
 							})}
 						</TableBody>
 					</Table>
-				</>}
-
+				</>
+			)}
 		</>
-	)
+	);
 }
diff --git a/website/src/app/[lang]/[region]/(website)/me/work-info/page.tsx b/website/src/app/[lang]/[region]/(website)/me/work-info/page.tsx
@@ -1,6 +1,6 @@
-import { DefaultPageProps, DefaultParams } from '@/app/[lang]/[region]';
+import { DefaultPageProps } from '@/app/[lang]/[region]';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
-import { Typography, Form, FormField, FormItem, FormLabel, FormControl, Input, Button } from '@socialincome/ui';
+import { Typography } from '@socialincome/ui';
 import { EmployersList } from './employers-list';
 
 export default async function Page({ params }: DefaultPageProps) {
@@ -10,20 +10,22 @@ export default async function Page({ params }: DefaultPageProps) {
 			<Typography size="2xl" weight="medium" className="-mt-10 mb-4 md:mt-0">
 				{translator.t('work-info.current-employers')}
 			</Typography>
-			<EmployersList lang={params.lang} region={params.region} translations={
-				{
+			<EmployersList
+				lang={params.lang}
+				region={params.region}
+				translations={{
 					addEmployerForm: {
 						addEmployer: translator.t('work-info.add-employer'),
-						submitButton: translator.t('work-info.submit-button')
+						submitButton: translator.t('work-info.submit-button'),
 					},
 					employersList: {
 						emptyState: translator.t('work-info.empty-state'),
 						deleteEmployer: translator.t('work-info.delete-employer'),
 						pastEmployers: translator.t('work-info.past-employers'),
-						noLongerWorkHere: translator.t('work-info.no-longer-work-here')
-					}
-				}
-			} />
+						noLongerWorkHere: translator.t('work-info.no-longer-work-here'),
+					},
+				}}
+			/>
 		</div>
 	);
 }