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 (