create-ej-app 3.2.0 → 4.0.0

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

@@ -0,0 +1,413 @@
+'use client'
+
+import EditorJS from '@editorjs/editorjs'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { TaskStatus } from '@prisma/client'
+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 { z } from 'zod'
+
+import { Heading } from '@/components/heading'
+import { Icons } from '@/components/icons'
+import { Shell } from '@/components/shell'
+import { SystemInfo } from '@/components/system-info'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select'
+import { toast } from '@/components/ui/use-toast'
+import { formatDateTime, timesAgo } from '@/lib/formatDate'
+import { generateLabel } from '@/lib/generateLabel'
+import '@/styles/editor.css'
+import {
+  GetTaskFnDataType,
+  createTask,
+  deleteTask,
+  updateTask
+} from './actions'
+
+const TaskSchema = z.object({
+  title: z.string().nonempty(),
+  status: z.nativeEnum(TaskStatus)
+})
+
+type FormData = z.infer<typeof TaskSchema>
+
+const statuses = Object.values(TaskStatus).map(x => ({
+  label: generateLabel(x),
+  value: x
+}))
+
+const edjsParser = edjsHTML()
+
+export const Render: FC<{
+  task: GetTaskFnDataType | undefined
+}> = ({ task }) => {
+  const form = useForm<FormData>({
+    resolver: zodResolver(TaskSchema),
+    defaultValues: {
+      title: task?.title ?? '',
+      status: task?.status || 'Todo'
+    }
+  })
+  const router = useRouter()
+  const [isSaving, setIsSaving] = useState(false)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [isEditorMounted, setIsMounted] = useState<boolean>(false)
+
+  const editorRef = useRef<EditorJS>()
+
+  const initializeEditor = useCallback(async () => {
+    const EditorJS = (await import('@editorjs/editorjs')).default
+
+    // @ts-ignore
+    const Table = (await import('@editorjs/table')).default
+    // @ts-ignore
+    const List = (await import('@editorjs/list')).default
+    // @ts-ignore
+    const Image = (await import('@editorjs/image')).default
+    // @ts-ignore
+    const Header = (await import('@editorjs/header')).default
+    // @ts-ignore
+    const Quote = (await import('@editorjs/quote')).default
+    // @ts-ignore
+    const CheckList = (await import('@editorjs/checklist')).default
+    // @ts-ignore
+    const Delimiter = (await import('@editorjs/delimiter')).default
+
+    if (!editorRef.current) {
+      const editor = new EditorJS({
+        holder: 'editor',
+        onReady() {
+          editorRef.current = editor
+        },
+        placeholder: 'Type here to write...',
+        inlineToolbar: true,
+        data: task?.description as any,
+        tools: {
+          header: Header,
+          list: List,
+          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
+                      }
+                    }
+                  } else {
+                    return {
+                      success: false
+                    }
+                  }
+                }
+              }
+            }
+          },
+          table: Table,
+          checklist: CheckList,
+          quote: Quote,
+          delimiter: Delimiter
+        }
+      })
+    }
+  }, [task?.description])
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') setIsMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (!isEditorMounted) return
+
+    initializeEditor()
+
+    return () => {
+      editorRef.current?.destroy()
+      editorRef.current = undefined
+    }
+  }, [isEditorMounted, initializeEditor])
+
+  const editorHTML = useMemo(() => {
+    if (!task?.description) return ''
+    return edjsParser.parse(task.description as any).join('')
+  }, [task?.description])
+  console.log(editorHTML)
+
+  async function onSubmit(data: FormData) {
+    setIsSaving(true)
+    try {
+      const editorData = await editorRef.current?.save()
+      const imageIds: string[] = []
+      if (editorData?.blocks)
+        for (const b of editorData.blocks)
+          if (
+            b.type === 'image' &&
+            b.data &&
+            b.data.file &&
+            b.data.file.id &&
+            b.data.file.url
+          )
+            imageIds.push(b.data.file.id)
+
+      if (!task) {
+        const newId = await createTask({
+          ...data,
+          description: editorData,
+          imageIds
+        })
+        router.replace(`/tasks/${newId}`)
+      } else {
+        await updateTask({
+          id: task.id,
+          ...data,
+          description: editorData,
+          imageIds
+        })
+      }
+      toast({
+        title: 'Task saved'
+      })
+    } catch (err) {
+      toast({
+        title: 'Error saving task',
+        variant: 'destructive'
+      })
+    }
+    setIsSaving(false)
+  }
+
+  return (
+    <Shell>
+      <Heading heading={task ? task.title : 'New Task'} />
+      <Form {...form}>
+        <form
+          className="grid grid-cols-1 gap-3 md:grid-cols-2"
+          onSubmit={form.handleSubmit(onSubmit)}
+        >
+          <div className="col-span-1 mb-1 grid grid-cols-2 gap-2 sm:flex md:col-span-2">
+            <Button type="button" onClick={() => router.back()} variant="ghost">
+              <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 ? (
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="destructive"
+                    disabled={isSaving || isDeleting}
+                  >
+                    {isDeleting ? (
+                      <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
+                    ) : (
+                      <Icons.delete className="mr-2 h-4 w-4" />
+                    )}
+                    Delete
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>
+                      Are you absolutely sure?
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                      This action cannot be undone.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction
+                      onClick={async () => {
+                        setIsDeleting(true)
+                        try {
+                          await deleteTask(task.id)
+                          toast({
+                            title: 'Task deleted'
+                          })
+                          router.push('/tasks')
+                        } catch (err) {
+                          toast({
+                            title: 'Error deleting task',
+                            variant: 'destructive'
+                          })
+                        }
+                        setIsDeleting(false)
+                      }}
+                    >
+                      Continue
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            ) : undefined}
+            {task ? (
+              <Link href="/tasks/new">
+                <Button
+                  type="button"
+                  disabled={isSaving || isDeleting}
+                  variant="secondary"
+                  className="w-full"
+                >
+                  <Icons.add className="mr-2 h-4 w-4" />
+                  New
+                </Button>
+              </Link>
+            ) : undefined}
+          </div>
+
+          <FormField
+            control={form.control}
+            name="title"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Title</FormLabel>
+                <FormControl>
+                  <Input
+                    type="text"
+                    placeholder="Enter a title"
+                    disabled={isSaving}
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="status"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Status</FormLabel>
+                <Select
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                  disabled={isSaving}
+                >
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select status" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    {statuses.map(({ label, value }) => (
+                      <SelectItem key={value} value={value}>
+                        {label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </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>
+      {task ? (
+        <SystemInfo
+          items={[
+            {
+              label: 'Id',
+              value: task.id
+            },
+            {
+              label: 'Created At',
+              value: formatDateTime(task.createdAt)
+            },
+            {
+              label: 'Updated At',
+              value: timesAgo(task.updatedAt)
+            },
+            {
+              label: 'Created By',
+              value: (
+                <Link
+                  href={`/users/${task.createdBy.id}`}
+                  className="underline underline-offset-4 transition-all hover:text-foreground"
+                >
+                  {task.createdBy.name ?? 'Unknown'}
+                </Link>
+              )
+            },
+            {
+              label: 'Updated By',
+              value: (
+                <Link
+                  href={`/users/${task.updatedBy.id}`}
+                  className="underline underline-offset-4 transition-all hover:text-foreground"
+                >
+                  {task.updatedBy.name ?? 'Unknown'}
+                </Link>
+              )
+            }
+          ]}
+        />
+      ) : undefined}
+    </Shell>
+  )
+}

