From 2b19a9acf4b76c3fbd4a7a7a93af41defab85888 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Thu, 21 Nov 2024 19:52:40 +0100
Subject: [PATCH] chore: hook sticky header together

---
 .../_components/InfiniteScrollGuilds.tsx      |  4 +---
 src/app/explorer/_components/Search.tsx       | 20 +++++++++++++---
 src/app/explorer/_components/StickyBar.tsx    | 14 ++++-------
 src/app/explorer/page.tsx                     | 23 +++++++++++--------
 src/components/Header.tsx                     |  6 -----
 5 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/src/app/explorer/_components/InfiniteScrollGuilds.tsx b/src/app/explorer/_components/InfiniteScrollGuilds.tsx
index 13c3305e2d..7b38e1ee7c 100644
--- a/src/app/explorer/_components/InfiniteScrollGuilds.tsx
+++ b/src/app/explorer/_components/InfiniteScrollGuilds.tsx
@@ -70,9 +70,7 @@ export const InfiniteScrollGuilds = () => {
         <p className="mt-6 text-center text-foreground-secondary">
           {isFetchingNextPage
             ? "Loading more..."
-            : hasNextPage
-              ? "Load More"
-              : "No More Data"}
+            : hasNextPage || "No More Data"}
         </p>
       )}
     </section>
diff --git a/src/app/explorer/_components/Search.tsx b/src/app/explorer/_components/Search.tsx
index 6e9840d09e..e67d2facc0 100644
--- a/src/app/explorer/_components/Search.tsx
+++ b/src/app/explorer/_components/Search.tsx
@@ -1,14 +1,15 @@
 "use client";
 
 import { Input } from "@/components/ui/Input";
