From 9e0651235fbf5a31837fe033c2ea0b0945603246 Mon Sep 17 00:00:00 2001 From: Catherine Tan Date: Sun, 29 Dec 2024 15:00:48 -0800 Subject: [PATCH] rename useTitleCase to toTitleCase; style Clear Filters button --- app/seasonal-planting-guide/page.tsx | 12 ++++++------ app/seasonal-planting-guide/styles.ts | 4 ++-- components/PlantCalendarList/index.tsx | 2 +- components/PlantCalendarRow/index.tsx | 2 +- components/PlantCard/index.tsx | 8 +++----- components/PlantCardKey/index.tsx | 4 ++-- components/YourPlantDetails/index.tsx | 4 ++-- utils/helpers.ts | 2 +- 8 files changed, 18 insertions(+), 20 deletions(-) diff --git a/app/seasonal-planting-guide/page.tsx b/app/seasonal-planting-guide/page.tsx index 9b2d48b..0a3e30e 100644 --- a/app/seasonal-planting-guide/page.tsx +++ b/app/seasonal-planting-guide/page.tsx @@ -1,6 +1,7 @@ 'use client'; import React, { useEffect, useState } from 'react'; +import { SmallButton } from '@/components/Buttons'; import FilterDropdownMultiple from '@/components/FilterDropdownMultiple'; import FilterDropdownSingle from '@/components/FilterDropdownSingle'; import { PlantCalendarList } from '@/components/PlantCalendarList'; @@ -15,7 +16,7 @@ import { seasonOptions, usStateOptions, } from '@/utils/dropdownOptions'; -import { useTitleCase } from '@/utils/helpers'; // is this necessary? +import { toTitleCase } from '@/utils/helpers'; import { useProfile } from '@/utils/ProfileProvider'; import { FilterContainer, @@ -54,9 +55,7 @@ export default function SeasonalPlantingGuide() { useEffect(() => { if (profileReady && profileData) { setSelectedUsState({ - label: - profileData.us_state.charAt(0) + - profileData.us_state.slice(1).toLowerCase(), // can't use useTitleCase here, lint error + label: toTitleCase(profileData.us_state), value: profileData.us_state, }); } @@ -107,8 +106,9 @@ export default function SeasonalPlantingGuide() { placeholder="Planting Type" disabled={!selectedUsState} /> - - + + Clear Filters + {!selectedUsState ? ( diff --git a/app/seasonal-planting-guide/styles.ts b/app/seasonal-planting-guide/styles.ts index cf67cb9..7550e4b 100644 --- a/app/seasonal-planting-guide/styles.ts +++ b/app/seasonal-planting-guide/styles.ts @@ -18,6 +18,7 @@ export const HeaderContainer = styled.div` z-index: 2; `; +//TODO: consolidate styling for Filters in view plants and seasonal planting guide export const FilterContainer = styled.div` display: flex; flex-direction: row; @@ -25,8 +26,7 @@ export const FilterContainer = styled.div` margin-top: 12px; position: relative; overflow-x: auto; - padding-top: 1px; - padding-bottom: 1px; + align-items: center; `; export const StateOptionsContainer = styled.div` diff --git a/components/PlantCalendarList/index.tsx b/components/PlantCalendarList/index.tsx index aeedb05..2a19859 100644 --- a/components/PlantCalendarList/index.tsx +++ b/components/PlantCalendarList/index.tsx @@ -40,7 +40,7 @@ const months = [ 'Dec', ]; -const MonthHeader = () => { +export const MonthHeader = () => { return ( {months.map((month, index) => ( diff --git a/components/PlantCalendarRow/index.tsx b/components/PlantCalendarRow/index.tsx index 23d2988..ab09614 100644 --- a/components/PlantCalendarRow/index.tsx +++ b/components/PlantCalendarRow/index.tsx @@ -1,7 +1,7 @@ import React, { memo, useMemo } from 'react'; import COLORS from '@/styles/colors'; import { fillCalendarGridArrayRowWithColor } from '@/utils/helpers'; -import MonthHeader from '../MonthHeader'; +import { MonthHeader } from '../PlantCalendarList'; import SeasonColorKey from '../SeasonColorKey'; import { CalendarCell, CalendarGrid } from './styles'; diff --git a/components/PlantCard/index.tsx b/components/PlantCard/index.tsx index 28bb290..72fdc94 100644 --- a/components/PlantCard/index.tsx +++ b/components/PlantCard/index.tsx @@ -1,7 +1,7 @@ import React, { memo } from 'react'; import { P1 } from '@/styles/text'; import { Plant } from '@/types/schema'; -import { mapMonthToSeason, useTitleCase } from '@/utils/helpers'; +import { mapMonthToSeason, toTitleCase } from '@/utils/helpers'; import DifficultyLevelBar from '../DifficultyLevelBar'; import Icon from '../Icon'; import { @@ -48,15 +48,13 @@ const PlantCard = memo(function PlantCard({ - {useTitleCase( - mapMonthToSeason(plant.outdoors_start) || 'Unknown', - )} + {toTitleCase(mapMonthToSeason(plant.outdoors_start) || 'Unknown')} - {useTitleCase(plant.harvest_season)} + {toTitleCase(plant.harvest_season)} diff --git a/components/PlantCardKey/index.tsx b/components/PlantCardKey/index.tsx index 672640f..c5185f1 100644 --- a/components/PlantCardKey/index.tsx +++ b/components/PlantCardKey/index.tsx @@ -4,7 +4,7 @@ import COLORS from '@/styles/colors'; import { Flex } from '@/styles/containers'; import { P3 } from '@/styles/text'; import { DifficultyLevelEnum } from '@/types/schema'; -import { useTitleCase } from '@/utils/helpers'; +import { toTitleCase } from '@/utils/helpers'; import DifficultyLevelBar from '../DifficultyLevelBar'; import Icon from '../Icon'; import { @@ -25,7 +25,7 @@ const DifficultyBarAndLabel = ({ - {useTitleCase(difficultyLevel)} + {toTitleCase(difficultyLevel)} ); }; diff --git a/components/YourPlantDetails/index.tsx b/components/YourPlantDetails/index.tsx index 53f45f9..3254f34 100644 --- a/components/YourPlantDetails/index.tsx +++ b/components/YourPlantDetails/index.tsx @@ -5,7 +5,7 @@ import COLORS from '@/styles/colors'; import { Flex } from '@/styles/containers'; import { P1, P3 } from '@/styles/text'; import { PlantingTypeEnum } from '@/types/schema'; -import { formatTimestamp, useTitleCase } from '@/utils/helpers'; +import { formatTimestamp, toTitleCase } from '@/utils/helpers'; import Icon from '../Icon'; import { Container, Header } from './style'; @@ -39,7 +39,7 @@ export default function YourPlantDetails({ {DetailRow('calendar', `Date Planted: ${formatTimestamp(datePlanted)}`)} - {DetailRow('plantHand', `Planting Type: ${useTitleCase(plantingType)}`)} + {DetailRow('plantHand', `Planting Type: ${toTitleCase(plantingType)}`)} {recentHarvestDate && DetailRow( 'plant', diff --git a/utils/helpers.ts b/utils/helpers.ts index 1655700..cefc898 100644 --- a/utils/helpers.ts +++ b/utils/helpers.ts @@ -226,7 +226,7 @@ export function checkUsState( return plant.us_state === selectedState; } -export function useTitleCase(text: string) { +export function toTitleCase(text: string) { return text.charAt(0) + text.slice(1).toLowerCase(); }