create-ej-app 6.0.0 → 7.0.0

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

@@ -1,413 +0,0 @@
-'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

@@ -1,69 +0,0 @@
-'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

@@ -1,53 +0,0 @@
-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

@@ -1,107 +0,0 @@
-'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>
-  )
-}