in website/src/components/gallery/ShowcaseLeftFilters/index.tsx [162:443]
export default function ShowcaseLeftFilters({
activeTags,
selectedCheckbox,
setSelectedCheckbox,
location,
selectedTags,
setSelectedTags,
readSearchTags,
replaceSearchTags,
}: {
activeTags: TagType[];
selectedCheckbox: TagType[];
setSelectedCheckbox: React.Dispatch<React.SetStateAction<TagType[]>>;
location;
selectedTags: TagType[];
setSelectedTags: React.Dispatch<React.SetStateAction<TagType[]>>;
readSearchTags: (search: string) => TagType[];
replaceSearchTags: (search: string, newTags: TagType[]) => string;
}) {
const sortTagList = TagList.sort();
const uncategoryTag = TagList.filter((tag) => {
const tagObject = Tags[tag];
return tagObject.type === undefined;
});
const languageTag = sortTagList.filter((tag) => {
const tagObject = Tags[tag];
return tagObject.type === "Language";
});
const frameworkTag = sortTagList.filter((tag) => {
const tagObject = Tags[tag];
return tagObject.type === "Framework";
});
const servicesTag = sortTagList.filter((tag) => {
const tagObject = Tags[tag];
return tagObject.type === "Service";
});
const databaseTag = sortTagList.filter((tag) => {
const tagObject = Tags[tag];
return tagObject.type === "Database";
});
const infrastructureAsCodeTag = sortTagList.filter((tag) => {
const tagObject = Tags[tag];
return tagObject.type === "Infrastructure as Code";
});
const otherTag = sortTagList.filter((tag) => {
const tagObject = Tags[tag];
return tagObject.type === "Tools";
});
const topicTag = sortTagList.filter((tag) => {
const tagObject = Tags[tag];
return tagObject.type === "Topic";
});
const [openItems, setOpenItems] = React.useState([]);
const handleToggle: AccordionToggleEventHandler<string> = (event, data) => {
setOpenItems(data.openItems);
};
const history = useHistory();
const searchParams = new URLSearchParams(location.search);
const clearAll = () => {
setSelectedCheckbox([]);
setSelectedTags([]);
searchParams.delete("tags");
history.push({
...location,
search: searchParams.toString(),
state: prepareUserState(),
});
};
return (
<Accordion
openItems={openItems}
onToggle={handleToggle}
multiple
collapsible
>
<div style={{ paddingBottom: "7px" }}>
<div className={styles.filterTop}>
<div className={styles.filterBy}>Filter by</div>
{selectedTags.length > 0 ? (
<div className={styles.clearAll} onClick={clearAll}>
Clear all
</div>
) : null}
</div>
{uncategoryTag.map((tag) => {
const tagObject = Tags[tag];
const key = `showcase_checkbox_key_${tag}`;
const id = `showcase_checkbox_id_${tag}`;
return (
<div
key={key}
className={styles.checkboxListItem}
style={{ paddingLeft: "12px" }}
>
<ShowcaseTagSelect
id={id}
tag={tag}
label={tagObject.label}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</div>
);
})}
</div>
<AccordionItem value="1">
<AccordionHeader
expandIconPosition="end"
style={{
background:
"linear-gradient(#D1D1D1 0 0) top /89.8% 0.6px no-repeat",
}}
>
<div style={{ fontSize: "16px", fontWeight: "500" }}>Language</div>
</AccordionHeader>
<AccordionPanel>
<ShowcaseFilterViewAll
tags={languageTag}
number={"1"}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</AccordionPanel>
</AccordionItem>
<AccordionItem value="2">
<AccordionHeader
expandIconPosition="end"
style={{
background:
"linear-gradient(#D1D1D1 0 0) top /89.8% 0.6px no-repeat",
}}
>
<div style={{ fontSize: "16px", fontWeight: "500" }}>Framework</div>
</AccordionHeader>
<AccordionPanel>
<ShowcaseFilterViewAll
tags={frameworkTag}
number={"2"}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</AccordionPanel>
</AccordionItem>
<AccordionItem value="3">
<AccordionHeader
expandIconPosition="end"
style={{
background:
"linear-gradient(#D1D1D1 0 0) top /89.8% 0.6px no-repeat",
}}
>
<div style={{ fontSize: "16px", fontWeight: "500" }}>Services</div>
</AccordionHeader>
<AccordionPanel>
<ShowcaseFilterViewAll
tags={servicesTag}
number={"3"}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</AccordionPanel>
</AccordionItem>
<AccordionItem value="4">
<AccordionHeader
expandIconPosition="end"
style={{
background:
"linear-gradient(#D1D1D1 0 0) top /89.8% 0.6px no-repeat",
}}
>
<div style={{ fontSize: "16px", fontWeight: "500" }}>Database</div>
</AccordionHeader>
<AccordionPanel>
<ShowcaseFilterViewAll
tags={databaseTag}
number={"4"}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</AccordionPanel>
</AccordionItem>
<AccordionItem value="5">
<AccordionHeader
expandIconPosition="end"
style={{
background:
"linear-gradient(#D1D1D1 0 0) top /89.8% 0.6px no-repeat",
}}
>
<div style={{ fontSize: "16px", fontWeight: "500" }}>
Infrastructure as Code
</div>
</AccordionHeader>
<AccordionPanel>
<ShowcaseFilterViewAll
tags={infrastructureAsCodeTag}
number={"5"}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</AccordionPanel>
</AccordionItem>
<AccordionItem value="6">
<AccordionHeader
expandIconPosition="end"
style={{
background:
"linear-gradient(#D1D1D1 0 0) top /89.8% 0.6px no-repeat",
}}
>
<div style={{ fontSize: "16px", fontWeight: "500" }}>Tools</div>
</AccordionHeader>
<AccordionPanel>
<ShowcaseFilterViewAll
tags={otherTag}
number={"6"}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</AccordionPanel>
</AccordionItem>
<AccordionItem value="7">
<AccordionHeader
expandIconPosition="end"
style={{
background:
"linear-gradient(#D1D1D1 0 0) top /89.8% 0.6px no-repeat",
}}
>
<div style={{ fontSize: "16px", fontWeight: "500" }}>Topic</div>
</AccordionHeader>
<AccordionPanel>
<ShowcaseFilterViewAll
tags={topicTag}
number={"7"}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</AccordionPanel>
</AccordionItem>
</Accordion>
);
}