refactor mapMonthToSeason

calblueprint · Dec 2, 2024 · 2468f84 · 2468f84
1 parent 1953c46
commit 2468f84
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 63 deletions.
diff --git a/components/DifficultyLevelBar/style.ts b/components/DifficultyLevelBar/style.ts
@@ -5,18 +5,18 @@ export const IndicatorContainer = styled.div`
   gap: 2px;
 `;
 
-export const Bar = styled.div<{
-  $active: boolean;
-  $color: string;
-  $position: 'left' | 'middle' | 'right';
-}>`
-  width: 16px;
-  height: 10px;
-  background-color: ${({ $active, $color }) => ($active ? $color : '#e0e0e0')};
-  border-radius: ${({ $position }) =>
-    $position === 'left'
-      ? '8px 0 0 8px'
-      : $position === 'right'
-        ? '0 8px 8px 0'
-        : '0'};
-`;
+// export const Bar = styled.div<{
+//   $active: boolean;
+//   $color: string;
+//   $position: 'left' | 'middle' | 'right';
+// }>`
+//   width: 16px;
+//   height: 10px;
+//   background-color: ${({ $active, $color }) => ($active ? $color : '#e0e0e0')};
+//   border-radius: ${({ $position }) =>
+//     $position === 'left'
+//       ? '8px 0 0 8px'
+//       : $position === 'right'
+//         ? '0 8px 8px 0'
+//         : '0'};
+// `;
diff --git a/components/PlantCard/index.tsx b/components/PlantCard/index.tsx
@@ -1,18 +1,18 @@
 import React, { memo } from 'react';
+import { P1 } from '@/styles/text';
 import { Plant } from '@/types/schema';
 import { mapMonthToSeason, useTitleCase } from '@/utils/helpers';
 import DifficultyLevelBar from '../DifficultyLevelBar';
 import Icon from '../Icon';
 import {
   Attribute,
   AttributeContent,
-  Card,
+  CardContainer,
   CardContent,
   CardPic,
   PlantAttributes,
   PlantHeader,
   PlantImage,
-  PlantName,
   RoundCheck,
   TopRight,
 } from './styles';
