Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/Azure/awesome-azd into buil…
Browse files Browse the repository at this point in the history 
…d2024-templates
  • Loading branch information
@hemarina
hemarina committed May 18, 2024
2 parents 865e22f + 9df16bb commit bce4413
Show file tree
Hide file tree
Showing 10 changed files with 378 additions and 89 deletions.
125 changes: 107 additions & 18 deletions website/src/components/gallery/ShowcaseLeftFilters/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,28 @@ import { Tags, type TagType } from "../../../data/tags";
import { TagList } from "../../../data/users";
import styles from "./styles.module.css";
import { useColorMode } from "@docusaurus/theme-common";
import { useHistory } from "@docusaurus/router";
import { prepareUserState } from "@site/src/pages/index";
import { UserState } from "../ShowcaseTemplateSearch";

function ShowcaseFilterViewAll({
tags,
number,
activeTags,
selectedCheckbox,
setSelectedCheckbox,
location,
readSearchTags,
replaceSearchTags,
}: {
tags: TagType[];
number: string;
activeTags: TagType[];
selectedCheckbox: TagType[];
setSelectedCheckbox: React.Dispatch<React.SetStateAction<TagType[]>>;
location;
readSearchTags: (search: string) => TagType[];
replaceSearchTags: (search: string, newTags: TagType[]) => string;
}) {
const [openItems, setOpenItems] = React.useState(["0"]);
const handleToggle: AccordionToggleEventHandler<string> = (event, data) => {
Expand Down Expand Up @@ -69,6 +82,11 @@ function ShowcaseFilterViewAll({
tag={tag}
label={tagObject.label}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</div>
) : (
Expand All @@ -78,6 +96,11 @@ function ShowcaseFilterViewAll({
tag={tag}
label={tagObject.label}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</div>
);
Expand All @@ -103,6 +126,11 @@ function ShowcaseFilterViewAll({
tag={tag}
label={tagObject.label}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</div>
);
Expand Down Expand Up @@ -131,7 +159,25 @@ function ShowcaseFilterViewAll({
);
}

export default function ShowcaseLeftFilters({ activeTags }: { activeTags: TagType[] }) {
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];
Expand Down Expand Up @@ -165,18 +211,22 @@ export default function ShowcaseLeftFilters({ activeTags }: { activeTags: TagTyp
const tagObject = Tags[tag];
return tagObject.type === "Topic";
});
const [openItems, setOpenItems] = React.useState([
"1",
"2",
"3",
"4",
"5",
"6",
"7",
]);
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}
Expand All @@ -185,14 +235,13 @@ export default function ShowcaseLeftFilters({ activeTags }: { activeTags: TagTyp
collapsible
>
<div style={{ paddingBottom: "7px" }}>
<div
style={{
fontSize: "20px",
fontWeight: "500",
padding: "0 0 15px 12px",
}}
>
Filter by
<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];
Expand All @@ -210,6 +259,11 @@ export default function ShowcaseLeftFilters({ activeTags }: { activeTags: TagTyp
tag={tag}
label={tagObject.label}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</div>
);
Expand All @@ -230,6 +284,11 @@ export default function ShowcaseLeftFilters({ activeTags }: { activeTags: TagTyp
tags={languageTag}
number={"1"}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</AccordionPanel>
</AccordionItem>
Expand All @@ -249,6 +308,11 @@ export default function ShowcaseLeftFilters({ activeTags }: { activeTags: TagTyp
tags={frameworkTag}
number={"2"}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</AccordionPanel>
</AccordionItem>
Expand All @@ -268,6 +332,11 @@ export default function ShowcaseLeftFilters({ activeTags }: { activeTags: TagTyp
tags={servicesTag}
number={"3"}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</AccordionPanel>
</AccordionItem>
Expand All @@ -287,6 +356,11 @@ export default function ShowcaseLeftFilters({ activeTags }: { activeTags: TagTyp
tags={databaseTag}
number={"4"}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</AccordionPanel>
</AccordionItem>
Expand All @@ -308,6 +382,11 @@ export default function ShowcaseLeftFilters({ activeTags }: { activeTags: TagTyp
tags={infrastructureAsCodeTag}
number={"5"}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</AccordionPanel>
</AccordionItem>
Expand All @@ -327,6 +406,11 @@ export default function ShowcaseLeftFilters({ activeTags }: { activeTags: TagTyp
tags={otherTag}
number={"6"}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</AccordionPanel>
</AccordionItem>
Expand All @@ -346,6 +430,11 @@ export default function ShowcaseLeftFilters({ activeTags }: { activeTags: TagTyp
tags={topicTag}
number={"7"}
activeTags={activeTags}
selectedCheckbox={selectedCheckbox}
setSelectedCheckbox={setSelectedCheckbox}
location={location}
readSearchTags={readSearchTags}
replaceSearchTags={replaceSearchTags}
/>
</AccordionPanel>
</AccordionItem>
Expand Down
22 changes: 22 additions & 0 deletions website/src/components/gallery/ShowcaseLeftFilters/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,25 @@
.color {
color: var(--ifm-color-purple);
}

.filterTop {
display: flex;
align-items: center;
gap: 10px;
padding: 0 0 15px 12px;
}

.clearAll {
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-decoration-line: underline;
cursor: pointer;
color: var(--ifm-color-purple);
}

.filterBy {
font-size: 20px;
font-weight: 600;
line-height: 28px;
}
82 changes: 42 additions & 40 deletions website/src/components/gallery/ShowcaseTagSelect/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,49 +3,37 @@
* Licensed under the MIT License.
*/

import React, { useCallback, useState, useEffect } from "react";
import { useHistory, useLocation } from "@docusaurus/router";
import React, { useCallback, useEffect } from "react";
import { useHistory } from "@docusaurus/router";
import { toggleListItem } from "@site/src/utils/jsUtils";
import { prepareUserState } from "@site/src/pages/index";
import { type TagType } from "@site/src/data/tags";

import { Checkbox } from "@fluentui/react-components";

const TagQueryStringKey = "tags";

export function readSearchTags(search: string): TagType[] {
return new URLSearchParams(search).getAll(TagQueryStringKey) as TagType[];
}

function replaceSearchTags(search: string, newTags: TagType[]) {
const searchParams = new URLSearchParams(search);
searchParams.delete(TagQueryStringKey);
newTags.forEach((tag) => searchParams.append(TagQueryStringKey, tag));
return searchParams.toString();
}

export default function ShowcaseTagSelect(
// id: string,
{
label,
tag,
id,
activeTags,
}: {
label: string;
tag: TagType;
id: string;
activeTags: TagType[];
}
): JSX.Element {
const location = useLocation();
export default function ShowcaseTagSelect({
label,
tag,
id,
activeTags,
selectedCheckbox,
setSelectedCheckbox,
location,
readSearchTags,
replaceSearchTags,
}: {
label: string;
tag: TagType;
id: string;
activeTags: TagType[];
selectedCheckbox: TagType[];
setSelectedCheckbox: React.Dispatch<React.SetStateAction<TagType[]>>;
location;
readSearchTags: (search: string) => TagType[];
replaceSearchTags: (search: string, newTags: TagType[]) => string;
}): JSX.Element {
const history = useHistory();
const [selected, setSelected] = useState(false);
useEffect(() => {
const tags = readSearchTags(location.search);
setSelected(tags.includes(tag));
}, [tag, location]);
const toggleTag = useCallback(() => {
// updates only the url query
const toggleTag = () => {
const tags = readSearchTags(location.search);
const newTags = toggleListItem(tags, tag);
const newSearch = replaceSearchTags(location.search, newTags);
Expand All @@ -54,9 +42,19 @@ export default function ShowcaseTagSelect(
search: newSearch,
state: prepareUserState(),
});
}, [tag, location, history]);
};

const template = id.replace("showcase_checkbox_id_", "");
const contentForAdobeAnalytics = `{\"id\":\"${template}\",\"cN\":\"Tags\"}`;

const toggleCheck = (tag: TagType) => {
if (selectedCheckbox.includes(tag)) {
setSelectedCheckbox(selectedCheckbox.filter((item) => item !== tag));
} else {
setSelectedCheckbox([...selectedCheckbox, tag]);
}
};

return (
<>
<Checkbox
Expand All @@ -66,9 +64,13 @@ export default function ShowcaseTagSelect(
if (e.key === "Enter") {
toggleTag();
}
toggleCheck(tag);
}}
onChange={() => {
toggleTag();
toggleCheck(tag);
}}
onChange={toggleTag}
checked={selected}
checked={selectedCheckbox.includes(tag)}
label={label}
disabled={!activeTags?.includes(tag)}
/>
Expand Down
6 changes: 0 additions & 6 deletions website/src/data/tags.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ export type TagType =
| "sapcloudsdk"
| "nestjs"
| "dataverse"
| "chatgpt"
| "aks"
| "azurecdn"
| "frontdoor"
Expand Down Expand Up @@ -216,11 +215,6 @@ export const Tags: { [type in TagType]: Tag } = {
description: "Template architecture uses Thymeleaf template engine",
type: "Tools",
},
chatgpt: {
label: "ChatGPT",
description: "Template architecture uses ChatGPT application",
type: "Tools",
},
"dall-e": {
label: "Dall-E",
description: "Template architecture uses Dall-E",
Expand Down
Loading

0 comments on commit bce4413

Please sign in to comment.