Merge branch 'preview'

src/components/contentDisplay/feedHeader/FeedHeader.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import Image from "next/image";
-import useFeedInfo from "@/lib/hooks/bsky/feed/useFeedInfo";
+import useFeedInfo, { feedInfoKey } from "@/lib/hooks/bsky/feed/useFeedInfo";
 import FallbackFeed from "@/assets/images/fallbackFeed.png";
 import Button from "@/components/actions/button/Button";
-import { useEffect, useLayoutEffect, useState } from "react";
+import { useLayoutEffect, useState } from "react";
 import {
-  getSavedFeeds,
+  likeFeed,
+  unlikeFeed,
   togglePinFeed,
   toggleSaveFeed,
 } from "@/lib/api/bsky/feed";
@@ -15,7 +16,7 @@ import { useRouter } from "next/navigation";
 import FeedHeaderSkeleton from "./FeedHeaderSkeleton";
 import { useQueryClient } from "@tanstack/react-query";
 import { savedFeedsQueryKey } from "@/containers/settings/myFeedsContainer/MyFeedsContainer";
-import { BiSolidTrash } from "react-icons/bi";
+import { BiHeart, BiSolidTrash } from "react-icons/bi";
 import { BiSolidBookmarkAlt } from "react-icons/bi";
 import { BiPlus } from "react-icons/bi";
 import { BiSolidHeart } from "react-icons/bi";
@@ -31,6 +32,9 @@ export default function FeedHeader(props: Props) {
   const agent = useAgent();
   const [isSaved, setIsSaved] = useState<boolean | null>(null);
   const [isPinned, setIsPinned] = useState<boolean | null>(null);
+  const [isLiked, setIsLiked] = useState<boolean | null>(null);
+  const [likeUri, setLikeUri] = useState<string | undefined>(undefined);
+  const [likeCount, setLikeCount] = useState<number>(0);
   const queryClient = useQueryClient();
   const {
     feedInfo,
@@ -44,6 +48,8 @@ export default function FeedHeader(props: Props) {
     if (feedInfo) {
       setIsSaved(feedInfo.isSaved);
       setIsPinned(feedInfo.isPinned);
+      setIsLiked(feedInfo.isLiked);
+      setLikeUri(feedInfo.view.viewer?.like);
     }
   }, [feedInfo]);
 
@@ -79,10 +85,34 @@ export default function FeedHeader(props: Props) {
     }
   };
 
