Merge pull request #672 from bounswe/frontend/feature/596/tagfollowbu…

…tton

[Frontend] Folow/Unfollow Tags

frontend/src/components/TagFollowButton.tsx

@@ -0,0 +1,83 @@
+import {
+  useFollowTag,
+  useGetTagDetails,
+  useUnfollowTag,
+} from "@/services/api/programmingForumComponents";
+import { useState } from "react";
+import { Button } from "./ui/button";
+
+export default function TagFollowButton({
+  tag,
+}: {
+  tag: { tagId?: string; following?: boolean };
+}) {
+  const { isLoading, data, error, refetch } = useGetTagDetails(
+    {
+      pathParams: {
+        tagId: tag.tagId!,
+      },
+    },
+    {
+      enabled: typeof tag.following !== "boolean",
+    },
+  );
+
+  const [optimisticFollowing, setOptimisticFollowing] = useState(
+    null as boolean | null,
+  );
+
+  const { mutateAsync: follow } = useFollowTag({
+    onSuccess: () => {
+      refetch().then(() => {
+        setOptimisticFollowing(null);
+      });
+    },
+    onError: () => {
+      setOptimisticFollowing(null);
+    },
+  });
+  const { mutateAsync: unfollow } = useUnfollowTag({
+    onSuccess: () => {
+      refetch().then(() => {
+        setOptimisticFollowing(null);
+      });
+    },
+    onError: () => {
+      setOptimisticFollowing(null);
+    },
+  });
+
+  const following = optimisticFollowing ?? data?.data?.following;
+
+  return (
+    <Button
+      disabled={!!error || isLoading}
+      variant={following && !isLoading ? "primary-outline" : "default"}
+      onClick={() => {
+        if (following) {
+          unfollow({
+            pathParams: {
+              tagId: tag.tagId!,
+            },
+          });
+          setOptimisticFollowing(false);
+        } else {
+          follow({
+            pathParams: {
+              tagId: tag.tagId!,
+            },
+          });
+          setOptimisticFollowing(true);
+        }
+      }}
+    >
+      {isLoading
+        ? "Loading..."
+        : error
+          ? "Error"
+          : following
+            ? "Following"
+            : "Follow"}
+    </Button>
+  );
+}

frontend/src/routes/tag.test.tsx

@@ -25,6 +25,12 @@ const mockTagData = vi.hoisted(
 // Mock the API hook
 vi.mock("@/services/api/programmingForumComponents", () => ({
   useGetTagDetails: vi.fn(() => {}),
+  useFollowTag: vi.fn(() => ({
+    mutateAsync: vi.fn(), // Mock implementation of mutateAsync
+  })),
+  useUnfollowTag: vi.fn(() => ({
+    mutateAsync: vi.fn(), // Mock implementation of mutateAsync
+  })),
   useGetQuestionDetails: vi.fn(() => ({
     data: {
       data: {
@@ -88,34 +94,20 @@ describe("TagPage", () => {
     ).toBeInTheDocument();
   });
 
-  it("does not render 'Follow' button for unauthenticated users", () => {
-    render(
-      <MemoryRouter initialEntries={["/tag/javascript"]}>
-        <Routes>
-          <Route path="/tag/:tagName" element={<TagPage />} />
-        </Routes>
-      </MemoryRouter>,
-    );
-
-    expect(
-      screen.queryByRole("button", { name: /follow/i }),
-    ).not.toBeInTheDocument();
-  });
-
-  // it("renders 'Follow' button for authenticated users", () => {
-  //   vi.mocked(useAuthStore).mockReturnValue({
-  //     selfProfile: { id: 1, username: "testuser", profilePicture: "test.jpg" },
-  //     token: "mock-token",
-  //   });
+  it("renders 'Follow' button for authenticated users", () => {
+    vi.mocked(useAuthStore).mockReturnValue({
+      selfProfile: { id: 1, username: "testuser", profilePicture: "test.jpg" },
+      token: "mock-token",
+    });
 
-  //   render(
-  //     <MemoryRouter initialEntries={["/tag/javascript"]}>
-  //       <Routes>
-  //         <Route path="/tag/:tagName" element={<TagPage />} />
-  //       </Routes>
-  //     </MemoryRouter>,
-  //   );
+     render(
+       <MemoryRouter initialEntries={["/tag/javascript"]}>
+         <Routes>
+           <Route path="/tag/:tagName" element={<TagPage />} />
+         </Routes>
+       </MemoryRouter>,
+     );
 
-  //   expect(screen.getByRole("button", { name: /follow/i })).toBeInTheDocument();
-  // });
+     expect(screen.getByRole("button", { name: /follow/i })).toBeInTheDocument();
+   });
 });

frontend/src/routes/tag.tsx

@@ -20,6 +20,7 @@ import {
   useSearchQuestions,
 } from "@/services/api/programmingForumComponents";
 // import { Recipe } from "@/components/Recipe";
+import TagFollowButton from "@/components/TagFollowButton";
 import { DifficultyFilter } from "@/components/DifficultyFilter";
 import { HighlightedQuestionsBox } from "@/components/HighlightedQuestionsBox";
 import { QuestionCard } from "@/components/QuestionCard"; // Import your QuestionCard component
@@ -99,6 +100,13 @@ export default function TagPage() {
         <div className="flex items-center gap-2 ">
           <h1>{tag.name}</h1>
         </div>
+        {!!token && (
+          <TagFollowButton
+            tag={{
+              tagId: tagId!,
+              following: tag.following,
+            }}
+          />)}
       </div>
       {tag.logoImage && (
         <img