Show catering comments

app/api/actions/comments.js

@@ -1,13 +1,13 @@
 import createApiAction from './createApiAction';
 
-function fetchComments({ reservationId }) {
+function fetchComments({ cateringId, reservationId }) {
   return createApiAction({
     // TODO: Replace with correct endpoint once the backend supports it.
     endpoint: 'http://www.mocky.io/v2/58ffa5c7110000ef16f60030',
-    params: { reservationId },
+    params: { cateringId, reservationId },
     method: 'GET',
     type: 'COMMENTS',
-    options: { meta: { reservationId } },
+    options: { meta: { cateringId, reservationId } },
   });
 }
 

app/api/actions/comments.spec.js

@@ -4,9 +4,11 @@ import { createComment, fetchComments } from './comments';
 
 describe('api/actions/comments', () => {
   describe('fetchComments', () => {
+    const cateringId = 85559;
     const reservationId = 3819;
+
     createApiTest({
-      name: 'fetchComments',
+      name: 'fetchComments(reservationId)',
       action: fetchComments,
       args: [{ reservationId }],
       tests: {
@@ -23,6 +25,25 @@ describe('api/actions/comments', () => {
         },
       },
     });
+
+    createApiTest({
+      name: 'fetchComments(cateringId)',
+      action: fetchComments,
+      args: [{ cateringId }],
+      tests: {
+        method: 'GET',
+        endpoint: `http://www.mocky.io/v2/58ffa5c7110000ef16f60030?catering_id=${cateringId}`,
+        request: {
+          type: types.COMMENTS_GET_REQUEST,
+        },
+        success: {
+          type: types.COMMENTS_GET_SUCCESS,
+        },
+        error: {
+          type: types.COMMENTS_GET_ERROR,
+        },
+      },
+    });
   });
 
   describe('createComment', () => {

app/api/reducers/dataReducer.js

@@ -55,18 +55,24 @@ function dataReducer(state = initialState, action) {
     }
 
     case actionTypes.COMMENTS_GET_SUCCESS: {
+      const key = (
+        action.meta.reservationId
+        ? `reservation-${action.meta.reservationId}`
+        : `catering-${action.meta.cateringId}`
+      );
       return state.merge({
         comments: state.comments.merge({
-          [action.meta.reservationId]: action.payload.results,
+          [key]: action.payload.results,
         }),
       });
     }
     case actionTypes.COMMENTS_POST_SUCCESS: {
       // TODO: Use response data instead of data from meta
+      const key = `reservation-${action.meta.reservationId}`;
       return state.merge({
         comments: state.comments.merge({
-          [action.meta.reservationId]: [
-            ...state.comments[action.meta.reservationId],
+          [key]: [
+            ...state.comments[key],
             action.meta.data,
           ],
         }),

app/shared/comments/CommentsContainer.js

@@ -7,12 +7,21 @@ import { createComment, fetchComments } from 'api/actions';
 import { currentUserSelector } from 'auth/selectors';
 import Comments from './Comments';
 
-function commentsSelector(state, props) { return state.data.comments[props.reservationId]; }
+export function selector() {
+  function commentsSelector(state, props) {
+    const key = (
+      props.reservationId
+      ? `reservation-${props.reservationId}`
+      : `catering-${props.cateringId}`
+    );
+    return state.data.comments[key];
+  }
 
-export const selector = createStructuredSelector({
-  comments: commentsSelector,
-  user: currentUserSelector,
-});
+  return createStructuredSelector({
+    comments: commentsSelector,
+    user: currentUserSelector,
+  });
+}
 
 export const actions = {
   createComment,
@@ -36,16 +45,20 @@ function mergeProps(state, dispatch, props) {
 
 export class CommentsContainer extends React.Component {
   static propTypes = {
+    cateringId: PropTypes.number,
     comments: PropTypes.array,
     createComment: PropTypes.func.isRequired,
     fetchComments: PropTypes.func.isRequired,
     name: PropTypes.string.isRequired,
-    reservationId: PropTypes.number.isRequired,
+    reservationId: PropTypes.number,
   }
   state = { isOpen: false }
 
   componentWillMount() {
-    this.props.fetchComments({ reservationId: this.props.reservationId });
+    this.props.fetchComments({
+      cateringId: this.props.cateringId,
+      reservationId: this.props.reservationId,
+    });
   }
 
   getCommentCount() {
@@ -64,7 +77,7 @@ export class CommentsContainer extends React.Component {
   render() {
     return (
       <div className="comments-container">
-        <a onClick={this.toggleComments} tabIndex="0">
+        <a className="comments-container-toggle" onClick={this.toggleComments} tabIndex="0">
           {this.props.name} ({this.getCommentCount()})
           {' '}
           <FontAwesome name={this.state.isOpen ? 'caret-down' : 'caret-right'} />

app/shared/comments/CommentsContainer.spec.js

@@ -21,7 +21,7 @@ function getWrapper(props) {
 }
 
 function getSelected(state, props = { reservationId: 1234 }) {
-  return selector(getState(state), props);
+  return selector()(getState(state), props);
 }
 
 describe('shared/comments/CommentsContainer', () => {
@@ -32,7 +32,21 @@ describe('shared/comments/CommentsContainer', () => {
         const reservationId = 1938;
         getWrapper({ fetchComments: fetch, reservationId });
         expect(fetch.callCount).to.equal(1);
-        expect(fetch.lastCall.args).to.deep.equal([{ reservationId }]);
+        expect(fetch.lastCall.args).to.deep.equal([{
+          cateringId: undefined,
+          reservationId,
+        }]);
+      });
+
+      it('calls fetchComments with catering id', () => {
+        const fetch = simple.mock();
+        const cateringId = 1938;
+        getWrapper({ fetchComments: fetch, cateringId, reservationId: undefined });
+        expect(fetch.callCount).to.equal(1);
+        expect(fetch.lastCall.args).to.deep.equal([{
+          cateringId,
+          reservationId: undefined,
+        }]);
       });
     });
 
@@ -166,10 +180,19 @@ describe('shared/comments/CommentsContainer', () => {
     it('selects reservation comments', () => {
       const comments = [{ id: 1 }, { id: 2 }];
       const actual = getSelected(
-        { 'data.comments': { 1437: comments } },
+        { 'data.comments': { 'reservation-1437': comments } },
         { reservationId: 1437 },
       );
       expect(actual.comments).to.deep.equal(comments);
     });
+
+    it('selects catering comments', () => {
+      const comments = [{ id: 1 }, { id: 2 }];
+      const actual = getSelected(
+        { 'data.comments': { 'catering-1437': comments } },
+        { cateringId: 1437 },
+      );
+      expect(actual.comments).to.deep.equal(comments);
+    });
   });
 });

app/shared/comments/comments.less

@@ -20,7 +20,9 @@
       padding: @padding-base-vertical @padding-base-horizontal;
     }
   }
-
+  &-container-toggle {
+    cursor: pointer;
+  }
   .comment-adder {
     margin-top: @padding-large-vertical;
     display: flex;

app/shared/modals/reservation-info/ReservationInfo.js

@@ -93,6 +93,11 @@ export default function ReservationInfoModal(props) {
             }
           </Col>
         </Row>
+        <Comments
+          cateringId={reservation.id}
+          className="catering-comments"
+          name="Tarjoilun viestit"
+        />
         <hr />
         {reservation.eventDescription && (
           <Row>

app/shared/modals/reservation-info/ReservationInfo.spec.js

@@ -123,6 +123,14 @@ describe('shared/modal/ReservationInfo', () => {
       expect(comments.prop('name')).to.equal('Varauksen viestit');
       expect(comments.prop('reservationId')).to.equal(reservation.id);
     });
+
+    it('renders catering comments', () => {
+      const comments = getBodyWrapper().find('.catering-comments');
+      expect(comments).to.have.length(1);
+      expect(comments.is(Comments)).to.be.true;
+      expect(comments.prop('name')).to.equal('Tarjoilun viestit');
+      expect(comments.prop('cateringId')).to.equal(reservation.id);
+    });
   });
 
   describe('Modal footer', () => {