feat: update the snippetDetail page with the backend data

Author: sabbirhosen44

src/pages/snippets/SnippetDetailPage.tsx

@@ -12,7 +12,7 @@ import {
 import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useToast } from "@/hooks/use-toast";
-import { MOCK_SNIPPETS } from "@/mockdata";
+import { AppDispatch } from "@/store";
 import { formatDistanceToNow } from "date-fns";
 import { useEffect, useState } from "react";
 import {
@@ -26,9 +26,15 @@ import {
 import { FiArrowLeft, FiShare2 } from "react-icons/fi";
 import { MdContentCopy } from "react-icons/md";
 import { SlCalender } from "react-icons/sl";
+import { useDispatch, useSelector } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
+import { toggleLikeSnippet } from "@/store/slices/snippetSlice";
 
 const SnippetDetailPage = () => {
+  const { snippets, currentSnippet } = useSelector(
+    (state: any) => state.snippet
+  );
+  const dispatch = useDispatch<AppDispatch>();
   const [activeTab, setActiveTab] = useState("code");
   const [snippet, setSnippet] = useState<any>({});
   const [isLiked, setIsLiked] = useState<Boolean>(false);
@@ -39,8 +45,8 @@ const SnippetDetailPage = () => {
   const showToast = useToast();
 
   useEffect(() => {
-    const foundSnippet = MOCK_SNIPPETS.find(
-      (snippet) => snippet.id === snippetID
+    const foundSnippet = snippets.find(
+      (snippet: any) => snippet?._id === snippetID
     );
 
     if (foundSnippet) {
@@ -55,6 +61,8 @@ const SnippetDetailPage = () => {
     const updatedIsLiked = !isLiked;
     setIsLiked(updatedIsLiked);
 
+    dispatch(toggleLikeSnippet(snippet?._id));
+
     showToast(
       updatedIsLiked
         ? "You've liked this snippet"
@@ -178,18 +186,18 @@ const SnippetDetailPage = () => {
                     </Button>
                   </div>
                   <pre className="bg-muted p-4 rounded-md overflow-x-auto ">
-                    <code>{snippet?.content}</code>
+                    <code>{snippet?.code}</code>
                   </pre>
                 </TabsContent>
 
                 <TabsContent value="comments" className="pt-4">
                   <div className="space-y-4 last:mb-4">
-                    {comments.length === 0 ? (
+                    {snippet?.comments?.length === 0 ? (
                       <p className="text-center text-muted-foreground py-6">
                         No comments yet. Be the first to comment!
                       </p>
                     ) : (
-                      comments.map((comment) => (
+                      snippet?.comments?.map((comment: any) => (
                         <div key={comment.id} className="border rounded-md p-4">
                           <div className="flex items-start gap-3">
                             <Avatar className="size-8">
@@ -223,7 +231,7 @@ const SnippetDetailPage = () => {
                 <div className="flex items-center space-x-4 text-muted-foreground">
                   <div className="flex items-center">
                     <FaRegHeart className="size-4 mr-1" />
-                    <span>{isLiked ? snippet.likes + 1 : snippet.likes}</span>
+                    <span>{snippet?.likeCount}</span>
                   </div>
                   <div className="flex items-center">
                     <FaRegCommentAlt className="size-4 mr-1" />
@@ -246,11 +254,11 @@ const SnippetDetailPage = () => {
                       alt={snippet?.author?.name}
                     />
                     <AvatarFallback>
-                      {snippet?.author?.name.charAt(0)}
+                      {snippet?.owner?.name.charAt(0)}
                     </AvatarFallback>
                   </Avatar>
                   <div>
-                    <p className="font-medium">{snippet?.author?.name}</p>
+                    <p className="font-medium">{snippet?.owner?.name}</p>
                     <p className="text-sm text-muted-foreground">Author</p>
                   </div>
                 </div>

src/pages/snippets/SnippetsPage.tsx

@@ -1,4 +1,5 @@
 import LoadingSnipper from "@/components/LoadingSnipper";
+import Pagination from "@/components/Pagination";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -19,21 +20,19 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { MOCK_SNIPPETS } from "@/mockdata";
+import { supportedLanguages } from "@/constants";
 import { AppDispatch, RootState } from "@/store";
 import { getSnippets } from "@/store/slices/snippetSlice";
+import { setCurrentPage } from "@/store/slices/templateSlice";
 import { useEffect, useState } from "react";
 import { CiHeart, CiSearch } from "react-icons/ci";
 import { FaCode, FaFileCode } from "react-icons/fa";
 import { FiMessageSquare } from "react-icons/fi";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
-import { supportedLanguages } from "@/constants";
-import Pagination from "@/components/Pagination";
-import { setCurrentPage } from "@/store/slices/templateSlice";
 
 const SnippetsPage = () => {
-  const { snippets, isLoading, error, totalPages, currentPage } = useSelector(
+  const { snippets, isLoading, totalPages, currentPage } = useSelector(
     (state: RootState) => state.snippet
   );
   const dispatch = useDispatch<AppDispatch>();
@@ -54,7 +53,7 @@ const SnippetsPage = () => {
     );
   }, [dispatch, languageFilter, searchQuery, currentPage]);
 
-  const handleViewSnippet = (snippetId: number) => {
+  const handleViewSnippet = (snippetId: string) => {
     navigate(`/snippets/${snippetId}`);
   };
 
@@ -143,7 +142,7 @@ const SnippetsPage = () => {
                       <CardTitle
                         className="text-xl hover:text-primary cursor-pointer"
                         onClick={() => {
-                          handleViewSnippet(Number(snippet._id));
+                          handleViewSnippet(snippet?._id as string);
                         }}
                       >
                         {snippet.title}
@@ -205,7 +204,7 @@ const SnippetsPage = () => {
                     variant="outline"
                     size="sm"
                     onClick={() => {
-                      handleViewSnippet(Number(snippet._id));
+                      handleViewSnippet(snippet._id as string);
                     }}
                   >
                     View Details

src/store/slices/snippetSlice.ts

@@ -1,5 +1,10 @@
 import type { SnippetState } from "@/types";
-import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
+import {
+  createAsyncThunk,
+  createSlice,
+  isRejectedWithValue,
+  PayloadAction,
+} from "@reduxjs/toolkit";
 import axios from "axios";
 
 const API = import.meta.env.VITE_API_URL;
@@ -106,7 +111,32 @@ export const getSnippet = createAsyncThunk(
 // Toggle like snippet
 export const toggleLikeSnippet = createAsyncThunk(
   "snippet/toggleLikeSnippet",
-  async () => {}
+  async (snippetId: string, { rejectWithValue }) => {
+    const token = localStorage.getItem("token");
+
+    if (!token) {
+      return rejectWithValue("No authentication token");
+    }
+
+    try {
+      const response = await axios.post(
+        `${API}/snippets/${snippetId}/like`,
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+            "Content-Type": "application/json",
+          },
+        }
+      );
+
+      return response.data.data;
+    } catch (error: any) {
+      return rejectWithValue(
+        error.response?.data?.message || "Failed to like snippet"
+      );
+    }
+  }
 );
 
 // Update snippet
@@ -170,7 +200,31 @@ const snippetSlice = createSlice({
       .addCase(getSnippets.rejected, (state, action: PayloadAction<any>) => {
         state.isLoading = false;
         state.error = action.payload;
-      });
+      })
+      // toggle like snippet
+      .addCase(toggleLikeSnippet.pending, (state) => {
+        state.isLoading = true;
+        state.error = null;
+      })
+      .addCase(
+        toggleLikeSnippet.fulfilled,
+        (state, action: PayloadAction<any>) => {
+          state.isLoading = false;
+          const { snippetId, isLiked, likeCount } = action.payload;
+
+          if (state.currentSnippet && state.currentSnippet?._id === snippetId) {
+            state.currentSnippet.likeCount = likeCount;
+            state.currentSnippet.isLiked = isLiked;
+          }
+        }
+      )
+      .addCase(
+        toggleLikeSnippet.rejected,
+        (state, action: PayloadAction<any>) => {
+          state.isLoading = false;
+          state.error = action.payload;
+        }
+      );
   },
 });
 

src/types/index.ts

@@ -143,7 +143,7 @@ export interface SnippetOwner {
 }
 
 export interface Snippet {
-  _id?: string;
+  _id: string;
   title: string;
   description?: string;
   code: string;
@@ -165,6 +165,7 @@ export interface Snippet {
   owner: SnippetOwner;
   viewCount: number;
   likeCount: number;
+  isLiked: Boolean;
   comments: any[];
   commentcount: number;
   createdAt: string;