diff --git a/frontend/modules/recipe/actions/RecipeActions.js b/frontend/modules/recipe/actions/RecipeActions.js
index 224271b1..b073ca79 100644
--- 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
index 0506d289..0dd93cd3 100644
--- 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 = (
{ intl.formatMessage(messages.source) }:
@@ -48,21 +54,28 @@ const RecipeFooter = ({ id, source, username, updateDate, showEditLink, intl })
const editLink = (
);
+
+ const deleteLink = (
+
+ );
return (
-
+
{ (source) ? sourceLink : null }
{ intl.formatMessage(messages.created_by) }: { username }
{ intl.formatMessage(messages.last_updated) }: { updateDate }
-
+
{ showEditLink ? editLink : null }
+ { showEditLink ? deleteLink : null }
diff --git a/frontend/modules/recipe/components/RecipeScheme.js b/frontend/modules/recipe/components/RecipeScheme.js
index 3772ea58..747f7fa5 100644
--- 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 }
/>
diff --git a/frontend/modules/recipe/constants/RecipeConstants.js b/frontend/modules/recipe/constants/RecipeConstants.js
index ea05de5c..2b5f2fae 100644
--- 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
index 0d8537b4..c52af468 100644
--- 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
index e37f22af..16fdb8fa 100644
--- 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"
>
Source
@@ -30,7 +30,7 @@ exports[`Test Footer with Edit Link 1`] = `
@@ -55,7 +65,7 @@ exports[`Test Footer without Edit Link 1`] = `
className="row"
>
Source
@@ -77,7 +87,7 @@ exports[`Test Footer without Edit Link 1`] = `