From 89a4949e9cd6ee3f5839701ec9905ca116af070d Mon Sep 17 00:00:00 2001 From: Silvia Dominguez Date: Mon, 5 Feb 2024 09:51:10 +0100 Subject: [PATCH 01/10] add delete plant button --- frontend/src/pages/EditPlant/index.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/EditPlant/index.tsx b/frontend/src/pages/EditPlant/index.tsx index 7318216..0f3eae6 100644 --- a/frontend/src/pages/EditPlant/index.tsx +++ b/frontend/src/pages/EditPlant/index.tsx @@ -8,7 +8,7 @@ import { 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'; @@ -86,9 +86,18 @@ const EditPlant = () => { }, }} /> -

- {plant ? plant.name : 'Add New Plant'} -

+
+

+ {plant ? plant.name : 'Add New Plant'} +

+ + {plant && ( + + )} +
+
Date: Mon, 5 Feb 2024 10:15:09 +0100 Subject: [PATCH 02/10] add syling and api delete call --- frontend/src/pages/EditPlant/index.tsx | 22 ++++++++++++++++++---- frontend/src/services/plantsService.ts | 5 +++++ 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/EditPlant/index.tsx b/frontend/src/pages/EditPlant/index.tsx index 5acf3e4..c88c5d2 100644 --- a/frontend/src/pages/EditPlant/index.tsx +++ b/frontend/src/pages/EditPlant/index.tsx @@ -4,6 +4,7 @@ import { NewPlant, Plant, addPlant, + deletePlant, getPlantById, updatePlant, } from '../../services/plantsService'; @@ -18,7 +19,7 @@ import { useHouseholds } from '../../hooks/useHouseholds'; const EditPlant = () => { const [searchParams] = useSearchParams(); - const { householdId } = useParams(); + const { householdId, plantId } = useParams(); const [plant, setPlant] = useState(null); const navigate = useNavigate(); const { user } = useAuth(); @@ -73,6 +74,16 @@ const EditPlant = () => { } }; + // const deletePlant = async + const deletePlantById = async () => { + if (plantId) { + await deletePlant(plantId); + const response = await getHouseholdsForUser(user.id); + setHouseholds(response); + navigate(`/?deletedHousehold=${householdName}`); + } + }; + return (
{ }, }} /> -
+

{plant ? plant.name : 'Add New Plant'}