+import useIsStuck from "@/hooks/useIsStuck";
 import { MagnifyingGlass } from "@phosphor-icons/react/dist/ssr";
 import { useDebouncedValue } from "foxact/use-debounced-value";
 import { useSetAtom } from "jotai";
 import { usePathname, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
-import { searchAtom } from "../atoms";
+import { Suspense, useEffect, useState } from "react";
+import { isSearchStuckAtom, searchAtom } from "../atoms";
 
-export const Search = () => {
+const Search = () => {
   const searchParams = useSearchParams();
   const pathname = usePathname();
   const [value, setValue] = useState(
@@ -48,3 +49,16 @@ export const Search = () => {
     </div>
   );
 };
+
+export const StickySearch = () => {
+  const setIsSearchStuck = useSetAtom(isSearchStuckAtom);
+  const { ref: searchRef } = useIsStuck(setIsSearchStuck);
+
+  return (
+    <div className="sticky top-12 z-10" ref={searchRef}>
+      <Suspense>
+        <Search />
+      </Suspense>
+    </div>
+  );
+};
diff --git a/src/app/explorer/_components/StickyBar.tsx b/src/app/explorer/_components/StickyBar.tsx
index c551ef5ee4..f06ad2ac09 100644
--- a/src/app/explorer/_components/StickyBar.tsx
+++ b/src/app/explorer/_components/StickyBar.tsx
@@ -1,7 +1,4 @@
 "use client";
-
-import { AuthBoundary } from "@/components/AuthBoundary";
-//import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
 import { buttonVariants } from "@/components/ui/Button";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/ToggleGroup";
 import useIsStuck from "@/hooks/useIsStuck";
@@ -10,7 +7,7 @@ import { cn } from "@/lib/cssUtils";
 import { Plus } from "@phosphor-icons/react";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import Link from "next/link";
-import { useEffect } from "react";
+import { type PropsWithChildren, useEffect } from "react";
 import { activeSectionAtom, isNavStuckAtom, isSearchStuckAtom } from "../atoms";
 import { ACTIVE_SECTION } from "../constants";
 
@@ -73,7 +70,7 @@ const Nav = () => {
   );
 };
 
-const CreateGuildLink = () => {
+export const CreateGuildLink = () => {
   const isNavStuck = useAtomValue(isNavStuckAtom);
   return (
     <Link
@@ -98,8 +95,7 @@ const CreateGuildLink = () => {
   );
 };
 
-export const StickyBar = () => {
-  //const { isWeb3Connected } = useWeb3ConnectionManager()
+export const StickyBar = ({ children }: PropsWithChildren) => {
   const setIsNavStuck = useSetAtom(isNavStuckAtom);
   const isSearchStuck = useAtomValue(isSearchStuckAtom);
   const { ref: navToggleRef } = useIsStuck(setIsNavStuck);
@@ -116,9 +112,7 @@ export const StickyBar = () => {
     >
       <div className="relative flex w-full items-center justify-between">
         <Nav />
-        <AuthBoundary fallback={null}>
-          <CreateGuildLink />
-        </AuthBoundary>
+        {children}
       </div>
     </div>
   );
diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx
index c19399edfc..447f10a76f 100644
--- a/src/app/explorer/page.tsx
+++ b/src/app/explorer/page.tsx
@@ -3,7 +3,7 @@ import { GuildCardSkeleton } from "@/components/GuildCard";
 import { GuildCard } from "@/components/GuildCard";
 import { Button } from "@/components/ui/Button";
 import { env } from "@/lib/env";
-import { Plus, SignIn } from "@phosphor-icons/react/dist/ssr";
+import { SignIn } from "@phosphor-icons/react/dist/ssr";
 import {
   HydrationBoundary,
   QueryClient,
@@ -12,7 +12,8 @@ import {
 import { Suspense } from "react";
 import { HeaderBackground } from "./_components/HeaderBackground";
 import { InfiniteScrollGuilds } from "./_components/InfiniteScrollGuilds";
-import { Search } from "./_components/Search";
+import { StickySearch } from "./_components/Search";
+import { CreateGuildLink, StickyBar } from "./_components/StickyBar";
 import { ACTIVE_SECTION } from "./constants";
 import { getGuildSearch } from "./fetchers";
 
@@ -46,11 +47,17 @@ export default async function Explorer() {
           </h1>
         </section>
 
+        <StickyBar>
+          <AuthBoundary fallback={null}>
+            <CreateGuildLink />
+          </AuthBoundary>
+        </StickyBar>
         <YourGuildsSection />
 
-        <section>
-          <Search />
-        </section>
+        <h2 className="mt-12 font-bold text-lg tracking-tight">
+          Explore verified guilds
+        </h2>
+        <StickySearch />
 
         <HydrationBoundary state={dehydrate(queryClient)}>
           <InfiniteScrollGuilds />
@@ -63,8 +70,6 @@ export default async function Explorer() {
 async function YourGuildsSection() {
   return (
     <section className="grid gap-2">
-      <h2 className="font-bold text-lg">Your guilds</h2>
-
       <AuthBoundary
         fallback={
           <div className="flex items-center gap-4 rounded-2xl bg-card px-5 py-6">
@@ -110,9 +115,7 @@ async function YourGuilds() {
         or create your own!
       </p>
 
-      <Button leftIcon={<Plus weight="bold" />} className="ml-auto h-10">
-        Create guild
-      </Button>
+      <CreateGuildLink />
     </div>
   );
 }
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index aa5172f928..ff0be76648 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,8 +1,6 @@
-import { me } from "@/actions/me";
 import { AuthBoundary } from "./AuthBoundary";
 import { SignInButton } from "./SignInButton";
 import { SignOutButton } from "./SignOutButton";
-import { Button } from "./ui/Button";
 import { Card } from "./ui/Card";
 
 export const Header = () => (
@@ -10,10 +8,6 @@ export const Header = () => (
     {/* TODO: NavMenu component */}
     <Card className="h-10 w-24 rounded-xl" />
 
-    <form action={me}>
-      <Button type="submit">me (test auth)</Button>
-    </form>
-
     <AuthBoundary fallback={<SignInButton />}>
       <SignOutButton />
     </AuthBoundary>