From eab6f79f49ef3e52d644b11f2fc7c4c87fc70bde Mon Sep 17 00:00:00 2001 From: suddenlyGiovanni <15946771+suddenlyGiovanni@users.noreply.github.com> Date: Sun, 15 Dec 2024 01:32:36 +0100 Subject: [PATCH 1/5] feat(web): replace useLoaderData with useRouteLoaderData Refactor to use useRouteLoaderData for more accurate data scoping. Ensures data retrieval is tied specifically to the 'root' route, improving clarity and code reliability. --- apps/web/src/root.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/src/root.tsx b/apps/web/src/root.tsx index c8cb2390..fdff191d 100644 --- a/apps/web/src/root.tsx +++ b/apps/web/src/root.tsx @@ -1,5 +1,5 @@ import type { ReactElement, ReactNode } from 'react' -import { Outlet, useLoaderData } from 'react-router' +import { Outlet, useLoaderData, useRouteLoaderData } from 'react-router' import { Types, makeOpenGraphWebsite } from '@suddenlygiovanni/open-graph-protocol' @@ -69,7 +69,8 @@ export function loader({ request }: Route.LoaderArgs) { export function Layout({ children }: { children: ReactNode }): ReactElement { // if there was an error running the loader, data could be missing - const data = useLoaderData() + const data = useRouteLoaderData('root') + const theme = useOptionalTheme() return ( Date: Sun, 15 Dec 2024 01:34:07 +0100 Subject: [PATCH 2/5] refactor(web): simplify Header component and remove memoization Replaced memoized Header component with a standard function for clarity and maintainability. Removed unnecessary useCallback and useMemo hooks, simplifying the component logic. This change improves code readability without impacting functionality. --- apps/web/src/shell/header.tsx | 67 ++++++++++++++--------------------- 1 file changed, 27 insertions(+), 40 deletions(-) diff --git a/apps/web/src/shell/header.tsx b/apps/web/src/shell/header.tsx index 3ad1c601..732bf9dc 100644 --- a/apps/web/src/shell/header.tsx +++ b/apps/web/src/shell/header.tsx @@ -1,4 +1,4 @@ -import { type ReactElement, type SyntheticEvent, memo, useCallback, useMemo } from 'react' +import type { ReactElement, SyntheticEvent } from 'react' import { Layout } from '@suddenlygiovanni/ui/components/layout/layout.tsx' import { NavigationMenuToggle } from '@suddenlygiovanni/ui/components/navigation-menu-toggle/navigation-menu-toggle.tsx' @@ -24,45 +24,13 @@ const routes = ( const PRIMARY_NAVIGATION = 'primary-navigation' -export const Header = memo(function Header({ - theme, -}: { theme: 'light' | 'dark' | null }): ReactElement { +export function Header({ theme }: { theme: 'light' | 'dark' | null }): ReactElement { const [isMobileNavigationVisible, toggleMobileNavigationVisibility] = useToggle(false) - const handleMobileNavigationClick = useCallback( - (event: SyntheticEvent) => { - event.stopPropagation() - toggleMobileNavigationVisibility() - }, - [toggleMobileNavigationVisibility], - ) - - const renderLi = useMemo( - () => - routes.map(({ title, url, uri, description, disabled }) => ( -
  • - - {title} - -
    • - )), - - [handleMobileNavigationClick], - ) + function handleMobileNavigationClick(event: SyntheticEvent): void { + event.stopPropagation() + toggleMobileNavigationVisibility() + } return ( - {renderLi} + {routes.map(({ title, url, uri, description, disabled }) => ( +
  • + + {title} + +
    • + ))}     ) -}) +} From 24dbd1b3c1b9a811c2219a7d56492fb57e786467 Mon Sep 17 00:00:00 2001 From: suddenlyGiovanni <15946771+suddenlyGiovanni@users.noreply.github.com> Date: Sun, 15 Dec 2024 01:46:06 +0100 Subject: [PATCH 3/5] feat(ui): refactor `ModeToggle` for optimized theme handling Refactor `ModeToggle` component to improve readability and performance. Replaced `useMemo` usage with direct comparison logic for theme detection. Introduced a reusable `makeToggleHandler` function for cleaner event handling. --- .../components/mode-toggle/mode-toggle.tsx | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/ui/src/components/mode-toggle/mode-toggle.tsx b/packages/ui/src/components/mode-toggle/mode-toggle.tsx index af9fdb16..8b1f1006 100644 --- a/packages/ui/src/components/mode-toggle/mode-toggle.tsx +++ b/packages/ui/src/components/mode-toggle/mode-toggle.tsx @@ -1,4 +1,4 @@ -import { type ReactNode, memo, useMemo } from 'react' +import type { FC, MouseEventHandler } from 'react' import { Icons } from '#components/icons/icons.tsx' import { clsx } from '#lib/utils.ts' @@ -19,13 +19,15 @@ interface ModeToggleProps { } const NAME = 'ModeToggle' -const ModeToggle = memo(function ModeToggle({ - setTheme, - theme, - className, -}: ModeToggleProps): ReactNode { - const isLight = useMemo(() => theme === 'light', [theme]) - const isDark = useMemo(() => theme === 'dark', [theme]) +const ModeToggle: FC = ({ setTheme, theme, className }) => { + const isLight = theme === 'light' + const isDark = theme === 'dark' + + function makeToggleHandler(mode: Theme): MouseEventHandler { + return function toggleHandler(_) { + setTheme(mode) + } + } return ( @@ -37,9 +39,9 @@ const ModeToggle = memo(function ModeToggle({ data-testid={NAME} > {isLight || theme === null ? ( - + ) : ( - + )} Toggle theme @@ -48,20 +50,20 @@ const ModeToggle = memo(function ModeToggle({ setTheme('light')} + onClick={makeToggleHandler('light')} > Light setTheme('dark')} + onClick={makeToggleHandler('dark')} > Dark ) -}) +} ModeToggle.displayName = NAME export { ModeToggle } From c66af2b90e62e1fde33d8f304a463e17ff851410 Mon Sep 17 00:00:00 2001 From: suddenlyGiovanni <15946771+suddenlyGiovanni@users.noreply.github.com> Date: Sun, 15 Dec 2024 01:54:49 +0100 Subject: [PATCH 4/5] feat(web): add comments for ScrollRestoration and script tags Provide clear instructions for scroll management and script tags, including nonce requirements for content security policies. These comments improve clarity for future developers and ensure proper implementation guidelines. --- apps/web/src/shell/document.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/apps/web/src/shell/document.tsx b/apps/web/src/shell/document.tsx index 278f2aa5..1af1fc18 100644 --- a/apps/web/src/shell/document.tsx +++ b/apps/web/src/shell/document.tsx @@ -42,7 +42,20 @@ export function Document({ className={clsx('min-h-full bg-background font-sans text-foreground antialiased')} > {children} + + {/** + * Manages scroll position for client-side transitions + * If you use a nonce-based content security policy for scripts, you must provide the + * `nonce` prop. Otherwise, omit the nonce prop as shown here. + */} + + {/** + * Script tags go here + * If you use a nonce-based content security policy for scripts, you must provide the + * `nonce` prop. + * Otherwise, omit the nonce prop as shown here. + */}