create-ej-app 3.2.0 → 4.0.0

package/template/base/src/app/(app)/tasks/[id]/actions.ts

@@ -1,147 +1,92 @@
 'use server'
 
-import { TaskStatus } from '@prisma/client'
 import { revalidatePath } from 'next/cache'
-
-import { getAuthSession } from '@/lib/auth'
-import { prisma } from '@/lib/db'
-import { storageClient } from '@/lib/storageClient'
-import { UnwrapPromise } from '@/types/UnwrapPromise'
-
-const handleImages = async (imageIds: string[], taskId: string) => {
-  const prevImages = await prisma.resource.findMany({
-    where: {
-      taskId
-    }
+import { z } from 'zod'
+
+import { getPresignedUrl, markFileUploaded } from '@/lib/s3Client'
+import { authActionClient } from '@/lib/safe-action'
+import {
+  createTaskUseCase,
+  deleteTaskUseCase,
+  getTaskByIdWithUserUseCase,
+  updateTaskUseCase
+} from '@/use-case/task'
+import { TaskCreateUpdateSchema, TaskUpdateServerSchema } from './validation'
+
+export const getTaskAction = authActionClient
+  .schema(z.string())
+  .action(async ({ parsedInput, ctx }) => {
+    return await getTaskByIdWithUserUseCase(ctx.user, parsedInput)
   })
 
-  for (const p of prevImages) {
-    if (imageIds.includes(p.id)) continue
-    await Promise.all([
-      storageClient.deleteFile(p.newFilename),
-      prisma.resource.delete({
-        where: {
-          id: p.id
-        }
-      })
-    ])
-  }
-
-  if (imageIds.length)
-    await prisma.resource.updateMany({
-      where: {
-        id: {
-          in: imageIds
-        }
-      },
-      data: {
-        taskId
-      }
-    })
-}
+export const createTaskAction = authActionClient
+  .schema(TaskCreateUpdateSchema)
+  .action(async ({ parsedInput, ctx }) => {
+    const id = await createTaskUseCase(ctx.user, parsedInput)
 
-export const getTask = async (id: string) => {
-  const session = await getAuthSession()
-  if (!session) throw new Error('Unauthorized')
+    revalidatePath('/tasks')
+    revalidatePath(`/tasks/${id}`)
 
-  return await prisma.task.findUnique({
-    where: {
-      id
-    },
-    include: {
-      createdBy: {
-        select: {
-          id: true,
-          name: true
-        }
-      },
-      updatedBy: {
-        select: {
-          id: true,
-          name: true
-        }
-      }
+    return {
+      id,
+      success: true
     }
   })
-}
 
-export type GetTaskFnDataType = UnwrapPromise<ReturnType<typeof getTask>>
+export const updateTaskAction = authActionClient
+  .schema(TaskUpdateServerSchema)
+  .action(async ({ parsedInput: id, ctx }) => {
+    await updateTaskUseCase(ctx.user, id)
 
-export const createTask = async ({
-  title,
-  status,
-  description,
-  imageIds
-}: {
-  title: string
-  status: TaskStatus
-  description?: any
-  imageIds: string[]
-}) => {
-  const session = await getAuthSession()
-  if (!session) throw new Error('Unauthorized')
+    revalidatePath('/tasks')
+    revalidatePath(`/tasks/${id}`)
 
-  const { id } = await prisma.task.create({
-    data: {
-      title,
-      status,
-      description,
-      createdById: session.user.id,
-      updatedById: session.user.id
+    return {
+      success: true
     }
   })
-  await handleImages(imageIds, id)
-
-  revalidatePath('/tasks')
-  revalidatePath(`/tasks/${id}`)
 
-  return id
-}
+export const deleteTaskAction = authActionClient
+  .schema(z.string())
+  .action(async ({ parsedInput: id, ctx }) => {
+    await deleteTaskUseCase(ctx.user, id)
 
-export const updateTask = async ({
-  id,
-  title,
-  status,
-  description,
-  imageIds
-}: {
-  id: string
-  title: string
-  status: TaskStatus
-  description?: any
-  imageIds: string[]
-}) => {
-  const session = await getAuthSession()
-  if (!session) throw new Error('Unauthorized')
+    revalidatePath('/tasks')
+    revalidatePath(`/tasks/${id}`)
 
-  await prisma.task.update({
-    where: {
-      id
-    },
-    data: {
-      title,
-      status,
-      description,
-      updatedById: session.user.id
+    return {
+      success: true
     }
   })
-  await handleImages(imageIds, id)
 
-  revalidatePath('/tasks')
-  revalidatePath(`/tasks/${id}`)
-}
-
-export const deleteTask = async (id: string) => {
-  const session = await getAuthSession()
-  if (!session) throw new Error('Unauthorized')
+export const getTaskImageUploadPresignedUrlAction = authActionClient
+  .schema(
+    z.object({
+      filename: z.string().min(1),
+      contentType: z.string().min(1)
+    })
+  )
+  .action(async ({ ctx, parsedInput }) => {
+    return await getPresignedUrl({
+      // contentTypeStartsWith: 'image/',
+      isPublic: true,
+      filename: parsedInput.filename,
+      contentType: parsedInput.contentType,
+      createdById: ctx.user.id
+    })
+  })
 
-  await handleImages([], id)
-  await prisma.task.delete({
-    where: {
-      id
+export const markTaskImageUploadedAction = authActionClient
+  .schema(z.string())
+  .action(async ({ parsedInput: id, ctx }) => {
+    try {
+      await markFileUploaded(ctx.user, id)
+      return {
+        success: true
+      }
+    } catch (err) {
+      return {
+        success: false
+      }
     }
   })
-
-  revalidatePath('/tasks')
-  revalidatePath(`/tasks/${id}`)
-}

package/template/base/src/app/(app)/tasks/[id]/page.tsx

@@ -1,7 +1,9 @@
 import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
 
+import { authGuard, getAuthSession } from '@/lib/auth'
 import { siteConfig } from '@/lib/siteConfig'
-import { getTask } from './actions'
+import { getTaskAction } from './actions'
 import { Render } from './render'
 
 export const generateMetadata = async (props: {
@@ -17,9 +19,41 @@ const TaskPage = async ({
     id: string
   }
 }) => {
-  const task = id !== 'new' ? await getTask(id) : undefined
+  const session = await getAuthSession()
+  if (!session) return notFound()
 
-  return <Render task={task} />
+  const g = await authGuard(session, 'TaskView')
+  if (!g) return notFound()
+
+  const [canCreate, canUpdate, canDelete] = await Promise.all([
+    authGuard(session, 'TaskCreate'),
+    authGuard(session, 'TaskUpdate'),
+    authGuard(session, 'TaskDelete')
+  ])
+
+  if (id === 'new') {
+    if (!canCreate) return notFound()
+
+    return (
+      <Render
+        canCreate={canCreate}
+        canUpdate={canUpdate}
+        canDelete={canDelete}
+      />
+    )
+  }
+
+  const task = await getTaskAction(id)
+  if (!task?.data) return notFound()
+
+  return (
+    <Render
+      task={task.data}
+      canCreate={canCreate}
+      canUpdate={canUpdate}
+      canDelete={canDelete}
+    />
+  )
 }
 
 export default TaskPage

package/template/base/src/app/(app)/tasks/[id]/render.tsx

@@ -2,12 +2,13 @@
 
 import EditorJS from '@editorjs/editorjs'
 import { zodResolver } from '@hookform/resolvers/zod'
-import { TaskStatus } from '@prisma/client'
+import { InferSelectModel } from 'drizzle-orm'
 import edjsHTML from 'editorjs-html'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
 import { z } from 'zod'
 
 import { Heading } from '@/components/heading'
@@ -42,25 +43,21 @@ import {
   SelectTrigger,
   SelectValue
 } from '@/components/ui/select'
-import { toast } from '@/components/ui/use-toast'
+import { Task } from '@/db/schema'
 import { formatDateTime, timesAgo } from '@/lib/formatDate'
 import { generateLabel } from '@/lib/generateLabel'
-import '@/styles/editor.css'
 import {
-  GetTaskFnDataType,
-  createTask,
-  deleteTask,
-  updateTask
+  createTaskAction,
+  deleteTaskAction,
+  getTaskImageUploadPresignedUrlAction,
+  markTaskImageUploadedAction,
+  updateTaskAction
 } from './actions'
+import { TaskCreateUpdateSchema, TaskStatusEnumArr } from './validation'
 
-const TaskSchema = z.object({
-  title: z.string().nonempty(),
-  status: z.nativeEnum(TaskStatus)
-})
+type FormData = z.infer<typeof TaskCreateUpdateSchema>
 
-type FormData = z.infer<typeof TaskSchema>
-
-const statuses = Object.values(TaskStatus).map(x => ({
+const statuses = TaskStatusEnumArr.map(x => ({
   label: generateLabel(x),
   value: x
 }))
@@ -68,16 +65,35 @@ const statuses = Object.values(TaskStatus).map(x => ({
 const edjsParser = edjsHTML()
 
 export const Render: FC<{
-  task: GetTaskFnDataType | undefined
-}> = ({ task }) => {
+  task?: {
+    id: string
+    title: string
+    description?: string | null
+    status: InferSelectModel<typeof Task>['status']
+    createdAt: Date
+    updatedAt?: Date | null
+    createdBy: {
+      id: string
+      name?: string | null
+    }
+    updatedBy?: {
+      id: string
+      name?: string | null
+    } | null
+  } | null
+  canCreate: boolean
+  canUpdate: boolean
+  canDelete: boolean
+}> = ({ task, canCreate, canUpdate, canDelete }) => {
   const form = useForm<FormData>({
-    resolver: zodResolver(TaskSchema),
+    resolver: zodResolver(TaskCreateUpdateSchema),
     defaultValues: {
-      title: task?.title ?? '',
-      status: task?.status || 'Todo'
+      title: task?.title || '',
+      status: task?.status
     }
   })
   const router = useRouter()
+
   const [isSaving, setIsSaving] = useState(false)
   const [isDeleting, setIsDeleting] = useState(false)
   const [isEditorMounted, setIsMounted] = useState<boolean>(false)
@@ -88,20 +104,35 @@ export const Render: FC<{
     const EditorJS = (await import('@editorjs/editorjs')).default
 
     // @ts-ignore
-    const Table = (await import('@editorjs/table')).default
+    const Header = (await import('@editorjs/header')).default
+
     // @ts-ignore
     const List = (await import('@editorjs/list')).default
+
     // @ts-ignore
-    const Image = (await import('@editorjs/image')).default
+    const NestedList = (await import('@editorjs/nested-list')).default
+
     // @ts-ignore
-    const Header = (await import('@editorjs/header')).default
+    const CheckList = (await import('@editorjs/checklist')).default
+
     // @ts-ignore
-    const Quote = (await import('@editorjs/quote')).default
+    const Table = (await import('@editorjs/table')).default
+
     // @ts-ignore
-    const CheckList = (await import('@editorjs/checklist')).default
+    const Quote = (await import('@editorjs/quote')).default
+
     // @ts-ignore
     const Delimiter = (await import('@editorjs/delimiter')).default
 
+    // @ts-ignore
+    const InlineCode = (await import('@editorjs/inline-code')).default
+
+    // @ts-ignore
+    const Code = (await import('@editorjs/code')).default
+
+    // @ts-ignore
+    const Image = (await import('@editorjs/image')).default
+
     if (!editorRef.current) {
       const editor = new EditorJS({
         holder: 'editor',
@@ -110,31 +141,63 @@ export const Render: FC<{
         },
         placeholder: 'Type here to write...',
         inlineToolbar: true,
-        data: task?.description as any,
+        data: task?.description ? JSON.parse(task.description) : undefined,
         tools: {
           header: Header,
           list: List,
+          nestedList: NestedList,
+          checklist: CheckList,
+          table: Table,
+          quote: Quote,
+          delimiter: Delimiter,
+          inlineCode: InlineCode,
+          code: Code,
           image: {
             class: Image,
             config: {
               uploader: {
-                async uploadByFile(file: any) {
-                  const formData = new FormData()
-                  formData.append('file', file)
-                  const res = await fetch('/api/upload', {
-                    method: 'POST',
-                    body: formData
-                  })
-                  const json = await res.json()
-                  if (json.success && json.id && json.url) {
-                    return {
-                      success: true,
-                      file: {
-                        id: json.id,
-                        url: json.url
+                async uploadByFile(file: File) {
+                  try {
+                    const res = await getTaskImageUploadPresignedUrlAction({
+                      filename: file.name,
+                      contentType: file.type
+                    })
+                    if (res?.data) {
+                      const formData = new FormData()
+
+                      for (const [key, value] of Object.entries(
+                        res.data.presigned.fields
+                      )) {
+                        formData.append(key, value)
+                      }
+
+                      formData.append('file', file)
+
+                      const response = await fetch(res.data.presigned.url, {
+                        method: 'POST',
+                        body: formData
+                      })
+
+                      if (!response.ok)
+                        throw new Error('Failed to upload image to s3')
+
+                      const res2 = await markTaskImageUploadedAction(
+                        res.data.id
+                      )
+
+                      if (!res2?.data?.success)
+                        throw new Error('Failed to mark image uploaded')
+
+                      return {
+                        success: true,
+                        file: {
+                          id: res.data.id,
+                          url: res.data.url
+                        }
                       }
                     }
-                  } else {
+                    throw new Error('No success returned from server')
+                  } catch (err) {
                     return {
                       success: false
                     }
@@ -142,11 +205,7 @@ export const Render: FC<{
                 }
               }
             }
-          },
-          table: Table,
-          checklist: CheckList,
-          quote: Quote,
-          delimiter: Delimiter
+          }
         }
       })
     }
@@ -169,7 +228,7 @@ export const Render: FC<{
 
   const editorHTML = useMemo(() => {
     if (!task?.description) return ''
-    return edjsParser.parse(task.description as any).join('')
+    return edjsParser.parse(JSON.parse(task.description)).join('')
   }, [task?.description])
   console.log(editorHTML)
 
@@ -190,27 +249,29 @@ export const Render: FC<{
             imageIds.push(b.data.file.id)
 
       if (!task) {
-        const newId = await createTask({
+        const res = await createTaskAction({
           ...data,
-          description: editorData,
+          description: editorData ? JSON.stringify(editorData) : null,
           imageIds
         })
-        router.replace(`/tasks/${newId}`)
+        if (!res?.data?.success)
+          throw new Error(res?.serverError || 'No success returned from server')
+        if (!res?.data?.id) throw new Error('No id returned from server')
+        router.replace(`/tasks/${res.data.id}`)
       } else {
-        await updateTask({
+        const res = await updateTaskAction({
           id: task.id,
           ...data,
-          description: editorData,
+          description: editorData ? JSON.stringify(editorData) : null,
           imageIds
         })
+        if (!res?.data?.success)
+          throw new Error(res?.serverError || 'No success returned from server')
       }
-      toast({
-        title: 'Task saved'
-      })
+      toast('User saved')
     } catch (err) {
-      toast({
-        title: 'Error saving task',
-        variant: 'destructive'
+      toast('Error saving user', {
+        description: (err as any).message || undefined
       })
     }
     setIsSaving(false)
@@ -229,15 +290,17 @@ export const Render: FC<{
               <Icons.chevronLeft className="mr-2 h-4 w-4" />
               Back
             </Button>
-            <Button type="submit" disabled={isSaving || isDeleting}>
-              {isSaving ? (
-                <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
-              ) : (
-                <Icons.save className="mr-2 h-4 w-4" />
-              )}
-              <span>Save</span>
-            </Button>
-            {task ? (
+            {(task ? canUpdate : canCreate) ? (
+              <Button type="submit" disabled={isSaving || isDeleting}>
+                {isSaving ? (
+                  <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <Icons.save className="mr-2 h-4 w-4" />
+                )}
+                <span>Save</span>
+              </Button>
+            ) : undefined}
+            {task && canDelete ? (
               <AlertDialog>
                 <AlertDialogTrigger asChild>
                   <Button
@@ -268,15 +331,18 @@ export const Render: FC<{
                       onClick={async () => {
                         setIsDeleting(true)
                         try {
-                          await deleteTask(task.id)
-                          toast({
-                            title: 'Task deleted'
-                          })
-                          router.push('/tasks')
+                          const res = await deleteTaskAction(task.id)
+                          if (!res?.data?.success)
+                            throw new Error(
+                              res?.serverError ||
+                                'No success returned from server'
+                            )
+                          toast('Task deleted')
+                          router.replace('/tasks')
                         } catch (err) {
-                          toast({
-                            title: 'Error deleting task',
-                            variant: 'destructive'
+                          toast('Error deleting task', {
+                            description:
+                              (err as any).message || 'Something went wrong'
                           })
                         }
                         setIsDeleting(false)
@@ -288,7 +354,7 @@ export const Render: FC<{
                 </AlertDialogContent>
               </AlertDialog>
             ) : undefined}
-            {task ? (
+            {task && canCreate ? (
               <Link href="/tasks/new">
                 <Button
                   type="button"
@@ -350,24 +416,25 @@ export const Render: FC<{
               </FormItem>
             )}
           />
-
-          {isEditorMounted ? (
-            <div className="col-span-1 md:col-span-2 w-full mt-5 prose prose-neutral mx-auto dark:prose-invert">
-              <h3 className="w-full bg-transparent text-3xl font-bold">
-                Description
-              </h3>
-              <div id="editor" className="min-h-[360px] w-full" />
-              <p className="text-sm text-gray-500">
-                Use{' '}
-                <kbd className="rounded-md border bg-muted px-1 text-xs uppercase">
-                  Tab
-                </kbd>{' '}
-                to open the command menu.
-              </p>
-            </div>
-          ) : undefined}
         </form>
       </Form>
+
+      {isEditorMounted ? (
+        <div className="prose prose-neutral mx-auto mt-5 w-full dark:prose-invert">
+          <h3 className="w-full bg-transparent text-3xl font-bold">
+            Description
+          </h3>
+          <div id="editor" className="min-h-[360px] w-full" />
+          <p className="text-sm text-gray-500">
+            Use{' '}
+            <kbd className="rounded-md border bg-muted px-1 text-xs uppercase">
+              /
+            </kbd>{' '}
+            to open the command menu.
+          </p>
+        </div>
+      ) : undefined}
+
       {task ? (
         <SystemInfo
           items={[
@@ -381,7 +448,7 @@ export const Render: FC<{
             },
             {
               label: 'Updated At',
-              value: timesAgo(task.updatedAt)
+              value: task.updatedAt ? timesAgo(task.updatedAt) : '-'
             },
             {
               label: 'Created By',
@@ -396,13 +463,15 @@ export const Render: FC<{
             },
             {
               label: 'Updated By',
-              value: (
+              value: task.updatedBy ? (
                 <Link
                   href={`/users/${task.updatedBy.id}`}
                   className="underline underline-offset-4 transition-all hover:text-foreground"
                 >
                   {task.updatedBy.name ?? 'Unknown'}
                 </Link>
+              ) : (
+                '-'
               )
             }
           ]}

package/template/base/src/app/(app)/tasks/[id]/validation.ts

@@ -0,0 +1,18 @@
+import { z } from 'zod'
+
+import { Task } from '@/db/schema'
+
+export const TaskStatusEnumArr = Task.status.enumValues
+
+export const TaskCreateUpdateSchema = z.object({
+  title: z.string().min(1).trim(),
+  description: z.string().optional().nullable(),
+  status: z.enum(TaskStatusEnumArr),
+  imageIds: z.array(z.string()).optional().nullable()
+})
+
+export const TaskUpdateServerSchema = TaskCreateUpdateSchema.merge(
+  z.object({
+    id: z.string().min(1)
+  })
+)