Merge pull request #327 from RyanNoelk/dev

adding deletion of recipes on the UI (#326)
RyanNoelk · Jan 25, 2018 · 718ce7f · 718ce7f
2 parents a7e86df + b6e2a17
commit 718ce7f
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 13 deletions.
diff --git a/frontend/modules/recipe/actions/RecipeActions.js b/frontend/modules/recipe/actions/RecipeActions.js
@@ -12,6 +12,17 @@ export const load = (id) => {
   }
 };
 
+export const deleteRecipe = (id) => {
+  return (dispatch) => {
+    request()
+      .delete(serverURLs.recipe + id + "/")
+      .then(res => {
+        dispatch({type: RecipeConstants.RECIPE_DELETE});
+        history.push('/browse');
+      })
+  }
+};
+
 export const updateServings = (key, value, recipe) => {
   return (dispatch) => {
     dispatch({

diff --git a/frontend/modules/recipe/components/RecipeFooter.js b/frontend/modules/recipe/components/RecipeFooter.js
@@ -6,7 +6,7 @@ import {
     defineMessages,
 } from 'react-intl'
 
-const RecipeFooter = ({ id, source, username, updateDate, showEditLink, intl }) => {
+const RecipeFooter = ({ id, source, username, updateDate, showEditLink, deleteRecipe, intl }) => {
   const messages = defineMessages({
     source: {
       id: 'recipe.source',
@@ -23,10 +23,10 @@ const RecipeFooter = ({ id, source, username, updateDate, showEditLink, intl })
       description: 'Last Updated',
       defaultMessage: 'Last Updated'
     },
-    edit_recipe: {
-      id: 'recipe.edit_recipe',
-      description: 'Edit recipe button text',
-      defaultMessage: 'Edit recipe'
+    confirm_delete: {
+      id: 'recipe.confirm_delete',
+      description: 'Are you sure you want to delete this recipe?',
+      defaultMessage: 'Are you sure you want to delete this recipe?'
     },
   });
 
@@ -38,6 +38,12 @@ const RecipeFooter = ({ id, source, username, updateDate, showEditLink, intl })
     hostname = a.hostname;
   }
 
+  const handleDelete = () => {
+    if (confirm(intl.formatMessage(messages.confirm_delete))) {
+      deleteRecipe(id)
+    }
+  };
+
   const sourceLink = (
     <div>
       { intl.formatMessage(messages.source) }:
@@ -48,21 +54,28 @@ const RecipeFooter = ({ id, source, username, updateDate, showEditLink, intl })
   const editLink = (
     <Link to={ "/recipe/edit/" + id }>
       <button className="btn btn-primary btn-sm">
-        { intl.formatMessage(messages.edit_recipe) }
+        <span className="glyphicon glyphicon-pencil"/>
       </button>
     </Link>
   );
+
+  const deleteLink = (
+    <button className="btn btn-danger btn-sm" onClick={ handleDelete }>
+      <span className="glyphicon glyphicon-trash"/>
+    </button>
+  );
 
   return (
     <div className="panel-footer">
       <div className="row">
-        <div className="col-lg-10 col-md-6 col-xs-8">
+        <div className="col-xs-6">
           { (source) ? sourceLink : null }
           <div>{ intl.formatMessage(messages.created_by) }: { username }</div>
           <div>{ intl.formatMessage(messages.last_updated) }: { updateDate }</div>
         </div>
-        <div className="col-lg-2 col-md-6 col-xs-4 pull-right text-right">
+        <div className="col-xs-6 pull-right text-right">
           { showEditLink ? editLink : null }
+          { showEditLink ? deleteLink : null }
         </div>
       </div>
     </div>

diff --git a/frontend/modules/recipe/components/RecipeScheme.js b/frontend/modules/recipe/components/RecipeScheme.js
@@ -89,6 +89,7 @@ class RecipeScheme extends React.Component {
             source={ this.props.source }
             username={ this.props.username }
             updateDate={ this.props.update_date }
+            deleteRecipe={ this.props.recipeActions.deleteRecipe }
             showEditLink={ this.props.showEditLink }
           />
         </div>

diff --git a/frontend/modules/recipe/constants/RecipeConstants.js b/frontend/modules/recipe/constants/RecipeConstants.js
@@ -1,5 +1,6 @@
 export default {
   RECIPE_LOAD: 'RECIPE_LOAD',
+  RECIPE_DELETE: 'RECIPE_DELETE',
   RECIPE_INGREDIENT: 'RECIPE_INGREDIENT',
   RECIPE_INGREDIENT_CHECK_INGREDIENT: 'RECIPE_INGREDIENT_CHECK_INGREDIENT',
   RECIPE_INGREDIENT_CHECK_SUBRECIPE: 'RECIPE_INGREDIENT_CHECK_SUBRECIPE',

diff --git a/frontend/modules/recipe/css/recipe.scss b/frontend/modules/recipe/css/recipe.scss
@@ -173,6 +173,11 @@
   .title {
     text-align: center;
   }
+  .panel-footer {
+    .btn-danger {
+      margin-left: 5px;
+    }
+  }
 }
 
 @media (max-width: $screen-xs-max) {

diff --git a/frontend/modules/recipe/tests/__snapshots__/RecipeFooter.test.js.snap b/frontend/modules/recipe/tests/__snapshots__/RecipeFooter.test.js.snap
@@ -8,7 +8,7 @@ exports[`Test Footer with Edit Link 1`] = `
     className="row"
   >
     <div
-      className="col-lg-10 col-md-6 col-xs-8"
+      className="col-xs-6"
     >
       <div>
         Source
@@ -30,7 +30,7 @@ exports[`Test Footer with Edit Link 1`] = `
       </div>
     </div>
     <div
-      className="col-lg-2 col-md-6 col-xs-4 pull-right text-right"
+      className="col-xs-6 pull-right text-right"
     >
       <a
         href="/recipe/edit/1"
@@ -39,9 +39,19 @@ exports[`Test Footer with Edit Link 1`] = `
         <button
           className="btn btn-primary btn-sm"
         >
-          Edit recipe
+          <span
+            className="glyphicon glyphicon-pencil"
+          />
         </button>
       </a>
+      <button
+        className="btn btn-danger btn-sm"
+        onClick={[Function]}
+      >
+        <span
+          className="glyphicon glyphicon-trash"
+        />
+      </button>
     </div>
   </div>
 </div>
@@ -55,7 +65,7 @@ exports[`Test Footer without Edit Link 1`] = `
     className="row"
   >
     <div
-      className="col-lg-10 col-md-6 col-xs-8"
+      className="col-xs-6"
     >
       <div>
         Source
@@ -77,7 +87,7 @@ exports[`Test Footer without Edit Link 1`] = `
       </div>
     </div>
     <div
-      className="col-lg-2 col-md-6 col-xs-4 pull-right text-right"
+      className="col-xs-6 pull-right text-right"
     />
   </div>
 </div>