Added the Show page for a BlogPost, and implemented the API for it.

Co-authored-by: Enrico Polanski <enricopolanski@gmail.com>

Author: patroza

_project/api/_src/Usecases/Blog.Controllers.ts

@@ -4,6 +4,13 @@ import { BlogRsc } from "@effect-app-boilerplate/resources"
 
 const { controllers, matchWithServices } = matchFor(BlogRsc)
 
+const FindPost = matchWithServices("FindPost")(
+  { BlogPostRepo },
+  (req, { BlogPostRepo }) =>
+    BlogPostRepo.find(req.id)
+      .map(_ => _.getOrNull)
+)
+
 const GetPosts = matchWithServices("GetPosts")(
   { BlogPostRepo },
   (_, { BlogPostRepo }) => BlogPostRepo.all.map(items => ({ items }))
@@ -17,4 +24,4 @@ const CreatePost = matchWithServices("CreatePost")(
       .map(_ => _.id)
 )
 
-export const BlogControllers = controllers(Effect.struct({ GetPosts, CreatePost }))
+export const BlogControllers = controllers(Effect.struct({ FindPost, GetPosts, CreatePost }))

_project/api/_src/services/BlogPostRepo.ts

@@ -1,7 +1,8 @@
-import type { BlogPost } from "@effect-ts-app/boilerplate-types/Blog"
+import type { BlogPost, BlogPostId } from "@effect-app-boilerplate/models/Blog"
 
 export interface BlogPostRepo {
   all: Effect<never, never, readonly BlogPost[]>
+  find: (id: BlogPostId) => Effect<never, never, Option<BlogPost>>
   save: (post: BlogPost) => Effect<never, never, void>
 }
 export const BlogPostRepo = Tag<BlogPostRepo>()
@@ -11,6 +12,7 @@ export const BlogPostRepoLive = Layer(BlogPostRepo, () => {
 
   return {
     all: Effect([...items]),
+    find: id => Effect(items.findFirst(_ => _.id === id)),
     save: post => Effect(items.push(post))
   }
 })

_project/api/openapi.json

@@ -111,6 +111,67 @@
         }
       }
     },
+    "/blog/posts/{id}": {
+      "get": {
+        "parameters": [
+          {
+            "name": "id",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "minLength": 6,
+              "maxLength": 50,
+              "title": "BlogPostId",
+              "type": "string"
+            }
+          }
+        ],
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "properties": {
+                    "id": {
+                      "minLength": 6,
+                      "maxLength": 50,
+                      "title": "BlogPostId",
+                      "type": "string"
+                    },
+                    "title": {
+                      "minLength": 1,
+                      "maxLength": 255,
+                      "type": "string"
+                    },
+                    "body": {
+                      "minLength": 1,
+                      "maxLength": 2047,
+                      "type": "string"
+                    },
+                    "createdAt": {
+                      "format": "date-time",
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "id",
+                    "title",
+                    "body",
+                    "createdAt"
+                  ],
+                  "type": "object",
+                  "nullable": true
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "ValidationError"
+          }
+        }
+      }
+    },
     "/hello-world": {
       "get": {
         "parameters": [],

_project/frontend-nuxt/pages/blog/[id].vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { BlogRsc } from "@effect-app-boilerplate/resources"
+import { BlogPostId } from "@effect-app-boilerplate/models/Blog"
+
+const { id } = useRouteParams({ id: BlogPostId })
+
+const blogClient = clientFor(BlogRsc)
+const [, latestPost] = useSafeQueryWithArg(blogClient.findPost, { id })
+</script>
+
+<template>
+  <div v-if="latestPost">
+    <div>Title: {{ latestPost.title }}</div>
+    <div>Body: {{ latestPost.body }}</div>
+  </div>
+</template>

_project/frontend-nuxt/pages/blog.vue …oject/frontend-nuxt/pages/blog/index.vue_project/frontend-nuxt/pages/blog.vue renamed to _project/frontend-nuxt/pages/blog/index.vue _project/frontend-nuxt/pages/blog.vue renamed to _project/frontend-nuxt/pages/blog/index.vue

@@ -11,14 +11,6 @@ const createPost = flow(createPost_, _ => _.then(_ => reloadPosts()))
 
 <template>
   <div>
-    Here's a Post List
-
-    <ul v-if="latestPosts">
-      <li v-for="post in latestPosts.items" :key="post.id">
-        {{ post.title }}
-      </li>
-    </ul>
-
     <div>
       a new Title and a new body
       <button
@@ -32,5 +24,13 @@ const createPost = flow(createPost_, _ => _.then(_ => reloadPosts()))
         Create new post
       </button>
     </div>
+    Here's a Post List
+    <ul v-if="latestPosts">
+      <li v-for="post in latestPosts.items" :key="post.id">
+        <nuxt-link :to="{ name: 'blog-id', params: { id: post.id } }">{{
+          post.title
+        }}</nuxt-link>
+      </li>
+    </ul>
   </div>
 </template>

_project/resources/_src/Blog.ts

@@ -1,4 +1,5 @@
 // codegen:start {preset: barrel, include: ./Blog/*.ts, export: { as: 'PascalCase' }, nodir: false }
 export * as CreatePost from "./Blog/CreatePost.js"
+export * as FindPost from "./Blog/FindPost.js"
 export * as GetPosts from "./Blog/GetPosts.js"
 // codegen:end

_project/resources/_src/Blog/FindPost.ts

@@ -0,0 +1,9 @@
+import { BlogPost, BlogPostId } from "@effect-app-boilerplate/models/Blog"
+
+@allowAnonymous
+@allowRoles("user")
+export class FindPostRequest extends Get("/blog/posts/:id")<FindPostRequest>()({
+  id: prop(BlogPostId)
+}) {}
+
+export const FindPostResponse = nullable(BlogPost)