package/template/prisma/src/app/(app)/tasks/actions.ts

@@ -0,0 +1,69 @@
+'use server'
+
+import { Task, TaskStatus } from '@prisma/client'
+
+import { getAuthSession } from '@/lib/auth'
+import { prisma } from '@/lib/db'
+import { UnwrapPromise } from '@/types/UnwrapPromise'
+
+export const getTasks = async ({
+  page,
+  limit,
+  sortBy,
+  sortOrder,
+  title,
+  status
+}: {
+  page: number
+  limit: number
+  sortBy?: keyof Task
+  sortOrder?: 'asc' | 'desc'
+  title?: string
+  status?: TaskStatus[]
+}) => {
+  const session = await getAuthSession()
+  if (!session) throw new Error('Unauthorized')
+
+  const where = {
+    title: title
+      ? { contains: title, mode: 'insensitive' as const }
+      : undefined,
+    status: status?.length ? { in: status } : undefined
+  }
+  const [tasks, total] = await Promise.all([
+    prisma.task.findMany({
+      where,
+      select: {
+        id: true,
+        title: true,
+        status: true,
+        createdAt: true,
+        updatedAt: true,
+        createdBy: {
+          select: {
+            id: true,
+            name: true
+          }
+        },
+        updatedBy: {
+          select: {
+            id: true,
+            name: true
+          }
+        }
+      },
+      skip: (page - 1) * limit,
+      take: limit,
+      orderBy: {
+        [sortBy || 'createdAt']: sortOrder || 'desc'
+      }
+    }),
+    prisma.task.count({
+      where
+    })
+  ])
+
+  return { tasks, total }
+}
+
+export type GetTasksFnDataType = UnwrapPromise<ReturnType<typeof getTasks>>

