[feat] implement remove plant functionality & style PlantPages

api/supabase/queries/userPlants.ts

@@ -17,6 +17,7 @@ export async function insertUserPlants(
     if (error) throw new Error(`Error inserting data: ${error.message}`);
   });
 }
+
 export async function getUserPlantById(userPlantId: UUID): Promise<UserPlant> {
   const { data, error } = await supabase
     .from('user_plants')
@@ -27,10 +28,11 @@ export async function getUserPlantById(userPlantId: UUID): Promise<UserPlant> {
     .single();
 
   if (error) {
-    throw new Error(`Error fetching plant ID: ${error}`);
+    throw new Error(`Error fetching plant ID ${userPlantId}: ${error.message}`);
   }
   return data;
 }
+
 export async function getCurrentUserPlantsByUserId(
   user_id: UUID,
 ): Promise<UserPlant[]> {
@@ -39,8 +41,36 @@ export async function getCurrentUserPlantsByUserId(
     .select('*')
     .eq('user_id', user_id)
     .is('date_removed', null);
+
+  if (error) {
+    throw new Error(
+      `Error fetching userPlants for user ${user_id}: ${error.message}`,
+    );
+  }
+  return data;
+}
+
+export async function upsertUserPlant(userPlant: UserPlant) {
+  const { data, error } = await supabase
+    .from('user_plants')
+    .upsert(userPlant)
+    .select();
+
+  if (error) {
+    throw new Error(`Error upserting plant ${userPlant.id}: ${error.message}`);
+  }
+  return data;
+}
+
+// removeUserPlantById is not currenlty being used
+export async function removeUserPlantById(id: UUID) {
+  const { data, error } = await supabase
+    .from('user_plants')
+    .delete()
+    .eq('id', id);
+
   if (error) {
-    throw new Error(`Error fetching userPlant: ${error}`);
+    throw new Error(`Error deleting plant ${id}:' ${error}`);
   }
   return data;
 }

app/add-details/page.tsx

@@ -88,8 +88,9 @@ export default function Home() {
   function disableNext() {
     // disable next if planting type is "SELECT" or undefined
     return !(
-      details[currentIndex - 1].planting_type &&
-      details[currentIndex - 1].planting_type !== 'SELECT'
+      details[currentIndex - 1].planting_type
+      // requires refactor of details to ensure that planting_type is PlantingTypeEnum
+      // && details[currentIndex - 1].planting_type !== 'SELECT'
     );
   }
 

app/plant-page/all-plants/[plantId]/page.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { UUID } from 'crypto';
+import { getPlantById } from '@/api/supabase/queries/plants';
+import DifficultyLevelBar from '@/components/DifficultyLevelBar';
+import GardeningTips from '@/components/GardeningTips';
+import PlantCalendarRow from '@/components/PlantCalendarRow';
+import PlantCareDescription from '@/components/PlantCareDescription';
+import { Flex } from '@/styles/containers';
+import { H4 } from '@/styles/text';
+import { Plant } from '@/types/schema';
+import {
+  BackButton,
+  ButtonWrapper,
+  ComponentWrapper,
+  Content,
+  ImgHeader,
+  NameWrapper,
+  PlantImage,
+  PlantName,
+} from '../../style';
+import { AddPlant } from './style';
+
+export default function GeneralPlantPage() {
+  const router = useRouter();
+
+  const params = useParams();
+  const plantId: UUID = params.plantId as UUID;
+  const [currentPlant, setCurrentPlant] = useState<Plant>();
+  useEffect(() => {
+    const getPlant = async () => {
+      const plant = await getPlantById(plantId);
+      setCurrentPlant(plant);
+    };
+    getPlant();
+  }, [plantId]);
+  return currentPlant ? (
+    <>
+      <ImgHeader>
+        <ButtonWrapper>
+          <BackButton
+            onClick={() => {
+              router.push(`/view-plants`);
+            }}
+          >
+            ←
+          </BackButton>
+        </ButtonWrapper>
+        <PlantImage src={currentPlant.img} alt={currentPlant.plant_name} />
+      </ImgHeader>
+      <Content>
+        <Flex $justify="between" $align="center" $mb="36px">
+          <NameWrapper>
+            <PlantName>{currentPlant.plant_name}</PlantName>
+            <DifficultyLevelBar
+              difficultyLevel={currentPlant.difficulty_level}
+            />
+          </NameWrapper>
+          <AddPlant>Add +</AddPlant>
+        </Flex>
+        <ComponentWrapper>
+          <GardeningTips
+            plantName={currentPlant.plant_name}
+            plantTips={currentPlant.plant_tips}
+          />
+
+          <PlantCareDescription
+            waterFreq={currentPlant.water_frequency}
+            weedingFreq={currentPlant.weeding_frequency}
+            sunlightMaxHours={currentPlant.sunlight_max_hours}
+            sunlightMinHours={currentPlant.sunlight_min_hours}
+          />
+          <Flex $direction="column" $gap="8px">
+            <H4>Planting Timeline</H4>
+            {/*add SeasonalColorKey here */}
+            <PlantCalendarRow
+              harvestStart={currentPlant.harvest_start}
+              harvestEnd={currentPlant.harvest_end}
+              transplantStart={currentPlant.transplant_start}
+              transplantEnd={currentPlant.transplant_end}
+              indoorsStart={currentPlant.indoors_start}
+              indoorsEnd={currentPlant.indoors_end}
+              outdoorsStart={currentPlant.outdoors_start}
+              outdoorsEnd={currentPlant.outdoors_end}
+            />
+          </Flex>
+        </ComponentWrapper>
+      </Content>
+    </>
+  ) : (
+    <>Loading</>
+  );
+}

app/plant-page/all-plants/[plantId]/style.ts

@@ -0,0 +1,81 @@
+import styled from 'styled-components';
+import COLORS from '@/styles/colors';
+
+export const Container = styled.div`
+  padding: 20px;
+`;
+
+export const Header = styled.div`
+  background-color: ${COLORS.backgroundGrey};
+  margin: -28px -28px 24px -28px;
+  padding: 12px 20px;
+  padding-bottom: 27px;
+`;
+
+export const HeaderContent = styled.div`
+  position: relative;
+  max-width: 100%;
+`;
+
+export const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-top: 24px;
+`;
+
+export const BackButton = styled.button`
+  background: none;
+  border: none;
+  font-size: 1.125rem;
+  cursor: pointer;
+  padding: 0;
+`;
+
+export const PlantImage = styled.img`
+  max-width: 150px;
+  height: auto;
+  margin: 9px auto 0;
+  display: block;
+`;
+
+export const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+
+export const NameWrapper = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8.5px;
+`;
+
+export const PlantName = styled.h1`
+  text-align: center;
+  font-size: 1.5rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin: 0;
+`;
+
+export const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+  justify-content: space-between;
+`;
+export const AddPlant = styled.button`
+  background-color: ${COLORS.shrub};
+  color: white;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-style: inherit;
+  font-weight: 400;
+  line-height: normal;
+`;