From b77b4a3f61f5289a1a4fd3df80582a4e42e2a779 Mon Sep 17 00:00:00 2001 From: Sam Becker Date: Sat, 6 Jan 2024 13:50:15 -0600 Subject: [PATCH] Refactor footer auth data handling --- src/app/(auth-state)/layout.tsx | 19 ------- src/app/(static)/layout.tsx | 17 ------ src/app/layout.tsx | 37 +++++++------ src/cache/index.ts | 4 ++ src/components/PageContentContainer.tsx | 11 ---- src/components/RepoLink.tsx | 9 ++-- src/site/Footer.tsx | 12 +++++ src/site/FooterAuth.tsx | 46 ---------------- src/site/FooterClient.tsx | 70 +++++++++++++++++++++++++ src/site/FooterStatic.tsx | 47 ----------------- src/site/Nav.tsx | 11 +--- src/site/ViewSwitcher.tsx | 2 +- src/site/globals.css | 5 ++ 13 files changed, 122 insertions(+), 168 deletions(-) delete mode 100644 src/app/(auth-state)/layout.tsx delete mode 100644 src/app/(static)/layout.tsx delete mode 100644 src/components/PageContentContainer.tsx create mode 100644 src/site/Footer.tsx delete mode 100644 src/site/FooterAuth.tsx create mode 100644 src/site/FooterClient.tsx delete mode 100644 src/site/FooterStatic.tsx diff --git a/src/app/(auth-state)/layout.tsx b/src/app/(auth-state)/layout.tsx deleted file mode 100644 index a4ecefda..00000000 --- a/src/app/(auth-state)/layout.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import FooterAuth from '@/site/FooterAuth'; -import PageContentContainer from '@/components/PageContentContainer'; -import { auth } from '@/auth'; - -export default async function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - const session = await auth(); - return ( - <> - - {children} - - - - ); -} diff --git a/src/app/(static)/layout.tsx b/src/app/(static)/layout.tsx deleted file mode 100644 index f4fa896f..00000000 --- a/src/app/(static)/layout.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import FooterStatic from '@/site/FooterStatic'; -import PageContentContainer from '@/components/PageContentContainer'; - -export default function RootLayout({ - children, -}: { - children: React.ReactNode -}) { - return ( - <> - - {children} - - - - ); -} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 1f822b57..1adcaceb 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -9,6 +9,7 @@ import ThemeProviderClient from '@/site/ThemeProviderClient'; import Nav from '@/site/Nav'; import ToasterWithThemes from '@/toast/ToasterWithThemes'; import PhotoEscapeHandler from '@/photo/PhotoEscapeHandler'; +import Footer from '@/site/Footer'; import '../site/globals.css'; @@ -68,21 +69,27 @@ export default function RootLayout({ suppressHydrationWarning > - -
-
- - - + + +
+
+ + + + + + ); diff --git a/src/cache/index.ts b/src/cache/index.ts index db0f2387..ce35f63b 100644 --- a/src/cache/index.ts +++ b/src/cache/index.ts @@ -28,6 +28,8 @@ import { getBlobPhotoUrls, getBlobUploadUrls } from '@/services/blob'; import type { Session } from 'next-auth'; import { createCameraKey } from '@/camera'; import { PATHS_ADMIN } from '@/site/paths'; +import { cache } from 'react'; +import { auth } from '@/auth'; // Table key const KEY_PHOTOS = 'photos'; @@ -207,6 +209,8 @@ export const getUniqueFilmSimulationsCached = [KEY_PHOTOS, KEY_FILM_SIMULATIONS], ); +export const authCached = cache(auth); + // No Store export const getPhotoNoStore = (...args: Parameters) => { diff --git a/src/components/PageContentContainer.tsx b/src/components/PageContentContainer.tsx deleted file mode 100644 index 3915e9c4..00000000 --- a/src/components/PageContentContainer.tsx +++ /dev/null @@ -1,11 +0,0 @@ -export default function PageContentContainer({ - children, -}: { - children: React.ReactNode -}) { - return ( -
- {children} -
- ); -} diff --git a/src/components/RepoLink.tsx b/src/components/RepoLink.tsx index 0d4105e7..cc0b6469 100644 --- a/src/components/RepoLink.tsx +++ b/src/components/RepoLink.tsx @@ -12,12 +12,15 @@ export default function RepoLink() { href="http://github.com/sambecker/exif-photo-blog" target="_blank" className={clsx( - 'flex items-center gap-1', - 'text-black dark:text-white', + 'flex items-center gap-0.5', + 'text-main hover:text-main', 'hover:underline', )} > - + exif-photo-blog diff --git a/src/site/Footer.tsx b/src/site/Footer.tsx new file mode 100644 index 00000000..53bf1c7c --- /dev/null +++ b/src/site/Footer.tsx @@ -0,0 +1,12 @@ +import FooterClient from './FooterClient'; +import { Suspense } from 'react'; +import { authCached } from '@/cache'; + +export default async function Footer() { + const session = await authCached(); + return ( + }> + + + ); +} diff --git a/src/site/FooterAuth.tsx b/src/site/FooterAuth.tsx deleted file mode 100644 index 19e634f4..00000000 --- a/src/site/FooterAuth.tsx +++ /dev/null @@ -1,46 +0,0 @@ -'use client'; - -import { clsx } from 'clsx/lite'; -import ThemeSwitcher from '@/site/ThemeSwitcher'; -import SiteGrid from '../components/SiteGrid'; -import { usePathname } from 'next/navigation'; -import { isPathSignIn } from '@/site/paths'; -import { signOutAction } from '@/auth/action'; -import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus'; - -const LINK_STYLE = clsx( - 'cursor-pointer', - 'hover:text-gray-300', - 'hover:dark:text-gray-600', -); - -export default function FooterAuth({ - email, -}: { - email: string | null | undefined -}) { - const path = usePathname(); - - return ( - -
-
{email}
-
- - Sign Out - -
-
- {!isPathSignIn(path) && } - } - /> - ); -}; diff --git a/src/site/FooterClient.tsx b/src/site/FooterClient.tsx new file mode 100644 index 00000000..8e5defb9 --- /dev/null +++ b/src/site/FooterClient.tsx @@ -0,0 +1,70 @@ +'use client'; + +import { clsx } from 'clsx/lite'; +import SiteGrid from '../components/SiteGrid'; +import ThemeSwitcher from '@/site/ThemeSwitcher'; +import Link from 'next/link'; +import { SHOW_REPO_LINK } from '@/site/config'; +import RepoLink from '../components/RepoLink'; +import { usePathname } from 'next/navigation'; +import { isPathAdmin, isPathSignIn, pathForAdminPhotos } from './paths'; +import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus'; +import { signOutAction } from '@/auth/action'; +import Spinner from '@/components/Spinner'; +import AnimateItems from '@/components/AnimateItems'; + +export default function FooterClient({ + userEmail, +}: { + userEmail?: string | null | undefined +}) { + const pathname = usePathname(); + + const showFooter = !isPathSignIn(pathname); + + const shouldAnimate = !isPathAdmin(pathname); + + return ( + +
+ {isPathAdmin(pathname) + ? <> + {userEmail === undefined && + } + {userEmail && <> +
{userEmail}
+
+ + Sign out + +
+ } + + : <> + + Admin + + {SHOW_REPO_LINK && + } + } +
+
+ +
+ ] + : []} + />} + /> + ); +} diff --git a/src/site/FooterStatic.tsx b/src/site/FooterStatic.tsx deleted file mode 100644 index 5e2f6061..00000000 --- a/src/site/FooterStatic.tsx +++ /dev/null @@ -1,47 +0,0 @@ -'use client'; - -import { clsx } from 'clsx/lite'; -import SiteGrid from '../components/SiteGrid'; -import ThemeSwitcher from '@/site/ThemeSwitcher'; -import { signOut } from 'next-auth/react'; -import Link from 'next/link'; -import { SHOW_REPO_LINK } from '@/site/config'; -import RepoLink from '../components/RepoLink'; - -export default function FooterStatic({ - showSignOut, -}: { - showSignOut?: boolean -}) { - return ( - -
- - Admin - - {SHOW_REPO_LINK && - } - {showSignOut && -
signOut()} - > - Sign out -
} -
- - } - /> - ); -} diff --git a/src/site/Nav.tsx b/src/site/Nav.tsx index 577a04fe..aca0e5b5 100644 --- a/src/site/Nav.tsx +++ b/src/site/Nav.tsx @@ -7,7 +7,6 @@ import SiteGrid from '../components/SiteGrid'; import { SITE_DOMAIN_OR_TITLE } from '@/site/config'; import ViewSwitcher, { SwitcherSelection } from '@/site/ViewSwitcher'; import { - PATH_ADMIN, PATH_ROOT, isPathAdmin, isPathGrid, @@ -17,9 +16,7 @@ import { } from '@/site/paths'; import AnimateItems from '../components/AnimateItems'; -export default function Nav({ showTextLinks }: { showTextLinks?: boolean }) { - const isLoggedIn = false; - +export default function Nav() { const pathname = usePathname(); const showNav = !isPathSignIn(pathname); @@ -63,12 +60,8 @@ export default function Nav({ showTextLinks }: { showTextLinks?: boolean }) {
- {showTextLinks && <> - {renderLink('Home', PATH_ROOT)} - {renderLink('Admin', PATH_ADMIN)} - }
{renderLink(SITE_DOMAIN_OR_TITLE, PATH_ROOT)} diff --git a/src/site/ViewSwitcher.tsx b/src/site/ViewSwitcher.tsx index afa35afc..875dad9c 100644 --- a/src/site/ViewSwitcher.tsx +++ b/src/site/ViewSwitcher.tsx @@ -38,7 +38,7 @@ export default function ViewSwitcher({ /> {showAdmin && } + icon={} href="/admin/photos" active={currentSelection === 'admin'} />} diff --git a/src/site/globals.css b/src/site/globals.css index 6a71046c..b62a0eb4 100644 --- a/src/site/globals.css +++ b/src/site/globals.css @@ -107,6 +107,11 @@ p-0 min-h-0 border-none active:bg-transparent shadow-none } + a, .link { + @apply + hover:text-gray-600 + hover:dark:text-gray-400 + } /* Common Utilities */ .text-main { @apply