add pages

2026-02-04 12:08:33 -05:00 · 2020-09-24 12:16:46 -04:00
8 changed files with 258 additions and 0 deletions
--- a/examples/auth/app/sessions/components/SessionForm.tsx
+++ b/examples/auth/app/sessions/components/SessionForm.tsx
@@ -0,0 +1,23 @@
+import React from "react"
+
+type SessionFormProps = {
+  initialValues: any
+  onSubmit: React.FormEventHandler<HTMLFormElement>
+}
+
+const SessionForm = ({initialValues, onSubmit}: SessionFormProps) => {
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault()
+        onSubmit(event)
+      }}
+    >
+      <div>Put your form fields here. But for now, just click submit</div>
+      <div>{JSON.stringify(initialValues)}</div>
+      <button>Submit</button>
+    </form>
+  )
+}
+
+export default SessionForm
--- a/examples/auth/app/sessions/mutations/createSession.ts
+++ b/examples/auth/app/sessions/mutations/createSession.ts
@@ -0,0 +1,16 @@
+import {SessionContext} from "blitz"
+import db, {SessionCreateArgs} from "db"
+
+type CreateSessionInput = {
+  data: SessionCreateArgs["data"]
+}
+export default async function createSession(
+  {data}: CreateSessionInput,
+  ctx: {session?: SessionContext} = {},
+) {
+  ctx.session!.authorize()
+
+  const session = await db.session.create({data})
+
+  return session
+}
--- a/examples/auth/app/sessions/mutations/deleteSession.ts
+++ b/examples/auth/app/sessions/mutations/deleteSession.ts
@@ -0,0 +1,17 @@
+import {SessionContext} from "blitz"
+import db, {SessionDeleteArgs} from "db"
+
+type DeleteSessionInput = {
+  where: SessionDeleteArgs["where"]
+}
+
+export default async function deleteSession(
+  {where}: DeleteSessionInput,
+  ctx: {session?: SessionContext} = {},
+) {
+  ctx.session!.authorize()
+
+  const session = await db.session.delete({where})
+
+  return session
+}
--- a/examples/auth/app/sessions/mutations/updateSession.ts
+++ b/examples/auth/app/sessions/mutations/updateSession.ts
@@ -0,0 +1,18 @@
+import {SessionContext} from "blitz"
+import db, {SessionUpdateArgs} from "db"
+
+type UpdateSessionInput = {
+  where: SessionUpdateArgs["where"]
+  data: SessionUpdateArgs["data"]
+}
+
+export default async function updateSession(
+  {where, data}: UpdateSessionInput,
+  ctx: {session?: SessionContext} = {},
+) {
+  ctx.session!.authorize()
+
+  const session = await db.session.update({where, data})
+
+  return session
+}
--- a/examples/auth/app/sessions/pages/sessions/[sessionId].tsx
+++ b/examples/auth/app/sessions/pages/sessions/[sessionId].tsx
@@ -0,0 +1,60 @@
+import React, {Suspense} from "react"
+import Layout from "app/layouts/Layout"
+import {Head, Link, useRouter, useQuery, useParam, BlitzPage} from "blitz"
+import getSession from "app/sessions/queries/getSession"
+import deleteSession from "app/sessions/mutations/deleteSession"
+
+export const Session = () => {
+  const router = useRouter()
+  const sessionId = useParam("sessionId", "number")
+  const [session] = useQuery(getSession, {where: {id: sessionId}})
+
+  return (
+    <div>
+      <h1>Session {session.id}</h1>
+      <pre>{JSON.stringify(session, null, 2)}</pre>
+
+      <Link href="/sessions/[sessionId]/edit" as={`/sessions/${session.id}/edit`}>
+        <a>Edit</a>
+      </Link>
+
+      <button
+        type="button"
+        onClick={async () => {
+          if (window.confirm("This will be deleted")) {
+            await deleteSession({where: {id: session.id}})
+            router.push("/sessions")
+          }
+        }}
+      >
+        Delete
+      </button>
+    </div>
+  )
+}
+
+const ShowSessionPage: BlitzPage = () => {
+  return (
+    <div>
+      <Head>
+        <title>Session</title>
+      </Head>
+
+      <main>
+        <p>
+          <Link href="/sessions">
+            <a>Sessions</a>
+          </Link>
+        </p>
+
+        <Suspense fallback={<div>Loading...</div>}>
+          <Session />
+        </Suspense>
+      </main>
+    </div>
+  )
+}
+
+ShowSessionPage.getLayout = (page) => <Layout>{page}</Layout>
+
+export default ShowSessionPage
--- a/examples/auth/app/sessions/pages/sessions/index.tsx
+++ b/examples/auth/app/sessions/pages/sessions/index.tsx
@@ -0,0 +1,68 @@
+import React, {Suspense} from "react"
+import Layout from "app/layouts/Layout"
+import {Head, Link, usePaginatedQuery, useRouter, BlitzPage} from "blitz"
+import getSessions from "app/sessions/queries/getSessions"
+
+const ITEMS_PER_PAGE = 100
+
+export const SessionsList = () => {
+  const router = useRouter()
+  const page = Number(router.query.page) || 0
+  const [{sessions, hasMore}] = usePaginatedQuery(getSessions, {
+    orderBy: {id: "asc"},
+    skip: ITEMS_PER_PAGE * page,
+    take: ITEMS_PER_PAGE,
+  })
+
+  const goToPreviousPage = () => router.push({query: {page: page - 1}})
+  const goToNextPage = () => router.push({query: {page: page + 1}})
+
+  return (
+    <div>
+      <ul>
+        {sessions.map((session) => (
+          <li key={session.id}>
+            <Link href="/sessions/[sessionId]" as={`/sessions/${session.id}`}>
+              <a>{session.name}</a>
+            </Link>
+          </li>
+        ))}
+      </ul>
+
+      <button disabled={page === 0} onClick={goToPreviousPage}>
+        Previous
+      </button>
+      <button disabled={!hasMore} onClick={goToNextPage}>
+        Next
+      </button>
+    </div>
+  )
+}
+
+const SessionsPage: BlitzPage = () => {
+  return (
+    <div>
+      <Head>
+        <title>Sessions</title>
+      </Head>
+
+      <main>
+        <h1>Sessions</h1>
+
+        <p>
+          <Link href="/sessions/new">
+            <a>Create Session</a>
+          </Link>
+        </p>
+
+        <Suspense fallback={<div>Loading...</div>}>
+          <SessionsList />
+        </Suspense>
+      </main>
+    </div>
+  )
+}
+
+SessionsPage.getLayout = (page) => <Layout>{page}</Layout>
+
+export default SessionsPage
--- a/examples/auth/app/sessions/queries/getSession.ts
+++ b/examples/auth/app/sessions/queries/getSession.ts
@@ -0,0 +1,21 @@
+import {NotFoundError, SessionContext} from "blitz"
+import db, {FindOneSessionArgs} from "db"
+
+type GetSessionInput = {
+  where: FindOneSessionArgs["where"]
+  // Only available if a model relationship exists
+  // include?: FindOneSessionArgs['include']
+}
+
+export default async function getSession(
+  {where /* include */}: GetSessionInput,
+  ctx: {session?: SessionContext} = {},
+) {
+  ctx.session!.authorize()
+
+  const session = await db.session.findOne({where})
+
+  if (!session) throw new NotFoundError()
+
+  return session
+}
--- a/examples/auth/app/sessions/queries/getSessions.ts
+++ b/examples/auth/app/sessions/queries/getSessions.ts
@@ -0,0 +1,35 @@
+import {SessionContext} from "blitz"
+import db, {FindManySessionArgs} from "db"
+
+type GetSessionsInput = {
+  where?: FindManySessionArgs["where"]
+  orderBy?: FindManySessionArgs["orderBy"]
+  skip?: FindManySessionArgs["skip"]
+  take?: FindManySessionArgs["take"]
+  // Only available if a model relationship exists
+  // include?: FindManySessionArgs['include']
+}
+
+export default async function getSessions(
+  {where, orderBy, skip = 0, take}: GetSessionsInput,
+  ctx: {session?: SessionContext} = {},
+) {
+  ctx.session!.authorize()
+
+  const sessions = await db.session.findMany({
+    where,
+    orderBy,
+    take,
+    skip,
+  })
+
+  const count = await db.session.count()
+  const hasMore = typeof take === "number" ? skip + take < count : false
+  const nextPage = hasMore ? {take, skip: skip + take!} : null
+
+  return {
+    sessions,
+    nextPage,
+    hasMore,
+  }
+}