package/template/prisma/src/app/(app)/tasks/page.tsx

@@ -0,0 +1,53 @@
+import { Task, TaskStatus } from '@prisma/client'
+import { Metadata } from 'next'
+
+import { siteConfig } from '@/lib/siteConfig'
+import { getTasks } from './actions'
+import { Render } from './render'
+
+export const metadata: Metadata = {
+  title: 'Tasks' + ' | ' + siteConfig.name
+}
+
+const TasksPage = async ({
+  searchParams
+}: {
+  searchParams: {
+    page?: string
+    limit?: string
+    sort?: string
+    title?: string
+    status?: string
+  }
+}) => {
+  const page = searchParams.page ? parseInt(searchParams.page) : 1
+  const limit = searchParams.limit ? parseInt(searchParams.limit) : 10
+
+  const [sortBy, sortOrder] =
+    typeof searchParams.sort === 'string'
+      ? (searchParams.sort.split('.') as [
+          keyof Task | undefined,
+          'asc' | 'desc' | undefined
+        ])
+      : []
+
+  const title = searchParams.title
+
+  const status =
+    typeof searchParams.status === 'string'
+      ? (searchParams.status.split('.') as TaskStatus[])
+      : undefined
+
+  const data = await getTasks({
+    page,
+    limit,
+    sortBy,
+    sortOrder,
+    title,
+    status
+  })
+
+  return <Render data={data} />
+}
+
+export default TasksPage

package/template/prisma/src/app/(app)/tasks/render.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import { TaskStatus } from '@prisma/client'
+import Link from 'next/link'
+import { FC } from 'react'
+
+import { DataTable } from '@/components/data-table/data-table'
+import { DataTableColumnHeader } from '@/components/data-table/data-table-column-header'
+import { Heading } from '@/components/heading'
+import { Icons } from '@/components/icons'
+import { Shell } from '@/components/shell'
+import { Button } from '@/components/ui/button'
+import { formatDateTime, timesAgo } from '@/lib/formatDate'
+import { generateLabel } from '@/lib/generateLabel'
+import { GetTasksFnDataType } from './actions'
+
+const statuses = Object.values(TaskStatus).map(x => ({
+  label: generateLabel(x),
+  value: x
+}))
+
+export const Render: FC<{
+  data: GetTasksFnDataType
+}> = ({ data }) => {
+  return (
+    <Shell>
+      <Heading heading="Tasks" text="List of all the tasks">
+        <Link href="/tasks/new">
+          <Button>
+            <Icons.add className="mr-2 h-4 w-4" />
+            New
+          </Button>
+        </Link>
+      </Heading>
+      <DataTable
+        columns={[
+          {
+            accessorKey: 'title',
+            header: ({ column }) => (
+              <DataTableColumnHeader column={column} title="Title" />
+            ),
+            cell: ({ row }) => (
+              <Link
+                className="underline underline-offset-4"
+                href={`/tasks/${row.original.id}`}
+              >
+                {row.original.title}
+              </Link>
+            )
+          },
+          {
+            accessorKey: 'status',
+            header: ({ column }) => (
+              <DataTableColumnHeader column={column} title="Status" />
+            ),
+            cell: ({ row }) => row.original.status.replace('_', ' ')
+          },
+          {
+            accessorKey: 'createdBy',
+            header: ({ column }) => (
+              <DataTableColumnHeader column={column} title="Created By" />
+            ),
+            cell: ({ row }) => row.original.createdBy.name,
+            enableSorting: false
+          },
+          {
+            accessorKey: 'updatedBy',
+            header: ({ column }) => (
+              <DataTableColumnHeader column={column} title="Updated By" />
+            ),
+            cell: ({ row }) => row.original.updatedBy.name,
+            enableSorting: false
+          },
+          {
+            accessorKey: 'createdAt',
+            header: ({ column }) => (
+              <DataTableColumnHeader column={column} title="Created At" />
+            ),
+            cell: ({ row }) => formatDateTime(row.original.createdAt)
+          },
+          {
+            accessorKey: 'updatedAt',
+            header: ({ column }) => (
+              <DataTableColumnHeader column={column} title="Updated At" />
+            ),
+            cell: ({ row }) => timesAgo(row.original.updatedAt)
+          }
+        ]}
+        data={data.tasks}
+        total={data.total}
+        searchableColumns={[
+          {
+            id: 'title',
+            title: 'Title'
+          }
+        ]}
+        filterableColumns={[
+          {
+            id: 'status',
+            title: 'Status',
+            options: statuses
+          }
+        ]}
+      />
+    </Shell>
+  )
+}