- {plant && ( + {/* {plant && ( - )} + )} */} +
diff --git a/frontend/src/services/plantsService.ts b/frontend/src/services/plantsService.ts index 9f4fd98..61e6ee6 100644 --- 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 => { + const response = await api.delete(`${plantsUrlEndpoint}/${plantId}`); + return response.data; +}; From 221fef0eeba32f05c9a9953f9e19f434cfa0e465 Mon Sep 17 00:00:00 2001 From: Silvia Dominguez Date: Mon, 5 Feb 2024 10:42:21 +0100 Subject: [PATCH 03/10] feat: add delete plant logic --- frontend/src/pages/EditPlant/index.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/frontend/src/pages/EditPlant/index.tsx b/frontend/src/pages/EditPlant/index.tsx index b620910..ea557f5 100644 --- a/frontend/src/pages/EditPlant/index.tsx +++ b/frontend/src/pages/EditPlant/index.tsx @@ -19,12 +19,13 @@ import { useHouseholds } from '../../hooks/useHouseholds'; const EditPlant = () => { const [searchParams] = useSearchParams(); - const { householdId, plantId } = useParams(); + const { householdId } = useParams(); const [plant, setPlant] = useState(null); const navigate = useNavigate(); const { user } = useAuth(); const { setHouseholds } = useHouseholds(); + const plantBeingEdited = searchParams.get('plant'); const { register, handleSubmit, @@ -34,7 +35,7 @@ const EditPlant = () => { useEffect(() => { const fetchPlant = async () => { - const plantBeingEdited = searchParams.get('plant'); + if (plantBeingEdited) { const plant = await getPlantById(plantBeingEdited); setPlant(plant); @@ -74,13 +75,13 @@ const EditPlant = () => { } }; - // const deletePlant = async - const deletePlantById = async () => { - if (plantId) { - await deletePlant(plantId); - const response = await getHouseholdsForUser(user.id); - setHouseholds(response); - navigate(`/?deletedHousehold=${householdName}`); + //wip + + const handleClick = async () => { + if (plantBeingEdited && user) { + await deletePlant(plantBeingEdited); + navigate(`/${householdId}/plants/?deleted=true`); + console.log('deleted', plantBeingEdited) } }; @@ -100,12 +101,13 @@ const EditPlant = () => { {plant ? plant.name : 'Add New Plant'} + {/* delete button */} {/* {plant && ( )} */} -
From 743b6883e390082ad089903f0342e2dd6591f2ab Mon Sep 17 00:00:00 2001 From: Silvia Dominguez Date: Mon, 5 Feb 2024 10:59:27 +0100 Subject: [PATCH 04/10] feat: add toast for successfully deleted plant --- frontend/src/pages/EditPlant/index.tsx | 12 +----------- frontend/src/pages/Plants/index.tsx | 18 +++++++++++++++++- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/frontend/src/pages/EditPlant/index.tsx b/frontend/src/pages/EditPlant/index.tsx index ea557f5..0184f97 100644 --- a/frontend/src/pages/EditPlant/index.tsx +++ b/frontend/src/pages/EditPlant/index.tsx @@ -61,7 +61,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`); @@ -75,13 +74,10 @@ const EditPlant = () => { } }; - //wip - const handleClick = async () => { if (plantBeingEdited && user) { await deletePlant(plantBeingEdited); - navigate(`/${householdId}/plants/?deleted=true`); - console.log('deleted', plantBeingEdited) + navigate(`/${householdId}/plants/?deletedPlant=${plant?.name}`); } }; @@ -101,12 +97,6 @@ const EditPlant = () => { {plant ? plant.name : 'Add New Plant'} - {/* delete button */} - {/* {plant && ( - - )} */} diff --git a/frontend/src/pages/Plants/index.tsx b/frontend/src/pages/Plants/index.tsx index 7b4684d..562f2cd 100644 --- 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) { @@ -50,6 +64,8 @@ const PlantsPage = () => { } }; fetchData(); + + // const }, [householdId, households]); const sortedPlants = [...plants].sort((a, b) => { From 60764a5e0fab344bfc46f7db4ff4f71c985c99e6 Mon Sep 17 00:00:00 2001 From: Silvia Dominguez Date: Mon, 5 Feb 2024 11:32:45 +0100 Subject: [PATCH 05/10] feat: implemented modal and methods --- frontend/src/pages/EditPlant/index.tsx | 38 ++++++++++++++++++++++++-- 1 file changed, 35 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/EditPlant/index.tsx b/frontend/src/pages/EditPlant/index.tsx index 0184f97..7fc1c4b 100644 --- a/frontend/src/pages/EditPlant/index.tsx +++ b/frontend/src/pages/EditPlant/index.tsx @@ -35,7 +35,6 @@ const EditPlant = () => { useEffect(() => { const fetchPlant = async () => { - if (plantBeingEdited) { const plant = await getPlantById(plantBeingEdited); setPlant(plant); @@ -74,13 +73,17 @@ const EditPlant = () => { } }; - const handleClick = async () => { + const deletePlantFromHousehold = async () => { if (plantBeingEdited && user) { await deletePlant(plantBeingEdited); navigate(`/${householdId}/plants/?deletedPlant=${plant?.name}`); } }; + const closeModal = (id: string) => { + (document.getElementById(id) as HTMLDialogElement | null)?.close(); + }; + return (
{ }, }} /> + + +
+

+ Would you like to delete {plant?.name}? +

+ + + + +
+ +

{plant ? plant.name : 'Add New Plant'}

-
From 9c0c085862b9bfcb80212b7d6920377864a513a3 Mon Sep 17 00:00:00 2001 From: Silvia Dominguez Date: Mon, 5 Feb 2024 11:47:42 +0100 Subject: [PATCH 06/10] chore: small comment for clarity --- frontend/src/pages/EditPlant/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/pages/EditPlant/index.tsx b/frontend/src/pages/EditPlant/index.tsx index 7fc1c4b..ea615d7 100644 --- a/frontend/src/pages/EditPlant/index.tsx +++ b/frontend/src/pages/EditPlant/index.tsx @@ -96,6 +96,7 @@ const EditPlant = () => { }} /> + {/* Delete plant modal */}

From c80faa803e4b645d92c8825f5a04ade34950b0bd Mon Sep 17 00:00:00 2001 From: Silvia Dominguez Date: Mon, 5 Feb 2024 11:48:17 +0100 Subject: [PATCH 07/10] error handling for Plant page --- frontend/src/pages/Plant/index.tsx | 45 ++++++++++++++++++++--------- frontend/src/pages/Plants/index.tsx | 2 -- 2 files changed, 32 insertions(+), 15 deletions(-) diff --git a/frontend/src/pages/Plant/index.tsx b/frontend/src/pages/Plant/index.tsx index 8a9bfb6..ed34a1f 100644 --- a/frontend/src/pages/Plant/index.tsx +++ b/frontend/src/pages/Plant/index.tsx @@ -17,31 +17,38 @@ 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(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) } setIsLoading(false); }; @@ -112,9 +119,21 @@ const PlantPage = () => {

- {isLoading && viewLoadingSkeleton()} + {/* Check for error state */} + {error && ( +
+ +

+ An error occured while fetching plant +

+ + + +
+ )} + {plant && (
{ } }; fetchData(); - - // const }, [householdId, households]); const sortedPlants = [...plants].sort((a, b) => { From f198eb680443be2058dafd9dff212749eb4e5938 Mon Sep 17 00:00:00 2001 From: Silvia Dominguez Date: Mon, 5 Feb 2024 15:00:40 +0100 Subject: [PATCH 08/10] fix: removed delete button when creating new plant --- frontend/src/pages/EditPlant/index.tsx | 37 ++++++++++++++------------ 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/frontend/src/pages/EditPlant/index.tsx b/frontend/src/pages/EditPlant/index.tsx index ea615d7..b6d3a00 100644 --- a/frontend/src/pages/EditPlant/index.tsx +++ b/frontend/src/pages/EditPlant/index.tsx @@ -116,23 +116,26 @@ const EditPlant = () => {
-
-

- {plant ? plant.name : 'Add New Plant'} -

- - +
+ {plant ? ( +

{plant.name}

+ ) : ( + <> +

Add New Plant

+ + + )}
From 31b4a0c2579ff8cef4205c7a02b9e4c667e48b38 Mon Sep 17 00:00:00 2001 From: Silvia Dominguez Date: Mon, 5 Feb 2024 15:01:27 +0100 Subject: [PATCH 09/10] chore: remove unnecessary check for user --- frontend/src/pages/EditPlant/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/EditPlant/index.tsx b/frontend/src/pages/EditPlant/index.tsx index b6d3a00..5d2660c 100644 --- a/frontend/src/pages/EditPlant/index.tsx +++ b/frontend/src/pages/EditPlant/index.tsx @@ -74,7 +74,7 @@ const EditPlant = () => { }; const deletePlantFromHousehold = async () => { - if (plantBeingEdited && user) { + if (plantBeingEdited) { await deletePlant(plantBeingEdited); navigate(`/${householdId}/plants/?deletedPlant=${plant?.name}`); } From fb2471db2cda19915d8d7bdbc42d9c957dd17aec Mon Sep 17 00:00:00 2001 From: Silvia Dominguez Date: Mon, 5 Feb 2024 15:02:32 +0100 Subject: [PATCH 10/10] chore: add finally in try catch --- frontend/src/pages/Plant/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/Plant/index.tsx b/frontend/src/pages/Plant/index.tsx index ed34a1f..b1f8cd3 100644 --- a/frontend/src/pages/Plant/index.tsx +++ b/frontend/src/pages/Plant/index.tsx @@ -48,9 +48,10 @@ const PlantPage = () => { } } } catch (error) { - setError(true) + setError(true); + } finally { + setIsLoading(false); } - setIsLoading(false); }; fetchData(); }, [plantId, searchParams]); @@ -133,7 +134,7 @@ const PlantPage = () => {
)} - + {plant && (