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`] = `
- Edit recipe + +
@@ -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`] = `