update dependencies

app/components/AmountDisplay/AmountDisplay.tsx

@@ -1,3 +1,4 @@
+import type { Settings } from "@prisma/client";
 import { useLoaderData } from "@remix-run/react";
 
 import { formatBalance, getAmount } from '~/utils/number';
@@ -9,7 +10,7 @@ interface AmountDisplayType {
 }
 
 function AmountDisplay({ amount, isPositive }: AmountDisplayType) {
-  const { userSettings } = useLoaderData();
+  const { userSettings } = useLoaderData() as { userSettings: Settings };
 
   const color = isPositive ? 'text-green-500' : 'text-red-500';
 

app/components/DateDisplay/DateDisplay.tsx

@@ -1,3 +1,4 @@
+import type { Settings } from "@prisma/client";
 import { useLoaderData } from "@remix-run/react";
 
 import { getUserLocale } from '~/utils/userSettings';
@@ -8,7 +9,7 @@ type DateDisplayProps = {
 }
 
 function DateDisplay({ date, type }: DateDisplayProps) {
-  const { userSettings } = useLoaderData();
+  const { userSettings } = useLoaderData() as { userSettings: Settings };
   // `day` and `week` date type share the same display
   let options: any = { dateStyle: 'full' };
   if (type === 'year') {

app/routes/_auth.login.tsx

@@ -1,4 +1,4 @@
-import type { LoaderArgs, ActionArgs } from '@remix-run/node';
+import type { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node';
 import { json, redirect } from "@remix-run/node";
 import { Form, useNavigation, useActionData, useSearchParams } from "@remix-run/react";
 
@@ -18,7 +18,7 @@ function validateEmail(email: unknown) {
   }
 }
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   const userId = await getUserId(request);
   if (userId !== null) {
     throw redirect('/dashboard/');
@@ -28,7 +28,7 @@ export async function loader({ request }: LoaderArgs) {
 }
 
 // most of the login process is inspired from the kentcdodds.com website
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
   const form = await request.formData();
   const email = form.get('email');
   const redirectTo = `${form.get('redirectTo')}` || '/dashboard/';

app/routes/_auth.magic.tsx

@@ -1,12 +1,12 @@
-import type { LoaderArgs } from '@remix-run/node';
+import type { LoaderFunctionArgs } from '@remix-run/node';
 import { json, redirect } from '@remix-run/node';
 import { Link, useLoaderData } from '@remix-run/react';
 
 import { verifyLoginToken, TokenExpiredError } from '~/utils/jwt.server';
 import { getUser, createUser } from '~/utils/queries.server';
 import { createUserSession } from '~/utils/session.server';
 
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
   const url = new URL(request.url);
   const token = url.searchParams.get('token');
 

app/routes/_landing._index.tsx

@@ -1,10 +1,10 @@
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { Link, useLoaderData } from '@remix-run/react';
 
 import{ getUserId } from '~/utils/session.server';
 import landing from "~/images/landing.png";
 
-export const loader = async({ request }: LoaderArgs) => {
+export const loader = async({ request }: LoaderFunctionArgs) => {
   const userId = await getUserId(request);
 
   return ({

app/routes/dashboard.balance.$type.$date.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import type { LoaderArgs, ActionArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs, ActionFunctionArgs } from "@remix-run/node";
 import type { Punctual, Recurrent } from '@prisma/client';
 import { redirect } from '@remix-run/node';
 import { useLoaderData, useParams, useSearchParams } from "@remix-run/react";
@@ -43,7 +43,7 @@ import {
   computeNewAmount,
 } from '~/utils/entry';
 
-export const action = async ({ request }: ActionArgs) => {
+export const action = async ({ request }: ActionFunctionArgs) => {
   const formData = Object.fromEntries(await request.formData());
   const userId = await requireUserId(request);
   const url = new URL(request.url);
@@ -144,7 +144,7 @@ export const action = async ({ request }: ActionArgs) => {
   return null;
 };
 
-export const loader = async ({ request, params }: LoaderArgs) => {
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
   invariant(params.type, 'Expected params.type');
   invariant(params.date, 'Expected params.date');

app/routes/dashboard.settings.tsx

@@ -1,4 +1,4 @@
-import type { ActionArgs, LoaderArgs } from "@remix-run/node";
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
 import { Form, useNavigation, useLoaderData } from "@remix-run/react";
 
 import Button from '~/components/Button';
@@ -24,7 +24,7 @@ function validateLocale(locale: unknown) {
   }
 }
 
-export const action = async ({ request }: ActionArgs) => {
+export const action = async ({ request }: ActionFunctionArgs) => {
   const formData = Object.fromEntries(await request.formData());
   const userId = await requireUserId(request);
 
@@ -48,7 +48,7 @@ export const action = async ({ request }: ActionArgs) => {
   return null;
 }
 
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
   const settings = await getSettings(userId);
   const user = await getUserById(userId);

app/routes/dashboard.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
 
 import AppBar from '~/components/AppBar';
@@ -9,7 +9,7 @@ import { getSettings } from '~/utils/queries.server';
 import { getUserLocale } from '~/utils/userSettings';
 import { localizeDateFns } from '~/utils/l10n';
 
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
   const settings = await getSettings(userId);
 

app/routes/logout.tsx

@@ -1,9 +1,9 @@
-import type { ActionArgs } from '@remix-run/node';
+import type { ActionFunctionArgs } from '@remix-run/node';
 import { redirect } from '@remix-run/node';
 
 import { deleteSession } from '~/utils/session.server';
 
-export async function action({ request }: ActionArgs) {
+export async function action({ request }: ActionFunctionArgs) {
   return deleteSession(request);
 }
 

app/utils/date.test.ts

@@ -12,9 +12,9 @@ import {
 
 import { localizeDateFns } from './l10n';
 
-beforeAll(() => {
+beforeAll(async () => {
   // the week will start a monday
-  localizeDateFns('fr-FR');
+  await localizeDateFns('fr-FR');
 });
 
 test('formatDate returns a date in the yyyy-MM-dd format', () => {

app/utils/entry.test.ts

@@ -12,9 +12,9 @@ import {
 
 import { localizeDateFns } from './l10n';
 
-beforeAll(() => {
+beforeAll(async () => {
   // the week will start a monday
-  localizeDateFns('fr-FR');
+  await localizeDateFns('fr-FR');
 });
 
 function dummyRecurrentEntry(startDate: Date, endDate: Date | null, amount: number, isPositive: boolean, recurrence: string): Recurrent {

app/utils/jwt.server.ts

@@ -1,5 +1,6 @@
 import type { JwtPayload } from 'jsonwebtoken'
-import { sign, verify, JsonWebTokenError, TokenExpiredError } from 'jsonwebtoken';
+import pkg from 'jsonwebtoken'
+const { sign, verify, JsonWebTokenError, TokenExpiredError } = pkg;
 
 const jwtSecret = process.env.JWT_SECRET;
 if (!jwtSecret) {

app/utils/l10n.ts

@@ -1,14 +1,14 @@
 import { setDefaultOptions } from 'date-fns';
 
-function localizeDateFns(locale: string) {
+async function localizeDateFns(locale: string) {
   if (locale === 'fr-FR') {
-    const { fr } = require('date-fns/locale');
+    const { fr } = await import('date-fns/locale');
     setDefaultOptions({ locale: fr });
 
     return;
   }
 
-  const { enUS } = require('date-fns/locale');
+  const { enUS } = await import('date-fns/locale');
   setDefaultOptions({ locale: enUS });
 }