Add views to recipe list

Billmike · Mar 3, 2018 · b124800 · b124800
1 parent 2992deb
commit b124800
Show file tree

Hide file tree

Showing 22 changed files with 217 additions and 158 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -5,6 +5,13 @@
     "plugins": [
       "react"
     ],
+    "parserOptions": {
+      "ecmaVersion": 6,
+      "sourceType": "module",
+      "ecmaFeatures": {
+        "jsx": true
+      }
+    },
     "env": {
       "node": true,
       "es6": true,
@@ -51,5 +58,15 @@
       "window": true,
       "document": true,
       "toastr": true
+    },
+    "settings": {
+      "import/resolver": {
+        "node": {
+          "extensions": [
+            ".js",
+            ".jsx"
+          ]
+        }
+      }
     }
   }
diff --git a/client/public/bundle.js b/client/public/bundle.js
diff --git a/client/public/bundle.js.map b/client/public/bundle.js.map
diff --git a/client/src/__tests__/components/__snapshots__/SignupForm.spec.js.snap b/client/src/__tests__/components/__snapshots__/SignupForm.spec.js.snap
@@ -22,6 +22,7 @@ exports[`Should render Signup Form correctly 1`] = `
           className="form-group"
         >
           <input
+            autoComplete="username"
             className="form-control form-control-lg"
             name="username"
             onChange={[Function]}
@@ -34,6 +35,7 @@ exports[`Should render Signup Form correctly 1`] = `
           className="form-group"
         >
           <input
+            autoComplete="email"
             className="form-control form-control-lg"
             name="email"
             onChange={[Function]}
@@ -46,6 +48,7 @@ exports[`Should render Signup Form correctly 1`] = `
           className="form-group"
         >
           <input
+            autoComplete="new-password"
             className="form-control form-control-lg"
             name="password"
             onChange={[Function]}
@@ -54,9 +57,6 @@ exports[`Should render Signup Form correctly 1`] = `
             value=""
           />
         </div>
-        <LoaderComp
-          loaded={true}
-        />
         <input
           className="btn submit-btn size-bt btn-block"
           type="submit"

