From 19c670b775bb1d62cb0cab9ce51d9b892a16b668 Mon Sep 17 00:00:00 2001 From: Sashank Balusu Date: Fri, 22 Nov 2024 01:57:50 -0800 Subject: [PATCH 01/14] styled plantpages + remove functionality --- api/supabase/queries/userPlants.ts | 12 +++ app/all-plants/[plantId]/page.tsx | 70 +++++++++++++++-- app/all-plants/[plantId]/style.ts | 81 +++++++++++++++++++ app/my-garden/[userPlantId]/page.tsx | 94 ++++++++++++++++++++--- app/my-garden/[userPlantId]/style.ts | 90 ++++++++++++++++++++++ components/Button.tsx | 5 +- components/GardeningTips/index.tsx | 13 +++- components/GardeningTips/style.ts | 17 +++- components/PlantCareDescription/index.tsx | 15 +++- components/PlantCareDescription/style.ts | 14 +++- components/YourPlantDetails/index.tsx | 4 +- components/YourPlantDetails/style.ts | 15 ++++ 12 files changed, 397 insertions(+), 33 deletions(-) create mode 100644 app/all-plants/[plantId]/style.ts create mode 100644 app/my-garden/[userPlantId]/style.ts diff --git a/api/supabase/queries/userPlants.ts b/api/supabase/queries/userPlants.ts index ce60a61..511b715 100644 --- a/api/supabase/queries/userPlants.ts +++ b/api/supabase/queries/userPlants.ts @@ -44,3 +44,15 @@ export async function getCurrentUserPlantsByUserId( } return data; } +export async function removeUserPlantById(id: UUID) { + const { data, error } = await supabase + .from('user_plants') + .delete() + .eq('id', id); + + if (error) { + console.error('Error deleting row:', error); + return null; + } + return data; +} diff --git a/app/all-plants/[plantId]/page.tsx b/app/all-plants/[plantId]/page.tsx index ce975f4..6400d8e 100644 --- a/app/all-plants/[plantId]/page.tsx +++ b/app/all-plants/[plantId]/page.tsx @@ -1,12 +1,30 @@ 'use client'; import { useEffect, useState } from 'react'; -import { useParams } from 'next/navigation'; +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 PlantCareDescription from '@/components/PlantCareDescription'; import { Plant } from '@/types/schema'; +import { + AddPlant, + BackButton, + ButtonWrapper, + Container, + Content, + Header, + HeaderContent, + NameWrapper, + PlantImage, + PlantName, + TitleWrapper, +} from './style'; export default function GeneralPlantPage() { + const router = useRouter(); + const params = useParams(); const plantId: UUID = params.plantId as UUID; const [currentPlant, setCurrentPlant] = useState(); @@ -18,12 +36,52 @@ export default function GeneralPlantPage() { getPlant(); }, [plantId]); return ( -
+ {currentPlant && ( -
-

{JSON.stringify(currentPlant)}

-
+ <> +
+ + + { + router.push(`/view-plants`); + }} + > + ← + + + + +
+ + + + + {currentPlant.plant_name} + + + Add + + + + + + + + )} -
+ ); } diff --git a/app/all-plants/[plantId]/style.ts b/app/all-plants/[plantId]/style.ts new file mode 100644 index 0000000..00a1808 --- /dev/null +++ b/app/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: -20px -20px 24px -20px; + 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; +`; diff --git a/app/my-garden/[userPlantId]/page.tsx b/app/my-garden/[userPlantId]/page.tsx index 9fd4a44..795dc80 100644 --- a/app/my-garden/[userPlantId]/page.tsx +++ b/app/my-garden/[userPlantId]/page.tsx @@ -1,17 +1,40 @@ 'use client'; import { useEffect, useState } from 'react'; -import { useParams } from 'next/navigation'; +import { useParams, useRouter } from 'next/navigation'; import { UUID } from 'crypto'; import { getMatchingPlantForUserPlant } from '@/api/supabase/queries/plants'; -import { getUserPlantById } from '@/api/supabase/queries/userPlants'; -import { Plant, UserPlant } from '@/types/schema'; +import { + getUserPlantById, + removeUserPlantById, +} from '@/api/supabase/queries/userPlants'; +import DifficultyLevelBar from '@/components/DifficultyLevelBar'; +import GardeningTips from '@/components/GardeningTips'; +import PlantCareDescription from '@/components/PlantCareDescription'; +import YourPlantDetails from '@/components/YourPlantDetails'; +import { Plant, PlantingTypeEnum, UserPlant } from '@/types/schema'; +import { + BackButton, + ButtonWrapper, + Container, + Content, + Header, + HeaderContent, + NameWrapper, + PlantImage, + PlantName, + RemoveButton, + Subtitle, + TitleWrapper, +} from './style'; export default function UserPlantPage() { + const router = useRouter(); const params = useParams(); const userPlantId: UUID = params.userPlantId as UUID; const [currentPlant, setCurrentPlant] = useState(); const [currentUserPlant, setCurrentUserPlant] = useState(); + useEffect(() => { const getPlant = async () => { const userPlant = await getUserPlantById(userPlantId); @@ -21,14 +44,65 @@ export default function UserPlantPage() { }; getPlant(); }, [userPlantId]); + async function removePlant() { + await removeUserPlantById(userPlantId); + router.push(`/view-plants`); + } + return ( -
- {currentPlant && ( -
-

{JSON.stringify(currentUserPlant)}

-

{JSON.stringify(currentPlant)}

-
+ + {currentPlant && currentUserPlant && ( + <> +
+ + + { + router.push(`/view-plants`); + }} + > + ← + + X Remove + + + +
+ + + + + {currentPlant.plant_name} + + + You have this plant in your garden! + + + + + + + + + )} -
+ ); } diff --git a/app/my-garden/[userPlantId]/style.ts b/app/my-garden/[userPlantId]/style.ts new file mode 100644 index 0000000..13f6453 --- /dev/null +++ b/app/my-garden/[userPlantId]/style.ts @@ -0,0 +1,90 @@ +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: -20px -20px 24px -20px; + 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 RemoveButton = 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; +`; + +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 Subtitle = styled.h4` + font-size: 0.75rem; + font-style: italic; + font-weight: 400; + line-height: normal; + margin: 0; + color: ${COLORS.shrub}; +`; + +export const TitleWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 2px; +`; diff --git a/components/Button.tsx b/components/Button.tsx index 1d22cc0..d2b038f 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -22,8 +22,9 @@ interface SmallRoundedButtonProps { export const SmallRoundedButton = styled.button` padding: 10px 20px; - border-radius: 50px; - border: 2px solid ${({ $secondaryColor }) => $secondaryColor}; + border-radius: 15px; + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.05); + border: 0.5px solid ${({ $secondaryColor }) => $secondaryColor}; background-color: ${({ $primaryColor }) => $primaryColor ? $primaryColor : 'white'}; color: ${({ $primaryColor, $secondaryColor }) => diff --git a/components/GardeningTips/index.tsx b/components/GardeningTips/index.tsx index 4ae34b7..682c424 100644 --- a/components/GardeningTips/index.tsx +++ b/components/GardeningTips/index.tsx @@ -1,9 +1,14 @@ 'use client'; import COLORS from '@/styles/colors'; -import { H3 } from '@/styles/text'; import Icon from '../Icon'; -import { Container, IconWrapper, TipsList, TitleWrapper } from './style'; +import { + Container, + IconWrapper, + StyledTitle, + TipsList, + TitleWrapper, +} from './style'; export default function GardeningTips({ plantName, @@ -20,7 +25,9 @@ export default function GardeningTips({ -

Gardening Tips for {plantName}

+ + Gardening Tips for {plantName} + {tipsArray.map((tip, index) => ( diff --git a/components/GardeningTips/style.ts b/components/GardeningTips/style.ts index 2a0f09c..fde7dec 100644 --- a/components/GardeningTips/style.ts +++ b/components/GardeningTips/style.ts @@ -1,7 +1,9 @@ import styled from 'styled-components'; +import COLORS from '@/styles/colors'; +import { H3 } from '@/styles/text'; export const Container = styled.div` - background-color: #f9f9f9; + background-color: ${COLORS.backgroundGrey}; padding: 1.5rem; border-radius: 8px; display: flex; @@ -25,7 +27,16 @@ export const IconWrapper = styled.span` export const TipsList = styled.ol` margin: 0; padding-left: 0; - font-size: 1rem; - line-height: 1.5; list-style-position: inside; + font-size: 0.875rem; + font-style: inherit; + font-weight: 400; + line-height: normal; +`; + +export const StyledTitle = styled(H3)` + font-size: 1rem; + font-style: normal; + font-weight: 400; + line-height: normal; `; diff --git a/components/PlantCareDescription/index.tsx b/components/PlantCareDescription/index.tsx index 6d4b019..c69bc24 100644 --- a/components/PlantCareDescription/index.tsx +++ b/components/PlantCareDescription/index.tsx @@ -1,7 +1,14 @@ 'use client'; import Icon from '../Icon'; -import { CareItem, CareText, Container, IconWrapper, Title } from './style'; +import { + CareItem, + CareText, + Container, + IconWrapper, + Strong, + Title, +} from './style'; export default function PlantCareDescription({ waterFreq, @@ -22,7 +29,7 @@ export default function PlantCareDescription({ - Water Frequency: {waterFreq} + Water Frequency: {waterFreq} @@ -30,7 +37,7 @@ export default function PlantCareDescription({ - Weeding Frequency: {weedingFreq} + Weeding Frequency: {weedingFreq} @@ -38,7 +45,7 @@ export default function PlantCareDescription({ - Sunlight Requirement: {sunlightMinHours}- + Sunlight Requirement: {sunlightMinHours}- {sunlightMaxHours} hours (Full Sun) diff --git a/components/PlantCareDescription/style.ts b/components/PlantCareDescription/style.ts index cbb935f..b6b0309 100644 --- a/components/PlantCareDescription/style.ts +++ b/components/PlantCareDescription/style.ts @@ -5,8 +5,10 @@ export const Container = styled.div` `; export const Title = styled.h2` - font-size: 1.5rem; - margin-bottom: 1rem; + font-size: 1.25rem; + font-style: normal; + font-weight: 300; + line-height: normal; `; export const CareItem = styled.div` @@ -21,5 +23,11 @@ export const IconWrapper = styled.div` `; export const CareText = styled.span` - font-size: 1rem; + font-size: 0.75rem; + font-style: normal; + font-weight: 300; + line-height: normal; +`; +export const Strong = styled.span` + font-weight: 500; `; diff --git a/components/YourPlantDetails/index.tsx b/components/YourPlantDetails/index.tsx index 47f6245..3c0889a 100644 --- a/components/YourPlantDetails/index.tsx +++ b/components/YourPlantDetails/index.tsx @@ -1,7 +1,6 @@ 'use client'; import COLORS from '@/styles/colors'; -import { H3 } from '@/styles/text'; import { PlantingTypeEnum } from '@/types/schema'; import { formatTimestamp, useTitleCase } from '@/utils/helpers'; import Icon from '../Icon'; @@ -12,6 +11,7 @@ import { DetailText, EditButton, Header, + StyledHeading, StyledIcon, } from './style'; @@ -27,7 +27,7 @@ export default function YourPlantDetails({ return (
-

Your Plant Details

+ Your Plant Details Edit
diff --git a/components/YourPlantDetails/style.ts b/components/YourPlantDetails/style.ts index db8e9b6..76a281f 100644 --- a/components/YourPlantDetails/style.ts +++ b/components/YourPlantDetails/style.ts @@ -1,5 +1,6 @@ import styled from 'styled-components'; import COLORS from '@/styles/colors'; +import { H3 } from '@/styles/text'; import { SmallRoundedButton } from '../Button'; export const Container = styled.div` @@ -18,6 +19,9 @@ export const Header = styled.div` export const EditButton = styled(SmallRoundedButton)` font-size: 0.875rem; padding: 0.25rem 0.5rem; + font-style: normal; + font-weight: 400; + line-height: normal; `; export const DetailsContainer = styled.div` display: flex; @@ -33,6 +37,10 @@ export const DetailRow = styled.div` export const DetailText = styled.span` color: ${COLORS.black}; + font-size: 0.75rem; + font-style: normal; + font-weight: 400; + line-height: normal; `; export const StyledIcon = styled.div` @@ -40,3 +48,10 @@ export const StyledIcon = styled.div` display: flex; align-items: center; `; + +export const StyledHeading = styled(H3)` + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; +`; From 6ba281c77064ad0e37eb330feed4f9d17dd997d9 Mon Sep 17 00:00:00 2001 From: Sashank Balusu Date: Fri, 22 Nov 2024 02:02:24 -0800 Subject: [PATCH 02/14] fixed background grey --- styles/colors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/colors.ts b/styles/colors.ts index 7047685..c4b37eb 100644 --- a/styles/colors.ts +++ b/styles/colors.ts @@ -12,7 +12,7 @@ const COLORS = { darkgray: '#555555', midgray: '#888888', lightgray: '#DDDDDD', - backgroundGrey: '#f9fafb', + backgroundGrey: '#F7F6F3', glimpse: '#F7F6F3', // error From e4c3025da9a5c2aca8044fae5e23d3d0621c51e1 Mon Sep 17 00:00:00 2001 From: Sashank Balusu Date: Sun, 24 Nov 2024 16:56:47 -0800 Subject: [PATCH 03/14] fixed background stretch --- app/all-plants/[plantId]/style.ts | 2 +- app/my-garden/[userPlantId]/style.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/all-plants/[plantId]/style.ts b/app/all-plants/[plantId]/style.ts index 00a1808..7bab1cb 100644 --- a/app/all-plants/[plantId]/style.ts +++ b/app/all-plants/[plantId]/style.ts @@ -7,7 +7,7 @@ export const Container = styled.div` export const Header = styled.div` background-color: ${COLORS.backgroundGrey}; - margin: -20px -20px 24px -20px; + margin: -28px -28px 24px -28px; padding: 12px 20px; padding-bottom: 27px; `; diff --git a/app/my-garden/[userPlantId]/style.ts b/app/my-garden/[userPlantId]/style.ts index 13f6453..be91662 100644 --- a/app/my-garden/[userPlantId]/style.ts +++ b/app/my-garden/[userPlantId]/style.ts @@ -7,7 +7,7 @@ export const Container = styled.div` export const Header = styled.div` background-color: ${COLORS.backgroundGrey}; - margin: -20px -20px 24px -20px; + margin: -28px -28px 24px -28px; padding: 12px 20px; padding-bottom: 27px; `; From a587c206126dffea15666f83a948576867213f7e Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Fri, 6 Dec 2024 21:44:29 -0800 Subject: [PATCH 04/14] fix styling for gardening tips --- components/GardeningTips/index.tsx | 17 +++++++---------- components/GardeningTips/style.ts | 19 ++----------------- 2 files changed, 9 insertions(+), 27 deletions(-) diff --git a/components/GardeningTips/index.tsx b/components/GardeningTips/index.tsx index 682c424..1de0563 100644 --- a/components/GardeningTips/index.tsx +++ b/components/GardeningTips/index.tsx @@ -1,14 +1,9 @@ 'use client'; import COLORS from '@/styles/colors'; +import { P1, P3 } from '@/styles/text'; import Icon from '../Icon'; -import { - Container, - IconWrapper, - StyledTitle, - TipsList, - TitleWrapper, -} from './style'; +import { Container, IconWrapper, TipsList, TitleWrapper } from './style'; export default function GardeningTips({ plantName, @@ -25,13 +20,15 @@ export default function GardeningTips({ - + Gardening Tips for {plantName} - + {tipsArray.map((tip, index) => ( -
  • {tip.trim()}
    • + + {tip.trim()} + ))}     diff --git a/components/GardeningTips/style.ts b/components/GardeningTips/style.ts index fde7dec..7f88f1e 100644 --- a/components/GardeningTips/style.ts +++ b/components/GardeningTips/style.ts @@ -1,16 +1,14 @@ import styled from 'styled-components'; import COLORS from '@/styles/colors'; -import { H3 } from '@/styles/text'; export const Container = styled.div` background-color: ${COLORS.backgroundGrey}; - padding: 1.5rem; + padding: 16px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; text-align: center; - color: #333; `; export const TitleWrapper = styled.div` @@ -21,22 +19,9 @@ export const TitleWrapper = styled.div` export const IconWrapper = styled.span` margin-right: 6px; - color: #8bc34a; + color: ${COLORS.shrub}; `; export const TipsList = styled.ol` - margin: 0; - padding-left: 0; list-style-position: inside; - font-size: 0.875rem; - font-style: inherit; - font-weight: 400; - line-height: normal; -`; - -export const StyledTitle = styled(H3)` - font-size: 1rem; - font-style: normal; - font-weight: 400; - line-height: normal; `; From da08e7663e8e4d2783d919ded22bda019857010b Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Fri, 6 Dec 2024 22:42:35 -0800 Subject: [PATCH 05/14] finalize PlantCare styling; add Sunlight helper funcs --- components/PlantCareDescription/index.tsx | 74 ++++++++++++----------- components/PlantCareDescription/style.ts | 23 +------ utils/helpers.ts | 18 ++++++ 3 files changed, 59 insertions(+), 56 deletions(-) diff --git a/components/PlantCareDescription/index.tsx b/components/PlantCareDescription/index.tsx index c69bc24..ee6e0df 100644 --- a/components/PlantCareDescription/index.tsx +++ b/components/PlantCareDescription/index.tsx @@ -1,14 +1,13 @@ 'use client'; -import Icon from '../Icon'; +import { Flex } from '@/styles/containers'; +import { H4, P3 } from '@/styles/text'; import { - CareItem, - CareText, - Container, - IconWrapper, - Strong, - Title, -} from './style'; + mapHoursToSunlightEnum, + SunlightEnumDisplayMap, +} from '@/utils/helpers'; +import Icon from '../Icon'; +import { CareItem, IconWrapper, Strong } from './style'; export default function PlantCareDescription({ waterFreq, @@ -22,33 +21,36 @@ export default function PlantCareDescription({ sunlightMaxHours: number; }) { return ( - - Plant Description - - - - - - Water Frequency: {waterFreq} - - - - - - - - Weeding Frequency: {weedingFreq} - - - - - - - - Sunlight Requirement: {sunlightMinHours}- - {sunlightMaxHours} hours (Full Sun) - - - + +

    Plant Description

    + + + + + + + Watering Frequency: {waterFreq} + + + + + + + + Weeding Frequency: {weedingFreq} + + + + + + + + Sunlight Requirement: {sunlightMinHours} + {sunlightMaxHours ? ` - ${sunlightMaxHours}` : ''} hours ( + {SunlightEnumDisplayMap[mapHoursToSunlightEnum(sunlightMinHours)]}) + + + +     ); } diff --git a/components/PlantCareDescription/style.ts b/components/PlantCareDescription/style.ts index b6b0309..3f8ffdc 100644 --- a/components/PlantCareDescription/style.ts +++ b/components/PlantCareDescription/style.ts @@ -1,33 +1,16 @@ import styled from 'styled-components'; - -export const Container = styled.div` - color: #333; -`; - -export const Title = styled.h2` - font-size: 1.25rem; - font-style: normal; - font-weight: 300; - line-height: normal; -`; +import { P3 } from '@/styles/text'; export const CareItem = styled.div` display: flex; align-items: center; - margin-bottom: 10px; `; +// this can be a shared style export const IconWrapper = styled.div` margin-right: 6px; - color: #8bc34a; `; -export const CareText = styled.span` - font-size: 0.75rem; - font-style: normal; - font-weight: 300; - line-height: normal; -`; -export const Strong = styled.span` +export const Strong = styled(P3).attrs({ as: 'span' })` font-weight: 500; `; diff --git a/utils/helpers.ts b/utils/helpers.ts index 52cefea..0dd6112 100644 --- a/utils/helpers.ts +++ b/utils/helpers.ts @@ -148,6 +148,24 @@ export function checkSearchTerm(searchTerm: string, plant: Plant) { return plant.plant_name.toLowerCase().includes(searchTerm.toLowerCase()); } +/* Maps sunlight hours to SunlightEnum for display. Only considers sunlightMinHours. +Assumes sunlightMinHours between 0-8. SunlightEnum ranges are as follows (left-inclusive): +SHADE: [0, 2), PARTIAL_SUN: [2, 4), PARTIAL_SUN: [4, 6), FULL: [6, infin) +*/ +export function mapHoursToSunlightEnum(sunlightMinHours: number): SunlightEnum { + if (sunlightMinHours < 2) return 'SHADE'; + if (sunlightMinHours < 4) return 'PARTIAL_SHADE'; + if (sunlightMinHours < 6) return 'PARTIAL_SUN'; + else return 'FULL'; +} + +export const SunlightEnumDisplayMap: Record = { + SHADE: 'Shade', + PARTIAL_SHADE: 'Partial Shade', + PARTIAL_SUN: 'Partial Sun', + FULL: 'Full Sun', +}; + export function checkSunlight( sunlightFilterValue: DropdownOption[], plant: Plant, From b56029f5bc95fa72be53bcdd139ff193f0a286db Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Fri, 6 Dec 2024 22:52:03 -0800 Subject: [PATCH 06/14] fix SunlightEnum helper func abstraction --- components/PlantCareDescription/index.tsx | 7 ++----- utils/helpers.ts | 8 ++++++-- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/components/PlantCareDescription/index.tsx b/components/PlantCareDescription/index.tsx index ee6e0df..2a23bd6 100644 --- a/components/PlantCareDescription/index.tsx +++ b/components/PlantCareDescription/index.tsx @@ -2,10 +2,7 @@ import { Flex } from '@/styles/containers'; import { H4, P3 } from '@/styles/text'; -import { - mapHoursToSunlightEnum, - SunlightEnumDisplayMap, -} from '@/utils/helpers'; +import { displaySunlightEnumFromHours } from '@/utils/helpers'; import Icon from '../Icon'; import { CareItem, IconWrapper, Strong } from './style'; @@ -47,7 +44,7 @@ export default function PlantCareDescription({ Sunlight Requirement: {sunlightMinHours} {sunlightMaxHours ? ` - ${sunlightMaxHours}` : ''} hours ( - {SunlightEnumDisplayMap[mapHoursToSunlightEnum(sunlightMinHours)]}) + {displaySunlightEnumFromHours(sunlightMinHours)}) diff --git a/utils/helpers.ts b/utils/helpers.ts index 0dd6112..f41757a 100644 --- a/utils/helpers.ts +++ b/utils/helpers.ts @@ -152,20 +152,24 @@ export function checkSearchTerm(searchTerm: string, plant: Plant) { Assumes sunlightMinHours between 0-8. SunlightEnum ranges are as follows (left-inclusive): SHADE: [0, 2), PARTIAL_SUN: [2, 4), PARTIAL_SUN: [4, 6), FULL: [6, infin) */ -export function mapHoursToSunlightEnum(sunlightMinHours: number): SunlightEnum { +function mapHoursToSunlightEnum(sunlightMinHours: number): SunlightEnum { if (sunlightMinHours < 2) return 'SHADE'; if (sunlightMinHours < 4) return 'PARTIAL_SHADE'; if (sunlightMinHours < 6) return 'PARTIAL_SUN'; else return 'FULL'; } -export const SunlightEnumDisplayMap: Record = { +const SunlightEnumDisplayMap: Record = { SHADE: 'Shade', PARTIAL_SHADE: 'Partial Shade', PARTIAL_SUN: 'Partial Sun', FULL: 'Full Sun', }; +export function displaySunlightEnumFromHours(sunlightMinHours: number): String { + return SunlightEnumDisplayMap[mapHoursToSunlightEnum(sunlightMinHours)]; +} + export function checkSunlight( sunlightFilterValue: DropdownOption[], plant: Plant, From 9df0d6a6f3d1943686cb443a8cfb80a6d78def8b Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Fri, 6 Dec 2024 23:31:30 -0800 Subject: [PATCH 07/14] style YourPlantDetails; make planting_type a PlantingTypeEnum --- app/add-details/page.tsx | 5 ++-- components/PlantCareDescription/index.tsx | 2 +- components/YourPlantDetails/index.tsx | 23 +++++++---------- components/YourPlantDetails/style.ts | 31 ++++++----------------- types/schema.d.ts | 2 +- 5 files changed, 22 insertions(+), 41 deletions(-) diff --git a/app/add-details/page.tsx b/app/add-details/page.tsx index c26a79f..2183a0a 100644 --- a/app/add-details/page.tsx +++ b/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' ); } diff --git a/components/PlantCareDescription/index.tsx b/components/PlantCareDescription/index.tsx index 2a23bd6..3e3b589 100644 --- a/components/PlantCareDescription/index.tsx +++ b/components/PlantCareDescription/index.tsx @@ -18,7 +18,7 @@ export default function PlantCareDescription({ sunlightMaxHours: number; }) { return ( - +

    Plant Description

    diff --git a/components/YourPlantDetails/index.tsx b/components/YourPlantDetails/index.tsx index 3c0889a..6e4ba1d 100644 --- a/components/YourPlantDetails/index.tsx +++ b/components/YourPlantDetails/index.tsx @@ -1,6 +1,7 @@ 'use client'; import COLORS from '@/styles/colors'; +import { P1 } from '@/styles/text'; import { PlantingTypeEnum } from '@/types/schema'; import { formatTimestamp, useTitleCase } from '@/utils/helpers'; import Icon from '../Icon'; @@ -9,10 +10,8 @@ import { DetailRow, DetailsContainer, DetailText, - EditButton, Header, - StyledHeading, - StyledIcon, + // EditButton, } from './style'; export default function YourPlantDetails({ @@ -27,29 +26,25 @@ export default function YourPlantDetails({ return (
    - Your Plant Details - Edit + + Your Plant Details + + {/* Edit */}
    - - - + Date Planted: {formatTimestamp(datePlanted)} - - - + Planting Type: {useTitleCase(plantingType)} {recentHarvestDate && ( - - - + Most Recent Harvest Date: {formatTimestamp(recentHarvestDate)} diff --git a/components/YourPlantDetails/style.ts b/components/YourPlantDetails/style.ts index 76a281f..5cb51be 100644 --- a/components/YourPlantDetails/style.ts +++ b/components/YourPlantDetails/style.ts @@ -1,6 +1,6 @@ import styled from 'styled-components'; import COLORS from '@/styles/colors'; -import { H3 } from '@/styles/text'; +import { P3 } from '@/styles/text'; import { SmallRoundedButton } from '../Button'; export const Container = styled.div` @@ -13,16 +13,9 @@ export const Header = styled.div` display: flex; justify-content: space-between; align-items: center; - margin-bottom: 18px; + margin-bottom: 16px; `; -export const EditButton = styled(SmallRoundedButton)` - font-size: 0.875rem; - padding: 0.25rem 0.5rem; - font-style: normal; - font-weight: 400; - line-height: normal; -`; export const DetailsContainer = styled.div` display: flex; flex-direction: column; @@ -35,23 +28,15 @@ export const DetailRow = styled.div` gap: 6px; `; -export const DetailText = styled.span` - color: ${COLORS.black}; - font-size: 0.75rem; - font-style: normal; +export const DetailText = styled(P3)` font-weight: 400; - line-height: normal; `; -export const StyledIcon = styled.div` - color: ${COLORS.shrub}; - display: flex; - align-items: center; -`; - -export const StyledHeading = styled(H3)` - font-size: 16px; +// Not Used Yet +export const EditButton = styled(SmallRoundedButton)` + font-size: 0.875rem; + padding: 0.25rem 0.5rem; font-style: normal; - font-weight: 500; + font-weight: 400; line-height: normal; `; diff --git a/types/schema.d.ts b/types/schema.d.ts index be5b0f5..2b6b9f7 100644 --- a/types/schema.d.ts +++ b/types/schema.d.ts @@ -46,7 +46,7 @@ export interface UserPlant { plant_id: UUID; date_added: string; date_harvested: string; - planting_type: string; + planting_type: PlantingTypeEnum; } export interface DropdownOption { From 8461cbe15b1b40fccc37ca83f3d1c8e402512911 Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Fri, 6 Dec 2024 23:48:43 -0800 Subject: [PATCH 08/14] refactor PlantCareDescription --- components/PlantCareDescription.tsx | 45 +++++++++++++++++++ components/PlantCareDescription/index.tsx | 53 ----------------------- components/PlantCareDescription/style.ts | 16 ------- lib/icons.tsx | 2 +- 4 files changed, 46 insertions(+), 70 deletions(-) create mode 100644 components/PlantCareDescription.tsx delete mode 100644 components/PlantCareDescription/index.tsx delete mode 100644 components/PlantCareDescription/style.ts diff --git a/components/PlantCareDescription.tsx b/components/PlantCareDescription.tsx new file mode 100644 index 0000000..c08485b --- /dev/null +++ b/components/PlantCareDescription.tsx @@ -0,0 +1,45 @@ +'use client'; + +import { IconType } from '@/lib/icons'; +import { Flex } from '@/styles/containers'; +import { H4, P3 } from '@/styles/text'; +import { displaySunlightEnumFromHours } from '@/utils/helpers'; +import Icon from './Icon'; + +function IconRow(iconType: IconType, boldText: string, text: string) { + return ( + + + + + {boldText} + {' '} + {text} + + + ); +} + +export default function PlantCareDescription({ + waterFreq, + weedingFreq, + sunlightMinHours, + sunlightMaxHours, +}: { + waterFreq: string; + weedingFreq: string; + sunlightMinHours: number; + sunlightMaxHours: number; +}) { + const sunlightText = `${sunlightMinHours} ${sunlightMaxHours ? ` - ${sunlightMaxHours}` : ''} hours (${displaySunlightEnumFromHours(sunlightMinHours)})`; + return ( + +

    Plant Description

    + + {IconRow('wateringCan', 'Watering Frequency:', waterFreq)} + {IconRow('wateringCan', 'Weeding Frequency:', weedingFreq)} + {IconRow('sun', 'Sunlight Requirement:', sunlightText)} + +     + ); +} diff --git a/components/PlantCareDescription/index.tsx b/components/PlantCareDescription/index.tsx deleted file mode 100644 index 3e3b589..0000000 --- a/components/PlantCareDescription/index.tsx +++ /dev/null @@ -1,53 +0,0 @@ -'use client'; - -import { Flex } from '@/styles/containers'; -import { H4, P3 } from '@/styles/text'; -import { displaySunlightEnumFromHours } from '@/utils/helpers'; -import Icon from '../Icon'; -import { CareItem, IconWrapper, Strong } from './style'; - -export default function PlantCareDescription({ - waterFreq, - weedingFreq, - sunlightMinHours, - sunlightMaxHours, -}: { - waterFreq: string; - weedingFreq: string; - sunlightMinHours: number; - sunlightMaxHours: number; -}) { - return ( - -

    Plant Description

    - - - - - - - Watering Frequency: {waterFreq} - - - - - - - - Weeding Frequency: {weedingFreq} - - - - - - - - Sunlight Requirement: {sunlightMinHours} - {sunlightMaxHours ? ` - ${sunlightMaxHours}` : ''} hours ( - {displaySunlightEnumFromHours(sunlightMinHours)}) - - - -     - ); -} diff --git a/components/PlantCareDescription/style.ts b/components/PlantCareDescription/style.ts deleted file mode 100644 index 3f8ffdc..0000000 --- a/components/PlantCareDescription/style.ts +++ /dev/null @@ -1,16 +0,0 @@ -import styled from 'styled-components'; -import { P3 } from '@/styles/text'; - -export const CareItem = styled.div` - display: flex; - align-items: center; -`; - -// this can be a shared style -export const IconWrapper = styled.div` - margin-right: 6px; -`; - -export const Strong = styled(P3).attrs({ as: 'span' })` - font-weight: 500; -`; diff --git a/lib/icons.tsx b/lib/icons.tsx index ffb6ffd..48dfffb 100644 --- a/lib/icons.tsx +++ b/lib/icons.tsx @@ -27,7 +27,7 @@ export const IconSvgs = { ), - watering_can: ( + wateringCan: ( Date: Fri, 6 Dec 2024 23:57:27 -0800 Subject: [PATCH 09/14] refactor YourPlantDetails with DetailRow --- components/PlantCard/index.tsx | 2 +- components/YourPlantDetails/index.tsx | 45 +++++++++++++-------------- components/YourPlantDetails/style.ts | 17 ---------- 3 files changed, 22 insertions(+), 42 deletions(-) diff --git a/components/PlantCard/index.tsx b/components/PlantCard/index.tsx index 5d328ae..28bb290 100644 --- a/components/PlantCard/index.tsx +++ b/components/PlantCard/index.tsx @@ -60,7 +60,7 @@ const PlantCard = memo(function PlantCard({ - + {plant.water_frequency} diff --git a/components/YourPlantDetails/index.tsx b/components/YourPlantDetails/index.tsx index 6e4ba1d..8ccd441 100644 --- a/components/YourPlantDetails/index.tsx +++ b/components/YourPlantDetails/index.tsx @@ -1,19 +1,27 @@ 'use client'; +import { IconType } from '@/lib/icons'; import COLORS from '@/styles/colors'; -import { P1 } from '@/styles/text'; +import { Flex } from '@/styles/containers'; +import { P1, P3 } from '@/styles/text'; import { PlantingTypeEnum } from '@/types/schema'; import { formatTimestamp, useTitleCase } from '@/utils/helpers'; import Icon from '../Icon'; import { Container, - DetailRow, - DetailsContainer, - DetailText, Header, // EditButton, } from './style'; +function DetailRow(iconType: IconType, text: string) { + return ( + + + {text} + + ); +} + export default function YourPlantDetails({ datePlanted, plantingType, @@ -31,26 +39,15 @@ export default function YourPlantDetails({ {/* Edit */} - - - - Date Planted: {formatTimestamp(datePlanted)} - - - - - Planting Type: {useTitleCase(plantingType)} - - - {recentHarvestDate && ( - - - - Most Recent Harvest Date: {formatTimestamp(recentHarvestDate)} - - - )} - + + {DetailRow('calendar', `Date Planted: ${formatTimestamp(datePlanted)}`)} + {DetailRow('plantHand', `Planting Type: ${useTitleCase(plantingType)}`)} + {recentHarvestDate && + DetailRow( + 'plant', + `Most Recent Harvest Date: ${formatTimestamp(recentHarvestDate)}`, + )} +     ); } diff --git a/components/YourPlantDetails/style.ts b/components/YourPlantDetails/style.ts index 5cb51be..9c18f84 100644 --- a/components/YourPlantDetails/style.ts +++ b/components/YourPlantDetails/style.ts @@ -1,6 +1,5 @@ import styled from 'styled-components'; import COLORS from '@/styles/colors'; -import { P3 } from '@/styles/text'; import { SmallRoundedButton } from '../Button'; export const Container = styled.div` @@ -16,22 +15,6 @@ export const Header = styled.div` margin-bottom: 16px; `; -export const DetailsContainer = styled.div` - display: flex; - flex-direction: column; - gap: 6px; -`; - -export const DetailRow = styled.div` - display: flex; - align-items: center; - gap: 6px; -`; - -export const DetailText = styled(P3)` - font-weight: 400; -`; - // Not Used Yet export const EditButton = styled(SmallRoundedButton)` font-size: 0.875rem; From 80a2a12832e257fbbb7d0d025b8887bb5a0d6446 Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sat, 7 Dec 2024 00:52:01 -0800 Subject: [PATCH 10/14] create upsertUserPlant query --- api/supabase/queries/userPlants.ts | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/api/supabase/queries/userPlants.ts b/api/supabase/queries/userPlants.ts index 511b715..dc3e398 100644 --- a/api/supabase/queries/userPlants.ts +++ b/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 { const { data, error } = await supabase .from('user_plants') @@ -27,10 +28,11 @@ export async function getUserPlantById(userPlantId: UUID): Promise { .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 { @@ -39,11 +41,28 @@ 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 fetching userPlant: ${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') @@ -51,8 +70,7 @@ export async function removeUserPlantById(id: UUID) { .eq('id', id); if (error) { - console.error('Error deleting row:', error); - return null; + throw new Error(`Error deleting plant ${id}:' ${error}`); } return data; } From 1620f619d80ef3c40ccb36da6a1d98e3a7731073 Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sat, 7 Dec 2024 00:53:27 -0800 Subject: [PATCH 11/14] use upsertUserPlant in userPlantPage --- app/my-garden/[userPlantId]/page.tsx | 133 +++++++++++++++------------ app/my-garden/[userPlantId]/style.ts | 27 +----- types/schema.d.ts | 3 +- utils/helpers.ts | 4 + 4 files changed, 87 insertions(+), 80 deletions(-) diff --git a/app/my-garden/[userPlantId]/page.tsx b/app/my-garden/[userPlantId]/page.tsx index 795dc80..188cfa7 100644 --- a/app/my-garden/[userPlantId]/page.tsx +++ b/app/my-garden/[userPlantId]/page.tsx @@ -6,23 +6,23 @@ import { UUID } from 'crypto'; import { getMatchingPlantForUserPlant } from '@/api/supabase/queries/plants'; import { getUserPlantById, - removeUserPlantById, + upsertUserPlant, } from '@/api/supabase/queries/userPlants'; import DifficultyLevelBar from '@/components/DifficultyLevelBar'; import GardeningTips from '@/components/GardeningTips'; +import PlantCalendarRow from '@/components/PlantCalendarRow'; import PlantCareDescription from '@/components/PlantCareDescription'; import YourPlantDetails from '@/components/YourPlantDetails'; -import { Plant, PlantingTypeEnum, UserPlant } from '@/types/schema'; +import { Flex } from '@/styles/containers'; +import { H3, H4 } from '@/styles/text'; +import { Plant, UserPlant } from '@/types/schema'; +import { getCurrentTimestamp } from '@/utils/helpers'; import { BackButton, ButtonWrapper, - Container, - Content, Header, HeaderContent, - NameWrapper, PlantImage, - PlantName, RemoveButton, Subtitle, TitleWrapper, @@ -44,65 +44,84 @@ export default function UserPlantPage() { }; getPlant(); }, [userPlantId]); + async function removePlant() { - await removeUserPlantById(userPlantId); + if (!currentUserPlant) return; + try { + // Originally, removeUserPlantById(userPlantId); + currentUserPlant.date_removed = getCurrentTimestamp(); + await upsertUserPlant(currentUserPlant); + } catch (error) { + console.error(error); + } router.push(`/view-plants`); } - return ( - - {currentPlant && currentUserPlant && ( - <> -
    - - - { - router.push(`/view-plants`); - }} - > - ← - - X Remove - - - -
    - - - - - {currentPlant.plant_name} - - - You have this plant in your garden! - + return currentPlant && currentUserPlant ? ( + <> +
    + + + { + router.push(`/view-plants`); + }} + > + ← + + X Remove + + + +
    - + + +

    {currentPlant.plant_name}

    + +     + You have this plant in your garden! +     + + - + + + - +

    Planting Timeline

    + {/*add SeasonalColorKey here */} + -     - - )} -     +     +     +     + + ) : ( + <>Loading ); } diff --git a/app/my-garden/[userPlantId]/style.ts b/app/my-garden/[userPlantId]/style.ts index be91662..a91f6d3 100644 --- a/app/my-garden/[userPlantId]/style.ts +++ b/app/my-garden/[userPlantId]/style.ts @@ -1,13 +1,9 @@ import styled from 'styled-components'; import COLORS from '@/styles/colors'; - -export const Container = styled.div` - padding: 20px; -`; +import { P3 } from '@/styles/text'; export const Header = styled.div` background-color: ${COLORS.backgroundGrey}; - margin: -28px -28px 24px -28px; padding: 12px 20px; padding-bottom: 27px; `; @@ -21,6 +17,8 @@ export const ButtonWrapper = styled.div` display: flex; justify-content: space-between; width: 100%; + // padding will need to be replaced by + // absolutely styled to lie above the image in the future padding-top: 24px; `; @@ -52,19 +50,6 @@ export const PlantImage = styled.img` 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; @@ -74,12 +59,9 @@ export const PlantName = styled.h1` margin: 0; `; -export const Subtitle = styled.h4` - font-size: 0.75rem; +export const Subtitle = styled(P3)` font-style: italic; font-weight: 400; - line-height: normal; - margin: 0; color: ${COLORS.shrub}; `; @@ -87,4 +69,5 @@ export const TitleWrapper = styled.div` display: flex; flex-direction: column; gap: 2px; + margin-bottom: 12px; `; diff --git a/types/schema.d.ts b/types/schema.d.ts index 2b6b9f7..abd6b90 100644 --- a/types/schema.d.ts +++ b/types/schema.d.ts @@ -45,7 +45,8 @@ export interface UserPlant { user_id: UUID; plant_id: UUID; date_added: string; - date_harvested: string; + date_removed: string; + // recent_date_harvest: string; planting_type: PlantingTypeEnum; } diff --git a/utils/helpers.ts b/utils/helpers.ts index f41757a..364fabd 100644 --- a/utils/helpers.ts +++ b/utils/helpers.ts @@ -6,6 +6,10 @@ import { SunlightEnum, } from '@/types/schema'; +export function getCurrentTimestamp(): string { + return new Date().toISOString(); +} + /* Helper function to process late/early month fields Assumes that month is not null. Assumes that the month is a valid month string; From db325e49b0c5bc311de31191650f2211055b4908 Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sat, 7 Dec 2024 01:42:31 -0800 Subject: [PATCH 12/14] consolidate styling between plantpages in /plant-page route --- app/all-plants/[plantId]/page.tsx | 87 ----------------- app/my-garden/[userPlantId]/style.ts | 73 -------------- app/plant-page/all-plants/[plantId]/page.tsx | 95 +++++++++++++++++++ .../all-plants/[plantId]/style.ts | 0 .../my-garden/[userPlantId]/page.tsx | 61 ++++++------ .../my-garden/[userPlantId]/style.ts | 24 +++++ app/plant-page/style.ts | 64 +++++++++++++ app/view-plants/page.tsx | 4 +- 8 files changed, 215 insertions(+), 193 deletions(-) delete mode 100644 app/all-plants/[plantId]/page.tsx delete mode 100644 app/my-garden/[userPlantId]/style.ts create mode 100644 app/plant-page/all-plants/[plantId]/page.tsx rename app/{ => plant-page}/all-plants/[plantId]/style.ts (100%) rename app/{ => plant-page}/my-garden/[userPlantId]/page.tsx (79%) create mode 100644 app/plant-page/my-garden/[userPlantId]/style.ts create mode 100644 app/plant-page/style.ts diff --git a/app/all-plants/[plantId]/page.tsx b/app/all-plants/[plantId]/page.tsx deleted file mode 100644 index 6400d8e..0000000 --- a/app/all-plants/[plantId]/page.tsx +++ /dev/null @@ -1,87 +0,0 @@ -'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 PlantCareDescription from '@/components/PlantCareDescription'; -import { Plant } from '@/types/schema'; -import { - AddPlant, - BackButton, - ButtonWrapper, - Container, - Content, - Header, - HeaderContent, - NameWrapper, - PlantImage, - PlantName, - TitleWrapper, -} from './style'; - -export default function GeneralPlantPage() { - const router = useRouter(); - - const params = useParams(); - const plantId: UUID = params.plantId as UUID; - const [currentPlant, setCurrentPlant] = useState(); - useEffect(() => { - const getPlant = async () => { - const plant = await getPlantById(plantId); - setCurrentPlant(plant); - }; - getPlant(); - }, [plantId]); - return ( - - {currentPlant && ( - <> -
    - - - { - router.push(`/view-plants`); - }} - > - ← - - - - -
    - - - - - {currentPlant.plant_name} - - - Add + - - - - - - - - )} -     - ); -} diff --git a/app/my-garden/[userPlantId]/style.ts b/app/my-garden/[userPlantId]/style.ts deleted file mode 100644 index a91f6d3..0000000 --- a/app/my-garden/[userPlantId]/style.ts +++ /dev/null @@ -1,73 +0,0 @@ -import styled from 'styled-components'; -import COLORS from '@/styles/colors'; -import { P3 } from '@/styles/text'; - -export const Header = styled.div` - background-color: ${COLORS.backgroundGrey}; - 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 will need to be replaced by - // absolutely styled to lie above the image in the future - padding-top: 24px; -`; - -export const BackButton = styled.button` - background: none; - border: none; - font-size: 1.125rem; - cursor: pointer; - padding: 0; -`; - -export const RemoveButton = 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; -`; - -export const PlantImage = styled.img` - max-width: 150px; - height: auto; - margin: 9px auto 0; - display: block; -`; - -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 Subtitle = styled(P3)` - font-style: italic; - font-weight: 400; - color: ${COLORS.shrub}; -`; - -export const TitleWrapper = styled.div` - display: flex; - flex-direction: column; - gap: 2px; - margin-bottom: 12px; -`; diff --git a/app/plant-page/all-plants/[plantId]/page.tsx b/app/plant-page/all-plants/[plantId]/page.tsx new file mode 100644 index 0000000..da0c4c8 --- /dev/null +++ b/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(); + useEffect(() => { + const getPlant = async () => { + const plant = await getPlantById(plantId); + setCurrentPlant(plant); + }; + getPlant(); + }, [plantId]); + return currentPlant ? ( + <> + + + { + router.push(`/view-plants`); + }} + > + ← + + + + + + + + {currentPlant.plant_name} + + + Add + + + + + + + +

    Planting Timeline

    + {/*add SeasonalColorKey here */} + +     +     +     + + ) : ( + <>Loading + ); +} diff --git a/app/all-plants/[plantId]/style.ts b/app/plant-page/all-plants/[plantId]/style.ts similarity index 100% rename from app/all-plants/[plantId]/style.ts rename to app/plant-page/all-plants/[plantId]/style.ts diff --git a/app/my-garden/[userPlantId]/page.tsx b/app/plant-page/my-garden/[userPlantId]/page.tsx similarity index 79% rename from app/my-garden/[userPlantId]/page.tsx rename to app/plant-page/my-garden/[userPlantId]/page.tsx index 188cfa7..790465f 100644 --- a/app/my-garden/[userPlantId]/page.tsx +++ b/app/plant-page/my-garden/[userPlantId]/page.tsx @@ -14,19 +14,20 @@ import PlantCalendarRow from '@/components/PlantCalendarRow'; import PlantCareDescription from '@/components/PlantCareDescription'; import YourPlantDetails from '@/components/YourPlantDetails'; import { Flex } from '@/styles/containers'; -import { H3, H4 } from '@/styles/text'; +import { H4 } from '@/styles/text'; import { Plant, UserPlant } from '@/types/schema'; import { getCurrentTimestamp } from '@/utils/helpers'; import { BackButton, ButtonWrapper, - Header, - HeaderContent, + ComponentWrapper, + Content, + ImgHeader, + NameWrapper, PlantImage, - RemoveButton, - Subtitle, - TitleWrapper, -} from './style'; + PlantName, +} from '../../style'; +import { RemoveButton, Subtitle } from './style'; export default function UserPlantPage() { const router = useRouter(); @@ -59,33 +60,31 @@ export default function UserPlantPage() { return currentPlant && currentUserPlant ? ( <> -
    - - - { - router.push(`/view-plants`); - }} - > - ← - - X Remove - - - -
    + + + { + router.push(`/view-plants`); + }} + > + ← + + X Remove + + + - - - -

    {currentPlant.plant_name}

    + + + + {currentPlant.plant_name} - + You have this plant in your garden! -     - + +     - - + + ) : ( <>Loading diff --git a/app/plant-page/my-garden/[userPlantId]/style.ts b/app/plant-page/my-garden/[userPlantId]/style.ts new file mode 100644 index 0000000..b0351d7 --- /dev/null +++ b/app/plant-page/my-garden/[userPlantId]/style.ts @@ -0,0 +1,24 @@ +import styled from 'styled-components'; +import COLORS from '@/styles/colors'; +import { P3 } from '@/styles/text'; + +// only for UserPlantPage +export const RemoveButton = 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; +`; + +// Only for UserPlantPage +export const Subtitle = styled(P3)` + font-style: italic; + font-weight: 400; + color: ${COLORS.shrub}; +`; diff --git a/app/plant-page/style.ts b/app/plant-page/style.ts new file mode 100644 index 0000000..c0fb1c3 --- /dev/null +++ b/app/plant-page/style.ts @@ -0,0 +1,64 @@ +import styled from 'styled-components'; +import COLORS from '@/styles/colors'; +import { H3 } from '@/styles/text'; + +// Image Header +export const ImgHeader = styled.div` + display: flex; + background-color: ${COLORS.backgroundGrey}; + padding: 12px 20px; + padding-bottom: 27px; + position: relative; + height: 220px; +`; + +export const ButtonWrapper = styled.div` + display: flex; + justify-content: space-between; + width: 100%; + position: absolute; + top: 24px; + padding-left: 24px; + padding-right: 24px; +`; + +export const BackButton = styled.button` + background: none; + border: none; + font-size: 1.125rem; + cursor: pointer; + padding: 0; +`; + +export const PlantImage = styled.img` + align-self: center; + max-width: 150px; + height: auto; + margin: 9px auto 0; + display: block; +`; + +// Content +export const Content = styled.div` + display: flex; + flex-direction: column; + padding: 24px; +`; + +// Title Section +export const PlantName = styled(H3)` + text-align: center; + font-weight: 400; +`; + +export const NameWrapper = styled.div` + display: flex; + gap: 8px; + align-items: center; +`; + +export const ComponentWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 32px; +`; diff --git a/app/view-plants/page.tsx b/app/view-plants/page.tsx index 971fdad..9129167 100644 --- a/app/view-plants/page.tsx +++ b/app/view-plants/page.tsx @@ -156,7 +156,7 @@ export default function Page() { ]); function handleUserPlantCardClick(ownedPlant: OwnedPlant) { - router.push(`my-garden/${ownedPlant.userPlantId}`); + router.push(`/plant-page/my-garden/${ownedPlant.userPlantId}`); } function handlePlantCardClick(plant: Plant) { @@ -167,7 +167,7 @@ export default function Page() { setSelectedPlants([...selectedPlants, plant]); } } else { - router.push(`all-plants/${plant.id}`); + router.push(`/plant-page/all-plants/${plant.id}`); } } function handleAddPlants() { From 6d4e12820e8ab295abac2e7e3e800cda5ad30d34 Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sat, 7 Dec 2024 01:46:06 -0800 Subject: [PATCH 13/14] fix imgheader padding --- app/plant-page/style.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/plant-page/style.ts b/app/plant-page/style.ts index c0fb1c3..e11fbec 100644 --- a/app/plant-page/style.ts +++ b/app/plant-page/style.ts @@ -6,8 +6,7 @@ import { H3 } from '@/styles/text'; export const ImgHeader = styled.div` display: flex; background-color: ${COLORS.backgroundGrey}; - padding: 12px 20px; - padding-bottom: 27px; + padding-bottom: 24px; position: relative; height: 220px; `; From 6162cae0e92b2573ad622fe4a03aabd00bc41a7d Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sat, 7 Dec 2024 01:50:49 -0800 Subject: [PATCH 14/14] change String to string --- utils/helpers.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/utils/helpers.ts b/utils/helpers.ts index 364fabd..f4270c8 100644 --- a/utils/helpers.ts +++ b/utils/helpers.ts @@ -163,14 +163,14 @@ function mapHoursToSunlightEnum(sunlightMinHours: number): SunlightEnum { else return 'FULL'; } -const SunlightEnumDisplayMap: Record = { +const SunlightEnumDisplayMap: Record = { SHADE: 'Shade', PARTIAL_SHADE: 'Partial Shade', PARTIAL_SUN: 'Partial Sun', FULL: 'Full Sun', }; -export function displaySunlightEnumFromHours(sunlightMinHours: number): String { +export function displaySunlightEnumFromHours(sunlightMinHours: number): string { return SunlightEnumDisplayMap[mapHoursToSunlightEnum(sunlightMinHours)]; }