backend/cmd/main.go

@@ -12,18 +12,15 @@ import (
 
 // The button state as represented in memory
 type ButtonState struct {
-	PressCount int `json:"pressCount"`
+	pressCount int
 }
 
 // This is what a handler with a receiver looks like
 // Keep in mind that concurrent state access is not (usually) safe
 // And will in pracice be guarded by a mutex
 func (b *ButtonState) pressHandler(w http.ResponseWriter, r *http.Request) {
-	if r.Method != "POST" {
+	b.pressCount++
-		b.PressCount++
+	response, err := json.Marshal(b.pressCount)
-	}
-
-	response, err := json.Marshal(b)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
@@ -41,13 +38,13 @@ func handler(w http.ResponseWriter, r *http.Request) {
 
 func main() {
 	database.DbConnect()
-	b := &ButtonState{PressCount: 0}
+	b := &ButtonState{pressCount: 0}
 
 	// Mounting the handlers
 	fs := http.FileServer(http.Dir("static"))
 	http.Handle("/", fs)
 	http.HandleFunc("/hello", handler)
-	http.HandleFunc("/api/button", b.pressHandler)
+	http.HandleFunc("/button", b.pressHandler)
 
 	// Start the server on port 8080
 	println("Currently listening on http://localhost:8080")

frontend/src/App.tsx

@@ -1,9 +1,11 @@
+import { useState } from "react";
 import reactLogo from "./assets/react.svg";
 import viteLogo from "/vite.svg";
 import "./App.css";
-import { CountButton } from "./Components/CountButton";
 
 function App(): JSX.Element {
+  const [count, setCount] = useState(0);
+
   return (
     <>
       <div>
@@ -16,7 +18,13 @@ function App(): JSX.Element {
       </div>
       <h1>Vite + React</h1>
       <div className="card">
-        <CountButton />
+        <button
+          onClick={() => {
+            setCount((count): number => count + 1);
+          }}
+        >
+          count is {count}
+        </button>
         <p>
           Edit <code>src/App.tsx</code> and save to test HMR
         </p>

frontend/src/Components/CountButton.tsx

@@ -1,39 +0,0 @@
-import { useState, useEffect } from "react";
-
-// Interface for the response from the server
-// This should eventually reside in a dedicated file
-interface CountResponse {
-  pressCount: number;
-}
-
-// Some constants for the button
-const BUTTON_ENDPOINT = "/api/button";
-
-// A simple button that counts how many times it's been pressed
-export function CountButton(): JSX.Element {
-  const [count, setCount] = useState<number>(NaN);
-
-  // useEffect with a [] dependency array runs only once
-  useEffect(() => {
-    async function getCount(): Promise<void> {
-      const response = await fetch(BUTTON_ENDPOINT);
-      const data = (await response.json()) as CountResponse;
-      setCount(data.pressCount);
-    }
-    void getCount();
-  }, []);
-
-  // This is what runs on every button click
-  function press(): void {
-    async function pressPost(): Promise<void> {
-      await fetch(BUTTON_ENDPOINT, { method: "POST" });
-      const response = await fetch(BUTTON_ENDPOINT);
-      const data = (await response.json()) as CountResponse;
-      setCount(data.pressCount);
-    }
-    void pressPost();
-  }
-
-  // Return some JSX with the button and associated handler
-  return <button onClick={press}>count is {count}</button>;
-}

frontend/vite.config.ts

@@ -4,19 +4,4 @@ import react from "@vitejs/plugin-react-swc";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  // build: {
-  //   outDir: '../server/public' // Override default outDir('dist')
-  // },
-  server: {
-    port: 3000,
-    open: true,
-    proxy: {
-      "/api": {
-        target: "http://localhost:8080/api",
-        changeOrigin: true,
-        secure: false,
-        rewrite: (path): string => path.replace(/^\/api/, ""),
-      },
-    },
-  },
 });