+  const toggleLike = async () => {
+    if (!agent) return;
+    setIsLiked((prev) => !prev);
+    if (!likeUri && feedInfo) {
+      try {
+        const like = await likeFeed(
+          agent,
+          feedInfo?.view.uri,
+          feedInfo?.view.cid
+        );
+        setLikeUri(like?.uri);
+      } catch (err) {
+        setIsLiked(false);
+      }
+    } else if (likeUri && feedInfo) {
+      try {
+        await unlikeFeed(agent, likeUri);
+        setLikeUri(undefined);
+      } catch (err) {
+        setIsLiked(true);
+      }
+    }
+  };
+
   return (
     <>
       {isFetchingFeedInfo && <FeedHeaderSkeleton />}
-      {feedInfo && (
+      {!isFetchingFeedInfo && feedInfo && (
         <>
           <article className="flex flex-col gap-2 p-3 border border-x-0 border-t-0 md:border md:rounded-t-2xl ">
             <div className="flex flex-wrap gap-3 items-center justify-between">
@@ -124,6 +154,14 @@ export default function FeedHeader(props: Props) {
                       }`}
                     />
                   </Button>
+                  <Button onClick={toggleLike}>
+                    {likeUri && (
+                      <BiSolidHeart className="text-lg text-red-600" />
+                    )}
+                    {!likeUri && (
+                      <BiHeart className="text-lg text-neutral-300" />
+                    )}
+                  </Button>
                 </div>
               )}
             </div>
@@ -132,7 +170,7 @@ export default function FeedHeader(props: Props) {
             </p>
             <small className="flex items-center gap-1 font-medium text-neutral-500">
               <BiSolidHeart />
-              <span>{feedInfo.view.likeCount ?? 0}</span>
+              <span>{feedInfo.view.likeCount}</span>
             </small>
           </article>
         </>

src/components/contentDisplay/feedHeader/FeedHeaderSkeleton.tsx

@@ -1,6 +1,6 @@
 export default function FeedHeaderSkeleton() {
   return (
-    <article className="flex flex-col gap-2 p-3 border border-b-0 md:rounded-t-2xl">
+    <article className="flex flex-col gap-2 p-3 border border-y-0 border-x-0 md:border-t md:border-x md:rounded-t-2xl">
       <div className="flex flex-wrap gap-3 items-center justify-between">
         <div className="flex items-center gap-3">
           <div className="rounded-lg bg-gray-200 h-[60px] w-[60px] animate-pulse" />
@@ -12,6 +12,7 @@ export default function FeedHeaderSkeleton() {
         <div className="flex flex-wrap gap-3">
           <div className="bg-gray-200 w-9 h-9 rounded-lg animate-pulse" />
           <div className="bg-gray-200 w-9 h-9 rounded-lg animate-pulse" />
+          <div className="bg-gray-200 w-9 h-9 rounded-lg animate-pulse" />
         </div>
       </div>
       <div className="bg-gray-200 w-4/5 h-3 mt-2 rounded animate-pulse" />

src/components/navigational/appBar/AppBar.tsx

@@ -6,7 +6,7 @@ import { useScrollContext } from "@/app/providers/scroll";
 import useAgent from "@/lib/hooks/bsky/useAgent";
 import { getUnreadNotificationsCount } from "@/lib/api/bsky/notification";
 import { useQuery } from "@tanstack/react-query";
-import { BiCog, BiHash, BiHome, BiSolidCog, BiSolidHome } from "react-icons/bi";
+import { BiCloud, BiCog, BiHome, BiSolidCloud, BiSolidCog, BiSolidHome } from "react-icons/bi";
 import { PiMagnifyingGlassBold, PiMagnifyingGlassFill } from "react-icons/pi";
 import { FaRegBell } from "react-icons/fa6";
 import { FaBell } from "react-icons/fa";
@@ -50,8 +50,8 @@ export default function AppBar() {
       />
       <NavItem
         href="/dashboard/feeds"
-        icon={<BiHash className="text-2xl md:text-3xl" />}
-        activeIcon={<BiHash className="text-2xl md:text-3xl" />}
+        icon={<BiCloud className="text-2xl md:text-3xl" />}
+        activeIcon={<BiSolidCloud className="text-2xl md:text-3xl" />}
         title="Feeds"
         isActive={pathname === "/dashboard/feeds"}
       />

src/components/navigational/navbar/Navbar.tsx

@@ -8,12 +8,13 @@ import { getUnreadNotificationsCount } from "@/lib/api/bsky/notification";
 import useAgent from "@/lib/hooks/bsky/useAgent";
 import {
   BiCog,
-  BiHash,
+  BiCloud,
   BiHome,
   BiSolidCog,
   BiSolidHome,
   BiSolidUser,
   BiUser,
+  BiSolidCloud,
 } from "react-icons/bi";
 import { PiMagnifyingGlassBold, PiMagnifyingGlassFill } from "react-icons/pi";
 import { FaBell, FaRegBell } from "react-icons/fa6";
@@ -52,8 +53,8 @@ export default function Navbar() {
       />
       <NavItem
         href="/dashboard/feeds"
-        icon={<BiHash className="text-2xl md:text-3xl" />}
-        activeIcon={<BiHash className="text-2xl md:text-3xl" />}
+        icon={<BiCloud className="text-2xl md:text-3xl" />}
+        activeIcon={<BiSolidCloud className="text-2xl md:text-3xl" />}
         title="Feeds"
         isActive={pathname === "/dashboard/feeds"}
         className="sm:m-0"

src/containers/settings/myFeedsContainer/MyFeedsContainer.tsx

@@ -79,7 +79,7 @@ function FeedItem(props: FeedItemProps) {
 export default function MyFeedsContainer() {
   const agent = useAgent();
   const { status, data, error, isLoading, isFetching } = useQuery({
-    queryKey: ["savedFeeds"],
+    queryKey: savedFeedsQueryKey,
     queryFn: () => getSavedFeeds(agent),
   });
 

src/containers/settings/settingsContainer/SettingsContainer.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { FaSlidersH } from "react-icons/fa";
 import { ImBubbles2 } from "react-icons/im";
 import {
-  BiHash,
+  BiCloud,
   BiLogoGithub,
   BiSolidCheckCircle,
   BiSolidEnvelope,
@@ -98,7 +98,7 @@ export default async function SettingsContainer() {
             href="/dashboard/settings/my-feeds"
             className="flex items-center gap-2 p-3 border border-x-0 md:border-x md:first:rounded-t-2xl md:last:rounded-b-2xl last:border-b even:[&:not(:last-child)]:border-b-0 odd:[&:not(:last-child)]:border-b-0 hover:bg-neutral-50"
           >
-            <BiHash className="text-neutral-600 text-xl" />
+            <BiCloud className="text-neutral-600 text-xl" />
             My Feeds
           </Link>
         </div>

src/lib/api/bsky/feed/index.ts

@@ -88,6 +88,15 @@ export const toggleSaveFeed = async (agent: BskyAgent, feed: string) => {
   });
 };
 
+export const likeFeed = async (agent: BskyAgent, uri: string, cid: string) => {
+  const like = await agent.like(uri, cid);
+  return like;
+};
+
+export const unlikeFeed = async (agent: BskyAgent, likeUri: string) => {
+  await agent.deleteLike(likeUri);
+};
+
 export const getTimeline = async (agent: BskyAgent, cursor?: string) => {
   const timeline = await agent.getTimeline({ cursor: cursor });
   return timeline;

src/lib/hooks/bsky/feed/useFeedInfo.tsx

@@ -2,21 +2,22 @@ import useAgent from "../useAgent";
 import { getFeedInfo, getSavedFeeds } from "../../../api/bsky/feed";
 import { useQuery } from "@tanstack/react-query";
 
-export const useFeedInfoKey = (feed: string) => ["feedInfo", feed];
+export const feedInfoKey = (feed: string) => ["feedInfo", feed];
 
 export default function useFeedInfo(feed: string) {
-  const agent = useAgent();
+  const agent = useAgent();  
 
   const { data, isLoading, isFetching, isRefetching, error } = useQuery({
-    queryKey: useFeedInfoKey(feed),
+    queryKey: feedInfoKey(feed),
     queryFn: async () => {
       const feedInfo = await getFeedInfo(agent, feed);
       const savedFeeds = await getSavedFeeds(agent);
       const isSaved = savedFeeds.some((savedFeed) => savedFeed.uri === feed);
       const isPinned = savedFeeds.some(
         (savedFeed) => savedFeed.uri === feed && savedFeed.pinned
       );
-      return { ...feedInfo, isSaved, isPinned };
+      const isLiked = feedInfo.view.viewer?.like !== null ? true : false;
+      return { ...feedInfo, isSaved, isPinned, isLiked };
     },
   });