move Layout into _app.tsx

2026-03-03 06:27:11 +01:00 · 2022-09-09 00:17:47 +02:00
parent 7389289b81
commit 2fd3a47e72
12 changed files with 112 additions and 132 deletions
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,7 +1,11 @@
 export { reportWebVitals } from 'next-axiom'
 import { useEffect } from 'react'

+import type { AppProps } from 'next/app'
+
 import { useSession, signIn, SessionProvider } from 'next-auth/react'
+import Layout from '../components/layout';
+
 import '../styles/index.css'

 function Auth({ children }) {
@@ -29,13 +33,15 @@ export default function MyApp({
  return (
    <div className="flex flex-col min-h-screen">
      <SessionProvider session={session}>
-        {Component.authenticationRequired ? (
-          <Auth>
+        <Layout>
+          {Component.authenticationRequired ? (
+            <Auth>
+              <Component {...pageProps} />
+            </Auth>
+          ) : (
            <Component {...pageProps} />
-          </Auth>
-        ) : (
-          <Component {...pageProps} />
-        )}
+          )}
+        </Layout>
      </SessionProvider>
    </div>
  )
--- a/pages/admin/bookings/[uuid]/bill.tsx
+++ b/pages/admin/bookings/[uuid]/bill.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import Layout from '../../../../components/layout'
 import Input from '../../../../components/input'
 import Select from '../../../../components/select'
 import { Booking } from '../../../../db/booking'
@@ -115,14 +114,14 @@ function BookingBillPage({
    setStoringInProgress(false)
  }

-  const onAddAdditionalCost = function (
+  const onAddAdditionalCost = function(
    event: React.MouseEvent<HTMLButtonElement>
  ) {
    event.preventDefault()
    setAdditionalCosts([...additionalCosts, { name: '', value: 0 }])
  }

-  const onRemoveAdditionalCost = function (
+  const onRemoveAdditionalCost = function(
    event: React.MouseEvent<HTMLButtonElement>,
    index: number
  ) {
@@ -134,7 +133,7 @@ function BookingBillPage({
  }

  return (
-    <Layout>
+    <>
      {booking && (
        <form className="w-full" onSubmit={onSubmit}>
          <div>
@@ -198,9 +197,8 @@ function BookingBillPage({
                    >
                      -
                    </button>
-                    <label className="flabel inline">{`Kostenpunkt ${
-                      index + 1
-                    }`}</label>
+                    <label className="flabel inline">{`Kostenpunkt ${index + 1
+                      }`}</label>
                  </div>
                  <div className="ml-10 mb-3" key={`input{index}`}>
                    <Input
@@ -258,7 +256,7 @@ function BookingBillPage({
          </button>
        </form>
      )}
-    </Layout>
+    </>
  )
 }

--- a/pages/admin/bookings/[uuid]/index.tsx
+++ b/pages/admin/bookings/[uuid]/index.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
-import Layout from '../../../../components/layout'
 import Calendar from '../../../../components/calendar'
 import { getServerSideBooking } from '../../../../lib/getServerSideProps'
 import { Booking } from '../../../../db/booking'
@@ -37,7 +36,7 @@ function ShowBookingAdmin({ booking: bookingProp }: { booking: Booking }) {
  }

  return (
-    <Layout>
+    <>
      <h2 className="text-3xl">Buchung {booking.uuid}</h2>
      <Calendar start={booking.startDate} end={booking.endDate} />
      <div>
@@ -71,7 +70,7 @@ function ShowBookingAdmin({ booking: bookingProp }: { booking: Booking }) {
          <a className="btn btn-gray">Rechnung</a>
        </Link>
      </div>
-    </Layout>
+    </>
  )
 }

--- a/pages/admin/index.tsx
+++ b/pages/admin/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import BookingTable from '../../components/bookingTable'
-import Layout from '../../components/layout'

 import { getServerSideRecentBookings } from '../../lib/getServerSideProps'

@@ -9,20 +8,18 @@ export const getServerSideProps = getServerSideRecentBookings
 function AdminRecentBookings({ bookings }) {
  if (!bookings || !bookings.length) {
    return (
-      <Layout>
-        <h3 className="text-lg leading-6 font-medium text-gray-900">
-          No recent bookings 😿
-        </h3>
-      </Layout>
+      <h3 className="text-lg leading-6 font-medium text-gray-900">
+        No recent bookings 😿
+      </h3>
    )
  }

  return (
-    <Layout>
+    <>
      {bookings.map((booking: any) => (
        <BookingTable key={booking.uuid} booking={booking} />
      ))}
-    </Layout>
+    </>
  )
 }

--- a/pages/book.tsx
+++ b/pages/book.tsx
@@ -1,11 +1,10 @@
-import Layout from '../components/layout'
 import Book from '../components/book'

 export default function Home() {
  return (
-    <Layout>
+    <>
      <h1 className="mb-3 text-xl font-extrabold">Buchungsanfrage</h1>
      <Book />
-    </Layout>
+    </>
  )
 }
--- a/pages/bookings/[uuid]/index.tsx
+++ b/pages/bookings/[uuid]/index.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import Layout from '../../../components/layout'
 import { getServerSideBooking } from '../../../lib/getServerSideProps'
 import { Booking } from '../../../db/booking'
 import { BOOKING_STATUS } from '../../../db/enums'
@@ -41,7 +40,7 @@ export default function ShowBooking({
  }

  return (
-    <Layout>
+    <>
      <div>
        <strong>Buchungsstatus:</strong> {getBookingStatus(booking.status)}
      </div>
@@ -54,16 +53,16 @@ export default function ShowBooking({
      {[BOOKING_STATUS.CONFIRMED, BOOKING_STATUS.REQUESTED].includes(
        booking.status
      ) && (
-        <div className="my-6">
-          <button
-            onClick={onCancelBooking}
-            className="btn btn-red"
-            disabled={storingBooking}
-          >
-            Buchung Stornieren
-          </button>
-        </div>
-      )}
-    </Layout>
+          <div className="my-6">
+            <button
+              onClick={onCancelBooking}
+              className="btn btn-red"
+              disabled={storingBooking}
+            >
+              Buchung Stornieren
+            </button>
+          </div>
+        )}
+    </>
  )
 }
--- a/pages/bookings/[uuid]/stored.tsx
+++ b/pages/bookings/[uuid]/stored.tsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react'
 import Link from 'next/link'
-import Layout from '../../../components/layout'
 import { Booking } from '../../../db/booking'
 import { loadBookingData, storeBookingData } from '../../../helpers/storage'
 import { getServerSideBooking } from '../../../lib/getServerSideProps'
@@ -19,7 +18,7 @@ export default function ShowBookingStored({ booking }: { booking: Booking }) {
  }

  return (
-    <Layout>
+    <>
      <h3 className="thanks mb-3 mt-6 text-lg">
        Vielen Dank für die Buchungsanfrage
      </h3>
@@ -52,6 +51,6 @@ export default function ShowBookingStored({ booking }: { booking: Booking }) {
          </p>
        </div>
      )}
-    </Layout>
+    </>
  )
 }
--- a/pages/impressum.tsx
+++ b/pages/impressum.tsx
@@ -5,13 +5,9 @@ import { MDXRemote } from 'next-mdx-remote'

 import mdComponents from '../components/mdComponents'

-import Layout from '../components/layout'
-
 export default function TermsPage({ source }) {
  return (
-    <Layout>
-      <MDXRemote {...source} components={{ ...mdComponents }} />
-    </Layout>
+    <MDXRemote {...source} components={{ ...mdComponents }} />
  )
 }

--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,74 +1,71 @@
 import Link from 'next/link'
-import Layout from '../components/layout'

 export default function Home() {
  return (
-    <Layout>
-      <div className="mt-6 sm:text-center">
-        <h1 className="text-xl tracking-tight font-extrabold text-gray-900 sm:text-2xl md:text-3xl">
-          <span className="block text-blue-800 xl:inline">Pfadi-Bussle</span>{' '}
-          <span className="block xl:inline">
-            des Freundeskreis des VCP Rosenfeld e.V.
-          </span>
-        </h1>
-        <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
-          Für Lager, Vereinsausflüge, Urlaubsreisen, Umzüge, etc. kann man unser
-          Pfadi-Bussle mieten.
-        </p>
-        <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
-          Das Bussle ist ein VW T4 Kleinbus mit 9 Sitzplätzen (inkl. Fahrer),
-          mit Klimaanlage, Radio/CD/Aux und Anhängerkupplung. Die zweite und
-          dritte Sitzreihe können ausgebaut werden.
-        </p>
-        <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
-          <Link href="/prices">
-            <a className="underline hover:text-blue-700">Preise</a>
-          </Link>{' '}
-          und{' '}
-          <Link href="/terms">
-            <a className="underline hover:text-blue-700">Mietbedingungen</a>
-          </Link>
-        </p>
-        <div className="mt-5 sm:mt-8 sm:flex sm:justify-center">
-          <div className="rounded-md shadow">
-            <Link href="/book">
-              <a className="w-full flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 hover:bg-blue-900 md:py-2 md:text-lg md:px-5">
-                Zur Buchungsanfrage
-              </a>
-            </Link>
-          </div>
-        </div>
-        <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
-          Du hast weiter Fragen melde Dich gerne per
-          <br />
-          <a
-            className="underline hover:text-blue-700"
-            href="mailto:pfadibussle@tomru.space"
-          >
-            E-Mail
-          </a>
-          , Telefon{' '}
-          <a
-            className="underline hover:text-blue-700"
-            href="tel:+4915121225362"
-          >
-            0151 / 21225302
-          </a>{' '}
-          oder{' '}
-          <Link href="https://wa.me/4915121225362">
-            <a className="underline inline-flex flex-row items-baseline hover:text-blue-700">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="fill-current h-4 inline"
-                viewBox="0 0 738 741"
-              >
-                <title>Whatsapp</title>
-                <path d="M630 108A368 368 0 0052 551L0 741l195-51a368 368 0 00435-582M370 672c-55 0-108-14-155-42l-11-7-116 31 31-113-7-12A304 304 0 01370 62a303 303 0 01306 305c-1 169-137 305-306 305m168-228l-63-30c-8-3-15-4-21 5l-29 36c-5 6-10 7-20 2-9-5-38-14-73-46-28-24-46-54-51-63-6-9-1-14 4-19l13-16c5-5 7-9 10-15s1-12-1-16l-28-68c-8-18-15-16-21-16h-18c-6 0-16 2-24 11-9 9-32 31-32 77s33 88 37 94c5 7 65 99 157 139l52 19c22 7 42 6 58 4 18-3 54-22 62-44 8-21 8-40 5-43-2-4-8-6-17-11" />
-              </svg>
+    <div className="mt-6 sm:text-center">
+      <h1 className="text-xl tracking-tight font-extrabold text-gray-900 sm:text-2xl md:text-3xl">
+        <span className="block text-blue-800 xl:inline">Pfadi-Bussle</span>{' '}
+        <span className="block xl:inline">
+          des Freundeskreis des VCP Rosenfeld e.V.
+        </span>
+      </h1>
+      <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
+        Für Lager, Vereinsausflüge, Urlaubsreisen, Umzüge, etc. kann man unser
+        Pfadi-Bussle mieten.
+      </p>
+      <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
+        Das Bussle ist ein VW T4 Kleinbus mit 9 Sitzplätzen (inkl. Fahrer),
+        mit Klimaanlage, Radio/CD/Aux und Anhängerkupplung. Die zweite und
+        dritte Sitzreihe können ausgebaut werden.
+      </p>
+      <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
+        <Link href="/prices">
+          <a className="underline hover:text-blue-700">Preise</a>
+        </Link>{' '}
+        und{' '}
+        <Link href="/terms">
+          <a className="underline hover:text-blue-700">Mietbedingungen</a>
+        </Link>
+      </p>
+      <div className="mt-5 sm:mt-8 sm:flex sm:justify-center">
+        <div className="rounded-md shadow">
+          <Link href="/book">
+            <a className="w-full flex items-center justify-center px-6 py-2 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 hover:bg-blue-900 md:py-2 md:text-lg md:px-5">
+              Zur Buchungsanfrage
            </a>
          </Link>
-        </p>
+        </div>
      </div>
-    </Layout>
+      <p className="mt-3 text-gray-500 sm:mt-5 sm:text-lg md:text-xl">
+        Du hast weiter Fragen melde Dich gerne per
+        <br />
+        <a
+          className="underline hover:text-blue-700"
+          href="mailto:pfadibussle@tomru.space"
+        >
+          E-Mail
+        </a>
+        , Telefon{' '}
+        <a
+          className="underline hover:text-blue-700"
+          href="tel:+4915121225362"
+        >
+          0151 / 21225302
+        </a>{' '}
+        oder{' '}
+        <Link href="https://wa.me/4915121225362">
+          <a className="underline inline-flex flex-row items-baseline hover:text-blue-700">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="fill-current h-4 inline"
+              viewBox="0 0 738 741"
+            >
+              <title>Whatsapp</title>
+              <path d="M630 108A368 368 0 0052 551L0 741l195-51a368 368 0 00435-582M370 672c-55 0-108-14-155-42l-11-7-116 31 31-113-7-12A304 304 0 01370 62a303 303 0 01306 305c-1 169-137 305-306 305m168-228l-63-30c-8-3-15-4-21 5l-29 36c-5 6-10 7-20 2-9-5-38-14-73-46-28-24-46-54-51-63-6-9-1-14 4-19l13-16c5-5 7-9 10-15s1-12-1-16l-28-68c-8-18-15-16-21-16h-18c-6 0-16 2-24 11-9 9-32 31-32 77s33 88 37 94c5 7 65 99 157 139l52 19c22 7 42 6 58 4 18-3 54-22 62-44 8-21 8-40 5-43-2-4-8-6-17-11" />
+            </svg>
+          </a>
+        </Link>
+      </p>
+    </div>
  )
 }
--- a/pages/prices.tsx
+++ b/pages/prices.tsx
@@ -1,8 +1,6 @@
-import Layout from '../components/layout'
-
 export default function Prices() {
  return (
-    <Layout>
+    <>
      <h1 className="mb-3 text-xl font-extrabold">Preise</h1>
      <table className="divide-y divide-gray-200">
        <thead className="bg-gray-50">
@@ -43,6 +41,6 @@ export default function Prices() {
          </tr>
        </tbody>
      </table>
-    </Layout>
+    </>
  )
 }
--- a/pages/privacy.tsx
+++ b/pages/privacy.tsx
@@ -3,15 +3,11 @@ import { serialize } from 'next-mdx-remote/serialize'
 import { MDXRemote } from 'next-mdx-remote'
 import mdComponents from '../components/mdComponents'

-import Layout from '../components/layout'
-
 export default function TermsPage({ source }) {
  return (
-    <Layout>
-      <div className="text-gray-700">
-        <MDXRemote {...source} components={{ ...mdComponents }} />
-      </div>
-    </Layout>
+    <div className="text-gray-700">
+      <MDXRemote {...source} components={{ ...mdComponents }} />
+    </div>
  )
 }

--- a/pages/terms.tsx
+++ b/pages/terms.tsx
@@ -5,15 +5,11 @@ import { MDXRemote } from 'next-mdx-remote'

 import mdComponents from '../components/mdComponents'

-import Layout from '../components/layout'
-
 export default function TermsPage({ source }) {
  return (
-    <Layout>
-      <div className="text-gray-700">
-        <MDXRemote {...source} components={{ ...mdComponents }} />
-      </div>
-    </Layout>
+    <div className="text-gray-700">
+      <MDXRemote {...source} components={{ ...mdComponents }} />
+    </div>
  )
 }