diff --git a/app/components/TimeElapsed.tsx b/app/components/TimeElapsed.tsx index 751dea1..fcd6c77 100644 --- a/app/components/TimeElapsed.tsx +++ b/app/components/TimeElapsed.tsx @@ -1,5 +1,7 @@ import { Box, MediaQuery } from '@mantine/core'; +import { useMatches } from '@remix-run/react'; import React, { useState, useEffect } from 'react'; +import { User } from '~/models/user.server'; export interface Props { startTime: Date | string; @@ -7,6 +9,9 @@ export interface Props { } const TimeElapsed = ({ startTime, endTime }: Props) => { + let user = useMatches().find((m) => m.id === 'root')?.data?.user as + | User + | undefined; const [elapsed, setElapsed] = useState( (new Date(endTime || Date.now()).getTime() - new Date(startTime).getTime()) / @@ -70,19 +75,17 @@ const TimeElapsed = ({ startTime, endTime }: Props) => { }} > - {Intl.DateTimeFormat('it-IT', { + {Intl.DateTimeFormat(user?.dateFormat || 'en-GB', { hour: '2-digit', - minute: '2-digit', - hour12: false + minute: '2-digit' }).format(new Date(startTime))} {endTime - ? Intl.DateTimeFormat('it-IT', { + ? Intl.DateTimeFormat(user?.dateFormat || 'en-GB', { hour: '2-digit', - minute: '2-digit', - hour12: false + minute: '2-digit' }).format(new Date(endTime)) : 'now'} diff --git a/app/models/user.server.ts b/app/models/user.server.ts index 7ebefec..a2e9ea6 100644 --- a/app/models/user.server.ts +++ b/app/models/user.server.ts @@ -35,6 +35,18 @@ export async function updateUserEmail(id: User['id'], email: string) { }); } +export async function updateUserPrefs( + id: User['id'], + prefs: { + dateFormat?: User['dateFormat']; + } +) { + return prisma.user.update({ + where: { id }, + data: { ...prefs } + }); +} + export async function updateUserPassword(id: User['id'], password: string) { const hashedPassword = await bcrypt.hash(password, 10); diff --git a/app/routes/account.tsx b/app/routes/account.tsx index 47d7a73..a9b2c57 100644 --- a/app/routes/account.tsx +++ b/app/routes/account.tsx @@ -20,11 +20,12 @@ import { Popover, Progress, Modal, - Badge + Badge, + Select } from '@mantine/core'; import { AtSign, Check, Lock, Save, Trash, X } from 'react-feather'; import { requireUser } from '~/session.server'; -import { updateUserEmail } from '~/models/user.server'; +import { updateUserEmail, updateUserPrefs } from '~/models/user.server'; import { validateEmail } from '~/utils'; export async function loader({ request }: LoaderArgs) { @@ -37,9 +38,12 @@ export async function loader({ request }: LoaderArgs) { export async function action({ request }: ActionArgs) { const user = await requireUser(request); const formData = await request.formData(); - const email = formData.get('email'); + const email = (formData.get('email') || undefined) as string | undefined; + const dateFormat = (formData.get('dateFormat') || undefined) as + | string + | undefined; - if (!validateEmail(email)) { + if (email && !validateEmail(email)) { return json( { errors: { @@ -51,7 +55,13 @@ export async function action({ request }: ActionArgs) { ); } - await updateUserEmail(user.id, email); + if (email && email !== user.email) { + await updateUserEmail(user.id, email); + } + + if (dateFormat && dateFormat !== user.dateFormat) { + await updateUserPrefs(user.id, { dateFormat }); + } return redirect('/account/updatesuccess'); } @@ -76,14 +86,20 @@ export default function Account() { } }, [actionData]); + const [dateFormat, setDateFormat] = React.useState( + loaderData.user.dateFormat + ); + return ( Account + + {loaderData.user.admin && ( - + Role:{' '} ADMIN @@ -116,8 +132,6 @@ export default function Account() { - -