From f261738de49b897377a73c1347616a63dfb52bb0 Mon Sep 17 00:00:00 2001
From: Catherine Tan <catherine95118@gmail.com>
Date: Mon, 2 Dec 2024 00:12:37 -0800
Subject: [PATCH] remove filter vales outside of components; sort All Plants
 alphabetically

---
 app/seasonal-planting-guide/page.tsx | 53 ++++++++++++++--------------
 app/view-plants/page.tsx             | 46 ++++++++++++++----------
 2 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx
index 45d940c..f56b7ec 100644
--- a/app/seasonal-planting-guide/page.tsx
+++ b/app/seasonal-planting-guide/page.tsx
@@ -18,34 +18,35 @@ import {
   StateOptionsContainer,
 } from './styles';
 
+// Declaring (static) filter options outside so they're not re-rendered
+// TODO: Maybe export shared filter options from a centralized file
+const growingSeasonOptions: DropdownOption<SeasonEnum>[] = [
+  { label: 'Spring', value: 'SPRING' },
+  { label: 'Summer', value: 'SUMMER' },
+  { label: 'Fall', value: 'FALL' },
+  { label: 'Winter', value: 'WINTER' },
+];
+const harvestSeasonOptions: DropdownOption<SeasonEnum>[] = [
+  { label: 'Spring', value: 'SPRING' },
+  { label: 'Summer', value: 'SUMMER' },
+  { label: 'Fall', value: 'FALL' },
+  { label: 'Winter', value: 'WINTER' },
+];
+const plantingTypeOptions: DropdownOption<PlantingTypeEnum>[] = [
+  { label: 'Start Seeds Indoors', value: 'INDOORS' },
+  { label: 'Start Seeds Outdoors', value: 'OUTDOORS' },
+  {
+    label: 'Plant Seedlings/Transplant Outdoors',
+    value: 'TRANSPLANT',
+  },
+];
+const usStateOptions: DropdownOption[] = [
+  { label: 'Tennessee', value: 'TENNESSEE' },
+  { label: 'Missouri', value: 'MISSOURI' },
+];
+
 export default function SeasonalPlantingGuide() {
   const { profileData, profileReady } = useProfile();
-
-  const growingSeasonOptions: DropdownOption<SeasonEnum>[] = [
-    { label: 'Spring', value: 'SPRING' },
-    { label: 'Summer', value: 'SUMMER' },
-    { label: 'Fall', value: 'FALL' },
-    { label: 'Winter', value: 'WINTER' },
-  ];
-  const harvestSeasonOptions: DropdownOption<SeasonEnum>[] = [
-    { label: 'Spring', value: 'SPRING' },
-    { label: 'Summer', value: 'SUMMER' },
-    { label: 'Fall', value: 'FALL' },
-    { label: 'Winter', value: 'WINTER' },
-  ];
-  const plantingTypeOptions: DropdownOption<PlantingTypeEnum>[] = [
-    { label: 'Start Seeds Indoors', value: 'INDOORS' },
-    { label: 'Start Seeds Outdoors', value: 'OUTDOORS' },
-    {
-      label: 'Plant Seedlings/Transplant Outdoors',
-      value: 'TRANSPLANT',
-    },
-  ];
-  const usStateOptions: DropdownOption[] = [
-    { label: 'Tennessee', value: 'TENNESSEE' },
-    { label: 'Missouri', value: 'MISSOURI' },
-  ];
-
   const [selectedGrowingSeason, setSelectedGrowingSeason] = useState<
     DropdownOption<SeasonEnum>[]
   >([]);
diff --git a/app/view-plants/page.tsx b/app/view-plants/page.tsx
index fe69735..f70a48c 100644
--- a/app/view-plants/page.tsx
+++ b/app/view-plants/page.tsx
@@ -39,6 +39,26 @@ import {
   ViewSelection,
 } from './styles';
 
+// Declaring (static) filter options outside so they're not re-rendered
+// TODO: Maybe export shared filter options from a centralized file
+const sunlightOptions: DropdownOption<SunlightEnum>[] = [
+  { label: 'Less than 2 hours', value: 'SHADE' },
+  { label: '2-4 hours', value: 'PARTIAL_SHADE' },
+  { label: '4-6 hours', value: 'PARTIAL_SUN' },
+  { label: '6+ hours', value: 'FULL' },
+];
+const difficultyOptions: DropdownOption[] = [
+  { label: 'Easy', value: 'EASY' },
+  { label: 'Moderate', value: 'MODERATE' },
+  { label: 'Hard', value: 'HARD' },
+];
+const growingSeasonOptions: DropdownOption<SeasonEnum>[] = [
+  { label: 'Spring', value: 'SPRING' },
+  { label: 'Summer', value: 'SUMMER' },
+  { label: 'Fall', value: 'FALL' },
+  { label: 'Winter', value: 'WINTER' },
+];
+
 export default function Page() {
   const router = useRouter();
   const [viewingOption, setViewingOption] = useState<'myPlants' | 'all'>(
@@ -59,31 +79,19 @@ export default function Page() {
   const user_id: UUID = '0802d796-ace8-480d-851b-d16293c74a21';
   const [selectedPlants, setSelectedPlants] = useState<Plant[]>([]);
   const [ownedPlants, setOwnedPlants] = useState<OwnedPlant[]>([]);
-
+  // TODO: replace this with state from ProfileContext
   const userState = 'TENNESSEE';
-  const sunlightOptions: DropdownOption<SunlightEnum>[] = [
-    { label: 'Less than 2 hours', value: 'SHADE' },
-    { label: '2-4 hours', value: 'PARTIAL_SHADE' },
-    { label: '4-6 hours', value: 'PARTIAL_SUN' },
-    { label: '6+ hours', value: 'FULL' },
-  ];
-  const difficultyOptions: DropdownOption[] = [
-    { label: 'Easy', value: 'EASY' },
-    { label: 'Moderate', value: 'MODERATE' },
-    { label: 'Hard', value: 'HARD' },
-  ];
-  const growingSeasonOptions: DropdownOption<SeasonEnum>[] = [
-    { label: 'Spring', value: 'SPRING' },
-    { label: 'Summer', value: 'SUMMER' },
-    { label: 'Fall', value: 'FALL' },
-    { label: 'Winter', value: 'WINTER' },
-  ];
 
   // Fetch All Plants
   useEffect(() => {
     (async () => {
       const plantList = await getAllPlants();
-      const result = plantList.filter(plant => plant.us_state === userState);
+      // Filter by user's state, since they can only access when onboarded
+      // TODO: add userState to dependency array?
+      // Sort alphabetically first
+      const result = plantList
+        .filter(plant => plant.us_state === userState)
+        .sort((a, b) => a.plant_name.localeCompare(b.plant_name));
       setPlants(result);
     })();
   }, []);