feat(cli): handle errors and make it fancy

Author: Plopix

.github/workflows/cli-release.yaml

@@ -18,10 +18,13 @@ jobs:
               with:
                   fetch-depth: 0
                   fetch-tags: false
-
+               
             - name: ⎔ Setup bun
               uses: oven-sh/setup-bun@v2
 
+            - name: 📥 Download deps on Mono
+              run: bun install --frozen-lockfile
+
             - name: 📥 Download deps
               run: bun install --frozen-lockfile
               working-directory: atw-cli

atw-cli/bun.lock

@@ -2,7 +2,7 @@
   "name": "atw-cli",
   "module": "index.ts",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "devDependencies": {
     "@types/bun": "latest",
@@ -16,7 +16,7 @@
     "commander": "^13.1.0",
     "ink": "^5.1.1",
     "ink-link": "^4.1.0",
-    "lib": "workspace:*",
+    "@rocicorp/zero": "^0.16.2025022602",
     "picocolors": "^1.1.1",
     "react": "^18",
     "react-devtools-core": "^6.1.1"

atw-cli/package.json

@@ -1,20 +1,17 @@
+import { ATW_API_BASEURL } from "../config"
 
 export type Event = {
     id: string
     slug: string
     name: string
-    startDate: string
+    startDate: number
     shortLocation: string|null
 }
 
 export const registerAction = async (email: string, eventId: Event['id']) => {
-    const response = await fetch(`https://allthingsweb.dev/api/events/${eventId}/register`, {
+    const response = await fetch(`${ATW_API_BASEURL}/events/${eventId}/register`, {
         method: 'POST',
         body: JSON.stringify({ email })
     })
-    if (!response.ok) {
-        throw new Error('Failed to register')
-    }
-    const { success } = await response.json()
-    return success
+    return await response.json()
 }

atw-cli/src/actions/register.action.ts renamed to atw-cli/src/actions/register.ts

@@ -1,45 +1,24 @@
 import { Command } from "commander";
-import { Box, Newline, render, Text } from 'ink';
-import { FooterSpeakers } from "../ui/speaker";
-import { RegisterJourney } from "../ui/register-journey";
+import { render } from 'ink';
+import { RegisterJourney } from "../ui/journeys/register";
 import pc from "picocolors";
-import { ZeroProvider } from "@rocicorp/zero/react";
-import { Zero } from "@rocicorp/zero";
 import { logo } from "..";
-import { schema } from "@lib/zero-sync/schema";
+import { AppLayout } from "../ui/app-layout";
 
 export const createRegisterCommand = (): Command => {
     const command = new Command("register")
         .description("Register to an event.")
         .action(async () => {
             console.log(pc.dim(logo));
-            const z = new Zero({
-                userID: "anon",
-                server: 'https://allthingsweb-sync.fly.dev',
-                schema,
-                kvStore: 'mem',
-            });
             const { waitUntilExit, unmount } = render(
-                <ZeroProvider zero={z}>
-                    <>
-                    <Text bold italic>Register to an event!</Text>
+                <AppLayout title="Register to an event!">
                     <RegisterJourney unmount={() => unmount()} />
-                    <Newline />
-                    <Box flexDirection="column" padding={1} gap={1}>
-                        <FooterSpeakers />
-                    </Box>
-                    </>
-                </ZeroProvider>,
+                </AppLayout>,
                 {
                     exitOnCtrlC: true,
                 }
             );
             await waitUntilExit();
-
-
-            render(<Box flexDirection="column" padding={1} gap={1}>
-                <Text>Register to an event!</Text>
-                </Box>)
         });
     return command;
 }

atw-cli/src/commands/register.tsx

@@ -0,0 +1,2 @@
+export const ATW_BASEURL = process.env.AWT_BASEURL || "https://allthingsweb.dev";
+export const ATW_API_BASEURL = process.env.ATW_API_BASEURL || `${ATW_BASEURL}/api`;

atw-cli/src/config.ts

@@ -0,0 +1,35 @@
+import { Box} from 'ink';
+import { ZeroProvider } from "@rocicorp/zero/react";
+import { Zero } from "@rocicorp/zero";
+import { schema } from "@lib/zero-sync/schema";
+import { ThemeProvider} from '@inkjs/ui';
+import type React from "react";
+import { customTheme } from './theme';
+import { Header } from './components/header';
+import { Footer } from './footer';
+
+type AppLayoutProps = {
+    children: React.ReactNode;
+    title: string
+}
+
+export const AppLayout = ({children, title}: AppLayoutProps): React.ReactNode => {
+    const z = new Zero({
+        userID: "anon",
+        server: 'https://allthingsweb-sync.fly.dev',
+        schema,
+        kvStore: 'mem',
+    });
+    return <ZeroProvider zero={z}>
+        <ThemeProvider theme={customTheme}>
+            <Header level={1}>{title}</Header>
+            <Box flexDirection="column" padding={1}>{children}</Box>
+            <Box flexDirection="column">
+                <Footer />
+            </Box>
+            
+        </ThemeProvider>
+    </ZeroProvider>
+
+
+}

atw-cli/src/ui/app-layout.tsx

@@ -0,0 +1,23 @@
+import { Box, Text } from "ink";
+import { colors } from "../theme";
+
+type HeaderProps = {
+    level?: 1 | 2;
+    children: React.ReactNode;
+}
+
+export const Header = ({ level = 1, children }: HeaderProps) => {
+    const colorMap = {
+        1: colors.mainBlue,
+        2: '#FF6600',
+    }
+    return <Box
+        flexDirection="row"
+        borderStyle={"single"}
+        borderTop={false}
+        borderLeft={false}
+        borderRight={false}
+        borderBottom={true}
+        borderBottomColor={colors.mainBlue}
+    ><Text bold italic color={colorMap[level]}>{children}</Text></Box>
+}

atw-cli/src/ui/components/header.tsx

@@ -0,0 +1,52 @@
+import type { schema } from "@lib/zero-sync/schema";
+import { useQuery, useZero } from "@rocicorp/zero/react";
+import { Newline, Text, Box } from "ink"
+import Link from "ink-link"
+import { useEffect, useState } from "react"
+import { colors } from "./theme";
+import { Spinner } from "@inkjs/ui";
+
+export const Footer = () => {
+    const z = useZero<typeof schema>();
+    const [speakers] = useQuery(z.query.profiles);
+    const [speakerIndex, setSpeakerIndex] = useState(Math.floor(Math.random() * 10) + 1)
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setSpeakerIndex((speakerIndex + 1) % speakers.length)
+        }, 2000)
+        return () => clearInterval(interval)
+    }, [speakerIndex, speakers.length])
+
+    const speaker = speakers[speakerIndex]
+
+    const link = (()=>{
+        if (speaker?.linkedinHandle) {
+            return `https://www.linkedin.com/in/${speaker.linkedinHandle}`
+        }
+        if (speaker?.twitterHandle) {
+            return `https://x.com/${speaker.twitterHandle}`
+        }
+        if (speaker?.blueskyHandle) {
+            return `https://bsky.app/profile/${speaker.blueskyHandle}`
+        }
+    })();
+    return (
+        <>
+            <Newline />
+            <Text dimColor>------------------------  </Text>
+            <Box>
+                {!speaker && <Spinner type='dots10' label="Loading speakers..." />}
+                {speaker && <Text italic dimColor>
+                    <Text>
+                        {speaker.name} - <Text color={colors.mainOrange} dimColor>{speaker?.title}</Text>
+                        <Newline />
+                        {link && <Link url={link}>
+                            <Text color={colors.mainOrange} dimColor>{link}</Text>
+                        </Link>}
+                    </Text>
+                </Text>}
+            </Box>
+        </>
+    )
+}

