[feat] Create the plantcalendarrow component #46
Conversation
| options={growingSeasonOptions} | ||
| placeholder="Growing Season" | ||
| /> | ||
| <HeaderContainer> |
There was a problem hiding this comment.
note: in the future, we can consider refactoring by making the header (including the search bar and filters) into a separate component that takes in a list of filters as props??
it's great as it is now, but this refactor might make it slightly more reusable in /view-plants??? just an idea
utils/helpers.ts
Outdated
| // if the end month is EARLY_MONTH, end column should be the first column for that month | ||
| // otherwise, start column should be the first column and end column should be the second column for that month | ||
| const startColumn = startMonth.startsWith('LATE') | ||
| ? monthToIndex.get(processedStartMonth)! * 2 + 1 |
There was a problem hiding this comment.
I think we should remove the ! operator here, and instead type monthToIndex as Map<MonthEnum, number>, defining the MonthEnum type in schema.d.ts
This way we can ensure that monthToIndex always returns a valid value.
This might be a tedious change, so we can also put this off.
kylezryr
force-pushed
the
34-create-the-plantcalendarrow-component
branch
from
e7bec20 to
1d008a5
Compare
| return ( | ||
| <div> | ||
| <MonthHeader /> | ||
| <CalendarRowsContainer> |
There was a problem hiding this comment.
note: i think we want to make the calendars longer and scrollable in the future - let's check w/ kyrene for the desire minimum length of each calendar row
| return ( | ||
| <PlantCalendarRowContainer> | ||
| <PlantText>{plantName}</PlantText> | ||
| <CalendarGrid> |
There was a problem hiding this comment.
i noticed that some of the calendar cells look larger than others (possibly b/c in mobile view, some plant names are longer / overflow to the 2nd line??)
Maybe we should provide a fixed pixel value for the height of the CalendarGrid?
|
|
||
| return ( | ||
| <div> | ||
| <MonthHeader /> |
There was a problem hiding this comment.
what if we made this into an actual table, like
<table>
<tr>
<th></th> // empty since no label above plants
<th><MonthHeader /></th>
</tr>
{filteredPlantList.map((plant, key) => (
<tr>
<td>plant.plant_name</td>
<td>
<PlantCalendarRow
key={key}
harvestStart={plant.harvest_start}
harvestEnd={plant.harvest_end}
transplantStart={plant.transplant_start}
transplantEnd={plant.transplant_end}
indoorsStart={plant.indoors_start}
indoorsEnd={plant.indoors_end}
outdoorsStart={plant.outdoors_start}
outdoorsEnd={plant.outdoors_end}
/>
</td>
</tr>))}
</table>
this would allow us to ensure that the header and the tables/names are all aligned with one another, whereas currently the header is not aligned in mobile view -- and we want to make the column containing calendar rows scrollable in the future
There was a problem hiding this comment.
we also might consider add sticky styling for the plant names! let's check with kyrene
ccatherinetan
force-pushed
the
34-create-the-plantcalendarrow-component
branch
from
870cb6f to
4571599
Compare
| import styled from 'styled-components'; | ||
| import COLORS from '@/styles/colors'; | ||
|
|
||
| export const FilterDropdownInput = styled.select<{ $hasValue: boolean }>` |
There was a problem hiding this comment.
note: we eventually want to import a custom dropdown arrow icon to ensure that the positioning matches the design
| } | ||
| } | ||
|
|
||
| // helper constants for processing months to indexes | ||
| const growingSeasonToIndex = new Map<SeasonEnum, number[]>([ |
There was a problem hiding this comment.
note: we might want to eventually refactor these into Records rather than Maps, since we don't need all the features of Map
What's new in this PR 🧑🌾
Description
/seasonal-planting-guideScreenshots
Prior to the table:
After the table:
Example of Scrolling / Sticky plant_name
How to review
/seasonal-planting-guideand check that calendar rows are rendering correctlyNext steps
Functionality
Relevant links
Online sources
Related PRs
CC: @ccatherinetan