Ts strict mode (#1288)

part of #879

website/src/components/DataTable.tsx

@@ -84,7 +84,7 @@ export const DataTable = <T,>({
     } else {
       newValues = filterValues.map((oldValue) => (oldValue.id === value.id ? value : oldValue));
     }
-    onFilterChange(newValues);
+    onFilterChange && onFilterChange(newValues);
   };
   return (
     <>

website/src/components/UserTable.tsx

@@ -76,14 +76,14 @@ export const UserTable = memo(function UserTable() {
 
   const toPreviousPage = () => {
     setPagination({
-      cursor: data.prev,
+      cursor: data?.prev || "",
       direction: "back",
     });
   };
 
   const toNextPage = () => {
     setPagination({
-      cursor: data.next,
+      cursor: data?.next || "",
       direction: "forward",
     });
   };

website/src/lib/users.ts

@@ -32,9 +32,8 @@ const getUserLanguage = (req: NextApiRequest): string => {
  *
  * @param {string} id The user's web auth id.
  *
- * @return {BackendUserCore} The most specific auth type and id for the user.
  */
-const getBackendUserCore = async (id: string) => {
+const getBackendUserCore = async (id: string): Promise<BackendUserCore | null> => {
   const user = await prisma.user.findUnique({
     where: { id },
     select: {
@@ -44,21 +43,27 @@ const getBackendUserCore = async (id: string) => {
     },
   });
 
+  if (!user) {
+    return null;
+  }
+
   // If there are no linked accounts, just use what we have locally.
   if (user.accounts.length === 0) {
     return {
       id: user.id,
-      display_name: user.name,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      display_name: user.name!,
       auth_method: "local",
-    } as BackendUserCore;
+    };
   }
 
   // Otherwise, use the first linked account that the user created.
   return {
     id: user.accounts[0].providerAccountId,
-    display_name: user.name,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    display_name: user.name!,
     auth_method: user.accounts[0].provider,
-  } as BackendUserCore;
+  };
 };
 
 export { getBackendUserCore, getUserLanguage };

website/src/pages/auth/signin.tsx

@@ -7,9 +7,10 @@ import { GetServerSideProps } from "next";
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { getProviders, signIn } from "next-auth/react";
+import { BuiltInProviderType } from "next-auth/providers";
+import { ClientSafeProvider, getProviders, signIn } from "next-auth/react";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import React, { useEffect, useRef, useState } from "react";
+import React, { ReactNode, useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { AuthLayout } from "src/components/AuthLayout";
 import { CloudFlareCaptcha } from "src/components/CloudflareCaptcha";
@@ -48,7 +49,7 @@ const errorMessages: Record<SignInErrorTypes, string> = {
 };
 
 interface SigninProps {
-  providers: Awaited<ReturnType<typeof getProviders>>;
+  providers: Record<BuiltInProviderType, ClientSafeProvider>;
 }
 
 function Signin({ providers }: SigninProps) {
@@ -137,7 +138,7 @@ function Signin({ providers }: SigninProps) {
   );
 }
 
-Signin.getLayout = (page) => (
+Signin.getLayout = (page: ReactNode) => (
   <div className="grid grid-rows-[min-content_1fr_min-content] h-full justify-items-stretch">
     <Header />
     {page}
@@ -151,7 +152,7 @@ const emailSigninCaptcha = boolean(process.env.NEXT_PUBLIC_ENABLE_EMAIL_SIGNIN_C
 
 const EmailSignInForm = ({ providerId }: { providerId: string }) => {
   const { register, handleSubmit } = useForm<{ email: string }>();
-  const captcha = useRef<TurnstileInstance>();
+  const captcha = useRef<TurnstileInstance>(null);
   const [captchaSuccess, setCaptchaSuccess] = useState(false);
   const signinWithEmail = (data: { email: string }) => {
     signIn(providerId, {

website/src/pages/auth/verify.tsx

@@ -1,4 +1,5 @@
 import { useColorMode } from "@chakra-ui/react";
+import { GetServerSideProps } from "next";
 import Head from "next/head";
 import { getCsrfToken, getProviders } from "next-auth/react";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
@@ -22,7 +23,7 @@ export default function Verify() {
   );
 }
 
-export async function getServerSideProps({ locale }) {
+export const getServerSideProps: GetServerSideProps = async ({ locale = "en" }) => {
   const csrfToken = await getCsrfToken();
   const providers = await getProviders();
   return {
@@ -32,4 +33,4 @@ export async function getServerSideProps({ locale }) {
       ...(await serverSideTranslations(locale, ["common"])),
     },
   };
-}
+};

website/src/pages/messages/[id]/index.tsx

@@ -1,4 +1,5 @@
 import { Box, Card, Text, useColorModeValue } from "@chakra-ui/react";
+import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import Head from "next/head";
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
@@ -10,7 +11,7 @@ import { get } from "src/lib/api";
 import { Message } from "src/types/Conversation";
 import useSWRImmutable from "swr/immutable";
 
-const MessageDetail = ({ id }: { id: string }) => {
+const MessageDetail = ({ id }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
   const { t } = useTranslation(["message", "common"]);
   const backgroundColor = useColorModeValue("white", "gray.800");
 
@@ -49,11 +50,15 @@ const MessageDetail = ({ id }: { id: string }) => {
   );
 };
 
-MessageDetail.getLayout = (page) => getDashboardLayout(page);
+MessageDetail.getLayout = getDashboardLayout;
 
-export const getServerSideProps = async ({ locale, query }) => ({
+export const getServerSideProps: GetServerSideProps<{ id: string }, { id: string }> = async ({
+  locale = "en",
+  params,
+}) => ({
   props: {
-    id: query.id,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    id: params!.id,
     ...(await serverSideTranslations(locale, ["common", "message", "labelling"])),
   },
 });

website/src/pages/tasks/all.tsx

@@ -16,6 +16,6 @@ const AllTasks = () => {
   );
 };
 
-AllTasks.getLayout = (page) => getDashboardLayout(page);
+AllTasks.getLayout = getDashboardLayout;
 
 export default AllTasks;