diff --git a/client/src/actions/recipes.js b/client/src/actions/recipes.js
@@ -194,7 +194,6 @@ export const startUpvoteRecipe = id => (dispatch, getstate) =>
       dispatch(upVoteRecipe(res.data, authUserid));
     })
     .catch((err) => {
-      console.log('the error', err);
       if (
         err.response.data.message ===
         'You need to be logged in to perform this action.'

diff --git a/client/src/actions/signinRequest.js b/client/src/actions/signinRequest.js
@@ -1,7 +1,5 @@
-import axios from 'axios';
 import jwt from 'jsonwebtoken';
 import { SET_CURRENT_USER, GET_USER_INFORMATION } from './types';
-import setAuthToken from '../utils/setAuthToken';
 import instance from '../utils/axios';
 import './toastrConfig';
 

diff --git a/client/src/actions/userSignupAction.js b/client/src/actions/userSignupAction.js
@@ -1,6 +1,4 @@
-import axios from 'axios';
 import jwt from 'jsonwebtoken';
-import setAuthToken from '../utils/setAuthToken';
 import instance from '../utils/axios';
 import { SET_CURRENT_USER } from './types';
 

diff --git a/client/src/components/AddRecipe.jsx b/client/src/components/AddRecipe.jsx
@@ -5,7 +5,7 @@ import Footer from './Footer';
 import { startAddRecipe } from '../actions/recipes';
 
 export class AddRecipe extends Component {
-  onSubmit = recipe => {
+  onSubmit = (recipe) => {
     this.props.startAddRecipe(recipe).then(() => {
       this.props.history.push('/dashboard');
     });
@@ -22,7 +22,7 @@ export class AddRecipe extends Component {
   }
 }
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch) => {
   return {
     startAddRecipe: recipe => dispatch(startAddRecipe(recipe))
   };

diff --git a/client/src/components/Dashboard.jsx b/client/src/components/Dashboard.jsx
@@ -17,17 +17,17 @@ class Dashboard extends Component {
     let availableRecipes;
     if (this.props.recipes.length > 0) {
       availableRecipes =
-        this.props.recipes.length > 0 ? (
           this.props.recipes.map((recipe) => {
             return <RecipeEdit key={recipe.id} recipe={recipe} />;
-          })
-        ) : (
+          });
+    } else {
+      availableRecipes = (
           <p className="no-recipes-p">
             {this.props.user.username}, you do not have any recipes yet.{' '}
             <Link to="/add">Create one now.</Link>
             <Emoji text=":)" />
           </p>
-        );
+      );
     }
     return (
       <div>

diff --git a/client/src/components/Favorites.jsx b/client/src/components/Favorites.jsx
@@ -22,8 +22,8 @@ class Favorites extends Component {
     this.removeFavorite = this.removeFavorite.bind(this);
   }
   componentDidMount() {
-    this.props.startGetUserFavorites(this.props.userDetails.id);
     this.props.getUserinfo();
+    this.props.startGetUserFavorites(this.props.userDetails.id);
   }
 
   handleClearFavoriteRecipe() {
@@ -56,11 +56,11 @@ class Favorites extends Component {
         return (
           <div className="col-md-4">
             <div className="card">
-              <Link to={`/recipe/${recipe.id}`}>
-                <img className="card-img-top" alt="Pizza" src={pizza} />
+              <Link to={`/recipe/${recipe.id}`} key={index}>
+                <img className="card-img-top" alt="Pizza" src={recipe.imageUrl} />
               </Link>
               <div className="card-body">
-                <Link to={`/recipe/${recipe.id}`}>
+                <Link to={`/recipe/${recipe.id}`} key={index}>
                   <h4 className="card-title">{recipe.name}</h4>
                 </Link>
                 <p className="card-text">{recipe.description}</p>

diff --git a/client/src/components/Hompage.jsx b/client/src/components/Hompage.jsx
@@ -16,7 +16,7 @@ class Homepage extends Component {
     super(props);
     this.state = {
       loaded: true
-    }
+    };
     this.handlePaginationChange = this.handlePaginationChange.bind(this);
   }
   componentDidMount() {
@@ -128,8 +128,7 @@ class Homepage extends Component {
   }
 }
 
-const mapStateToProps = state => {
-  console.log('my reciopes', state);
+const mapStateToProps = (state) => {
   return {
     recipes: state.recipes.recipes,
     pages: state.recipes.pages

diff --git a/client/src/components/LoginForm.jsx b/client/src/components/LoginForm.jsx
@@ -9,7 +9,7 @@ class LoginForm extends Component {
     this.state = {
       email: '',
       password: '',
-      errors: {}
+      errors: {},
     };
     this.onEmailChange = this.onEmailChange.bind(this);
     this.onPasswordChange = this.onPasswordChange.bind(this);
@@ -26,15 +26,14 @@ class LoginForm extends Component {
 
   onSubmit(event) {
     event.preventDefault();
-    this.setState({ errors: {}, isLoading: true });
+    this.setState({ errors: {} });
     if (this.isValid()) {
       this.props
         .signinRequest(this.state)
         .then(() => {
           this.props.history.push('/dashboard');
         })
-        .catch(error => {
-          this.setState({ isLoading: false });
+        .catch((error) => {
           if (error === 'Invalid email or password.') {
             return toastr.error('Invalid login details');
           }
@@ -65,9 +64,10 @@ class LoginForm extends Component {
               <input
               type="email"
               name="email"
+              autoComplete="email"
               value={this.state.email}
               onChange={this.onEmailChange}
-              className={classNames("form-control form-control-lg", { "has-errors": errors.email })}
+              className={classNames('form-control form-control-lg', { 'has-errors': errors.email })}
               placeholder="Email Address" />
               {errors.email && (
                 <span className="help-block has-errors">{errors.email}</span>)}
@@ -76,14 +76,17 @@ class LoginForm extends Component {
               <input
               type="password"
               name="password"
+              autoComplete="current-password"
               value={this.state.password}
               onChange={this.onPasswordChange}
-              className={classNames("form-control form-control-lg", { "has-errors": errors.password })}
+              className={classNames('form-control form-control-lg', { 'has-errors': errors.password })}
               placeholder="Password" />
               {errors.password && (
                 <span className="help-block has-errors">{errors.password}</span>
               )}
             </div>
+            <div>
+            </div>
             <input type="submit" value="Submit" className="btn submit-btn size-bt btn-block" />
       </form>
       <p className="signin-pad"> Not yet registered? <a className="account" href="/register"> Let's hook you up with an account. </a> </p>

diff --git a/client/src/components/LoginPage.jsx b/client/src/components/LoginPage.jsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import Footer from './Footer';
 import { signinRequest } from '../actions/signinRequest';
-import LoginForm from './LoginForm.jsx';
+import LoginForm from './LoginForm';
 
 class LoginPage extends Component {
   render() {

diff --git a/client/src/components/RecipeDetails.jsx b/client/src/components/RecipeDetails.jsx
@@ -13,8 +13,6 @@ import {
   startAddReview,
   startAddFavoriteRecipes
 } from '../actions/recipes';
-import pizza from '../assets/img/pancakes.jpeg';
-import hearty from '../assets/img/giphy.gif';
 
 class RecipeDetail extends Component {
   constructor(props) {
@@ -37,16 +35,6 @@ class RecipeDetail extends Component {
     this.props.getUserinfo();
   }
 
-  // componentDidUpdate() {
-  //   this.props.startGetOneRecipe(this.props.match.params.id);
-  // }
-  // componentWillReceiveProps(nextProps) {
-  //   console.log('will reci====>', nextProps.recipe);
-  //   const recipe = (nextProps.recipe) ? (nextProps.recipe) : {};
-  //   const upVotes = (recipe.upVote) ? recipe.upVote : 0;
-  //   this.setState({ recipe, upVotes })
-  // }
-
   onReviewFormChange(event) {
     event.preventDefault();
     this.setState({
@@ -104,7 +92,7 @@ class RecipeDetail extends Component {
 
       reviews =
         this.props.recipe.reviews.length > 0 ? (
-          this.props.recipe.reviews.map(review => {
+          this.props.recipe.reviews.map((review) => {
             return (
               <div className="review-div">
                 <Review

diff --git a/client/src/components/RecipeEdit.jsx b/client/src/components/RecipeEdit.jsx
@@ -31,7 +31,7 @@ class RecipeEdit extends Component {
   onRemoveRecipe() {
     this.props.startRemoveRecipe(this.props.recipe.id).then(() => {
       this.props.startGetUserRecipes();
-    })
+    });
   }
 
   render() {
@@ -114,7 +114,7 @@ class RecipeEdit extends Component {
 const mapDispatchToProps = (dispatch) => {
   return {
     startRemoveRecipe: recipeData => dispatch(startRemoveRecipe(recipeData)),
-    startGetUserRecipes: userRecipe => dispatch(startGetUserRecipes())
+    startGetUserRecipes: () => dispatch(startGetUserRecipes())
   };
 };
 

diff --git a/client/src/components/RecipesList.jsx b/client/src/components/RecipesList.jsx
@@ -32,6 +32,7 @@ export class RecipeList extends Component {
                 to={`/recipe/${this.props.recipe.id}`}
                 className="btn border border-secondary rounded"
               >
+              { this.props.recipe.views }
                 <i className="fa fa-eye" aria-hidden="true" />
               </Link>
               <Link

diff --git a/client/src/components/SignupForm.jsx b/client/src/components/SignupForm.jsx
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import LoaderComp from './LoaderComp';
 import validateInput from '../../../server/validators/validatesignup';
 import '../assets/css/signup.css';
 
@@ -14,7 +13,6 @@ export class SignupForm extends Component {
       email: '',
       password: '',
       errors: {},
-      loaded: true
     };
     this.onUsernameChange = this.onUsernameChange.bind(this);
     this.onPasswordChange = this.onPasswordChange.bind(this);
@@ -44,19 +42,17 @@ export class SignupForm extends Component {
     event.preventDefault();
 
     if (this.isValid()) {
-      this.setState({ errors: {}, loaded: false });
+      this.setState({ errors: {} });
       this.props
         .signupRequest(this.state)
         .then(() => {
           this.props.history.push('/dashboard');
         })
-        .catch(errors => {
-          this.setState({ loaded: true });
+        .catch((errors) => {
           if (errors === 'Username must be unique.') {
             return toastr.error('This username is taken.');
-          } else {
-            return toastr.error('Invalid credentials.');
           }
+          return toastr.error('Invalid credentials.');
         });
     }
   }
@@ -84,9 +80,10 @@ export class SignupForm extends Component {
               <input
               type="text"
               name="username"
+              autoComplete="username"
               value={this.state.username}
               onChange={this.onUsernameChange}
-              className={classNames("form-control form-control-lg", { "has-errors": errors.username })}
+              className={classNames('form-control form-control-lg', { 'has-errors': errors.username })}
               placeholder="Username" />
               {errors.username && (
                 <span className="help-block has-errors">{errors.username}</span>
@@ -97,6 +94,7 @@ export class SignupForm extends Component {
               <input
               type="email"
               name="email"
+              autoComplete="email"
               value={this.state.email}
               onChange={this.onEmailChange}
               className={classNames("form-control form-control-lg", { "has-errors": errors.email })}
@@ -108,17 +106,15 @@ export class SignupForm extends Component {
               <input
               type="password"
               name="password"
+              autoComplete="new-password"
               value={this.state.password}
               onChange={this.onPasswordChange}
-              className={classNames("form-control form-control-lg", { "has-errors": errors.password })}
+              className={classNames('form-control form-control-lg', { 'has-errors': errors.password })}
               placeholder="Password" />
               {errors.password && (
                 <span className="help-block has-errors">{errors.password}</span>
               )}
             </div>
-            <LoaderComp
-              loaded={this.state.loaded}
-              />
             <input type="submit" value="Submit" className="btn submit-btn size-bt btn-block" />
       </form>
       <p> Have an account? <a className="account" href="/login"> Sign in </a> </p>

diff --git a/client/src/utils/axios.js b/client/src/utils/axios.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 const instance = axios.create({
-  baseURL: 'http://localhost:8000/api/v1'
+  baseURL: '/api/v1'
 });
 
 instance.interceptors.request.use((config) => {