Finally figure out how to send data from server

Signed-off-by: GitHub <noreply@github.com>

islands/CounterCard.tsx

@@ -5,11 +5,12 @@ import axios from "axios-web";
 
 interface SharedProps {
   hasClicked: Signal<boolean>;
-  globalCount: Signal<number>;
+  globalCount: number;
 }
 
 export default function Counter(props: SharedProps) {
   const [count, setCount] = useState(0);
+  const [globalCount, setGlobalCount] = useState(props.globalCount);
   const [internalCount, setInternalCount] = useState(0);
 
   const onClick = () => {
@@ -22,6 +23,11 @@ export default function Counter(props: SharedProps) {
     // whenever a user activity is detected
     let timer: number;
 
+    timer = setTimeout(() => {
+      axios.post(window.location.href, JSON.stringify({ data: internalCount }));
+      setInternalCount(0);
+    }, 5000)
+
     window.onclick = () => {
       clearTimeout(timer);
       timer = setTimeout(() => {
@@ -47,7 +53,8 @@ export default function Counter(props: SharedProps) {
 
     es.addEventListener("message", (e) => {
       console.log(` Received global count: ${e.data}`);
-      props.globalCount = e.data;
+      const data = JSON.parse(e.data);
+      setGlobalCount(parseInt(data.globalCount));
     });
 
     // TODO: Reconnect backoff logic could be improved
@@ -72,7 +79,7 @@ export default function Counter(props: SharedProps) {
       </div>
       <div class="px-6 pt-4 pb-2">
         <p>
-          Everyone has clicked the button {props.globalCount} times!
+          Everyone has clicked the button {globalCount} times!
         </p>
       </div>
     </div>

routes/index.tsx

@@ -3,6 +3,10 @@ import Counter from "../islands/CounterCard.tsx";
 import { getGlobalStatistics, setGlobalStatistics } from "../shared/db.ts";
 import { useSignal } from "@preact/signals";
 
+interface GlobalCountData {
+  globalCount: number;
+}
+
 export const handler: Handlers = {
   GET: async (req, ctx) => {
     const accept = req.headers.get("accept");
@@ -13,7 +17,9 @@ export const handler: Handlers = {
         start(controller) {
           bc.addEventListener("message", () => {
             try {
-              controller.enqueue(new TextEncoder().encode(getGlobalStatistics().toString()));
+              const data = getGlobalStatistics();
+              const chunk = `data: ${JSON.stringify({globalCount: data})}\n\n`;
+              controller.enqueue(new TextEncoder().encode(chunk));
             } catch (e) {
               console.error(`[${new Date()}] Error while getting global statistics: ${e}`);
             }
@@ -31,8 +37,8 @@ export const handler: Handlers = {
         },
       });
     }
-
-    const res = await ctx.render(getGlobalStatistics());
+    const data = getGlobalStatistics();
+    const res = await ctx.render({globalCount: data});
     return res;
   },
   POST: async (req, ctx) => {
@@ -49,9 +55,8 @@ export const handler: Handlers = {
   }
 }
 
-export default function Home() {
+export default function Home({ globalCount }: GlobalCountData) {
   const hasClicked = useSignal(false);
-  const globalCount = useSignal(!getGlobalStatistics() && isNaN(getGlobalStatistics()) ? getGlobalStatistics() : 0);
   return (
     <div class="px-4 py-8 mx-auto bg-[#9d88d3]">
       <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">