Skip to content

Commit

Permalink
Refactor useHideOnScroll value into a context
Browse files Browse the repository at this point in the history
So that we wouldn't have to call the hook for different components. Removes unnecessary calculations and delays in trigger animation as a result.
  • Loading branch information
pdelfan committed Dec 20, 2023
1 parent ee570ea commit 9dcd8c5
Show file tree
Hide file tree
Showing 7 changed files with 47 additions and 12 deletions.
11 changes: 7 additions & 4 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { getSessionFromServer } from "./api/auth/[...nextauth]/route";
import QueryProvider from "./providers/query";
import { ComposerProvider } from "./providers/compoter";
import ToastProvider from "./providers/toast";
import { ScrollProvider } from "./providers/scroll";

const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });

Expand All @@ -32,10 +33,12 @@ export default async function RootLayout({
</head>
<body className={`${inter.variable}`}>
<SessionProvider session={session}>
<QueryProvider>
<ComposerProvider>{children}</ComposerProvider>
</QueryProvider>
<ToastProvider />
<ScrollProvider>
<QueryProvider>
<ComposerProvider>{children}</ComposerProvider>
</QueryProvider>
<ToastProvider />
</ScrollProvider>
</SessionProvider>
<Analytics />
<SpeedInsights />
Expand Down
26 changes: 26 additions & 0 deletions src/app/providers/scroll.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
"use client";

import useHideOnScroll from "@/lib/hooks/useHideOnScroll";
import { ReactNode, createContext, useContext } from "react";

const ScrollContext = createContext<boolean | undefined>(undefined);

export const useScrollContext = () => {
const context = useContext(ScrollContext);
if (!context) {
return;
}
return context;
};

interface ScrollProviderProps {
children: ReactNode;
}
export const ScrollProvider = (props: ScrollProviderProps) => {
const { children } = props;
const show = useHideOnScroll();

return (
<ScrollContext.Provider value={show}>{children}</ScrollContext.Provider>
);
};
6 changes: 4 additions & 2 deletions src/components/actions/composeButton/ComposeButton.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import useHideOnScroll from "@/lib/hooks/useHideOnScroll";
"use client"

import { Icon } from "@iconify/react/dist/iconify.js";
import { useComposerContext } from "@/app/providers/compoter";
import { useScrollContext } from "@/app/providers/scroll";

interface Props {
mode: "float" | "fixed";
}

export default function ComposeButton(props: Props) {
const { mode } = props;
const show = useHideOnScroll();
const show = useScrollContext();
const { isOpen, options, openComposer, closeComposer } = useComposerContext();

const toggleComposer = () => {
Expand Down
6 changes: 4 additions & 2 deletions src/components/actions/refetch/Refetch.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import useHideOnScroll from "@/lib/hooks/useHideOnScroll";
"use client"

import { useScrollContext } from "@/app/providers/scroll";
import Button from "../button/Button";
import { useDebouncedCallback } from "use-debounce";

Expand All @@ -8,7 +10,7 @@ interface Props {

export default function Refetch(props: Props) {
const { onRefetch } = props;
const show = useHideOnScroll();
const show = useScrollContext();
const debouncedRefetch = useDebouncedCallback(onRefetch, 300);

return (
Expand Down
4 changes: 2 additions & 2 deletions src/components/navigational/appBar/AppBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

import { usePathname } from "next/navigation";
import NavItem from "../navbar/NavItem";
import useHideOnScroll from "@/lib/hooks/useHideOnScroll";
import { useScrollContext } from "@/app/providers/scroll";

export default function AppBar() {
const pathname = usePathname();
const show = useHideOnScroll();
const show = useScrollContext();

return (
<nav
Expand Down
4 changes: 2 additions & 2 deletions src/components/navigational/feedTabs/FeedTabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import Tabs from "../tabs/Tabs";
import { getSavedFeeds } from "@/lib/api/bsky/feed";
import { usePathname, useSearchParams } from "next/navigation";
import FeedTabsSkeleton from "./FeedTabsSkeleton";
import useHideOnScroll from "@/lib/hooks/useHideOnScroll";
import React from "react";
import { useQuery } from "@tanstack/react-query";
import { useScrollContext } from "@/app/providers/scroll";

export default function FeedTabs() {
const agent = useAgent();
Expand All @@ -27,7 +27,7 @@ export default function FeedTabs() {
queryFn: () => getSavedFeeds(agent),
});

const show = useHideOnScroll();
const show = useScrollContext();

return (
<>
Expand Down
2 changes: 2 additions & 0 deletions src/components/navigational/topBar/TopBar.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
"use client";

import { useScrollContext } from "@/app/providers/scroll";
import Button from "@/components/actions/button/Button";
import SignOut from "@/components/actions/signOut/SignOut";
import Avatar from "@/components/dataDisplay/avatar/Avatar";
Expand All @@ -13,6 +14,7 @@ interface Props {

export default function TopBar(props: Props) {
const { profile } = props;
const show = useScrollContext();

return (
<div className="flex justify-between bg-white border-b md:border-b-0 px-3 md:px-0 py-2.5 md:pt-0 sticky md:relative top-0 z-50 lg:hidden">
Expand Down

0 comments on commit 9dcd8c5

Please sign in to comment.