refactor(troubleshooting page): Refactor data fetching

frontend/app/(defaultLayout)/app-router/Troubleshooting/[device]/[problem]/[wikiid]/data.ts

@@ -0,0 +1,32 @@
+import {
+   IFixitAPIClient,
+   VarnishBypassHeader,
+} from '@ifixit/ifixit-api-client';
+import { SentryError } from '@ifixit/sentry';
+import { TroubleshootingApiData } from '@templates/troubleshooting/hooks/useTroubleshootingProps';
+import { ifixitOrigin } from 'app/_helpers/app-helpers';
+import { cache } from 'react';
+
+export const findProblemWiki = cache(
+   async (wikiid: string): Promise<TroubleshootingApiData | null> => {
+      const client = new IFixitAPIClient({
+         origin: ifixitOrigin(),
+         headers: VarnishBypassHeader,
+      });
+
+      const resp = await client.getRaw(
+         `Troubleshooting/wikiid/${wikiid}`,
+         'troubleshooting'
+      );
+
+      if (resp.status === 404) {
+         return null;
+      }
+
+      if (!resp.ok) {
+         throw new SentryError(resp.statusText);
+      }
+
+      return await resp.json();
+   }
+);

frontend/app/(defaultLayout)/app-router/Troubleshooting/[device]/[problem]/[wikiid]/page.tsx

@@ -1,24 +1,55 @@
 import { flags } from '@config/flags';
-import { notFound } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
+import { findProblemWiki } from './data';
+import { invariant } from '@ifixit/helpers';
 
-interface WikiPageProps {
+export const fetchCache = 'default-no-store';
+
+interface ProblemWikiPageProps {
    params: {
       device: string;
       problem: string;
       wikiid: string;
    };
-   searchParams: {
-      disableCacheGets?: string | string[] | undefined;
-      variant?: string;
-   };
+   searchParams: Record<string, any>;
 }
 
-export default async function WikiPage({ params }: WikiPageProps) {
+export default async function ProblemWikiPage({
+   params,
+   searchParams,
+}: ProblemWikiPageProps) {
    if (!flags.APP_ROUTER_TROUBLESHOOTING_PAGE_ENABLED) notFound();
 
+   const problemWiki = await findProblemWiki(params.wikiid);
+
+   if (problemWiki == null) notFound();
+
+   if (currentPath() !== canonicalPath())
+      redirect(canonicalPath() + currentSearchParams());
+
    return (
       <div>
-         WikiPage: <code>{JSON.stringify(params, null, 2)}</code>
+         <h1>{problemWiki.title}</h1>
       </div>
    );
+
+   function currentPath() {
+      return `/Troubleshooting/${params.device}/${problemHandle()}/${
+         params.wikiid
+      }`;
+   }
+
+   function canonicalPath() {
+      invariant(problemWiki);
+      return new URL(problemWiki.canonicalUrl).pathname;
+   }
+
+   function problemHandle() {
+      return decodeURIComponent(params.problem);
+   }
+
+   function currentSearchParams() {
+      if (Object.keys(searchParams).length === 0) return '';
+      return `?${new URLSearchParams(searchParams)}`;
+   }
 }