rename useTitleCase to toTitleCase; style Clear Filters button

calblueprint · Dec 29, 2024 · 9e06512 · 9e06512
1 parent 284883c
commit 9e06512
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 20 deletions.
diff --git 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}
           />
-
-          <button onClick={clearFilters}>Clear filters</button>
+          <SmallButton $secondaryColor={COLORS.shrub} onClick={clearFilters}>
+            Clear Filters
+          </SmallButton>
         </FilterContainer>
       </HeaderContainer>
       {!selectedUsState ? (

diff --git a/app/seasonal-planting-guide/styles.ts b/app/seasonal-planting-guide/styles.ts
@@ -18,15 +18,15 @@ 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;
   gap: 8px;
   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
@@ -40,7 +40,7 @@ const months = [
   'Dec',
 ];
 
-const MonthHeader = () => {
+export const MonthHeader = () => {
   return (
     <Styles.MonthsContainer>
       {months.map((month, index) => (

diff --git 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
@@ -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({
           <Attribute>
             <Icon type="outdoorsSeason"></Icon>
             <AttributeContent>
-              {useTitleCase(
-                mapMonthToSeason(plant.outdoors_start) || 'Unknown',
-              )}
+              {toTitleCase(mapMonthToSeason(plant.outdoors_start) || 'Unknown')}
             </AttributeContent>
           </Attribute>
           <Attribute>
             <Icon type="harvestSeason"></Icon>
             <AttributeContent>
-              {useTitleCase(plant.harvest_season)}
+              {toTitleCase(plant.harvest_season)}
             </AttributeContent>
           </Attribute>
           <Attribute>

diff --git 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 = ({
       <DifficultyLevelBar
         difficultyLevel={difficultyLevel as DifficultyLevelEnum}
       />
-      <P3>{useTitleCase(difficultyLevel)}</P3>
+      <P3>{toTitleCase(difficultyLevel)}</P3>
     </Flex>
   );
 };

diff --git 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({
       </Header>
       <Flex $direction="column" $gap="8px">
         {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
@@ -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();
 }