Merge pull request #23 from dila1001/plant-delete-button

Plant delete button
dila1001 · Feb 5, 2024 · 57fff0f · 57fff0f
2 parents 29540e9 + fb2471d
commit 57fff0f
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 21 deletions.
diff --git a/frontend/src/pages/EditPlant/index.tsx b/frontend/src/pages/EditPlant/index.tsx
@@ -4,11 +4,12 @@ import {
 	NewPlant,
 	Plant,
 	addPlant,
+	deletePlant,
 	getPlantById,
 	updatePlant,
 } from '../../services/plantsService';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { FaSeedling } from 'react-icons/fa6';
+import { FaSeedling, FaTrash } from 'react-icons/fa6';
 import { Toaster } from 'react-hot-toast';
 import { formatDate } from '../../utils/dateUtils';
 import SubmitButton from '../../components/UI/SubmitButton';
@@ -24,6 +25,7 @@ const EditPlant = () => {
 	const { user } = useAuth();
 	const { setHouseholds } = useHouseholds();
 
+	const plantBeingEdited = searchParams.get('plant');
 	const {
 		register,
 		handleSubmit,
@@ -33,7 +35,6 @@ const EditPlant = () => {
 
 	useEffect(() => {
 		const fetchPlant = async () => {
-			const plantBeingEdited = searchParams.get('plant');
 			if (plantBeingEdited) {
 				const plant = await getPlantById(plantBeingEdited);
 				setPlant(plant);
@@ -59,7 +60,6 @@ const EditPlant = () => {
 		if (user) {
 			let response;
 			const updatedData = { ...data, lastWateredBy: user.firstName };
-			console.log(updatedData);
 			if (plant) {
 				response = await updatePlant(plant.id, householdId!, updatedData);
 				navigate(`/${householdId}/plants/${response?.id}?saved=true`);
@@ -73,6 +73,17 @@ const EditPlant = () => {
 		}
 	};
 
+	const deletePlantFromHousehold = async () => {
+		if (plantBeingEdited) {
+			await deletePlant(plantBeingEdited);
+			navigate(`/${householdId}/plants/?deletedPlant=${plant?.name}`);
+		}
+	};
+
+	const closeModal = (id: string) => {
+		(document.getElementById(id) as HTMLDialogElement | null)?.close();
+	};
+
 	return (
 		<div className='mx-5 my-2 flex flex-col gap-4'>
 			<Toaster
@@ -84,9 +95,49 @@ const EditPlant = () => {
 					},
 				}}
 			/>
-			<h2 className='card-title text-3xl mb-4'>
-				{plant ? plant.name : 'Add New Plant'}
-			</h2>
+
+			{/* Delete plant modal */}
+			<dialog id='delete-plant' className='modal'>
+				<div className='modal-box'>
+					<h3 className='font-bold text-lg py-4'>
+						Would you like to delete {plant?.name}?
+					</h3>
+					<form method='dialog' className='w-full flex gap-2 justify-end'>
+						<button
+							className='btn bg-accent text-white'
+							onClick={() => deletePlantFromHousehold()}
+						>
+							Yes
+						</button>
+						<button className='btn' onClick={() => closeModal('delete-plant')}>
+							No
+						</button>
+					</form>
+				</div>
+			</dialog>
+
+			<div className='flex align-start justify-between'>
+				{plant ? (
+					<h2 className='card-title text-3xl mb-4'>{plant.name}</h2>
+				) : (
+					<>
+						<h2 className='card-title text-3xl mb-4'>Add New Plant</h2>
+						<button
+							onClick={() =>
+								(
+									document.getElementById(
+										'delete-plant'
+									) as HTMLDialogElement | null
+								)?.showModal()
+							}
+							className='mb-3 pl-4 text-base-300'
+						>
+							<FaTrash />
+						</button>
+					</>
+				)}
+			</div>
+
 			<form className='flex flex-col gap-3' onSubmit={handleSubmit(onSubmit)}>
 				<input
 					type='text'

diff --git a/frontend/src/pages/Plant/index.tsx b/frontend/src/pages/Plant/index.tsx
@@ -17,33 +17,41 @@ import { getDaysLeft, getTodaysDate } from '../../utils/dateUtils';
 import toast, { Toaster } from 'react-hot-toast';
 import SubmitButton from '../../components/UI/SubmitButton';
 import { useAuth } from '../../auth/useAuth';
+import { FaHeartBroken } from 'react-icons/fa';
 
 const PlantPage = () => {
 	const { householdId, plantId } = useParams();
 	const [searchParams] = useSearchParams();
 	const [plant, setPlant] = useState<Plant | null>(null);
 	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState(false);
 	const { user } = useAuth();
 
 	useEffect(() => {
 		const fetchData = async () => {
 			const saved = searchParams.get('saved');
 			const created = searchParams.get('created');
-			if (plantId) {
-				const plant = await getPlantById(plantId);
-				setPlant(plant);
-				if (saved === 'true') {
-					toast.success(`${plant!.name} has been successfully saved`, {
-						id: 'save',
-					});
-				}
-				if (created === 'true') {
-					toast.success(`${plant!.name} has been successfully created`, {
-						id: 'created',
-					});
+
+			try {
+				if (plantId) {
+					const plant = await getPlantById(plantId);
+					setPlant(plant);
+					if (saved === 'true') {
+						toast.success(`${plant!.name} has been successfully saved`, {
+							id: 'save',
+						});
+					}
+					if (created === 'true') {
+						toast.success(`${plant!.name} has been successfully created`, {
+							id: 'created',
+						});
+					}
 				}
+			} catch (error) {
+				setError(true);
+			} finally {
+				setIsLoading(false);
 			}
-			setIsLoading(false);
 		};
 		fetchData();
 	}, [plantId, searchParams]);
@@ -112,9 +120,21 @@ const PlantPage = () => {
 					</div>
 				</div>
 			</dialog>
-
 			{isLoading && viewLoadingSkeleton()}
 
+			{/* Check for error state */}
+			{error && (
+				<div className='flex flex-col items-center justify-center h-[calc(100vh-220px)] gap-6'>
+					<FaHeartBroken className='text-warning text-[120px]' />
+					<h1 className='card-title text-neutral mb-12 text-center'>
+						An error occured while fetching plant
+					</h1>
+					<Link to={`/`}>
+						<button className='btn btn-neutral'>Go home</button>
+					</Link>
+				</div>
+			)}
+
 			{plant && (
 				<div className='mx-5 my-2 flex-row'>
 					<img

diff --git a/frontend/src/pages/Plants/index.tsx b/frontend/src/pages/Plants/index.tsx
@@ -7,7 +7,12 @@ import {
 } from '../../services/plantsService';
 import SearchBar from './SearchBar';
 import PlantCard from './PlantCard';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import {
+	Link,
+	useNavigate,
+	useParams,
+	useSearchParams,
+} from 'react-router-dom';
 import { FaPlantWilt, FaPlus } from 'react-icons/fa6';
 import { getDaysLeft, getTodaysDate } from '../../utils/dateUtils';
 import QRCode from 'react-qr-code';
@@ -31,12 +36,21 @@ const PlantsPage = () => {
 	const { households, setHouseholds } = useHouseholds();
 	const { user } = useAuth();
 	const { householdId } = useParams();
+	const [searchParams] = useSearchParams();
+
 	const navigate = useNavigate();
 
 	const users = households?.find((h) => h.id === householdId)?.users;
 	const householdName = households?.find((h) => h.id === householdId)?.name;
 
 	useEffect(() => {
+		const deletedPlant = searchParams.get('deletedPlant');
+		if (deletedPlant) {
+			toast.success(`${deletedPlant} has been successfully deleted`, {
+				id: 'delete-plant',
+			});
+		}
+
 		const fetchData = async () => {
 			try {
 				if (householdId) {

diff --git a/frontend/src/services/plantsService.ts b/frontend/src/services/plantsService.ts
@@ -83,3 +83,8 @@ export const updatePlant = async (
 	);
 	return response.data;
 };
+
+export const deletePlant = async (plantId: string): Promise<void> => {
+	const response = await api.delete(`${plantsUrlEndpoint}/${plantId}`);
+	return response.data;
+};