Fixed the post comments issue.

abdullahceylan · Nov 23, 2018 · 2914236 · 2914236
1 parent 11ed678
commit 2914236
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 18 deletions.
diff --git a/actions/content.actions.js b/actions/content.actions.js
@@ -157,7 +157,7 @@ export const loadMoreSubRedditItems = (params = {}) => {
 
 export const fetchPostComments = (item) => {
   const request = data => ({ type: contentConstants.GET_POST_COMMENTS_REQUEST, data });
-  const success = data => ({ type: contentConstants.GET_POST_COMMENTS_SUCCESS, data });
+  const success = (data, item) => ({ type: contentConstants.GET_POST_COMMENTS_SUCCESS, data, item });
   const failure = error => ({ type: contentConstants.GET_POST_COMMENTS_FAILURE, error });
 
   return (dispatch) => {
@@ -172,7 +172,7 @@ export const fetchPostComments = (item) => {
       .then(
         (json) => {
           console.log('fetchPostComments.data', json);
-          dispatch(success(json[1].data));
+          dispatch(success(json[1].data, item));
         },
         (error) => {
           dispatch(failure(error));

diff --git a/components/MiddleContent/Card/Comments/Comments.jsx b/components/MiddleContent/Card/Comments/Comments.jsx
@@ -9,11 +9,10 @@ import {
 } from '../Card.styles';
 
 const PostComments = ({ list }) => {
-  if (!list.model) {
+  if (!list) {
     return null;
   }
 
-  const { model } = list;
   return (
     <CommentsArea>
       {map(comment => (
@@ -26,7 +25,7 @@ const PostComments = ({ list }) => {
             />
           </CommentBody>
         </Comment>
-    ), model) }
+    ), list) }
     </CommentsArea>
   )
 };

diff --git a/components/MiddleContent/Card/DetailsCard.jsx b/components/MiddleContent/Card/DetailsCard.jsx
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
+import { has } from 'lodash/fp';
 import {
   MdFavoriteBorder,
   MdMoreVert,
@@ -32,12 +33,21 @@ class DetailsCard extends PureComponent {
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    if (this.props.currentModalItem !== nextProps.currentModalItem) {
+      if (nextProps.currentModalItem) {
+        this.props.fnFetchPostComments(nextProps.currentModalItem);
+      }
+    }
+  }
+
   render() {
     const { currentModalItem } = this.props;
     if (!currentModalItem) {
       return null;
     }
     const singleItem = currentModalItem;
+    const itemComments = has(singleItem.name, this.props.comments) ? this.props.comments[singleItem.name] : [];
 
     return (
       <CardContainer direction="column">
@@ -64,7 +74,7 @@ class DetailsCard extends PureComponent {
             <ActionItem><MdLabelOutline /> {singleItem.domain}</ActionItem>
           </ActionsBar>
         </ContentArea>
-        { !this.props.comments.fetching && <Comments list={this.props.comments} />}
+        { !this.props.comments.fetching && <Comments list={itemComments} />}
       </CardContainer>
     );
   }

diff --git a/components/MiddleContent/MiddleContent.jsx b/components/MiddleContent/MiddleContent.jsx
@@ -74,6 +74,8 @@ class MiddleContent extends React.PureComponent {
       currentModalItem: null,
     });
 
+    this.props.fnSetModalItem(null);
+
     router.replace(`/?${prevPath}`, prevPath, { shallow: true });
   };
 

diff --git a/helpers/index.js b/helpers/index.js
@@ -1,4 +1,4 @@
-import { has } from 'lodash/fp';
+import { has, map } from 'lodash/fp';
 
 export const convertHex = (hex, opacity = 100) => {
   const newHex = hex.replace('#','');
@@ -18,18 +18,18 @@ export const regexFilters = {
 
 export const normalizePosts = (arr, baseKey = 'name') => {
   const d = {};
-  arr.map((post, index) => {
+  map.convert({cap: false})((post, index) => {
     const key = post.data[baseKey];
     d[key] = d[key] || {};
     d[key] = {
       ...arr[index].data,
     }
-  });
+  }, arr);
 
   return d;
 }
 
-export const allCollection = (arr, baseKey = 'name') => arr.map(post => post.data[baseKey]);
+export const allCollection = (arr, baseKey = 'name') => map(post => post.data[baseKey], arr);
 
 
 export const getSubredditInfo = (list = {}, id, key = '') => {

diff --git a/reducers/content.reducers.js b/reducers/content.reducers.js
@@ -1,5 +1,5 @@
 import { contentConstants } from '../constants';
-import { find, has } from 'lodash/fp';
+import { find, has, reject } from 'lodash/fp';
 import { normalizePosts, allCollection } from '../helpers';
 
 const contentInitialState = {
@@ -124,8 +124,6 @@ const subRedditsReducer = (state = subRedditListInitialState, action) => {
 }
 
 const postCommentsInitialState = {
-  model: {},
-  allNames: [],
   fetching: false,
 };
 
@@ -137,14 +135,11 @@ const postCommentsReducer = (state = postCommentsInitialState, action) => {
         fetching: true,
       }
     case contentConstants.GET_POST_COMMENTS_SUCCESS:
+      const postComments = reject(item => item.kind === 'more', action.data.children);
       return {
         ...state,
         fetching: false,
-        model: {
-          ...state.model,
-          ...normalizePosts(action.data.children, 'name'),
-          allNames: allCollection(action.data.children, 'name'),
-        },
+        [action.item.name]: normalizePosts(postComments),
       }
       case contentConstants.GET_POST_COMMENTS_FAILURE:
       return {