Improve NotFound handling (#91)

# Improve NotFound handling

## ♻️ Current situation & Problem
404 errors uses basic tanstack router not found.

## ⚙️ Release Notes 
* Improve NotFound handling


![image](https://github.com/user-attachments/assets/6f5c7cbd-1895-47ae-83b0-408e3c2be3d7)



### Code of Conduct & Contributing Guidelines 

By submitting creating this pull request, you agree to follow our [Code
of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md):
- [x] I agree to follow the [Code of
Conduct](https://github.com/StanfordBDHG/.github/blob/main/CODE_OF_CONDUCT.md)
and [Contributing
Guidelines](https://github.com/StanfordBDHG/.github/blob/main/CONTRIBUTING.md).

components/NotFound/NotFound.tsx

@@ -0,0 +1,34 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+
+import { PageTitle } from '@stanfordspezi/spezi-web-design-system/molecules/DashboardLayout'
+import {
+  NotFound as NotFoundBase,
+  type NotFoundProps,
+} from '@stanfordspezi/spezi-web-design-system/molecules/NotFound'
+import { useQuery } from '@tanstack/react-query'
+import { RouteOff } from 'lucide-react'
+import { currentUserQueryOptions } from '@/modules/firebase/UserProvider'
+import { DashboardLayout } from '@/routes/~_dashboard/DashboardLayout'
+
+/**
+ * NotFound component wrapped with DashboardLayout if user is signed in
+ * */
+export const NotFound = (props: NotFoundProps) => {
+  const userQuery = useQuery(currentUserQueryOptions())
+
+  const notFound = <NotFoundBase {...props} />
+
+  return userQuery.data ?
+      <DashboardLayout
+        title={<PageTitle title="Not Found" icon={<RouteOff />} />}
+      >
+        {notFound}
+      </DashboardLayout>
+    : <div className="flex-center min-h-screen">{notFound}</div>
+}

components/NotFound/index.tsx

@@ -0,0 +1,9 @@
+//
+// This source file is part of the Stanford Biodesign Digital Health ENGAGE-HF open-source project
+//
+// SPDX-FileCopyrightText: 2023 Stanford University and the project authors (see CONTRIBUTORS.md)
+//
+// SPDX-License-Identifier: MIT
+//
+
+export * from './NotFound'

main.tsx

@@ -6,12 +6,22 @@
 // SPDX-License-Identifier: MIT
 //
 
-import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { createRouter, RouterProvider } from '@tanstack/react-router'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { NotFound } from '@/components/NotFound/NotFound'
+import { routes } from '@/modules/routes'
 import { routeTree } from './routeTree.gen'
 
-const router = createRouter({ routeTree })
+const router = createRouter({
+  routeTree,
+  defaultNotFoundComponent: () => (
+    <NotFound
+      backPage={{ name: 'home', href: routes.home }}
+      entityName="page"
+    />
+  ),
+})
 
 declare module '@tanstack/react-router' {
   interface Register {

modules/user/queries.tsx

@@ -8,7 +8,6 @@
 
 import { UserType } from '@stanfordbdhg/engagehf-models'
 import { queryOptions } from '@tanstack/react-query'
-import { notFound } from '@tanstack/react-router'
 import { query, where } from 'firebase/firestore'
 import { docRefs, getCurrentUser, refs } from '@/modules/firebase/app'
 import { type Invitation, type Organization } from '@/modules/firebase/models'
@@ -88,13 +87,13 @@ const getUserAuthData = async (userId: string) => {
     displayName: data.auth.displayName,
   }))
   const authUser = allAuthData.at(0)
-  if (!authUser || !user) throw notFound()
+  if (!authUser || !user) return null
   return { user, authUser, resourceType: 'user' as const }
 }
 
 const getUserInvitationData = async (userId: string) => {
   const invitation = await getDocData(docRefs.invitation(userId))
-  if (!invitation) throw notFound()
+  if (!invitation) return null
   if (!invitation.auth) throw new Error('Incomplete data')
   return {
     user: {
@@ -129,7 +128,13 @@ export const parseUserId = (userId: string) =>
 export const getUserData = async (
   userId: string,
   resourceType: ResourceType,
-) =>
-  resourceType === 'invitation' ?
-    getUserInvitationData(userId)
-  : getUserAuthData(userId)
+  validUserTypes: UserType[],
+) => {
+  const data =
+    resourceType === 'invitation' ?
+      await getUserInvitationData(userId)
+    : await getUserAuthData(userId)
+  return data && validUserTypes.includes(data.user.type) ? data : null
+}
+
+export type UserData = Exclude<Awaited<ReturnType<typeof getUserData>>, null>

package.json

@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@stanfordbdhg/engagehf-models": "^0.4.0",
-    "@stanfordspezi/spezi-web-design-system": "^0.1.0",
+    "@stanfordspezi/spezi-web-design-system": "^0.2.1",
     "@t3-oss/env-core": "^0.11.1",
     "@tanstack/react-query": "^5.59.19",
     "@tanstack/react-router": "^1.78.3",

routes/~_dashboard/~patients/utils.ts

@@ -24,7 +24,7 @@ import { mapAuthData } from '@/modules/firebase/user'
 import { getDocsData, type ResourceType } from '@/modules/firebase/utils'
 import { queryClient } from '@/modules/query/queryClient'
 import {
-  type getUserData,
+  type UserData,
   userOrganizationQueryOptions,
 } from '@/modules/user/queries'
 import { labsObservationCollections } from '@/routes/~_dashboard/~patients/clientUtils'
@@ -221,7 +221,7 @@ export const getUserActivity = async ({
   user,
   resourceType,
   authUser,
-}: Awaited<ReturnType<typeof getUserData>>) => {
+}: UserData) => {
   const latestQuestionnaires = await getDocsData(
     query(
       refs.questionnaireResponses({ resourceType, userId: authUser.uid }),

routes/~_dashboard/~patients/~$id/~index.tsx

@@ -20,6 +20,7 @@ import { createFileRoute, notFound, useRouter } from '@tanstack/react-router'
 import { Contact } from 'lucide-react'
 import { Helmet } from 'react-helmet'
 import { z } from 'zod'
+import { NotFound } from '@/components/NotFound'
 import { callables, db, docRefs, refs } from '@/modules/firebase/app'
 import {
   getMedicationRequestData,
@@ -30,6 +31,7 @@ import {
   getDocsData,
   type ResourceType,
 } from '@/modules/firebase/utils'
+import { routes } from '@/modules/routes'
 import { getUserData, parseUserId } from '@/modules/user/queries'
 import {
   Medications,
@@ -245,11 +247,17 @@ export const Route = createFileRoute('/_dashboard/patients/$id/')({
   validateSearch: z.object({
     tab: z.nativeEnum(PatientPageTab).optional().catch(undefined),
   }),
+  notFoundComponent: () => (
+    <NotFound
+      entityName="patient"
+      backPage={{ name: 'patients list', href: routes.patients.index }}
+    />
+  ),
   loader: async ({ params }) => {
     const { userId, resourceType } = parseUserId(params.id)
-    const userData = await getUserData(userId, resourceType)
+    const userData = await getUserData(userId, resourceType, [UserType.patient])
+    if (!userData) throw notFound()
     const { user, authUser } = userData
-    if (user.type !== UserType.patient) throw notFound()
 
     return {
       user,

routes/~_dashboard/~users/~$id.tsx

@@ -13,9 +13,11 @@ import { PageTitle } from '@stanfordspezi/spezi-web-design-system/molecules/Dash
 import { createFileRoute, notFound, useRouter } from '@tanstack/react-router'
 import { Users } from 'lucide-react'
 import { Helmet } from 'react-helmet'
+import { NotFound } from '@/components/NotFound'
 import { callables, docRefs, ensureType } from '@/modules/firebase/app'
 import { getDocDataOrThrow } from '@/modules/firebase/utils'
 import { queryClient } from '@/modules/query/queryClient'
+import { routes } from '@/modules/routes'
 import {
   getUserData,
   parseUserId,
@@ -89,10 +91,21 @@ const UserPage = () => {
 export const Route = createFileRoute('/_dashboard/users/$id')({
   component: UserPage,
   beforeLoad: () => ensureType([UserType.admin, UserType.owner]),
+  notFoundComponent: () => (
+    <NotFound
+      backPage={{ name: 'users list', href: routes.users.index }}
+      entityName="user"
+    />
+  ),
   loader: async ({ params }) => {
     const { resourceType, userId } = parseUserId(params.id)
-    const { user, authUser } = await getUserData(userId, resourceType)
-    if (user.type === UserType.patient) throw notFound()
+    const userData = await getUserData(userId, resourceType, [
+      UserType.clinician,
+      UserType.admin,
+      UserType.owner,
+    ])
+    if (!userData) throw notFound()
+    const { user, authUser } = userData
 
     return {
       user,