tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-03 06:27:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

more work on auth

Browse Source
This commit is contained in:
Thomas Ruoff
2024-09-12 23:25:34 +02:00
parent 9f80ca4b1b
commit 219881810d
4 changed files with 45 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
components/header.tsx
View File

@@ -1,10 +1,14 @@
import { useState } from 'react' import React, { useState } from 'react'
import { createPortal } from 'react-dom'
import Head from 'next/head' import Head from 'next/head'
import Link from 'next/link' import Link from 'next/link'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import User from './user' import User from './user'
type INavEntry = {
label: string
href: string
}
const NAV_ENTRIES = [ const NAV_ENTRIES = [
{ {
label: 'Home', label: 'Home',
@@ -24,6 +28,26 @@ const NAV_ENTRIES = [
}, },
] ]
function NavEntries({ children, navEntries, changeRoute }) {
return (
<>
{navEntries?.map(({ label, href }: INavEntry, index: React.Key) => {
return (
<a
key={index}
href={href}
onClick={changeRoute}
className="text-base font-medium text-gray-500 hover:text-gray-900"
>
{label}
</a>
)
})}
{children}
</>
)
}
export default function Header() { export default function Header() {
const router = useRouter() const router = useRouter()
const [hamburgerOpen, setHamburgerOpen] = useState(false) const [hamburgerOpen, setHamburgerOpen] = useState(false)
@@ -34,6 +58,11 @@ export default function Header() {
router.push(event.currentTarget.href) router.push(event.currentTarget.href)
} }
const navEntries: (INavEntry | React.ReactNode)[] = [
...NAV_ENTRIES,
<User key="user" />,
]
return ( return (
<> <>
<Head> <Head>
@@ -52,18 +81,9 @@ export default function Header() {
</Link> </Link>
</div> </div>
<nav className="hidden space-x-10 sm:flex items-center"> <nav className="hidden space-x-10 sm:flex items-center">
{NAV_ENTRIES.map(({ label, href }) => { <NavEntries navEntries={navEntries} changeRoute={changeRoute}>
return ( <User />
<a </NavEntries>
key={href}
href={href}
onClick={changeRoute}
className="text-base font-medium text-gray-500 hover:text-gray-900"
>
{label}
</a>
)
})}
</nav> </nav>
<nav <nav
onClick={() => setHamburgerOpen(!hamburgerOpen)} onClick={() => setHamburgerOpen(!hamburgerOpen)}
@@ -90,18 +110,12 @@ export default function Header() {
> >
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden"> <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-2 bg-white px-4 py-2"> <div className="relative grid gap-2 bg-white px-4 py-2">
{NAV_ENTRIES.map(({ label, href }) => { <NavEntries
return ( navEntries={navEntries}
<a changeRoute={changeRoute}
key={href} >
href={href} <User />
onClick={changeRoute} </NavEntries>
className="text-base font-medium text-gray-500 hover:text-gray-900"
>
{label}
</a>
)
})}
</div> </div>
</div> </div>
</div> </div>

4
helpers/withAuth.tsx
View File

@@ -1,16 +1,14 @@
import { SessionProvider } from 'next-auth/react' import { SessionProvider } from 'next-auth/react'
import Auth from '../components/auth' import Auth from '../components/auth'
import User from '../components/user'
// This is the HOC // This is the HOC
function withAuth(WrappedComponent) { function withAuth(WrappedComponent: React.FunctionComponent) {
// Return a new component // Return a new component
function withAuth({ session, ...pageProps }) { function withAuth({ session, ...pageProps }) {
// Render the WrappedComponent with additional props // Render the WrappedComponent with additional props
return ( return (
<SessionProvider session={session}> <SessionProvider session={session}>
<Auth> <Auth>
<User />
<WrappedComponent {...pageProps} /> <WrappedComponent {...pageProps} />
</Auth> </Auth>
</SessionProvider> </SessionProvider>

6
pages/_app.tsx
View File

@@ -7,10 +7,8 @@ import '../styles/gfm.css'
export default function MyApp({ Component, pageProps }) { export default function MyApp({ Component, pageProps }) {
return ( return (
<div className="flex flex-col min-h-screen"> <div className="flex flex-col min-h-screen">
<Layout> <Component {...pageProps} />
<Component {...pageProps} /> <Analytics />
<Analytics />
</Layout>
</div> </div>
) )
} }

4
pages/admin/index.tsx
View File

@@ -17,11 +17,11 @@ function AdminRecentBookings({ bookings }) {
} }
return ( return (
<> <Layout>
{bookings.map((booking: any) => ( {bookings.map((booking: any) => (
<BookingTable key={booking.uuid} booking={booking} /> <BookingTable key={booking.uuid} booking={booking} />
))} ))}
</> </Layout>
) )
} }