chore: update hello-world example

Author: ije

examples/hello-world/api/counter/[action].ts

@@ -0,0 +1,22 @@
+import type { APIRequest } from 'aleph/types.ts'
+
+const global = globalThis as any
+
+export default async function handler(req: APIRequest) {
+    let count = global['__count'] || (global['__count'] = 0)
+    switch (req.params.action) {
+        case 'increase':
+            count++
+            global['__count'] = count
+            req.json({ count })
+            break
+        case 'decrease':
+            count--
+            global['__count'] = count
+            req.json({ count })
+            break
+        default:
+            req.status(400).json({ error: 'UnknownAction', status: 400, message: `undefined acton '${req.params.action}'` })
+            break
+    }
+}

examples/hello-world/api/counter/index.ts

@@ -0,0 +1,8 @@
+import type { APIRequest } from 'aleph/types.ts'
+
+const global = globalThis as any
+
+export default async function handler(req: APIRequest) {
+    const count = global['__count'] || (global['__count'] = 0)
+    req.json({ count })
+}

examples/hello-world/lib/useCounter.ts

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useState } from 'react'
+
+export default function useCounter(): [number, boolean, () => void, () => void] {
+    const [isSyncing, setIsSyncing] = useState(true)
+    const [count, setCount] = useState(0)
+    const increase = useCallback(() => {
+        setCount(n => n + 1)
+        fetch('/api/counter/increase').catch(e => console.error(e))
+    }, [])
+    const decrease = useCallback(() => {
+        setCount(n => n - 1)
+        fetch('/api/counter/decrease').catch(e => console.error(e))
+    }, [])
+
+    useEffect(() => {
+        fetch('/api/counter').then(resp => resp.json().catch(() => ({ count: 0 })))
+            .then(({ count }) => {
+                if (typeof count === 'number') {
+                    setCount(count)
+                }
+            })
+            .catch(e => console.error(e))
+            .finally(() => {
+                setIsSyncing(false)
+            })
+    }, [])
+
+    return [count, isSyncing, increase, decrease]
+}

examples/hello-world/pages/index.tsx

@@ -1,9 +1,10 @@
 import { useDeno } from 'aleph'
-import React, { useState } from 'react'
+import React from 'react'
 import Logo from '../components/logo.tsx'
+import useCounter from '../lib/useCounter.ts'
 
 export default function Home() {
-    const [count, setCount] = useState(0)
+    const [count, isSyncing, increase, decrease] = useCounter()
     const version = useDeno(() => Deno.version.deno)
 
     return (
@@ -22,9 +23,14 @@ export default function Home() {
             </p>
             <div className="counter">
                 <span>Counter:</span>
-                <strong>{count}</strong>
-                <button onClick={() => setCount(n => n - 1)}>-</button>
-                <button onClick={() => setCount(n => n + 1)}>+</button>
+                {isSyncing && (
+                    <em>...</em>
+                )}
+                {!isSyncing && (
+                    <strong>{count}</strong>
+                )}
+                <button onClick={decrease}>-</button>
+                <button onClick={increase}>+</button>
             </div>
             <p className="copyinfo">Built by Aleph.js in Deno {version}</p>
         </div>

examples/hello-world/style/index.css

@@ -87,6 +87,14 @@ main {
     border-color: #ccc;
 }
 
+.counter em {
+    display: inline-block;
+    width: 48px;
+    font-weight: 400;
+    text-align: center;
+    color: #999;
+}
+
 .counter strong {
     display: inline-block;
     width: 48px;