[#48] feat: client display/update counts

handong-life · Jan 26, 2022 · c4bd38e · c4bd38e
1 parent 1479fc6
commit c4bd38e
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 10 deletions.
diff --git a/client/src/commons/constants.js b/client/src/commons/constants.js
@@ -34,6 +34,7 @@ export const SEARCH_ACTIONS = {
   START_SEARCH: 'startSearch',
   FINISH_SEARCH: 'finishSearch',
   REFLECT_BOOKMARKS: 'reflectBookmarks',
+  REFLECT_COUNTS: 'reflectCounts',
 };
 
 export const SNACKBAR_ACTIONS = {

diff --git a/client/src/components/SearchSection/LectureCard.js b/client/src/components/SearchSection/LectureCard.js
@@ -117,7 +117,7 @@ export default function LectureCard({
           >
             {/* <Typography className={classes.countText}>10</Typography> */}
             <Box className={classes.countText}>
-              <Typography>10</Typography>
+              <Typography>{lecture.count?.add || ''}</Typography>
             </Box>
           </Button>
         </Tooltip>
@@ -130,7 +130,7 @@ export default function LectureCard({
           >
             {/* <Typography className={classes.countText}>10</Typography> */}
             <Box className={classes.countText}>
-              <Typography>10</Typography>
+              <Typography>{lecture.count?.bookmark || ''}</Typography>
             </Box>
           </Button>
         </Tooltip>
@@ -143,7 +143,7 @@ export default function LectureCard({
           >
             {/* <Typography className={classes.countText}>10</Typography> */}
             <Box className={classes.countText}>
-              <Typography>10</Typography>
+              <Typography>{lecture.count?.spike || ''}</Typography>
             </Box>
           </Button>
         </Tooltip>

diff --git a/client/src/hooks/useSearch.js b/client/src/hooks/useSearch.js
@@ -31,6 +31,20 @@ function searchReducer(state, { type, payload }) {
       };
     }
 
+    case SEARCH_ACTIONS.REFLECT_COUNTS: {
+      const { lectureId, count } = payload;
+      const { searchResults } = state;
+      const idx = searchResults.findIndex((lecture) => lecture.id === lectureId);
+      if (idx === -1) return state; // 못 찾으면 더 이상 진행 안함
+
+      searchResults[idx] = new Lecture(searchResults[idx]).updateCount(count);
+
+      return {
+        ...state,
+        searchResults,
+      };
+    }
+
     default:
       return state;
   }

diff --git a/client/src/models/Lecture.js b/client/src/models/Lecture.js
@@ -2,7 +2,7 @@ import { Axios } from '../lib/axios';
 import { isIn } from '../utils/helper';
 
 export default class Lecture {
-  constructor(raw, bookmarks = [], spikes = [], counts = {}) {
+  constructor(raw, bookmarks = [], spikes = []) {
     this.id = raw.id;
     this.gubun = raw.gubun;
     this.code = raw.code;
@@ -22,26 +22,35 @@ export default class Lecture {
     this.isBookmarked = isIn(raw, bookmarks, 'id');
     this.isSpike = isIn(raw, spikes, 'id');
     this.isAdded = false;
+    this.count = raw.count;
   }
 
   static getSearchResults = async (search, page) =>
     await Axios().get(`/search?search=${search}${page ? `&page=${page}` : ''}`);
+
+  updateCount(count) {
+    this.count = {
+      ...this.count,
+      ...count,
+    };
+    return this;
+  }
 }
 
 export class BookmarkedLecture extends Lecture {
   constructor(raw, spikes) {
-    return { ...super(raw, [], spikes), isBookmarked: true };
+    return super({ ...raw, isBookmarked: true }, [], spikes);
   }
 }
 
 export class TimetableLecture extends Lecture {
   constructor(raw) {
-    return { ...super(raw), isAdded: true };
+    return super({ ...raw, isAdded: true });
   }
 }
 
 export class SpikeLecture extends Lecture {
   constructor(raw) {
-    return { ...super(raw), isSpike: true };
+    return super({ ...raw, isSpike: true });
   }
 }
diff --git a/client/src/pages/HomePage.js b/client/src/pages/HomePage.js
@@ -92,7 +92,11 @@ export default function HomePage({ logout }) {
     User.addSpikeLecture(lecture.id).then((res) => {
       userDispatch({
         type: USER_ACTIONS.ADD_SPIKE_LECTURE,
-        payload: { lecture: new SpikeLecture(lecture) },
+        payload: { lecture: new SpikeLecture(lecture).updateCount(res.data.count) },
+      });
+      searchDispatch({
+        type: SEARCH_ACTIONS.REFLECT_COUNTS,
+        payload: { lectureId: lecture.id, count: res.data.count },
       });
     });
   };
@@ -103,14 +107,22 @@ export default function HomePage({ logout }) {
         type: USER_ACTIONS.DELETE_SPIKE_LECTURE,
         payload: { lectureId: lecture.id },
       });
+      searchDispatch({
+        type: SEARCH_ACTIONS.REFLECT_COUNTS,
+        payload: { lectureId: lecture.id, count: res.data.count },
+      });
     });
   };
 
   const handleBookmarkLectureClick = (lecture) => {
     User.bookmarkLecture(lecture.id).then((res) => {
       userDispatch({
         type: USER_ACTIONS.BOOKMARK_LECTURE,
-        payload: { lecture: new BookmarkedLecture(lecture) },
+        payload: { lecture: new BookmarkedLecture(lecture).updateCount(res.data.count) },
+      });
+      searchDispatch({
+        type: SEARCH_ACTIONS.REFLECT_COUNTS,
+        payload: { lectureId: lecture.id, count: res.data.count },
       });
     });
   };
@@ -121,6 +133,10 @@ export default function HomePage({ logout }) {
         type: USER_ACTIONS.UNBOOKMARK_LECTURE,
         payload: { lectureId: lecture.id },
       });
+      searchDispatch({
+        type: SEARCH_ACTIONS.REFLECT_COUNTS,
+        payload: { lectureId: lecture.id, count: res.data.count },
+      });
     });
   };
 
@@ -142,7 +158,14 @@ export default function HomePage({ logout }) {
     Timetable.addLecture(timetableId, lecture.id).then((res) => {
       userDispatch({
         type: USER_ACTIONS.ADD_LECTURE_TO_TIMETABLE,
-        payload: { timetableId, lecture: new TimetableLecture(lecture) },
+        payload: {
+          timetableId,
+          lecture: new TimetableLecture(lecture).updateCount(res.data.count),
+        },
+      });
+      searchDispatch({
+        type: SEARCH_ACTIONS.REFLECT_COUNTS,
+        payload: { lectureId: lecture.id, count: res.data.count },
       });
     });
   };
@@ -154,6 +177,10 @@ export default function HomePage({ logout }) {
         type: USER_ACTIONS.DELETE_LECTURE_FROM_TIMETABLE,
         payload: { timetableId, lectureId },
       });
+      searchDispatch({
+        type: SEARCH_ACTIONS.REFLECT_COUNTS,
+        payload: { lectureId, count: res.data.count },
+      });
       closeModal();
     });
   };