feat: list user tasks

.requests/tasks.http

@@ -1,8 +1,14 @@
-POST http://localhost:8080/tasks
+POST http://localhost:8080/v0/tasks
 Content-Type: application/json
 X-User-ID: b78fe6be-0642-4cfa-9f19-9cc8e53b129d
 
 {
     "title": "Task 1",
     "description": "Task 1 description"
-}
+}
+
+### 
+
+GET http://localhost:8080/v0/tasks
+Content-Type: application/json
+X-User-ID: b78fe6be-0642-4cfa-9f19-9cc8e53b129d

backend-golang-rest/pkg/tasks/handlers.go

@@ -44,7 +44,12 @@ func (h *TasksHandler) GetTasks(c *gin.Context) error {
 		return err
 	}
 
-	c.JSON(http.StatusOK, tasks)
+	tasksResponse := make([]TaskResponse, 0, len(tasks))
+	for _, task := range tasks {
+		tasksResponse = append(tasksResponse, NewTaskResponse(task))
+	}
+
+	c.JSON(http.StatusOK, tasksResponse)
 	return nil
 }
 

webapp-react/package.json

@@ -13,6 +13,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.12",
+    "@mui/icons-material": "^5.15.14",
     "@mui/material-nextjs": "^5.15.11",
     "next": "14.1.4",
     "react": "^18",

webapp-react/src/api/tasks.ts

@@ -0,0 +1,41 @@
+export async function getTasks() {
+  const res = await fetch("http://localhost:8080/v0/tasks?t=1", {
+    cache: "no-store",
+    headers: {
+      "X-User-ID": "b78fe6be-0642-4cfa-9f19-9cc8e53b129d",
+    },
+  });
+  // The return value is *not* serialized
+  // You can return Date, Map, Set, etc.
+
+  if (!res.ok) {
+    // This will activate the closest `error.js` Error Boundary
+    throw new Error("Failed to fetch data");
+  }
+
+  return res.json();
+}
+
+export async function addTask() {
+  const res = await fetch("http://localhost:8080/v0/tasks", {
+    method: "POST",
+    body: JSON.stringify({
+      title: "New task",
+      description: "This is a new task",
+    }),
+
+    headers: {
+      "X-User-ID": "b78fe6be-0642-4cfa-9f19-9cc8e53b129d",
+      "Content-Type": "application/json",
+    },
+  });
+  // The return value is *not* serialized
+  // You can return Date, Map, Set, etc.
+
+  if (!res.ok) {
+    // This will activate the closest `error.js` Error Boundary
+    throw new Error("Failed to add task");
+  }
+
+  return res.json();
+}

webapp-react/src/app/layout.tsx

@@ -1,15 +1,14 @@
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import "./globals.css";
 import { ThemeProvider } from "@mui/material/styles";
 import theme from "../theme";
 
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Kadai",
+  description: "Manage your tasks!",
 };
 
 export default function RootLayout({