Feature/comments (#22)

* adding rating components

* adding comments to the recipe sections

* adding material UI

* getting the basic rating system working

* adding username

* fixing issues

* cleaning up the basics of the comments section

* removing material UI

* use raw HTML to set recipe comments

* removing bad error catching

* updating tests

modules/browse/actions/FilterActions.js

@@ -76,7 +76,7 @@ export const loadRatings = (filter) => {
     });
 
     request()
-      .get(serverURLs.ratings)
+      .get(serverURLs.rating_count)
       .query(parsedFilter(filter))
       .then(res => (
         dispatch({

modules/browse/components/ListRecipes.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom'
 
-import Ratings from '../../recipe/components/Ratings';
+import Ratings from '../../rating/components/Ratings'
 
 require("./../css/list-recipes.scss");
 

modules/common/config.js

@@ -14,7 +14,8 @@ export const serverURLs = {
   cuisine: apiUrl + '/recipe_groups/cuisine/',
   course_count: apiUrl + '/recipe_groups/course-count/',
   course: apiUrl + '/recipe_groups/course/',
-  ratings: apiUrl + '/recipe/rating/',
+  ratings: apiUrl + '/rating/rating/',
+  rating_count: apiUrl + '/rating/rating-count/',
   tag: apiUrl + '/recipe_groups/tag/',
   ingredient: apiUrl + '/ingredient/ingredient/',
   direction: apiUrl + '/recipe/direction/',

modules/common/reducer.js

@@ -6,6 +6,7 @@ import { default as recipe } from '../recipe/reducers/Reducer'
 import { default as recipeForm } from '../recipe_form/reducers/Reducer'
 import { default as menu } from '../menu/reducers/reducer'
 import { default as news } from '../news/reducers/NewsReducer'
+import { default as rating } from '../rating/reducers/Reducer'
 
 const reducer = combineReducers({
   list,
@@ -14,6 +15,7 @@ const reducer = combineReducers({
   menu,
   browse,
   recipe,
+  rating,
   recipeForm,
 });
 

modules/index.js

@@ -5,7 +5,7 @@ import { IntlProvider, addLocaleData } from 'react-intl'
 import { Router, Route, Switch, Redirect } from 'react-router-dom'
 import history from './common/history'
 import store from './common/store'
-// import registerServiceWorker from './registerServiceWorker';
+import registerServiceWorker from './registerServiceWorker';
 
 // Load components
 import Header from './header/containers/Header'
@@ -87,3 +87,5 @@ if (browserSupportsAllFeatures()) {
   // All other browsers loads polyfills and then run `entryPoint()`.
   loadPolyFills(entryPoint);
 }
+
+registerServiceWorker();

modules/list/tests/__snapshots__/ListFooter.test.js.snap

@@ -7,7 +7,16 @@ exports[`MyLists component test 1`] = `
   <span
     className="list-count"
   >
-    6 items left
+    <span
+      className="hidden-xs"
+    >
+      6 items left
+    </span>
+    <span
+      className="visible-xs"
+    >
+      6
+    </span>
   </span>
   <ul
     className="filters"
@@ -43,7 +52,14 @@ exports[`MyLists component test 1`] = `
     className="clear-completed clear-button"
     onClick={[Function]}
   >
-    Clear completed
+    <span
+      className="glyphicon glyphicon-trash visible-xs"
+    />
+    <span
+      className="hidden-xs"
+    >
+      Clear completed
+    </span>
   </button>
 </div>
 `;
@@ -55,7 +71,16 @@ exports[`MyLists component test w/ active filter 1`] = `
   <span
     className="list-count"
   >
-    6 items left
+    <span
+      className="hidden-xs"
+    >
+      6 items left
+    </span>
+    <span
+      className="visible-xs"
+    >
+      6
+    </span>
   </span>
   <ul
     className="filters"
@@ -91,7 +116,14 @@ exports[`MyLists component test w/ active filter 1`] = `
     className="clear-completed clear-button"
     onClick={[Function]}
   >
-    Clear completed
+    <span
+      className="glyphicon glyphicon-trash visible-xs"
+    />
+    <span
+      className="hidden-xs"
+    >
+      Clear completed
+    </span>
   </button>
 </div>
 `;
@@ -103,7 +135,16 @@ exports[`MyLists component test w/ completed filter 1`] = `
   <span
     className="list-count"
   >
-    6 items left
+    <span
+      className="hidden-xs"
+    >
+      6 items left
+    </span>
+    <span
+      className="visible-xs"
+    >
+      6
+    </span>
   </span>
   <ul
     className="filters"
@@ -139,7 +180,14 @@ exports[`MyLists component test w/ completed filter 1`] = `
     className="clear-completed clear-button"
     onClick={[Function]}
   >
-    Clear completed
+    <span
+      className="glyphicon glyphicon-trash visible-xs"
+    />
+    <span
+      className="hidden-xs"
+    >
+      Clear completed
+    </span>
   </button>
 </div>
 `;

modules/rating/actions/RatingsActions.js

@@ -0,0 +1,48 @@
+import RC from '../constants/RatingsConstants'
+import {request} from "../../common/CustomSuperagent";
+import {serverURLs} from "../../common/config";
+
+export const load = (recipeSlug) => {
+  return (dispatch) => {
+    request()
+      .get(serverURLs.ratings + "?recipe__slug=" + recipeSlug)
+      .then(res => dispatch({
+        type: RC.LOAD,
+        recipeSlug: recipeSlug,
+        data: res.body.results,
+      }))
+  }
+};
+
+export const remove = (id, recipeSlug) => {
+  return (dispatch) => {
+    request()
+      .delete(serverURLs.ratings + id + '/')
+      .then(res => dispatch({
+        type: RC.DELETE,
+        id: id,
+        recipe: recipeSlug,
+      }))
+  }
+};
+
+export const add = (rating, comment, recipeSlug, userId) => {
+  return dispatch => {
+    request()
+      .post(serverURLs.ratings)
+      .send({
+        rating: rating,
+        comment: comment,
+        recipe: recipeSlug,
+        author: userId,
+      })
+      .then(res => dispatch({
+        type: RC.ADD,
+        id: res.body.id,
+        recipe: recipeSlug,
+        comment: comment,
+        username: res.body.username,
+        rating: parseInt(rating, 10)
+      }))
+  }
+};