atw-cli/src/ui/footer.tsx

@@ -0,0 +1,59 @@
+
+import { type Event } from "../../../actions/register"
+type State = {
+    event: Event | null
+    hasSucceeded: boolean | null
+    isSubmitting: boolean
+    error: string | null
+    email: string | null
+}
+
+export const initialState: State = {
+    event: null,
+    hasSucceeded: null,
+    isSubmitting: false,
+    error: null,
+    email: null
+}
+
+type Action = {
+    type: 'SELECT_EVENT'
+    event: Event
+} | {
+    type: 'SET_EMAIL'
+    email: string
+} | {
+    type: 'HANDLE_API_RESULTS'
+    results: {
+        error?: string
+        success?: boolean
+    }
+}
+
+export const toDate = (date: number) => `${new Date(date).toLocaleDateString()} ${new Date(date).toLocaleTimeString()}`
+
+export const reducer = (state: State, action: Action): State => {
+    switch (action.type) {
+        case 'SELECT_EVENT':
+            return {
+                ...state,
+                event: action.event,
+            }
+        case 'SET_EMAIL':
+            return {
+                ...state,
+                isSubmitting: true,
+                email: action.email
+            }
+        case 'HANDLE_API_RESULTS':
+            console.log({action})
+            return {
+                ...state,
+                isSubmitting: false,
+                hasSucceeded: action.results.success || false,
+                error: action.results.error || null
+            }
+        default:
+            return state
+    }
+}