@@ -29,7 +29,7 @@ const PlantCard = memo(function PlantCard({
   onClick?: () => void;
 }) {
   return (
-    <Card $isSelected={isSelected} onClick={onClick} id={plant.id}>
+    <CardContainer $isSelected={isSelected} onClick={onClick} id={plant.id}>
       {canSelect && (
         <TopRight>
           <RoundCheck checked={isSelected} readOnly id={`${plant.id}-check`} />
@@ -40,27 +40,31 @@ const PlantCard = memo(function PlantCard({
       </CardPic>
       <CardContent>
         <PlantHeader>
-          <PlantName>{plant.plant_name}</PlantName>
+          <P1 $fontWeight={400}>{plant.plant_name}</P1>
           <DifficultyLevelBar difficultyLevel={plant.difficulty_level} />
         </PlantHeader>
 
         <PlantAttributes>
           <Attribute>
             <Icon type="outdoors_growing_start"></Icon>
-            <AttributeContent>{`${useTitleCase(mapMonthToSeason(plant.outdoors_start))}`}</AttributeContent>
+            <AttributeContent>
+              {useTitleCase(
+                mapMonthToSeason(plant.outdoors_start) || 'Unknown',
+              )}
+            </AttributeContent>
           </Attribute>
           <Attribute>
-            <Icon type="outdoors_growing_end"></Icon>
-            <AttributeContent>{`${useTitleCase(mapMonthToSeason(plant.outdoors_end))}`}</AttributeContent>
+            <Icon type="harvest_season"></Icon>
+            <AttributeContent>
+              {useTitleCase(plant.harvest_season)}
+            </AttributeContent>
           </Attribute>
           <Attribute>
             <Icon type="watering_can"></Icon>
-
             <AttributeContent>{plant.water_frequency}</AttributeContent>
           </Attribute>
           <Attribute>
             <Icon type="sun"></Icon>
-
             <AttributeContent>
               {plant.sunlight_min_hours}
               {plant.sunlight_max_hours
@@ -71,7 +75,7 @@ const PlantCard = memo(function PlantCard({
           </Attribute>
         </PlantAttributes>
       </CardContent>
-    </Card>
+    </CardContainer>
   );
 });
 

diff --git a/components/PlantCard/styles.ts b/components/PlantCard/styles.ts
@@ -1,8 +1,7 @@
 import styled from 'styled-components';
 import COLORS from '@/styles/colors';
-import { H2 } from '@/styles/text';
 
-export const Card = styled.div<{ $isSelected?: boolean }>`
+export const CardContainer = styled.div<{ $isSelected?: boolean }>`
   position: relative;
   width: 168px;
   height: 200px;
@@ -28,7 +27,7 @@ export const Card = styled.div<{ $isSelected?: boolean }>`
 `;
 
 export const CardPic = styled.div`
-  height: 96px;
+  height: 92px;
   width: 100%;
   background-color: #f5f6f6;
   display: flex;
@@ -41,16 +40,14 @@ export const CardPic = styled.div`
 export const CardContent = styled.div`
   display: flex;
   flex-direction: column;
-  padding-left: 16px;
-  height: 104px;
+  padding: 12px 16px 8px 16px;
   row-gap: 6px;
-  margin-top: 10px;
+  width: 100%;
 `;
 
 export const PlantAttributes = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
   gap: 4px;
 `;
 
@@ -94,13 +91,6 @@ export const TopRight = styled.div`
   padding: 10px 10px;
 `;
 
-export const PlantName = styled(H2)`
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-`;
-
 export const AttributeContent = styled.p`
   font-size: 10px;
   font-style: normal;
@@ -114,7 +104,6 @@ export const PlantHeader = styled.div`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  width: 136px;
 `;
 
 export const PlantImage = styled.img`

diff --git a/lib/icons.tsx b/lib/icons.tsx
@@ -275,7 +275,7 @@ export const IconSvgs = {
       </defs>
     </svg>
   ),
-  outdoors_growing_end: (
+  harvest_season: (
     <svg
       width="11"
       height="11"

diff --git a/utils/helpers.ts b/utils/helpers.ts
@@ -1,4 +1,4 @@
-import { DropdownOption, Plant } from '@/types/schema';
+import { DropdownOption, Plant, SeasonEnum } from '@/types/schema';
 
 // Helper function to process late/early month fields for checkGrowingSeason
 function processPlantMonth(month: string) {
@@ -227,26 +227,26 @@ export function formatTimestamp(timestamp: string): string {
   // Return in MM/DD/YYYY format
   return `${month}/${day}/${year}`;
 }
-export function mapMonthToSeason(month: string): string {
-  month = processPlantMonth(month).toUpperCase();
-  const monthToSeason: { [key: string]: string } = {
-    JANUARY: 'WINTER',
-    FEBRUARY: 'WINTER',
-    MARCH: 'SPRING',
-    APRIL: 'SPRING',
-    MAY: 'SPRING',
-    JUNE: 'SUMMER',
-    JULY: 'SUMMER',
-    AUGUST: 'SUMMER',
-    SEPTEMBER: 'FALL',
-    OCTOBER: 'FALL',
-    NOVEMBER: 'FALL',
-    DECEMBER: 'WINTER',
-  };
 
-  const season = monthToSeason[month];
-  if (!season) {
-    throw new Error(`Invalid month: ${month}`);
-  }
-  return season;
+const monthToSeason: Record<string, SeasonEnum> = {
+  JANUARY: 'WINTER',
+  FEBRUARY: 'WINTER',
+  MARCH: 'SPRING',
+  APRIL: 'SPRING',
+  MAY: 'SPRING',
+  JUNE: 'SUMMER',
+  JULY: 'SUMMER',
+  AUGUST: 'SUMMER',
+  SEPTEMBER: 'FALL',
+  OCTOBER: 'FALL',
+  NOVEMBER: 'FALL',
+  DECEMBER: 'WINTER',
+};
+
+/* Maps a month to a season 
+if valid month (e.g. 'LATE_JANUARY' or 'FEBRUARY'), return SeasonEnum
+else return null*/
+export function mapMonthToSeason(month: string): SeasonEnum | null {
+  month = processPlantMonth(month).toUpperCase();
+  return monthToSeason[month] || null;
 }