Fixed like button bugs

OneCommunityGlobal · Feb 12, 2025 · 0fff10e · 0fff10e
1 parent b287809
commit 0fff10e
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 31 deletions.
diff --git a/src/actions/bmdashboard/lessonLikesActions.js b/src/actions/bmdashboard/lessonLikesActions.js
@@ -3,27 +3,45 @@ import { ENDPOINTS } from "utils/URL";
 import { fetchBMLessons} from "./lessonsAction";
 import {BM_LESSON_LIKES} from '../../constants/bmdashboard/lessonConstants'
 
-export const likeLessonAction = (lessonIndex, userId) => {
-  const url = ENDPOINTS.BM_LESSON_LIKES(lessonIndex);
+export const likeLessonAction = (lessonId, userId) => {
+  const url = ENDPOINTS.BM_LESSON_LIKES(lessonId);
   return async dispatch => {
     try {
+      // Dispatch optimistic update
+      dispatch({
+        type: 'OPTIMISTIC_LIKE_UPDATE',
+        payload: { lessonId, userId }
+      });
+
       const response = await axios.put(url, {
-        lessonIndex,
+        lessonId,
         userId,
       });
 
       if (response.status === 200) {
-        dispatch(setLikes(response.data));
-        await dispatch(fetchBMLessons());
+        // Update with actual server response
+        dispatch({
+          type: BM_LESSON_LIKES,
+          payload: response.data
+        });
       } else {
-        // console.error('Unexpected response status:', response.status);
+        // Revert optimistic update on failure
+        dispatch({
+          type: 'REVERT_LIKE_UPDATE',
+          payload: { lessonId, userId }
+        });
       }
     } catch (error) {
-      // console.error('Error liking lesson:', error);
+      // Revert optimistic update on error
+      dispatch({
+        type: 'REVERT_LIKE_UPDATE',
+        payload: { lessonId, userId }
+      });
     }
   };
 };
 
+
 export const setLikes = payload => {
   return {
     type: BM_LESSON_LIKES,

diff --git a/src/components/BMDashboard/LessonList/LessonCard.jsx b/src/components/BMDashboard/LessonList/LessonCard.jsx
@@ -19,6 +19,15 @@ function LessonCard({ filteredLessons, onEditLessonSummary, onDeliteLessonCard,
   const [validationError, setValidationError] = useState('');
   const [showDeletePopup, setShowDeletePopup] = useState(false);
   const [lessonToDeleteId, setLessonToDeleteId] = useState(null);
+  const lessons = useSelector(state => state.lessons.lessons);
+
+  const getLikeStatus = lessonId => {
+    const lesson = lessons.find(l => l._id === lessonId);
+    return {
+      isLiked: lesson?.likes?.includes(currentUserId),
+      totalLikes: lesson?.totalLikes || 0,
+    };
+  };
 
   const handleEdit = (lessonId, lessonSummary) => {
     setEditableLessonId(lessonId);
@@ -68,7 +77,7 @@ function LessonCard({ filteredLessons, onEditLessonSummary, onDeliteLessonCard,
   };
 
   const lessonCards = filteredLessons.map(lesson => {
-    const isLiked = lesson.likes?.includes(currentUserId);
+    const { isLiked, totalLikes } = getLikeStatus(lesson._id);
     return (
       <Card key={`${lesson._id} + ${lesson.title} `} className="lesson-card">
         <Card.Header
@@ -193,7 +202,7 @@ function LessonCard({ filteredLessons, onEditLessonSummary, onDeliteLessonCard,
                         fill: isLiked ? '#ff4d4d' : 'none',
                       }}
                     />
-                    Like: {lesson.totalLikes}
+                    Like: {totalLikes}
                   </span>
                 </div>
               </div>

diff --git a/src/components/BMDashboard/LessonList/Lessons.jsx b/src/components/BMDashboard/LessonList/Lessons.jsx
@@ -31,25 +31,9 @@ function Lessons({ filteredLessons, setFilteredLessons, dispatch }) {
 
   const handleLike = async (lessonId, userId) => {
     try {
-      setFilteredLessons(prevLessons =>
-        prevLessons.map(lesson => {
-          if (lesson._id === lessonId) {
-            const isLiked = lesson.likes?.includes(userId);
-            return {
-              ...lesson,
-              totalLikes: isLiked ? lesson.totalLikes - 1 : lesson.totalLikes + 1,
-              likes: isLiked
-                ? lesson.likes.filter(id => id !== userId)
-                : [...(lesson.likes || []), userId],
-            };
-          }
-          return lesson;
-        }),
-      );
       await dispatch(likeLessonAction(lessonId, userId));
     } catch (error) {
       // console.error('Error updating like:', error);
-      setFilteredLessons(Lessons);
     }
   };
 

diff --git a/src/reducers/bmdashboard/lessonsReducer.js b/src/reducers/bmdashboard/lessonsReducer.js
@@ -2,6 +2,7 @@ import { GET_BM_LESSONS, UPDATE_LESSON, DELETE_LESSON, BM_LESSON_LIKES, SET_LESS
 
 const initialState = {
   lessons: [],
+  pendingLikes: {} // Track optimistic updates
 };
 
 export const lessonsReducer = (state = initialState, action) => {
@@ -50,16 +51,67 @@ export const lessonsReducer = (state = initialState, action) => {
           lesson._id === action.payload._id ? action.payload : lesson
         ),
       };
-      case BM_LESSON_LIKES:
-        const updatedLesson = action.payload;
-        const updatedLessons = state.lessons.map(lesson => {
-          return lesson._id === updatedLesson._id ? updatedLesson : lesson;
-        });
+
+      case 'OPTIMISTIC_LIKE_UPDATE': {
+        const { lessonId, userId } = action.payload;
+        const lesson = state.lessons.find(l => l._id === lessonId);
+
+        if (!lesson) return state;
+
+        const isLiked = lesson.likes?.includes(userId);
+        const updatedLesson = {
+          ...lesson,
+          totalLikes: isLiked ? lesson.totalLikes - 1 : lesson.totalLikes + 1,
+          likes: isLiked
+            ? lesson.likes.filter(id => id !== userId)
+            : [...(lesson.likes || []), userId]
+        };
+
+        return {
+          ...state,
+          pendingLikes: {
+            ...state.pendingLikes,
+            [lessonId]: { previousState: lesson, timestamp: Date.now() }
+          },
+          lessons: state.lessons.map(l => 
+            l._id === lessonId ? updatedLesson : l
+          )
+        };
+      }
+
+      case 'REVERT_LIKE_UPDATE': {
+        const { lessonId } = action.payload;
+        const pendingUpdate = state.pendingLikes[lessonId];
+
+        if (!pendingUpdate) return state;
 
+        const { previousState } = pendingUpdate;
+
+        return {
+          ...state,
+          pendingLikes: {
+            ...state.pendingLikes,
+            [lessonId]: undefined
+          },
+          lessons: state.lessons.map(l => 
+            l._id === lessonId ? previousState : l
+          )
+        };
+      }
+
+      case BM_LESSON_LIKES: {
+        const updatedLesson = action.payload;
         return {
           ...state,
-          lessons: updatedLessons,
+          pendingLikes: {
+            ...state.pendingLikes,
+            [updatedLesson._id]: undefined
+          },
+          lessons: state.lessons.map(lesson =>
+            lesson._id === updatedLesson._id ? updatedLesson : lesson
+          )
         };
+      }
 
       default:
         return state;