Merge branch 'preview'

pdelfan · Jan 19, 2024 · 35d3409 · 35d3409
2 parents 51e6550 + 2531b9d
commit 35d3409
Show file tree

Hide file tree

Showing 16 changed files with 22 additions and 32 deletions.
diff --git a/src/components/actions/composeButton/ComposeButton.tsx b/src/components/actions/composeButton/ComposeButton.tsx
@@ -19,17 +19,15 @@ export default function ComposeButton(props: Props) {
       : "";
   const { openComposer } = useComposerControls();
 
-  const canUpdate = typeof window !== "undefined";
-
   return (
     <>
       {mode === "float" && (
         <button
           onClick={() => openComposer({ mention: userHandle })}
           className="z-40 p-3.5 rounded-full fixed md:hidden right-3 bottom-24 bg-primary text-white hover:bg-primary-dark outline-none ease-linear transition-all"
           style={{
-            opacity: canUpdate ? `${100 - (val ?? 0)}%` : "none",
-            transform: canUpdate ? `translateY(${val ?? 0}%)` : "none",
+            opacity: val ? `${100 - (val ?? 0)}%` : "100%",
+            transform: val ? `translateY(${val ?? 0}%)` : "100%",
           }}
         >
           <RiQuillPenFill className="text-2xl" />

diff --git a/src/components/actions/refetch/Refetch.tsx b/src/components/actions/refetch/Refetch.tsx
@@ -14,15 +14,13 @@ export default function Refetch(props: Props) {
   const val = useScrollContext();
   const debouncedRefetch = useDebouncedCallback(onRefetch, 300);
 
-  const canUpdate = typeof window !== "undefined";
-
   return (
     <Button
       onClick={debouncedRefetch}
       className="z-40 p-3 rounded-full fixed bottom-24 md:bottom-8 ml-3 md:ml-[0.80rem] border border-neutral-300 bg-white hover:bg-neutral-50 hover:-rotate-180 ease-linear transition-all"
       style={{
-        opacity: canUpdate ? `${100 - (val ?? 0)}%` : "none",
-        transform: canUpdate ? `translateY(${val ?? 0}%)` : "none",
+        opacity: val ? `${100 - (val ?? 0)}%` : "100%",
+        transform: val ? `translateY(${val ?? 0}%)` : "100%",
       }}
     >
       <LuRefreshCcw className="text-2xl text-neutral-500 hover:text-neutral-600" />

diff --git a/src/components/navigational/appBar/AppBar.tsx b/src/components/navigational/appBar/AppBar.tsx
@@ -25,14 +25,12 @@ export default function AppBar() {
     refetchInterval: 10000,
   });
 
-  const canUpdate = typeof window !== "undefined";
-
   return (
     <nav
       className="flex justify-between pb-8 pt-1 px-6 border-t gap-6 fixed bottom-0 z-40 w-full md:hidden bg-white overflow-auto ease-linear transition-all"
       style={{
-        opacity: canUpdate ? `${100 - (val ?? 0)}%` : "none",
-        transform: canUpdate ? `translateY(${val ?? 0}%)` : "none",
+        opacity: val ? `${100 - (val ?? 0)}%` : "100%",
+        transform: val ? `translateY(${val ?? 0}%)` : "100%",
       }}
     >
       <NavItem

diff --git a/src/components/navigational/feedTabs/FeedTabs.tsx b/src/components/navigational/feedTabs/FeedTabs.tsx
@@ -28,16 +28,14 @@ export default function FeedTabs() {
     queryFn: () => getSavedFeeds(agent),
   });
 
-  const canUpdate = typeof window !== "undefined" && window.innerWidth < 768;
-
   return (
     <>
       <div className="z-40 hidden md:block fixed bg-white top-0 lg:p-5 md:p-5 max-w-xl w-full" />
       <div
         className={`bg-white border-x-0 border-t-0 border-b md:border md:rounded-t-2xl overflow-x-hidden hover:overflow-x-auto md:opacity-100 sticky top-[3.2rem] md:top-6 z-50 md:z-50 ease-linear transition-all`}
         style={{
-          opacity: canUpdate ? `${100 - (val ?? 0)}%` : "none",
-          transform: canUpdate ? `translateY(-${val ?? 0}%)` : "none",
+          opacity: val ? `${100 - (val ?? 0)}%` : "100%",
+          transform: val ? `translateY(-${val ?? 0}%)` : "100%",
         }}
       >
         {isFetching && <FeedTabsSkeleton />}

diff --git a/src/components/navigational/topBar/TopBar.tsx b/src/components/navigational/topBar/TopBar.tsx
@@ -16,14 +16,12 @@ export default function TopBar(props: Props) {
   const { profile } = props;
   const val = useScrollContext();
 
-  const canUpdate = typeof window !== "undefined" && window.innerWidth < 768;
-
   return (
     <div
       className="flex justify-between bg-white border-b px-3 py-2.5 sticky md:hidden top-0 z-50 ease-linear transition-all"
       style={{
-        opacity: canUpdate ? `${100 - (val ?? 0)}%` : "none",
-        transform: canUpdate ? `translateY(-${val ?? 0}%)` : "none",
+        opacity: val ? `${100 - (val ?? 0)}%` : "100%",
+        transform: val ? `translateY(-${val ?? 0}%)` : "100%",
       }}
     >
       <Link

diff --git a/src/containers/FollowersContainer.tsx b/src/containers/FollowersContainer.tsx
@@ -17,7 +17,7 @@ interface Props {
 export default function FollowersContainer(props: Props) {
   const { handle } = props;
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "100px" });
 
   const {
     status,

diff --git a/src/containers/FollowingContainer.tsx b/src/containers/FollowingContainer.tsx
@@ -17,7 +17,7 @@ interface Props {
 export default function FollowingContainer(props: Props) {
   const { handle } = props;
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "100px" });
 
   const {
     status,

diff --git a/src/containers/search/PostSearchContainer.tsx b/src/containers/search/PostSearchContainer.tsx
@@ -37,7 +37,7 @@ export default function PostSearchContainer(props: Props) {
   const isEmpty =
     !isFetching && !isFetchingNextPage && posts?.pages[0]?.posts?.length === 0;
 
-  const { ref: observerRef, inView } = useInView();
+  const { ref: observerRef, inView } = useInView({ rootMargin: "800px" });
 
   useEffect(() => {
     if (inView) {

diff --git a/src/containers/search/UserSearchContainer.tsx b/src/containers/search/UserSearchContainer.tsx
@@ -17,7 +17,7 @@ interface Props {
 export default function UserSearchContainer(props: Props) {
   const { query } = props;
   const agent = useAgent();
-  const { ref: observerRef, inView } = useInView();
+  const { ref: observerRef, inView } = useInView({ rootMargin: "100px" });
 
   const {
     status,

diff --git a/src/containers/settings/blockedUsersContainer/BlockedUsersContainer.tsx b/src/containers/settings/blockedUsersContainer/BlockedUsersContainer.tsx
@@ -12,7 +12,7 @@ import LoadingSpinner from "@/components/status/loadingSpinner/LoadingSpinner";
 
 export default function BlockedUsersContainer() {
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "100px" });
 
   const {
     status,

diff --git a/src/containers/settings/mutedUsersContainer/MutedUsersContainer.tsx b/src/containers/settings/mutedUsersContainer/MutedUsersContainer.tsx
@@ -12,7 +12,7 @@ import LoadingSpinner from "@/components/status/loadingSpinner/LoadingSpinner";
 
 export default function MutedUsersContainer() {
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "100px" });
 
   const {
     status,

diff --git a/src/containers/thread/LikedByContainer.tsx b/src/containers/thread/LikedByContainer.tsx
@@ -19,7 +19,7 @@ export default function LikedByContainer(props: Props) {
   const { handle, id } = props;
 
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "100px" });
 
   const {
     status,

diff --git a/src/containers/thread/RepostedByContainer.tsx b/src/containers/thread/RepostedByContainer.tsx
@@ -19,7 +19,7 @@ export default function RepostedByContainer(props: Props) {
   const { handle, id } = props;
 
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "100px" });
 
   const {
     status,

diff --git a/src/lib/hooks/bsky/feed/useFeed.tsx b/src/lib/hooks/bsky/feed/useFeed.tsx
@@ -8,7 +8,7 @@ export const useFeedKey = (feed: string) => [feed];
 
 export default function useFeed(feed: string) {
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "800px" });
   const {
     status,
     data: timeline,

diff --git a/src/lib/hooks/bsky/feed/useProfilePosts.tsx b/src/lib/hooks/bsky/feed/useProfilePosts.tsx
@@ -39,7 +39,7 @@ export default function useProfilePosts(props: Props) {
     }
   };
 
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "100px" });
   const {
     status,
     data: userPosts,

diff --git a/src/lib/hooks/bsky/notification/useNotification.tsx b/src/lib/hooks/bsky/notification/useNotification.tsx
@@ -1,7 +1,7 @@
 import { useInView } from "react-intersection-observer";
 import useAgent from "../useAgent";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { useEffect, useMemo } from "react";
+import { useEffect } from "react";
 import {
   getNotifications,
   updateSeenNotifications,
@@ -11,7 +11,7 @@ import { Notification } from "@atproto/api/dist/client/types/app/bsky/notificati
 
 export default function useNotification() {
   const agent = useAgent();
-  const { ref, inView } = useInView();
+  const { ref, inView } = useInView({ rootMargin: "100px" });
 
   const groupNotifications = (
     notifications: Notification[]
-Original file line number
+Diff line change
@@ Expand Up / @@ -39,7 +39,7 @@ export default function useProfilePosts(props: Props) { @@
         }
       };
-      const { ref, inView } = useInView();
+      const { ref, inView } = useInView({ rootMargin: "100px" });
       const {
         status,
         data: userPosts,
@@ Expand Down @@