Convert to useTypedRouteLoaderData and improve the hydrateDates function

apps/webapp/app/hooks/useIntegrationClient.tsx

@@ -1,27 +1,18 @@
-import type { UseDataFunctionReturn } from "remix-typedjson";
+import {
+  UseDataFunctionReturn,
+  useTypedRouteLoaderData,
+} from "remix-typedjson";
 import invariant from "tiny-invariant";
-import type { loader as clientLoader } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations_.$clientParam/route";
-import { hydrateObject, useMatchesData } from "~/utils";
+import type { loader } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations_.$clientParam/route";
 
-export type MatchedClient = UseDataFunctionReturn<
-  typeof clientLoader
->["client"];
+export type MatchedClient = UseDataFunctionReturn<typeof loader>["client"];
 
 export function useOptionalIntegrationClient() {
-  const routeMatch = useMatchesData(
+  const routeMatch = useTypedRouteLoaderData<typeof loader>(
     "routes/_app.orgs.$organizationSlug.projects.$projectParam.integrations_.$clientParam"
   );
 
-  if (!routeMatch || !routeMatch.data.client) {
-    return undefined;
-  }
-
-  const result = hydrateObject<
-    UseDataFunctionReturn<typeof clientLoader>["client"]
-  >(routeMatch.data.client);
-
-  if (result == null) return undefined;
-  return result;
+  return routeMatch?.client;
 }
 
 export function useIntegrationClient() {

apps/webapp/app/hooks/useJob.tsx

@@ -1,34 +1,29 @@
-import type { UseDataFunctionReturn } from "remix-typedjson";
-import type { loader as jobLoader } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam/route";
-import { hydrateObject, useMatchesData } from "~/utils";
-import { useOptionalProject } from "./useProject";
+import {
+  UseDataFunctionReturn,
+  useTypedRouteLoaderData,
+} from "remix-typedjson";
 import invariant from "tiny-invariant";
+import type { loader } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam/route";
+import { useOptionalProject } from "./useProject";
 
-export type MatchedJob = UseDataFunctionReturn<typeof jobLoader>["job"];
+export type MatchedJob = UseDataFunctionReturn<typeof loader>["job"];
 
 export function useOptionalJob() {
   const project = useOptionalProject();
-  const routeMatch = useMatchesData(
+  const routeMatch = useTypedRouteLoaderData<typeof loader>(
     "routes/_app.orgs.$organizationSlug.projects.$projectParam.jobs.$jobParam"
   );
 
-  if (!project || !routeMatch || !routeMatch.data.job) {
+  if (!project || !routeMatch || !routeMatch.job) {
     return undefined;
   }
 
-  if (routeMatch.data.job == null) {
+  if (routeMatch.job == null) {
     return undefined;
   }
 
-  const result = hydrateObject<UseDataFunctionReturn<typeof jobLoader>["job"]>(
-    routeMatch.data.job
-  );
-
-  if (result == null) return undefined;
-
   //get the job from the list on the project
-  const job = project.jobs.find((j) => j.id === result.id);
-  return job;
+  return project.jobs.find((j) => j.id === routeMatch.job.id);
 }
 
 export function useJob() {

apps/webapp/app/hooks/useOrganizations.ts

@@ -1,8 +1,11 @@
-import type { UseDataFunctionReturn } from "remix-typedjson";
-import type { loader as appLoader } from "~/routes/_app/route";
-import type { loader as orgLoader } from "~/routes/_app.orgs.$organizationSlug/route";
-import { hydrateObject, useMatchesData } from "~/utils";
+import {
+  UseDataFunctionReturn,
+  useTypedRouteLoaderData,
+} from "remix-typedjson";
 import invariant from "tiny-invariant";
+import type { loader as orgLoader } from "~/routes/_app.orgs.$organizationSlug/route";
+import type { loader as appLoader } from "~/routes/_app/route";
+import { hydrateObject, useMatchesData } from "~/utils";
 
 export type MatchedOrganization = UseDataFunctionReturn<
   typeof appLoader
@@ -20,24 +23,19 @@ export function useOrganizations() {
 
 export function useOptionalOrganization() {
   const orgs = useOptionalOrganizations();
-  const routeMatch = useMatchesData("routes/_app.orgs.$organizationSlug");
+  const routeMatch = useTypedRouteLoaderData<typeof orgLoader>(
+    "routes/_app.orgs.$organizationSlug"
+  );
 
-  if (!orgs || !routeMatch || !routeMatch.data.organization) {
+  if (!orgs || !routeMatch || !routeMatch.organization) {
     return undefined;
   }
 
-  if (routeMatch.data.organization == null) {
+  if (routeMatch.organization === null) {
     return undefined;
   }
 
-  const result = hydrateObject<
-    UseDataFunctionReturn<typeof orgLoader>["organization"]
-  >(routeMatch.data.organization);
-
-  if (result == null) return undefined;
-
-  const org = orgs.find((o) => o.id === result.id);
-  return org;
+  return orgs.find((o) => o.id === routeMatch.organization.id);
 }
 
 export function useOrganization() {

apps/webapp/app/hooks/useProject.tsx

@@ -1,29 +1,20 @@
-import type { UseDataFunctionReturn } from "remix-typedjson";
+import {
+  UseDataFunctionReturn,
+  useTypedRouteLoaderData,
+} from "remix-typedjson";
 import invariant from "tiny-invariant";
-import type { loader as projectLoader } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam/route";
-import { hydrateObject, useMatchesData } from "~/utils";
+import type { loader } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam/route";
 
-export type MatchedProject = UseDataFunctionReturn<
-  typeof projectLoader
->["project"];
+export type MatchedProject = UseDataFunctionReturn<typeof loader>["project"];
 
 export type ProjectJob = MatchedProject["jobs"][number];
 
 export function useOptionalProject() {
-  const routeMatch = useMatchesData(
+  const routeMatch = useTypedRouteLoaderData<typeof loader>(
     "routes/_app.orgs.$organizationSlug.projects.$projectParam"
   );
 
-  if (!routeMatch || !routeMatch.data.project) {
-    return undefined;
-  }
-
-  const result = hydrateObject<
-    UseDataFunctionReturn<typeof projectLoader>["project"]
-  >(routeMatch.data.project);
-
-  if (result == null) return undefined;
-  return result;
+  return routeMatch?.project;
 }
 
 export function useProject() {

apps/webapp/app/utils.ts

@@ -71,7 +71,11 @@ export function hydrateDates(object: any): any {
     return object;
   }
 
-  if (typeof object === "string" && object.match(/\d{4}-\d{2}-\d{2}/)) {
+  if (
+    typeof object === "string" &&
+    object.match(/\d{4}-\d{2}-\d{2}/) &&
+    !isNaN(Date.parse(object))
+  ) {
     return new Date(object);
   }