Merge branch 'preview'

pdelfan · Dec 20, 2023 · 9a636c5 · 9a636c5
2 parents bba94c0 + 9dcd8c5
commit 9a636c5
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 45 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -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" });
 
@@ -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 />

diff --git a/src/app/providers/scroll.tsx b/src/app/providers/scroll.tsx
@@ -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>
+  );
+};
diff --git a/src/components/actions/composeButton/ComposeButton.tsx b/src/components/actions/composeButton/ComposeButton.tsx
@@ -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 = () => {

diff --git a/src/components/actions/refetch/Refetch.tsx b/src/components/actions/refetch/Refetch.tsx
@@ -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";
 
@@ -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 (

diff --git a/src/components/contentDisplay/profileHeader/ProfileHeader.tsx b/src/components/contentDisplay/profileHeader/ProfileHeader.tsx
@@ -52,10 +52,17 @@ export default function ProfileHeader(props: Props) {
       {profile && contentFilter && (
         <section className="border-0 border-y md:border-x md:rounded-t-2xl overflow-hidden">
           <div className="relative">
-            {profile.banner ? (
+            {isBlocked || hasBlockedYou ? (
+              <Image
+                src={profile?.banner ?? FallbackBanner}
+                alt="Banner"
+                width={800}
+                height={100}
+                className="object-cover min-h-[9rem] opacity-30 contrast-75"
+              />
+            ) : (
               <Button
                 className="hover:brightness-90"
-                disabled={isBlocked || hasBlockedYou}
                 onClick={() => setShowBanner(true)}
               >
                 <Image
@@ -66,21 +73,20 @@ export default function ProfileHeader(props: Props) {
                   className="object-cover min-h-[9rem]"
                 />
               </Button>
-            ) : (
-              <Image
-                src={profile?.banner ?? FallbackBanner}
-                alt="Banner"
-                width={800}
-                height={100}
-                className="object-cover min-h-[9rem]"
-              />
             )}
 
             <div className="absolute bottom-0 transform translate-y-1/2 px-3">
-              {profile.avatar ? (
+              {isBlocked || hasBlockedYou ? (
+                <Image
+                  src={profile?.avatar ?? FallbackAvatar}
+                  alt="Avatar"
+                  width={95}
+                  height={95}
+                  className="object-cover rounded-full border-4 border-white opacity-30 contrast-75"
+                />
+              ) : (
                 <Button
                   className="rounded-full border-4 border-white"
-                  disabled={isBlocked || hasBlockedYou}
                   onClick={() => setShowAvatar(true)}
                 >
                   <Image
@@ -91,14 +97,6 @@ export default function ProfileHeader(props: Props) {
                     className="object-cover rounded-full hover:brightness-90"
                   />
                 </Button>
-              ) : (
-                <Image
-                  src={profile?.avatar ?? FallbackAvatar}
-                  alt="Avatar"
-                  width={95}
-                  height={95}
-                  className="object-cover rounded-full border-4 border-white"
-                />
               )}
             </div>
           </div>

diff --git a/src/components/dataDisplay/gallery/Gallery.tsx b/src/components/dataDisplay/gallery/Gallery.tsx
@@ -61,7 +61,7 @@ export default function Gallery(props: Props) {
         className="z-50"
       >
         <Button
-          className="z-[70] fixed right-3 top-3 p-3.5 bg-black/50 text-white rounded-full hover:bg-neutral-500/90"
+          className="z-[70] fixed left-3 top-3 p-3.5 bg-black/50 text-white rounded-full hover:bg-neutral-500/90"
           icon="ph:x-bold"
           onClick={(e) => {
             e.stopPropagation();

diff --git a/src/components/feedback/altTag/AltTag.tsx b/src/components/feedback/altTag/AltTag.tsx
@@ -41,7 +41,7 @@ export default function AltTag(props: Props) {
           >
             <Dialog.Close asChild>
               <Button
-                className="z-50 fixed right-3 top-3 p-3.5 bg-black/50 text-white rounded-full hover:bg-neutral-500/90"
+                className="z-50 fixed left-3 top-3 p-3.5 bg-black/50 text-white rounded-full hover:bg-neutral-500/90"
                 icon="ph:x-bold"
               />
             </Dialog.Close>

diff --git a/src/components/navigational/appBar/AppBar.tsx b/src/components/navigational/appBar/AppBar.tsx
@@ -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

diff --git a/src/components/navigational/feedTabs/FeedTabs.tsx b/src/components/navigational/feedTabs/FeedTabs.tsx
@@ -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();
@@ -27,7 +27,7 @@ export default function FeedTabs() {
     queryFn: () => getSavedFeeds(agent),
   });
 
-  const show = useHideOnScroll();
+  const show = useScrollContext();
 
   return (
     <>

diff --git a/src/components/navigational/topBar/TopBar.tsx b/src/components/navigational/topBar/TopBar.tsx
@@ -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";
@@ -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">

diff --git a/src/lib/api/bsky/actor/index.ts b/src/lib/api/bsky/actor/index.ts
@@ -68,7 +68,7 @@ export const searchPosts = async (
       cursor: cursor,
       limit: 25,
     });
-    if (response.success) {    
+    if (response.success) {
       return response.data;
     }
   } catch (e) {
@@ -140,21 +140,19 @@ export const blockUser = async (
   agent?: BskyAgent
 ) => {
   if (!agent) agent = await getAgent();
-  await agent.app.bsky.graph.block.create(
+  const res = await agent.app.bsky.graph.block.create(
     { repo: viewerDid },
     { createdAt: new Date().toISOString(), subject: did }
   );
+
+  return res;
 };
 
 export const unBlockUser = async (
   viewerDid: string,
-  did: string,
   rkey: string,
   agent?: BskyAgent
 ) => {
   if (!agent) agent = await getAgent();
-  await agent.app.bsky.graph.block.delete(
-    { rkey: rkey, repo: viewerDid },
-    { createdAt: new Date().toISOString(), subject: did }
-  );
+  await agent.app.bsky.graph.block.delete({ rkey: rkey, repo: viewerDid });
 };
diff --git a/src/lib/hooks/bsky/actor/useBlockUser.tsx b/src/lib/hooks/bsky/actor/useBlockUser.tsx
@@ -26,15 +26,15 @@ export default function useBlockUser(props: Props) {
       if (!blocked) {
         try {
           setBlocked(true);
-          await blockUser(viewerDID, author.did, agent);
+          const res = await blockUser(viewerDID, author.did, agent);
           queryClient.setQueryData(
             profileKey(author.handle),
             (oldData: any) => {
               return {
                 ...oldData,
                 viewer: {
                   ...oldData.viewer,
-                  blocking: author.did,
+                  blocking: res.uri,
                 },
               };
             }
@@ -57,8 +57,8 @@ export default function useBlockUser(props: Props) {
       } else {
         try {
           setBlocked(false);
-          const rkey = viewer!.blocking!.split("/").pop()!;
-          await unBlockUser(viewerDID, author.did, rkey, agent);
+          const rkey = viewer!.blocking!.split("/").pop()!;          
+          await unBlockUser(viewerDID, rkey, agent);
           queryClient.setQueryData(
             profileKey(author.handle),
             (oldData: any) => {