create-ej-app 3.2.0 → 4.0.0

package/template/prisma/src/app/(app)/layout.tsx

@@ -0,0 +1,90 @@
+import { notFound } from 'next/navigation'
+import { ReactNode } from 'react'
+
+import { AppNavCommand } from '@/components/app-nav-command'
+import { MainNav } from '@/components/main-nav'
+import { SideNav } from '@/components/side-nav'
+import { SiteFooter } from '@/components/site-footer'
+import { UserAccountNav } from '@/components/user-account-nav'
+import { getAuthSession } from '@/lib/auth'
+
+const Layout = async ({ children }: { children: ReactNode }) => {
+  const session = await getAuthSession()
+
+  if (!session?.user) return notFound()
+
+  return (
+    <div className="flex min-h-screen flex-col space-y-6">
+      <header className="sticky top-0 z-40 border-b bg-background">
+        <div className="container flex h-16 items-center justify-between py-4">
+          <MainNav
+            logoLink="/dashboard"
+            items={[
+              {
+                title: 'Dashboard',
+                href: '/dashboard'
+              },
+              {
+                title: 'Users',
+                href: '/users'
+              },
+              {
+                title: 'Tasks',
+                href: '/tasks'
+              }
+            ]}
+          />
+          <div className="flex items-center justify-center space-x-4">
+            <AppNavCommand
+              modules={{
+                task: true
+              }}
+            />
+            <UserAccountNav
+              user={{
+                name: session.user.name,
+                image: session.user.image,
+                email: session.user.email
+              }}
+            />
+          </div>
+        </div>
+      </header>
+      <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr]">
+        <aside className="hidden w-[200px] flex-col md:flex">
+          <SideNav
+            items={[
+              {
+                title: 'Dashboard',
+                href: '/dashboard',
+                icon: 'dashboard'
+              },
+
+              {
+                title: 'Users',
+                href: '/users',
+                icon: 'user'
+              },
+              {
+                title: 'Tasks',
+                href: '/tasks',
+                icon: 'task'
+              },
+              {
+                title: 'Settings',
+                href: '/settings',
+                icon: 'settings'
+              }
+            ]}
+          />
+        </aside>
+        <main className="flex w-full flex-1 flex-col overflow-hidden">
+          {children}
+        </main>
+      </div>
+      <SiteFooter className="border-t" />
+    </div>
+  )
+}
+
+export default Layout

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

@@ -0,0 +1,18 @@
+'use server'
+
+import { getAuthSession } from '@/lib/auth'
+import { prisma } from '@/lib/db'
+
+export const updateName = async ({ name }: { name: string }) => {
+  const session = await getAuthSession()
+  if (!session?.user) throw new Error('Unauthorized')
+
+  await prisma.user.update({
+    where: {
+      id: session.user.id
+    },
+    data: {
+      name
+    }
+  })
+}

package/template/prisma/src/app/(app)/settings/loading.tsx

@@ -0,0 +1,28 @@
+import { Heading } from '@/components/heading'
+import { Shell } from '@/components/shell'
+import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+
+const Loading = () => {
+  return (
+    <Shell>
+      <Heading heading="Settings" text="Manage account and profile settings." />
+      <div className="grid gap-10">
+        <Card>
+          <CardHeader className="gap-2">
+            <Skeleton className="h-6 w-1/5" />
+            <Skeleton className="h-4 w-4/5" />
+          </CardHeader>
+          <CardContent className="h-10">
+            <Skeleton className="h-8 w-full max-w-[400px]" />
+          </CardContent>
+          <CardFooter>
+            <Skeleton className="h-8 w-full max-w-[120px]" />
+          </CardFooter>
+        </Card>
+      </div>
+    </Shell>
+  )
+}
+
+export default Loading

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

