feat: Add Logs

Author: PartMan7

src/Page.tsx

@@ -13,6 +13,7 @@ import { Layout } from '@/components/layout/Layout';
 import { Index } from '@/pages/index';
 import { Exercise } from '@/pages/Exercise';
 import { Page404 } from '@/pages/404';
+import { Logs } from '@/pages/Logs';
 
 const route = window.location.pathname.replace(/^\/|\/$/g, '');
 const path = route.split('/');
@@ -25,6 +26,8 @@ if (route.length === 0) {
 } else if (path[0] === 'exercise') {
   if (path[1]) page = <Exercise template={path[1]} />;
   else page = <Page404 />; // TODO
+} else if (path[0] === 'logs' && path.length === 1) {
+  page = <Logs />;
 } else page = <Page404 />;
 
 const elem = document.getElementById('root')!;

src/components/molecules/TemplateRenderer.tsx

@@ -8,9 +8,17 @@ import { Button } from '@/components/ui/button';
 import { StaticEditor } from '@/components/molecules/StaticEditor';
 import { useFetch } from '@/hooks/useFetch';
 import { getName, NameInput } from '@/components/molecules/NameInput';
-import { ClimbingBoxLoader, PacmanLoader } from 'react-spinners';
+import { PacmanLoader } from 'react-spinners';
 
 function BaseTemplateRenderer({ templateCode, template }: { templateCode: string; template: string }): ReactElement {
+  // I apologize to everyone who has ever taught me
+  // This is disgusting, but I'm proud of it
+  const [startTime] = useState(() => {
+    const current = Date.now();
+    localStorage.setItem(`STARTED_AT:${template}`, current.toString());
+    return current;
+  });
+
   const [currentCode, setCurrentCode] = useState(() => templateCode);
 
   const onChange = useRef<() => void | null>(null);
@@ -64,7 +72,7 @@ function BaseTemplateRenderer({ templateCode, template }: { templateCode: string
     fetch(`/api/submit/${template}`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ name, code }),
+      body: JSON.stringify({ name, code, start: startTime }),
     }).then(res => {
       if (!res.ok) {
         setStatus(false);
@@ -116,7 +124,7 @@ function BaseTemplateRenderer({ templateCode, template }: { templateCode: string
   );
 }
 
-export function TemplateRenderer({ template }: { template: string; onSubmit: (code: string) => void }): ReactElement {
+export function TemplateRenderer({ template }: { template: string }): ReactElement {
   const { data, loading, error } = useFetch<{ template: string }>(`/api/templates/${template}`);
 
   return (

src/index.tsx

@@ -1,9 +1,12 @@
-import { serve } from 'bun';
+import { serve, type ServerWebSocket } from 'bun';
 import z from 'zod';
 import path from 'path';
 import index from '@/index.html';
 import { readdir } from 'fs/promises';
 import { validate } from '@/checker';
+import { getCurrentLogs, log } from '@/logger/logs.ts';
+
+const connectedSockets: Set<ServerWebSocket<any>> = new Set();
 
 const server = serve({
   routes: {
@@ -37,13 +40,22 @@ const server = serve({
     '/api/submit/:exercise': {
       POST: async req => {
         const exercise = req.params.exercise;
-        const reqData = z.object({ code: z.string(), name: z.string() }).safeParse(await req.json());
+        const reqData = z.object({ code: z.string(), name: z.string(), start: z.number() }).safeParse(await req.json());
         if (!reqData.success) return Response.json({ message: 'Invalid input' }, { status: 400 });
 
         try {
           const success = await validate(reqData.data.code, exercise);
           if (success) {
-            // TODO: Dispatch to socket and store in state
+            log(
+              {
+                code: reqData.data.code,
+                name: reqData.data.name,
+                start: new Date(reqData.data.start),
+                at: new Date(),
+                template: exercise,
+              },
+              connectedSockets
+            );
             return Response.json({ message: 'Valid input!' });
           } else return Response.json({ message: 'Failed.' }, { status: 400 });
         } catch {
@@ -59,8 +71,15 @@ const server = serve({
   },
 
   websocket: {
-    message(ws, message) {
-      ws.send('Response!');
+    open(ws) {
+      connectedSockets.add(ws);
+      ws.send(getCurrentLogs());
+    },
+    message() {
+      // Do nothing with incoming messages for sockets
+    },
+    close(ws) {
+      connectedSockets.delete(ws);
     },
   },
 

src/logger/logs.ts

@@ -0,0 +1,16 @@
+// Logs are not persistent.
+// This is intentional.
+
+import type { ServerWebSocket } from 'bun';
+
+export type Log = { template: string; code: string; name: string; start: Date; at: Date };
+const cache: Log[] = [];
+
+export function getCurrentLogs(): string {
+  return JSON.stringify(cache);
+}
+
+export function log(logData: Log, emitters: Set<ServerWebSocket<any>>) {
+  cache.push(logData);
+  emitters.forEach(socket => socket.send(JSON.stringify([logData])));
+}

src/pages/Exercise.tsx

@@ -1,39 +1,5 @@
-import { useCallback, useEffect, useState } from 'react';
 import { TemplateRenderer } from '@/components/molecules/TemplateRenderer';
 
-// const socket = new WebSocket(`ws://localhost:${Bun.env.BUN_PORT || 3000}/socket`);
-//
-// function Counter() {
-//   const [count, setCount] = useState(0);
-//
-//   useEffect(() => {
-//     const onOpen = () => {
-//       console.log('Connected');
-//     };
-//     socket.addEventListener('open', onOpen);
-//
-//     const onMessage = (message: MessageEvent) => {
-//       setCount(x => x + 1);
-//     };
-//     socket.addEventListener('message', onMessage);
-//
-//     return () => {
-//       socket.removeEventListener('open', onOpen);
-//       socket.removeEventListener('message', onMessage);
-//     };
-//   });
-//
-//   const send = useCallback(() => {
-//     socket.send('Test');
-//   }, []);
-//
-//   return (
-//     <div>
-//       {count} <button onClick={send}>Clickity click</button>{' '}
-//     </div>
-//   );
-// }
-
 export function Exercise({ template }: { template: string }) {
-  return <TemplateRenderer template={template} onSubmit={console.log} />;
+  return <TemplateRenderer template={template} />;
 }

src/pages/Logs.tsx

@@ -0,0 +1,75 @@
+import { useRef, type ReactElement, useState, useMemo, useCallback } from 'react';
+import type { Log } from '@/logger/logs.ts';
+import { ContentCard } from '@/components/atoms/ContentCard';
+import { toHumanTime } from '@/utils/toHumanTime.ts';
+
+function LogRenderer({
+  selected,
+  log,
+  onClick,
+}: {
+  selected: boolean;
+  log: Log;
+  onClick: (log: Log) => void;
+}): ReactElement {
+  const duration = useMemo(() => toHumanTime(log.at.getTime() - log.start.getTime()), [log.at, log.start]);
+
+  return (
+    <button onClick={() => onClick(log)} className="cursor-pointer">
+      <ContentCard className={`hover:bg-muted ${selected ? 'border-primary bg-muted' : ''}`}>
+        <strong>{log.template}</strong> ({log.name})
+        <br />
+        {log.at.toLocaleString()} ({duration})
+      </ContentCard>
+    </button>
+  );
+}
+
+function LogsRenderer({ logs }: { logs: Log[] }): ReactElement {
+  const [selected, setSelected] = useState<Log | null>(null);
+
+  const handleClick = useCallback((log: Log) => {
+    setSelected(oldLog => (log === oldLog ? null : log));
+  }, []);
+
+  if (logs.length === 0) return <ContentCard>No logs...</ContentCard>;
+  return (
+    <div className="flex gap-4 justify-center w-full m-8 grow">
+      <div className="grow shrink basis-0 min-w-0 flex flex-col gap-2">
+        {logs.map(log => (
+          <LogRenderer selected={selected === log} log={log} onClick={handleClick} />
+        ))}
+      </div>
+      <ContentCard className="grow-2 shrink basis-0 min-w-0">
+        {selected ? (
+          <pre className="w-full m-4 text-start whitespace-pre-wrap">{selected.code}</pre>
+        ) : (
+          <h2 className="text-muted-foreground">(Preview)</h2>
+        )}
+      </ContentCard>
+    </div>
+  );
+}
+
+export function Logs(): ReactElement {
+  const socketRef = useRef<WebSocket | null>(null);
+  const [logs, setLogs] = useState<Log[]>([]);
+
+  if (!socketRef.current) {
+    const socket = new WebSocket(`ws://${window.location.hostname}:${window.location.port}/socket`);
+    socket.addEventListener('open', () => console.log('Socket connected'));
+    socket.addEventListener('message', (message: MessageEvent) => {
+      const newLogs = JSON.parse(message.data).map(
+        (log: Log): Log => ({
+          ...log,
+          at: new Date(log.at),
+          start: new Date(log.start),
+        })
+      );
+      setLogs(oldLogs => [...oldLogs, ...newLogs]);
+    });
+    socketRef.current = socket;
+  }
+
+  return <LogsRenderer logs={logs} />;
+}

src/utils/toHumanTime.ts

@@ -0,0 +1,116 @@
+type Entry = {
+  abbr: string;
+  name: string;
+  plur: string;
+  time: number;
+  count?: number;
+};
+export function toHumanTime(timeInMs: number, format: 'f2s' | 'hhmmss' | 'abs' = 'f2s'): string {
+  const timeList: (
+    | {
+        abbr: string;
+        name: string;
+        plur: string;
+      }
+    | [number, number?]
+  )[] = [
+    {
+      abbr: 'ms',
+      name: 'millisecond',
+      plur: 'milliseconds',
+    },
+    [1000],
+    {
+      abbr: 'sec',
+      name: 'second',
+      plur: 'seconds',
+    },
+    [60],
+    {
+      abbr: 'min',
+      name: 'minute',
+      plur: 'minutes',
+    },
+    [60],
+    {
+      abbr: 'hr',
+      name: 'hour',
+      plur: 'hours',
+    },
+    [24],
+    {
+      abbr: 'day',
+      name: 'day',
+      plur: 'days',
+    },
+    [7],
+    {
+      abbr: 'wk',
+      name: 'week',
+      plur: 'weeks',
+    },
+    [365, 7],
+    {
+      abbr: 'yr',
+      name: 'year',
+      plur: 'years',
+    },
+    [10],
+    {
+      abbr: 'dec',
+      name: 'decade',
+      plur: 'decades',
+    },
+  ];
+  const {
+    entries: timeEntries,
+  }: {
+    scale: number;
+    entries: Entry[];
+  } = timeList.reduce(
+    (acc, current) => {
+      if (Array.isArray(current)) {
+        const [mult, div = 1] = current;
+        acc.scale *= mult / div;
+      } else acc.entries.push({ ...current, time: acc.scale });
+      return acc;
+    },
+    { entries: [] as Entry[], scale: 1 }
+  );
+  if (format === 'hhmmss') timeEntries.splice(-3);
+  let timeLeft = timeInMs;
+  timeEntries.reverse().forEach(entry => {
+    if (timeLeft >= entry.time) {
+      const count = Math.floor(timeLeft / entry.time);
+      entry.count = count;
+      timeLeft -= count * entry.time;
+    } else entry.count = 0;
+  });
+  timeEntries.reverse();
+  switch (format) {
+    case 'abs': {
+      const firstIndex = timeEntries.findIndex(entry => entry.count! > 0);
+      if (firstIndex === -1) return '0 ms';
+      return timeEntries
+        .slice(firstIndex, firstIndex + 2)
+        .filter(entry => entry.count)
+        .map(entry => `${entry.count} ${entry.count === 1 ? entry.name : entry.plur}`)
+        .join(` and `);
+    }
+    case 'hhmmss': {
+      const [ms, s, m, h, d] = timeEntries.map(entry => entry.count);
+      return `${d ? `${d}:` : ''}${d || h ? `${h}:` : ''}${m}:${s}${ms ? `.${ms}` : ''}`;
+    }
+    case 'f2s':
+    default: {
+      return (
+        timeEntries
+          .filter(entry => entry.count)
+          .reverse()
+          .slice(0, 2)
+          .map(entry => `${entry.count} ${entry.count === 1 ? entry.name : entry.plur}`)
+          .join(` and `) || '0 ms'
+      );
+    }
+  }
+}