Add separate route for opening NBA results (#110)

app/components/app-library/ExampleLibraryApps.tsx

@@ -3,7 +3,6 @@
 import { useEffect, useState } from 'react';
 import { type BuildAppResult, getRecentApps } from '~/lib/persistence/apps';
 import styles from './ExampleLibraryApps.module.scss';
-import { importChat } from '~/lib/persistence/useChatHistory';
 
 const formatDate = (date: Date) => {
   return new Intl.DateTimeFormat('en-US', {
@@ -58,22 +57,10 @@ export const ExampleLibraryApps = () => {
     <div className={styles.container}>
       <div className={styles.grid}>
         {displayApps.map((app) => (
-          <div
+          <a
             key={app.id}
+            href={`/app/${app.id}`}
             className={`${styles.appItem} ${!app.outcome.testsPassed ? styles.appItemError : ''}`}
-            onClick={() => {
-              importChat(
-                app.title ?? 'Untitled App',
-                app.messages.filter((msg) => {
-                  // Workaround an issue where the messages in the database include images
-                  // (used to generate the screenshots).
-                  if (msg.role == 'assistant' && msg.type == 'image') {
-                    return false;
-                  }
-                  return true;
-                }),
-              );
-            }}
           >
             {app.imageDataURL ? (
               <img src={app.imageDataURL} alt={app.title || 'App preview'} className={styles.previewImage} />
@@ -94,7 +81,7 @@ export const ExampleLibraryApps = () => {
                 </div>
               </div>
             </div>
-          </div>
+          </a>
         ))}
       </div>
       {loading && <div className={styles.loading}>Loading recent apps...</div>}

app/lib/persistence/apps.ts

@@ -106,3 +106,14 @@ export async function getRecentApps(numApps: number): Promise<BuildAppResult[]>
   }
   return apps;
 }
+
+export async function getAppById(id: string): Promise<BuildAppResult> {
+  const { data, error } = await getSupabase().from('apps').select('*').eq('id', id).single();
+
+  if (error) {
+    console.error('Error fetching app by id:', error);
+    throw error;
+  }
+
+  return databaseRowToBuildAppResult(data);
+}

app/lib/persistence/useChatHistory.ts

@@ -6,13 +6,14 @@ import { chatStore } from '~/lib/stores/chat';
 import { database } from './chats';
 import { createMessagesForRepository, type Message } from './message';
 import { debounce } from '~/utils/debounce';
+import { getAppById } from './apps';
 
 export interface ResumeChatInfo {
   protocolChatId: string;
   protocolChatResponseId: string;
 }
 
-export async function importChat(title: string, messages: Message[]) {
+async function importChat(title: string, messages: Message[]) {
   try {
     // Remove any peanuts when importing another chat, these are just for the current user.
     const newMessages = messages.map((msg) => ({ ...msg, peanuts: undefined }));
@@ -29,19 +30,30 @@ export async function importChat(title: string, messages: Message[]) {
   }
 }
 
+async function loadRepository(repositoryId: string) {
+  const messages = createMessagesForRepository(`Repository: ${repositoryId}`, repositoryId);
+  await importChat(`Repository: ${repositoryId}`, messages);
+  toast.success('Repository loaded successfully');
+}
+
+async function loadApp(appId: string) {
+  const app = await getAppById(appId);
+
+  await importChat(app.title ?? 'Untitled App', app.messages);
+  toast.success('App loaded successfully');
+}
+
 export function useChatHistory() {
-  const { id: mixedId, repositoryId } = useLoaderData<{ id?: string; repositoryId?: string }>() ?? {};
+  const {
+    id: mixedId,
+    repositoryId,
+    appId,
+  } = useLoaderData<{ id?: string; repositoryId?: string; appId?: string }>() ?? {};
 
   const [initialMessages, setInitialMessages] = useState<Message[]>([]);
   const [resumeChat, setResumeChat] = useState<ResumeChatInfo | undefined>(undefined);
   const [ready, setReady] = useState<boolean>(!mixedId && !repositoryId);
 
-  const loadRepository = async (repositoryId: string) => {
-    const messages = createMessagesForRepository(`Repository: ${repositoryId}`, repositoryId);
-    await importChat(`Repository: ${repositoryId}`, messages);
-    toast.success('Repository loaded successfully');
-  };
-
   const debouncedSetChatContents = debounce(async (messages: Message[]) => {
     const chat = chatStore.currentChat.get();
     if (!chat) {
@@ -74,6 +86,9 @@ export function useChatHistory() {
         } else if (repositoryId) {
           await loadRepository(repositoryId);
           setReady(true);
+        } else if (appId) {
+          await loadApp(appId);
+          setReady(true);
         }
       } catch (error) {
         logStore.logError('Failed to load chat messages', error);

app/routes/app.$id.tsx

@@ -0,0 +1,8 @@
+import { json, type LoaderFunctionArgs } from '~/lib/remix-types';
+import { default as IndexRoute } from './_index';
+
+export async function loader(args: LoaderFunctionArgs) {
+  return json({ appId: args.params.id });
+}
+
+export default IndexRoute;