feat: Added homepage

Author: PartMan7

src/components/molecules/TemplateRenderer.tsx

@@ -27,7 +27,13 @@ function BaseTemplateRenderer({ template, onSubmit }: TemplateRendererProps): Re
   useEffect(() => {
     let isMounted = true;
     fetch(`/api/templates/${template}`)
-      .then(res => (res.ok ? (res.json() as Promise<{ template: string }>) : setNoTemplate(true)))
+      .then(res => {
+        if (res.ok) return res.json() as Promise<{ template: string }>;
+        else {
+          setNoTemplate(true);
+          return null;
+        }
+      })
       .then(data => {
         if (isMounted) setTemplateResponse(data?.template);
       });
@@ -83,7 +89,9 @@ function BaseTemplateRenderer({ template, onSubmit }: TemplateRendererProps): Re
       <Card className="bg-card/50 backdrop-blur-sm border-muted grow shrink basis-0 min-w-0">
         <CardContent className="pt-6">
           <pre className="text-start">
-            {noTemplate ? 'Template not found.' : parts.map(part => (part === '\n' ? <br /> : typeof part === 'string' ? part : part.component))}
+            {noTemplate
+              ? 'Template not found.'
+              : parts.map(part => (part === '\n' ? <br /> : typeof part === 'string' ? part : part.component))}
           </pre>
           <hr className="m-6 border-zinc-300 dark:border-zinc-600" />
           <Button onClick={() => console.log(getCurrentCode())}>Submit!</Button>

src/hooks/useFetch.ts

@@ -0,0 +1,28 @@
+import { useRef, useState } from 'react';
+
+export function useFetch<Data>(...args: Parameters<typeof fetch>): {
+  data: Data | null;
+  loading: boolean;
+  error: Response | null;
+} {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Response | null>(null);
+  const [data, setData] = useState<Data | null>(null);
+
+  const fetchRef = useRef(false);
+  if (!fetchRef.current) {
+    fetch(...args).then(res => {
+      if (!res.ok) {
+        setLoading(false);
+        setError(res);
+      } else {
+        res.json().then(data => {
+          setLoading(false);
+          setData(data);
+        });
+      }
+    });
+    fetchRef.current = true;
+  }
+  return { data, loading, error };
+}

src/index.tsx

@@ -1,6 +1,7 @@
 import { serve } from 'bun';
 import path from 'path';
 import index from './index.html';
+import { readdir } from 'fs/promises';
 
 const server = serve({
   routes: {
@@ -22,6 +23,14 @@ const server = serve({
         return Response.json({ message: 'Not found' }, { status: 404 });
       }
     },
+
+    '/api/exercises': async () => {
+      const files = await readdir(path.join(__dirname, '..', 'templates'));
+      const exercises = files
+        .filter(file => file.endsWith('.template.ts'))
+        .map(file => file.replace('.template.ts', ''));
+      return Response.json({ exercises });
+    },
   },
 
   websocket: {

src/pages/Exercises.tsx

@@ -0,0 +1,29 @@
+import { useFetch } from '@/hooks/useFetch';
+import { Button } from '@/components/ui/button';
+
+export function Exercises() {
+  const { data, loading } = useFetch<{ exercises: string[] }>('/api/exercises');
+  const exercises = data?.exercises ?? [];
+  return (
+    <>
+      Welcome to TypeScript exercises!
+      <br />
+      {loading ? (
+        'Loading exercises...'
+      ) : (
+        <>
+          Available exercises:
+          <ul>
+            {exercises.map(exercise => (
+              <li key={exercise}>
+                <Button value={exercise} size="sm">
+                  <a href={`/exercise/${exercise}`}>{exercise}</a>
+                </Button>
+              </li>
+            ))}
+          </ul>
+        </>
+      )}
+    </>
+  );
+}

src/pages/index.tsx

@@ -1,3 +1 @@
-export function Index() {
-  return 'Welcome to TypeScript exercises!';
-}
+export { Exercises as Index } from './Exercises';