Add a Publish Post action, and monitor it for Operation progress.

Author: patroza

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

@@ -1,6 +1,8 @@
-import { BlogPostRepo } from "@/services.js"
+import { NotFoundError } from "@/errors.js"
+import { BlogPostRepo, Operations } from "@/services.js"
 import { BlogPost } from "@effect-app-boilerplate/models/Blog"
 import { BlogRsc } from "@effect-app-boilerplate/resources"
+import { PositiveInt } from "@effect-app/prelude/schema"
 
 const { controllers, matchWithServices } = matchFor(BlogRsc)
 
@@ -24,4 +26,47 @@ const CreatePost = matchWithServices("CreatePost")(
       .map(_ => _.id)
 )
 
-export const BlogControllers = controllers(Effect.struct({ FindPost, GetPosts, CreatePost }))
+const PublishPost = matchWithServices("PublishPost")(
+  { BlogPostRepo, Operations },
+  (req, { BlogPostRepo, Operations }) =>
+    Do($ => {
+      $(
+        BlogPostRepo.find(req.id)
+          .flatMap(_ => _.encaseInEffect(() => new NotFoundError("BlogPost", req.id)))
+      )
+
+      const targets = [
+        "google",
+        "twitter",
+        "facebook"
+      ]
+
+      const done: string[] = []
+
+      const operationId = $(
+        Effect.forkOperation(
+          opId =>
+            Operations.update(opId, {
+              total: PositiveInt(targets.length),
+              completed: PositiveInt(done.length)
+            }) >
+              targets
+                .forEachEffect(_ =>
+                  Effect(done.push(_))
+                    .tap(() =>
+                      Operations.update(opId, {
+                        total: PositiveInt(targets.length),
+                        completed: PositiveInt(done.length)
+                      })
+                    )
+                    .delay(Duration.seconds(4))
+                )
+                .map(() => "the answer to the universe is 41")
+        )
+      )
+
+      return operationId
+    })
+)
+
+export const BlogControllers = controllers(Effect.struct({ FindPost, GetPosts, CreatePost, PublishPost }))

_project/api/_src/services/BlogPostRepo.ts

@@ -1,4 +1,4 @@
-import type { BlogPost, BlogPostId } from "@effect-app-boilerplate/models/Blog"
+import { BlogPost, BlogPostId } from "@effect-app-boilerplate/models/Blog"
 
 export interface BlogPostRepo {
   all: Effect<never, never, readonly BlogPost[]>
@@ -8,7 +8,13 @@ export interface BlogPostRepo {
 export const BlogPostRepo = Tag<BlogPostRepo>()
 
 export const BlogPostRepoLive = Layer(BlogPostRepo, () => {
-  const items: BlogPost[] = []
+  const items: BlogPost[] = [
+    new BlogPost({
+      id: BlogPostId("post-test123"),
+      title: ReasonableString("Test post"),
+      body: LongString("imma test body")
+    })
+  ]
 
   return {
     all: Effect([...items]),

_project/api/openapi.json

@@ -172,6 +172,50 @@
         }
       }
     },
+    "/blog/posts/{id}/publish": {
+      "post": {
+        "parameters": [
+          {
+            "name": "id",
+            "in": "path",
+            "required": true,
+            "schema": {
+              "minLength": 6,
+              "maxLength": 50,
+              "title": "BlogPostId",
+              "type": "string"
+            }
+          }
+        ],
+        "requestBody": {
+          "content": {
+            "application/json": {
+              "schema": {
+                "properties": {},
+                "type": "object"
+              }
+            }
+          }
+        },
+        "responses": {
+          "200": {
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "minLength": 6,
+                  "maxLength": 50,
+                  "type": "string"
+                }
+              }
+            }
+          },
+          "400": {
+            "description": "ValidationError"
+          }
+        }
+      }
+    },
     "/hello-world": {
       "get": {
         "parameters": [],

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

@@ -5,11 +5,28 @@ import { BlogPostId } from "@effect-app-boilerplate/models/Blog"
 const { id } = useRouteParams({ id: BlogPostId })
 
 const blogClient = clientFor(BlogRsc)
-const [, latestPost] = useSafeQueryWithArg(blogClient.findPost, { id })
+const [, latestPost, reloadPost] = useSafeQueryWithArg(blogClient.findPost, {
+  id,
+})
+
+const progress = ref("")
+const [publishing, publish] = useAndHandleMutation(
+  refreshAndWaitForOperation(
+    blogClient.publishPost,
+    Effect.promise(() => reloadPost()),
+    op => {
+      progress.value = `${op.progress?.completed}/${op.progress?.total}`
+    }
+  ),
+  "Publish Blog Post"
+)
 </script>
 
 <template>
   <div v-if="latestPost">
+    <v-btn @click="publish({ id })" :disabled="publishing.loading">
+      Publish to all blog sites {{ publishing.loading && `(${progress})` }}
+    </v-btn>
     <div>Title: {{ latestPost.title }}</div>
     <div>Body: {{ latestPost.body }}</div>
   </div>

_project/resources/_src/Blog.ts

@@ -2,4 +2,5 @@
 export * as CreatePost from "./Blog/CreatePost.js"
 export * as FindPost from "./Blog/FindPost.js"
 export * as GetPosts from "./Blog/GetPosts.js"
+export * as PublishPost from "./Blog/PublishPost.js"
 // codegen:end

_project/resources/_src/Blog/PublishPost.ts

@@ -0,0 +1,10 @@
+import { BlogPostId } from "@effect-app-boilerplate/models/Blog"
+import { OperationId } from "../Views.js"
+
+@allowAnonymous
+@allowRoles("user")
+export class PublishPostRequest extends Post("/blog/posts/:id/publish")<PublishPostRequest>()({
+  id: prop(BlogPostId)
+}) {}
+
+export const PublishPostResponse = OperationId

_project/resources/_src/Operations/Find.ts

@@ -2,6 +2,7 @@ import { nullable } from "@effect-app/prelude/schema"
 import { Operation, OperationId } from "../Views.js"
 
 @allowRoles("user")
+@allowAnonymous
 export class FindOperationRequest extends Get("/operations/:id")<FindOperationRequest>()({
   id: prop(OperationId)
 }) {}