implement upvote and downvote

- modify the getuser's recipe controller
- modify the get all recipes controller
- create the controller for updating user profile
- redesign ui for reviews
- redesign ui for user recipes

client/src/actions/signinRequest.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import jwt from 'jsonwebtoken';
-import { SET_CURRENT_USER } from './types';
+import { SET_CURRENT_USER, GET_USER_INFORMATION } from './types';
 import setAuthToken from '../utils/setAuthToken';
 import './toastrConfig';
 
@@ -20,6 +20,13 @@ export const setCurrentUser = (user) => {
   };
 };
 
+export const getUserInformationAC = (user) => {
+  return {
+    type: GET_USER_INFORMATION,
+    user
+  };
+};
+
 /**
  * Represents a function
  * @function

client/src/assets/css/style.css

@@ -558,3 +558,34 @@ a:hover {
 .brown {
   color: brown;
 }
+
+.ReactModalPortal > div {
+  opacity: 0;
+}
+
+.ReactModalPortal .ReactModal__Overlay {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  transition: opacity 300ms ease-in-out;
+}
+
+.ReactModalPortal .ReactModal__Overlay--after-open {
+  opacity: 1;
+}
+
+.ReactModalPortal .ReactModal__Overlay--before-close {
+  opacity: 0;
+}
+
+.modal-class {
+  background: cadetblue;
+  color: white;
+  padding: 40px;
+  border-radius: 10px;
+  font-family: 'Dosis', Arial, Helvetica, sans-serif;
+}
+
+.modal-ptag {
+  align-content: center;
+}

client/src/components/Dashboard.jsx

@@ -18,9 +18,18 @@ class Dashboard extends Component {
   render() {
     let availableRecipes;
     if (this.props.recipes) {
-      availableRecipes = this.props.recipes.map(recipe => {
-        return <RecipeEdit key={recipe.id} {...recipe} />;
-      });
+      availableRecipes =
+        this.props.recipes.length > 0 ? (
+          this.props.recipes.map(recipe => {
+            return <RecipeEdit key={recipe.id} {...recipe} />;
+          })
+        ) : (
+          <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>
@@ -30,19 +39,7 @@ class Dashboard extends Component {
             Welcome to your Dashboard, {this.props.user.username}!
           </h2>
           <h4 className="dashboard-h4"> My Recipes </h4>
-          <div className="row">
-            {availableRecipes ? (
-              availableRecipes
-            ) : (
-              <div>
-                <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>
-              </div>
-            )}
-          </div>
+          <div className="row">{availableRecipes}</div>
         </div>
         <Footer />
       </div>

client/src/components/FavoriteModal.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Modal from 'react-modal';
+
+const FavoriteModal = props => (
+  <Modal
+    isOpen={!!props.selectedFavorite}
+    onRequestClose={props.handleClearFavoriteRecipe}
+    closeTimeoutMS={300}
+    className="modal-class"
+    ariaHideApp={false}
+  >
+    <h3> Remove recipe from list of favorites?</h3>
+    <div className="group-btn">
+      <button
+        className="btn btn-danger user-btn"
+        onClick={props.removeFavorite}
+      >
+        Yes
+      </button>
+      <button
+        className="btn user-btn"
+        onClick={props.handleClearFavoriteRecipe}
+      >
+        No
+      </button>
+    </div>
+  </Modal>
+);
+
+export default FavoriteModal;

client/src/components/Favorites.jsx

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import Emoji from 'react-emoji-render';
+import FavoriteModal from './FavoriteModal';
 import Footer from './Footer';
 import pizza from '../assets/img/pizzza.jpg';
 import {
@@ -12,19 +13,38 @@ import {
 class Favorites extends Component {
   constructor(props) {
     super(props);
-    this.favoriteRecipes = this.favoriteRecipes.bind(this);
+    this.state = {
+      selectedFavorite: undefined
+    };
+    this.selectFavorite = this.selectFavorite.bind(this);
+    this.handleClearFavoriteRecipe = this.handleClearFavoriteRecipe.bind(this);
+    this.removeFavorite = this.removeFavorite.bind(this);
   }
   componentDidMount() {
     this.props.startGetUserFavorites(this.props.user.id);
   }
 
+  handleClearFavoriteRecipe() {
+    this.setState(() => ({
+      selectedFavorite: undefined
+    }));
+  }
+
   componentDidUpdate() {
     this.props.startGetUserFavorites(this.props.user.id);
   }
 
-  favoriteRecipes(event) {
-    event.preventDefault();
+  selectFavorite() {
+    this.setState(() => ({
+      selectedFavorite: this.props.recipes[0].id
+    }));
+  }
+
+  removeFavorite() {
     this.props.startAddFavoriteRecipes(this.props.recipes[0].id);
+    this.setState(() => ({
+      selectedFavorite: undefined
+    }));
   }
 
   render() {
@@ -47,7 +67,7 @@ class Favorites extends Component {
                   style={{ textAlign: 'justify' }}
                 >
                   <button
-                    onClick={this.favoriteRecipes}
+                    onClick={this.selectFavorite}
                     className="btn btn-danger"
                     role="button"
                   >
@@ -61,6 +81,11 @@ class Favorites extends Component {
                 </small>
               </div>
             </div>
+            <FavoriteModal
+              selectedFavorite={this.state.selectedFavorite}
+              handleClearFavoriteRecipe={this.handleClearFavoriteRecipe}
+              removeFavorite={this.removeFavorite}
+            />
           </div>
         );
       });

client/src/components/Modal.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Modal from 'react-modal';
+
+const DeleteModal = props => (
+  <Modal
+    isOpen={!!props.selectedRecipe}
+    contentLabel="Delete Recipe?"
+    onRequestClose={props.handleClearSelectedRecipe}
+    closeTimeoutMS={300}
+    className="modal-class"
+    ariaHideApp={false}
+  >
+    <h3 className="modal-ptag"> Delete Recipe? </h3>
+    <p className="modal-ptag"> Do you want to delete this recipe?</p>
+    <div className="group-btn">
+      <button
+        className="btn btn-danger user-btn"
+        onClick={props.onRemoveRecipe}
+      >
+        Yes
+      </button>
+      <button
+        className="btn user-btn"
+        onClick={props.handleClearSelectedRecipe}
+      >
+        No
+      </button>
+    </div>
+  </Modal>
+);
+
+export default DeleteModal;

client/src/components/ProfilePage.jsx

@@ -1,29 +1,41 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import Footer from './Footer';
-import { startGetUserInfo } from '../actions/signinRequest';
+import { getUserInformation } from '../actions/signinRequest';
 import cool from '../assets/img/cooll.jpg';
 
-const ProfilePage = props => (
-  <div>
+class ProfilePage extends Component {
+  constructor(props) {
+    super(props);
+  }
+  componentDidMount() {
+    getUserInformation(this.props.userInformation.id)
+  }
+  render() {
+    return (
+    <div>
     <main className="container">
       <h1 className="profile-h1">My Profile</h1>
       <div className="profile-card">
         <img src={cool} alt="John" className="profile-image" />
         <p className="profile-email">Username</p>
-        <p className="prop-username"> {props.userInformation.username} </p>
+        <p className="prop-username"> {this.props.userInformation.username} </p>
         <p className="profile-email">Email Address</p>
-        <p className="prop-email"> {props.userInformation.emailAddress} </p>
+        <p className="prop-email"> {this.props.userInformation.emailAddress} </p>
       </div>
     </main>
     <Footer />
   </div>
-);
+    )
+  }
+};
 
 const mapStateToProps = (state, props) => {
+  console.log('user details', state);
   return {
     userInformation: state.auth.user
   };
 };
 
-export default connect(mapStateToProps, { startGetUserInfo })(ProfilePage);
+
+export default connect(mapStateToProps, { getUserInformation })(ProfilePage);

client/src/components/RecipeEdit.jsx

@@ -1,18 +1,37 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
+import Modal from './Modal';
 import { startRemoveRecipe } from '../actions/recipes';
 import pizza from '../assets/img/pizzza.jpg';
 
 class RecipeEdit extends Component {
   constructor(props) {
     super(props);
-    this.onDeleteRecipe = this.onDeleteRecipe.bind(this);
+    this.state = {
+      selectedRecipe: undefined
+    };
+    this.selectRecipe = this.selectRecipe.bind(this);
+    this.handleClearSelectedRecipe = this.handleClearSelectedRecipe.bind(this);
+    this.onRemoveRecipe = this.onRemoveRecipe.bind(this);
   }
 
-  onDeleteRecipe() {
+  handleClearSelectedRecipe() {
+    this.setState(() => ({
+      selectedRecipe: undefined
+    }));
+  }
+
+  selectRecipe() {
+    this.setState(() => ({
+      selectedRecipe: this.props.id
+    }));
+  }
+
+  onRemoveRecipe() {
     this.props.startRemoveRecipe(this.props.id);
   }
+
   render() {
     return (
       <div className="col-md-4">
@@ -39,7 +58,7 @@ class RecipeEdit extends Component {
                   <i className="far fa-edit brown" />{' '}
                 </Link>
                 <button
-                  onClick={this.onDeleteRecipe}
+                  onClick={this.selectRecipe}
                   className="btn user-btn"
                   role="button"
                 >
@@ -67,7 +86,8 @@ class RecipeEdit extends Component {
                   className="btn user-btn user-btn-special"
                   role="button"
                 >
-                  {this.props.recipe[0].favorites} <i className="fa fa-heart crimson" />
+                  {this.props.recipe[0].favorites}{' '}
+                  <i className="fa fa-heart crimson" />
                 </button>
               </div>
             </div>
@@ -78,6 +98,11 @@ class RecipeEdit extends Component {
             </small>
           </div>
         </div>
+        <Modal
+          selectedRecipe={this.state.selectedRecipe}
+          handleClearSelectedRecipe={this.handleClearSelectedRecipe}
+          onRemoveRecipe={this.onRemoveRecipe}
+        />
       </div>
     );
   }

client/src/reducers/recipes.js

@@ -1,6 +1,5 @@
 const recipeDefaultState = {
   pages: 0,
-  voters: 0,
   recipes: [],
   userRecipe: [],
   singleRecipe: '',