@@ -0,0 +1,28 @@
+import { Metadata } from 'next'
+
+import { Heading } from '@/components/heading'
+import { Shell } from '@/components/shell'
+import { getAuthSession } from '@/lib/auth'
+import { siteConfig } from '@/lib/siteConfig'
+import { Render } from './render'
+
+export const metadata: Metadata = {
+  title: 'Settings' + ' | ' + siteConfig.name
+}
+
+const SettingsPage = async () => {
+  const session = await getAuthSession()
+
+  if (!session?.user) return
+
+  return (
+    <Shell>
+      <Heading heading="Settings" text="Manage account and profile settings." />
+      <div className="grid gap-10">
+        <Render name={session.user.name || ''} />
+      </div>
+    </Shell>
+  )
+}
+
+export default SettingsPage

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

@@ -0,0 +1,113 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useRouter } from 'next/navigation'
+import { FC, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Icons } from '@/components/icons'
+import { Button } from '@/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@/components/ui/card'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { toast } from '@/components/ui/use-toast'
+import { updateName } from './actions'
+
+const userSchema = z.object({
+  name: z.string().nonempty()
+})
+
+type FormData = z.infer<typeof userSchema>
+
+export const Render: FC<{ name: string }> = ({ name }) => {
+  const form = useForm<FormData>({
+    resolver: zodResolver(userSchema),
+    defaultValues: {
+      name
+    }
+  })
+  const router = useRouter()
+  const [isSaving, setIsSaving] = useState(false)
+
+  async function onSubmit(data: FormData) {
+    setIsSaving(true)
+
+    try {
+      await updateName({
+        ...data
+      })
+      toast({
+        title: 'Your name has been updated.'
+      })
+      router.refresh()
+    } catch (err) {
+      toast({
+        title: 'Internal Server Error',
+        variant: 'destructive',
+        description: 'Please try again later.'
+      })
+    }
+
+    setIsSaving(false)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <Card>
+          <CardHeader>
+            <CardTitle>Your Name</CardTitle>
+            <CardDescription>
+              Please enter your full name or a display name you are comfortable
+              with.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem className="max-w-[400px]">
+                  <FormControl>
+                    <Input
+                      type="text"
+                      placeholder="Your Name"
+                      autoComplete="name"
+                      disabled={isSaving}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CardContent>
+          <CardFooter>
+            <Button type="submit" disabled={isSaving}>
+              {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>
+          </CardFooter>
+        </Card>
+      </form>
+    </Form>
+  )
+}

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

@@ -0,0 +1,147 @@
+'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
+    }
+  })
+
+  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 getTask = async (id: string) => {
+  const session = await getAuthSession()
+  if (!session) throw new Error('Unauthorized')
+
+  return await prisma.task.findUnique({
+    where: {
+      id
+    },
+    include: {
+      createdBy: {
+        select: {
+          id: true,
+          name: true
+        }
+      },
+      updatedBy: {
+        select: {
+          id: true,
+          name: true
+        }
+      }
+    }
+  })
+}
+
+export type GetTaskFnDataType = UnwrapPromise<ReturnType<typeof getTask>>
+
+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')
+
+  const { id } = await prisma.task.create({
+    data: {
+      title,
+      status,
+      description,
+      createdById: session.user.id,
+      updatedById: session.user.id
+    }
+  })
+  await handleImages(imageIds, id)
+
+  revalidatePath('/tasks')
+  revalidatePath(`/tasks/${id}`)
+
+  return 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')
+
+  await prisma.task.update({
+    where: {
+      id
+    },
+    data: {
+      title,
+      status,
+      description,
+      updatedById: session.user.id
+    }
+  })
+  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')
+
+  await handleImages([], id)
+  await prisma.task.delete({
+    where: {
+      id
+    }
+  })
+
+  revalidatePath('/tasks')
+  revalidatePath(`/tasks/${id}`)
+}

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

@@ -0,0 +1,25 @@
+import { Metadata } from 'next'
+
+import { siteConfig } from '@/lib/siteConfig'
+import { getTask } from './actions'
+import { Render } from './render'
+
+export const generateMetadata = async (props: {
+  params: { id: string }
+}): Promise<Metadata> => ({
+  title: 'Task - ' + props.params.id + ' | ' + siteConfig.name
+})
+
+const TaskPage = async ({
+  params: { id }
+}: {
+  params: {
+    id: string
+  }
+}) => {
+  const task = id !== 'new' ? await getTask(id) : undefined
+
+  return <Render task={task} />
+}
+
+export default TaskPage