Merge branch 'preview'

pdelfan · Oct 28, 2024 · 06e44aa · 06e44aa
2 parents 0431749 + c2d9326
commit 06e44aa
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 73 deletions.
diff --git a/src/components/actions/composeButton/ComposeButton.tsx b/src/components/actions/composeButton/ComposeButton.tsx
@@ -6,11 +6,11 @@ import { usePathname } from "next/navigation";
 import { RiQuillPenFill } from "react-icons/ri";
 
 interface Props {
-  mode: "float" | "fixed";
+  float?: boolean;
 }
 
 export default function ComposeButton(props: Props) {
-  const { mode } = props;
+  const { float } = props;
   const val = useScrollContext();
   const canUpdate = typeof window !== "undefined";
   const pathname = usePathname();
@@ -20,34 +20,28 @@ export default function ComposeButton(props: Props) {
       : "";
   const { openComposer } = useComposerControls();
 
-  return (
-    <>
-      {mode === "float" && (
-        <button
-          onClick={() => openComposer({ mention: userHandle })}
-          className="bg-primary text-skin-inverted hover:bg-primary-dark fixed bottom-24 right-3 z-40 rounded-full p-3.5 outline-none transition-all ease-linear md:hidden"
-          style={{
-            opacity: canUpdate ? `${100 - (val ?? 0)}%` : "100%",
-            transform: canUpdate
-              ? `translateY(${val ?? 0}%)`
-              : "translateY(0%)",
-          }}
-        >
-          <RiQuillPenFill className="text-skin-icon-inverted text-2xl" />
-        </button>
-      )}
+  if (float) {
+    return (
+      <button
+        onClick={() => openComposer({ mention: userHandle })}
+        className="bg-primary text-skin-inverted hover:bg-primary-dark fixed bottom-24 right-3 z-40 rounded-full p-3.5 outline-none transition-all ease-linear md:hidden"
+        style={{
+          opacity: canUpdate ? `${100 - (val ?? 0)}%` : "100%",
+          transform: canUpdate ? `translateY(${val ?? 0}%)` : "translateY(0%)",
+        }}
+      >
+        <RiQuillPenFill className="text-skin-icon-inverted text-2xl" />
+      </button>
+    );
+  }
 
-      {mode === "fixed" && (
-        <button
-          onClick={() => openComposer({ mention: userHandle })}
-          className="bg-primary text-skin-inverted flex items-center gap-2 rounded-full p-3.5 font-semibold hover:brightness-95 lg:px-3 lg:py-2.5"
-        >
-          <RiQuillPenFill className="text-skin-icon-inverted text-2xl" />
-          <span className="text-skin-icon-inverted hidden lg:inline">
-            Write a post
-          </span>
-        </button>
-      )}
-    </>
+  return (
+    <button
+      onClick={() => openComposer({ mention: userHandle })}
+      className="bg-primary text-skin-inverted flex items-center gap-2 rounded-full font-semibold hover:brightness-95 p-3.5 lg:px-3 lg:py-2"
+    >
+      <RiQuillPenFill className="text-skin-icon-inverted text-2xl" />
+      <span className="text-skin-icon-inverted hidden lg:inline">Post</span>
+    </button>
   );
 }
diff --git a/src/components/navigational/aside/Aside.tsx b/src/components/navigational/aside/Aside.tsx
@@ -2,12 +2,7 @@
 
 import Avatar from "@/components/dataDisplay/avatar/Avatar";
 import Link from "next/link";
-import NavItem from "../navbar/NavItem";
-import { FaRegBell } from "react-icons/fa6";
-import useAgent from "@/lib/hooks/bsky/useAgent";
-import { useQuery } from "@tanstack/react-query";
-import { getUnreadNotificationsCount } from "@/lib/api/bsky/notification";
-import { BiCog } from "react-icons/bi";
+import ComposeButton from "@/components/actions/composeButton/ComposeButton";
 
 interface Props {
   handle: string;
@@ -16,29 +11,11 @@ interface Props {
 
 export default function Aside(props: Props) {
   const { handle, avatar } = props;
-  const agent = useAgent();
-  const {
-    data: notificationsCount,
-    error,
-    isFetching,
-  } = useQuery({
-    queryKey: ["notificationsCount"],
-    queryFn: () => getUnreadNotificationsCount(agent),
-    refetchInterval: 10000,
-  });
 
   return (
     <aside className="sticky top-6 hidden h-full md:block">
-      <div className="flex flex-col items-center gap-3 lg:flex-row border px-2 py-3 lg:px-3 lg:py-2 rounded-full">
-        <NavItem
-          href="/dashboard/settings"
-          icon={<BiCog className="text-2xl" />}
-        />
-        <NavItem
-          href="/dashboard/notifications"
-          icon={<FaRegBell className="text-2xl" />}
-          badge={notificationsCount ?? 0}
-        />
+      <div className="flex flex-col items-center gap-3 lg:flex-row border border-skin-base p-2 rounded-full">
+        <ComposeButton />
         <Link
           href={`/dashboard/user/${handle}`}
           className="max-w-[7rem] truncate hover:brightness-90"

diff --git a/src/components/navigational/navbar/Navbar.tsx b/src/components/navigational/navbar/Navbar.tsx
@@ -1,23 +1,35 @@
 "use client";
 
-import { useSession } from "next-auth/react";
 import NavItem from "./NavItem";
 import { usePathname } from "next/navigation";
 
 import {
   BiHome,
   BiSolidHome,
-  BiSolidUser,
-  BiUser,
   BiPlanet,
   BiSolidPlanet,
+  BiCog,
+  BiSolidCog,
 } from "react-icons/bi";
 import { PiMagnifyingGlassBold, PiMagnifyingGlassFill } from "react-icons/pi";
 import { HiClipboardList, HiOutlineClipboardList } from "react-icons/hi";
+import { FaBell, FaRegBell } from "react-icons/fa6";
+import { getUnreadNotificationsCount } from "@/lib/api/bsky/notification";
+import useAgent from "@/lib/hooks/bsky/useAgent";
+import { useQuery } from "@tanstack/react-query";
 
 export default function Navbar() {
   const pathname = usePathname();
-  const { data: session } = useSession();
+  const agent = useAgent();
+  const {
+    data: notificationsCount,
+    error,
+    isFetching,
+  } = useQuery({
+    queryKey: ["notificationsCount"],
+    queryFn: () => getUnreadNotificationsCount(agent),
+    refetchInterval: 10000,
+  });
 
   return (
     <nav className="inline-flex flex-col gap-5 lg:ml-1.5">
@@ -50,11 +62,19 @@ export default function Navbar() {
         isActive={pathname === "/dashboard/lists"}
       />
       <NavItem
-        href={`/dashboard/user/${session?.user.handle}`}
-        icon={<BiUser className="text-2xl md:text-3xl" />}
-        activeIcon={<BiSolidUser className="text-2xl md:text-3xl" />}
-        title="Profile"
-        isActive={pathname.includes(`/dashboard/user/${session?.user.handle}`)}
+        href="/dashboard/notifications"
+        icon={<FaRegBell className="text-2xl md:text-3xl" />}
+        activeIcon={<FaBell className="text-2xl md:text-3xl" />}
+        title="Notifications"
+        isActive={pathname.includes("notifications")}
+        badge={notificationsCount ?? 0}
+      />
+      <NavItem
+        href="/dashboard/settings"
+        icon={<BiCog className="text-2xl md:text-3xl" />}
+        activeIcon={<BiSolidCog className="text-2xl md:text-3xl" />}
+        title="Settings"
+        isActive={pathname.includes("settings")}
       />
     </nav>
   );

diff --git a/src/components/navigational/sidePanel/SidePanel.tsx b/src/components/navigational/sidePanel/SidePanel.tsx
@@ -2,7 +2,6 @@
 
 import Navbar from "../navbar/Navbar";
 import Image from "next/image";
-import ComposeButton from "@/components/actions/composeButton/ComposeButton";
 import Button from "@/components/actions/button/Button";
 
 export default function SidePanel() {
@@ -32,9 +31,6 @@ export default function SidePanel() {
         </div>
       </Button>
       <Navbar />
-      <div className="mt-20">
-        <ComposeButton mode="fixed" />
-      </div>
     </menu>
   );
 }
diff --git a/src/containers/posts/FeedContainer.tsx b/src/containers/posts/FeedContainer.tsx
@@ -40,7 +40,7 @@ export default function FeedContainer(props: Props) {
 
   const dataLength = feedData?.pages.reduce(
     (acc, page) => acc + (page?.data.feed?.length ?? 0),
-    0,
+    0
   );
 
   const isEmpty =
@@ -54,7 +54,7 @@ export default function FeedContainer(props: Props) {
           refetchFeed();
         }}
       />
-      <ComposeButton mode="float" />
+      <ComposeButton float={true} />
 
       <InfiniteScroll
         dataLength={dataLength ?? 0}
@@ -73,7 +73,7 @@ export default function FeedContainer(props: Props) {
             <div key={i}>
               {page?.data.feed
                 .filter((f) =>
-                  feed === "timeline" ? filterFeed(f, feedFilter) : true,
+                  feed === "timeline" ? filterFeed(f, feedFilter) : true
                 )
                 .map((post, j) => (
                   <PostContainer

diff --git a/src/containers/posts/UserPostsContainer.tsx b/src/containers/posts/UserPostsContainer.tsx
@@ -57,7 +57,7 @@ export default function UserPostsConatiner(props: Props) {
 
   return (
     <div>
-      <ComposeButton mode="float" />
+      <ComposeButton float={true} />
       <InfiniteScroll
         dataLength={dataLength ?? 0}
         next={fetchNextUserPostsPage}