Skip to content

Commit

Permalink
[feat] style view-plants (#56)
Browse files Browse the repository at this point in the history 
Co-authored-by: Catherine Tan <[email protected]>
  • Loading branch information
@SashankBalusu @ccatherinetan
SashankBalusu and ccatherinetan authored Dec 2, 2024
1 parent 89dba46 commit a772f80
Show file tree
Hide file tree
Showing 11 changed files with 506 additions and 143 deletions.
227 changes: 142 additions & 85 deletions app/view-plants/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,27 @@ import { getCurrentUserPlantsByUserId } from '@/api/supabase/queries/userPlants'
import FilterDropdownMultiple from '@/components/FilterDropdownMultiple';
import PlantCard from '@/components/PlantCard';
import SearchBar from '@/components/SearchBar';
import COLORS from '@/styles/colors';
import { Box, Flex } from '@/styles/containers';
import { H1 } from '@/styles/text';
import { DropdownOption, OwnedPlant, Plant } from '@/types/schema';
import {
checkDifficulty,
checkGrowingSeason,
checkSearchTerm,
checkSunlight,
} from '@/utils/helpers';
import { FilterContainer, TopRowContainer } from './styles';
import {
AddButton,
FilterContainer,
HeaderButton,
NumberSelectedPlants,
NumberSelectedPlantsContainer,
PlantGridContainer,
SelectButton,
TopRowContainer,
ViewSelection,
} from './styles';

export default function Page() {
const router = useRouter();
Expand Down Expand Up @@ -141,101 +154,145 @@ export default function Page() {
router.push(`all-plants/${plant.id}`);
}
}
function handleAddPlants() {
//TODO: route to add details with proper information
router.push('/add-details'); // use CONFIG later
}

function handleCancelAddMode() {
setSelectedPlants([]);
setInAddMode(false);
}

const plantPluralityString = selectedPlants.length > 1 ? 'Plants' : 'Plant';

return (
<div className="main">
<div id="plantContent">
<div className="plantSelectionHeader">
<button onClick={() => setViewingOption('myPlants')}>
My Plants
</button>
<button onClick={() => setViewingOption('all')}>All</button>
</div>
<div className="componentsDisplay">
<TopRowContainer>
<SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
<FilterContainer>
<FilterDropdownMultiple
value={selectedDifficulty}
setStateAction={setSelectedDifficulty}
options={difficultyOptions}
placeholder="Difficulty Level"
/>
<FilterDropdownMultiple
value={selectedSunlight}
setStateAction={setSelectedSunlight}
options={sunlightOptions}
placeholder="Sunlight"
/>
<FilterDropdownMultiple
value={selectedGrowingSeason}
setStateAction={setSelectedGrowingSeason}
options={growingSeasonOptions}
placeholder="Growing Season"
/>
<div id="plantContent">
<TopRowContainer>
<H1 $color={COLORS.shrub} $fontWeight={500}>
View Plants
</H1>
<SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
<FilterContainer>
<FilterDropdownMultiple
value={selectedDifficulty}
setStateAction={setSelectedDifficulty}
options={difficultyOptions}
placeholder="Difficulty Level"
/>
<FilterDropdownMultiple
value={selectedSunlight}
setStateAction={setSelectedSunlight}
options={sunlightOptions}
placeholder="Sunlight"
/>
<FilterDropdownMultiple
value={selectedGrowingSeason}
setStateAction={setSelectedGrowingSeason}
options={growingSeasonOptions}
placeholder="Growing Season"
/>

<button onClick={clearFilters}>Clear filters</button>
</FilterContainer>
</TopRowContainer>
{viewingOption === 'myPlants' && (
<div>
{filteredUserPlantList.length ? (
<div>
{filteredUserPlantList.map(ownedPlant => (
<PlantCard
key={ownedPlant.userPlantId}
plant={ownedPlant.plant}
canSelect={false}
onClick={() => handleUserPlantCardClick(ownedPlant)}
/>
))}
</div>
) : (
<div>
<button onClick={() => setViewingOption('all')}>
Add Plants
</button>
</div>
)}
</div>
)}
<button onClick={clearFilters}>Clear filters</button>
</FilterContainer>
</TopRowContainer>
<Box $h="24px">
{viewingOption === 'all' && inAddMode ? (
<NumberSelectedPlantsContainer>
<NumberSelectedPlants>
{selectedPlants.length
? `${selectedPlants.length} ${plantPluralityString} Selected`
: 'Select Plants'}
</NumberSelectedPlants>
</NumberSelectedPlantsContainer>
) : null}
</Box>
<Box $px="24px">
<Flex $justify="between" $pb="12px">
<ViewSelection>
<HeaderButton
$isCurrentMode={viewingOption !== 'all'}
onClick={() => setViewingOption('myPlants')}
>
My Plants
</HeaderButton>
<HeaderButton
$isCurrentMode={viewingOption === 'all'}
onClick={() => setViewingOption('all')}
>
All
</HeaderButton>
</ViewSelection>
{/* Select/Cancel toggles Add Mode; appears in All plants only*/}
{viewingOption === 'all' &&
(inAddMode ? (
<div>
{filteredPlantList.map((plant, key) => (
<PlantCard
key={key}
plant={plant}
canSelect={true}
isSelected={selectedPlants.includes(plant)}
onClick={() => handlePlantCardClick(plant)}
/>
))}
<div>
<button onClick={() => setInAddMode(false)}>
Select Plants
</button>
</div>
</div>
<SelectButton
$secondaryColor={COLORS.errorRed}
onClick={handleCancelAddMode}
>
Cancel
</SelectButton>
) : (
<div>
{filteredPlantList.map((plant, key) => (
<SelectButton
$primaryColor={COLORS.shrub}
$secondaryColor="white"
onClick={() => setInAddMode(true)}
>
Select
</SelectButton>
))}
</Flex>
{viewingOption === 'myPlants' && (
<div>
{filteredUserPlantList.length ? (
<PlantGridContainer>
{filteredUserPlantList.map(ownedPlant => (
<PlantCard
key={key}
plant={plant}
key={ownedPlant.userPlantId}
plant={ownedPlant.plant}
canSelect={false}
onClick={() => handlePlantCardClick(plant)}
onClick={() => handleUserPlantCardClick(ownedPlant)}
// aspectRatio="168 / 200"
/>
))}
<div>
<button onClick={() => setInAddMode(true)}>
Add to my plants
</button>
</div>
</PlantGridContainer>
) : (
<div>
<button onClick={() => setViewingOption('all')}>
Add Plants
</button>
</div>
))}
</div>
</div>
)}
</div>
)}
{viewingOption === 'all' && (
<>
<PlantGridContainer>
{filteredPlantList.map((plant, key) => (
<PlantCard
key={key}
plant={plant}
canSelect={inAddMode}
isSelected={selectedPlants.includes(plant)}
onClick={() => handlePlantCardClick(plant)}
// aspectRatio="168 / 200"
/>
))}
</PlantGridContainer>
{inAddMode && (
<AddButton
$backgroundColor={
selectedPlants.length ? COLORS.shrub : COLORS.midgray
}
onClick={handleAddPlants}
disabled={!selectedPlants.length}
>
{selectedPlants.length ? 'Add to My Garden' : 'Select Plants'}
</AddButton>
)}
</>
)}
</Box>
</div>
);
}
87 changes: 85 additions & 2 deletions app/view-plants/styles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,98 @@
import styled from 'styled-components';
import { SmallRoundedButton } from '@/components/Button';
import COLORS from '@/styles/colors';

