Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

US11 // parts - highlight active filters #30

Merged
merged 10 commits into from
Jul 5, 2023
Merged

US11 // parts - highlight active filters #30

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
1605ccf
add states for active chosen filter
matschi3 Jul 5, 2023
40f5006
add funct2 and value2 into 'sets' to set activeFilter onClick
matschi3 Jul 5, 2023
63577f4
add prop 'activeFilter + add function to setActive filter REUSABLE al…
matschi3 Jul 5, 2023
201715e
add conditional style for activeFilter if 'isActiveFilter' prop is true
matschi3 Jul 5, 2023
1a0e244
add activeStatusFilter as activeFilter prop to statusFilterSlider
matschi3 Jul 5, 2023
d88d64a
add funct2 to set activeStatusFilter on sets for statusFilterSlider
matschi3 Jul 5, 2023
65c65cd
reworked names on filter sets
matschi3 Jul 5, 2023
cff3300
renamed sets to filters bc sets/set is bad for naming
matschi3 Jul 5, 2023
1f478f4
reworked names on filter sets
matschi3 Jul 5, 2023
d7c440e
reworked names
matschi3 Jul 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 65 additions & 8 deletions components/PartsList/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { FilterContainer } from "../StyledFilter/StyledFilter.styled.js";
export default function PartsList({ parts }) {
const [categoryFilter, setCategoryFilter] = useState("alle");
const [statusFilter, setStatusFilter] = useState("alle");
const [activeCategoryFilter, setActiveCategoryFilter] = useState("alle");
const [activeStatusFilter, setActiveStatusFilter] = useState("alle");

// filter the parts array based on the categoryFilter and statusFilter
const filteredParts = parts.filter((part) => {
Expand All @@ -30,31 +32,86 @@ export default function PartsList({ parts }) {
<>
<FilterContainer>
{/* render a filterButton for each object in 'sets' with given 'function', 'value to set' and 'name' */}
{/* funct2 + value2 for activeFilter-highlighting */}
<StyledFilter
sets={[
{ funct: setCategoryFilter, value: "alle", name: "alle" },
{ funct: setCategoryFilter, value: "teller", name: "teller" },
{ funct: setCategoryFilter, value: "vase", name: "vase" },
{ funct: setCategoryFilter, value: "schüssel", name: "schüssel" },
{ funct: setCategoryFilter, value: "figur", name: "figur" },
{
funct: setCategoryFilter,
value: "alle",
name: "alle",
funct2: setActiveCategoryFilter,
value2: "alle",
},
{
funct: setCategoryFilter,
value: "teller",
name: "teller",
funct2: setActiveCategoryFilter,
value2: "teller",
},
{
funct: setCategoryFilter,
value: "vase",
name: "vase",
funct2: setActiveCategoryFilter,
value2: "vase",
},
{
funct: setCategoryFilter,
value: "schüssel",
name: "schüssel",
funct2: setActiveCategoryFilter,
value2: "schüssel",
},
{
funct: setCategoryFilter,
value: "figur",
name: "figur",
funct2: setActiveCategoryFilter,
value2: "figur",
},
]}
activeFilter={activeCategoryFilter}
/>
<StyledFilter
sets={[
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A smart idea to populate your filters! 🚀
I suggest some naming changes to shed some light on it for external reviewers (and for yourself in the future when you review your code again after some time has passed 😉 )

{
    primaryFunction: setStatusFilter,
    primaryValue: "alle",
    filterName: "alle",
    secondaryFunction: setActiveStatusFilter,
    secondaryValue: "alle",
}

Copy link
Owner Author

@matschi3 matschi3 Jul 5, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your advise. I will stay consistent in naming from now on ✌🏼
it looks much better now

{ funct: setStatusFilter, value: "alle", name: "alle" },
{
funct: setStatusFilter,
value: "alle",
name: "alle",
funct2: setActiveStatusFilter,
value2: "alle",
},
{
funct: setStatusFilter,
value: "!isAssembled",
name: "unverbaut",
funct2: setActiveStatusFilter,
value2: "!isAssembled",
},
{
funct: setStatusFilter,
value: "inAssembler",
name: "in Verarbeitung",
funct2: setActiveStatusFilter,
value2: "inAssembler",
},
{
funct: setStatusFilter,
value: "isAssembled",
name: "verbaut",
funct2: setActiveStatusFilter,
value2: "isAssembled",
},
{
funct: setStatusFilter,
value: "isSold",
name: "verkauft",
funct2: setActiveStatusFilter,
value2: "isSold",
},
{ funct: setStatusFilter, value: "isAssembled", name: "verbaut" },
{ funct: setStatusFilter, value: "isSold", name: "verkauft" },
]}
activeFilter={activeStatusFilter}
/>
</FilterContainer>
<PartsListContainer>
Expand Down
2 changes: 1 addition & 1 deletion components/StyledFilter/StyledFilter.styled.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,5 @@ export const FilterButtonContainer = styled.section`
`;

export const FilterButton = styled.button`
font-weight: bold;
${(props) => (props.isActiveFilter === true ? "font-weight: bold" : "")}
`;
11 changes: 9 additions & 2 deletions components/StyledFilter/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
import { FilterButtonContainer, FilterButton } from "./StyledFilter.styled";

export default function StyledFilter({ sets }) {
export default function StyledFilter({ sets, activeFilter }) {
// Mapping over the "sets" array and rendering a FilterButton component for each element with the given "function", "value to set" and "name"
return (
<FilterButtonContainer>
{sets.map((set) => (
<FilterButton key={set.name} onClick={() => set.funct(set.value)}>
<FilterButton
key={set.name}
onClick={() => {
set.funct(set.value);
set.funct2(set.value2);
}}
isActiveFilter={set.value2 === activeFilter}
>
{set.name}
</FilterButton>
))}
Expand Down