diff --git a/resources/scripts/components/admin/nests/NestDeleteButton.tsx b/resources/scripts/components/admin/nests/NestDeleteButton.tsx new file mode 100644 index 000000000..b3a75626d --- /dev/null +++ b/resources/scripts/components/admin/nests/NestDeleteButton.tsx @@ -0,0 +1,58 @@ +import React, { useState } from 'react'; +import { Actions, useStoreActions } from 'easy-peasy'; +import { ApplicationStore } from '@/state'; +import tw from 'twin.macro'; +import Button from '@/components/elements/Button'; +import ConfirmationModal from '@/components/elements/ConfirmationModal'; +import deleteNest from '@/api/admin/nests/deleteNest'; + +interface Props { + nestId: number; + onDeleted: () => void; +} + +export default ({ nestId, onDeleted }: Props) => { + const [ visible, setVisible ] = useState(false); + const [ loading, setLoading ] = useState(false); + + const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => actions.flashes); + + const onDelete = () => { + setLoading(true); + clearFlashes('nest'); + + deleteNest(nestId) + .then(() => { + setLoading(false); + onDeleted(); + }) + .catch(error => { + console.error(error); + clearAndAddHttpError({ key: 'nest', error }); + + setLoading(false); + setVisible(false); + }); + }; + + return ( + <> + setVisible(false)} + > + Are you sure you want to delete this nest? Deleting a nest will delete all eggs assigned to it. + + + + + ); +}; diff --git a/resources/scripts/components/admin/nests/NestEditContainer.tsx b/resources/scripts/components/admin/nests/NestEditContainer.tsx index c51e604be..30b46268f 100644 --- a/resources/scripts/components/admin/nests/NestEditContainer.tsx +++ b/resources/scripts/components/admin/nests/NestEditContainer.tsx @@ -1,5 +1,7 @@ +import LocationDeleteButton from '@/components/admin/locations/LocationDeleteButton'; +import NestDeleteButton from '@/components/admin/nests/NestDeleteButton'; import React, { useEffect, useState } from 'react'; -import { NavLink, useRouteMatch } from 'react-router-dom'; +import { NavLink, useHistory, useRouteMatch } from 'react-router-dom'; import tw from 'twin.macro'; import AdminContentBlock from '@/components/admin/AdminContentBlock'; import Spinner from '@/components/elements/Spinner'; @@ -60,7 +62,10 @@ interface Values { } const EditInformationContainer = () => { + const history = useHistory(); + const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => actions.flashes); + const nest = Context.useStoreState(state => state.nest); const setNest = Context.useStoreActions(actions => actions.setNest); @@ -119,10 +124,19 @@ const EditInformationContainer = () => { /> -
- +
+
+ history.push('/admin/nests')} + /> +
+ +
+ +