export const FilterContainer = styled.div`
display: flex;
flex-direction: row;
gap: 8px;
margin-bottom: 20px;
`;

export const TopRowContainer = styled.div`
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
margin-bottom: 8px;
padding-left: 24px;
padding-right: 24px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
`;

export const HeaderButton = styled.button<{
$isCurrentMode: boolean;
}>`
background: none;
border: none;
color: ${COLORS.shrub};
font-family: inherit;
cursor: pointer;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
color: ${({ $isCurrentMode }) =>
$isCurrentMode ? ` ${COLORS.shrub}` : `${COLORS.midgray}`};
text-decoration: ${({ $isCurrentMode }) =>
$isCurrentMode ? ` underline ` : `none`};
`;

export const AddButton = styled.button<{ $backgroundColor: string }>`
position: fixed;
bottom: 0;
background-color: ${({ $backgroundColor }) => $backgroundColor};
color: white;
border-radius: 20px;
border: none;
font-family: inherit;
margin-bottom: 10px;
width: 170px;
height: 50px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
`;

export const PlantGridContainer = styled.div`
display: grid;
grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
/* grid-template-columns: repeat(auto-fill, 168px); */
gap: 8px;
max-width: 100%;
justify-content: center;
`;

export const SelectButton = styled(SmallRoundedButton)`
font-size: 0.75rem;
font-style: normal;
font-weight: 400;
line-height: normal;
width: 60px;
height: 25px;
padding: 0;
`;

export const ViewSelection = styled.div`
display: flex;
flex-direction: row;
gap: 20px;
`;

export const NumberSelectedPlantsContainer = styled.div`
background-color: ${COLORS.shrub};
text-align: center;
width: 100%;
height: 16px;
padding: 0;
`;

export const NumberSelectedPlants = styled.p`
font-size: 0.625rem;
font-style: normal;
font-weight: 400;
line-height: 16px;
color: #fff;
`;
8 changes: 6 additions & 2 deletions components/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,12 @@ import styled from 'styled-components';
export const Button = React.forwardRef<
HTMLButtonElement,
React.ButtonHTMLAttributes<HTMLButtonElement>
>(({ children, ...props }) => {
return <button {...props}>{children}</button>;
>(({ children, ...props }, ref) => {
return (
<button ref={ref} {...props}>
{children}
</button>
);
});
Button.displayName = 'Button';

Expand Down
8 changes: 4 additions & 4 deletions components/DifficultyLevelBar/index.tsx → components/DifficultyLevelBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
'use client';

import { DifficultyLevelEnum } from '@/types/schema';
import Icon from '../Icon';
import Icon from './Icon';

export default function DifficultyLevelBar({
difficultyLevel,
}: {
difficultyLevel: DifficultyLevelEnum;
}) {
if (difficultyLevel === 'EASY') {
return <Icon type="easy_bar" />;
return <Icon type="easyBar" />;
} else if (difficultyLevel === 'MODERATE') {
return <Icon type="moderate_bar" />;
return <Icon type="moderateBar" />;
} else {
// difficultyLevel === 'HARD'
return <Icon type="hard_bar" />;
return <Icon type="hardBar" />;
}
}
Loading

0 comments on commit a772f80

Please sign in to comment.