From d62bd43c90439c64fedf88f69c800b09dfb7b447 Mon Sep 17 00:00:00 2001 From: hemarina Date: Thu, 12 Oct 2023 14:42:35 -0700 Subject: [PATCH] test card sorted --- website/src/data/users.tsx | 4 +- website/src/pages/index.tsx | 213 +++++++++++++++++----------- website/src/pages/styles.module.css | 10 -- 3 files changed, 129 insertions(+), 98 deletions(-) diff --git a/website/src/data/users.tsx b/website/src/data/users.tsx index bda456e6..709e4cfb 100644 --- a/website/src/data/users.tsx +++ b/website/src/data/users.tsx @@ -20,11 +20,11 @@ import templates from '../../static/templates.json' // Add your site to this list // prettier-ignore -const Users: User[] = templates as User[] +export const unsortedUsers: User[] = templates as User[] export const TagList = Object.keys(Tags) as TagType[]; function sortUsers() { - let result = Users; + let result = unsortedUsers; // Sort by site name result = sortBy(result, (user) => user.title.toLowerCase()); return result; diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 59677023..179e318f 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -28,6 +28,8 @@ import { AccordionToggleEventHandler, Text, Link as FluentUILink, + Combobox, + Option, } from "@fluentui/react-components"; import { SearchBox } from "@fluentui/react/lib/SearchBox"; @@ -36,7 +38,7 @@ import { initializeIcons } from "@fluentui/react/lib/Icons"; import { Tags, type User, type TagType } from "../data/tags"; -import { sortedUsers, TagList } from "../data/users"; +import { sortedUsers, unsortedUsers, TagList } from "../data/users"; import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment"; import Translate, { translate } from "@docusaurus/Translate"; @@ -106,22 +108,46 @@ function filterUsers( }); } -function useFilteredUsers() { +function readSortChoice(rule: string): User[] { + const options = [ + "New to old", + "Old to new", + "Alphabetical (A - Z)", + "Alphabetical (Z - A)", + ]; + if (rule == options[0]) { + return unsortedUsers; + } + if (rule == options[1]) { + return unsortedUsers.reverse(); + } + if (rule == options[2]) { + return sortedUsers; + } + if (rule == options[3]) { + return sortedUsers.reverse(); + } + return unsortedUsers; +} + +function useFilteredUsers(rule: string) { const location = useLocation(); // On SSR / first mount (hydration) no tag is selected const [selectedTags, setSelectedTags] = useState([]); const [searchName, setSearchName] = useState(null); + const [selectedUsers, setSelectedUsers] = useState([]); // Sync tags from QS to state (delayed on purpose to avoid SSR/Client // hydration mismatch) useEffect(() => { setSelectedTags(readSearchTags(location.search)); + setSelectedUsers(readSortChoice(rule)); setSearchName(readSearchName(location.search)); restoreUserState(location.state); }, [location]); - + console.log(readSortChoice(rule)); return useMemo( - () => filterUsers(sortedUsers, selectedTags, searchName), - [selectedTags, searchName] + () => filterUsers(selectedUsers, selectedTags, searchName), + [selectedTags, searchName, selectedUsers] ); } @@ -483,7 +509,7 @@ function ShowcaseFilterAndCard() {
- +
); @@ -554,66 +580,91 @@ function FilterBar() { ); } -function FilterTopBar() { +function ShowcaseCardPage() { const siteCountPlural = useSiteCountPlural(); - const filteredUsers = useFilteredUsers(); - const templateNumber = siteCountPlural(filteredUsers.length); + const options = [ + "New to old", + "Old to new", + "Alphabetical (A - Z)", + "Alphabetical (Z - A)", + ]; + const [selectedOptions, setSelectedOptions] = React.useState([]); + const onSelect = (event, data) => { + setSelectedOptions(data.selectedOptions); + }; + let filteredUsers = useFilteredUsers(selectedOptions[0]); + console.log(selectedOptions[0]); + const templateNumber = siteCountPlural(filteredUsers.length); - const history = useHistory(); - const location = useLocation(); - const [value, setValue] = useState(null); - useEffect(() => { - setValue(readSearchName(location.search)); - }, [location]); return ( -
+ <>
- Viewing - - {templateNumber} - - {templateNumber != "1" ? ( - templates - ) : ( - template - )} - {InputValue != null ? ( - <> - for - - '{InputValue}' - - - ) : null} -
-
- Sort by -
HAHAHAH
+
+ Viewing + + {templateNumber} + + {templateNumber != "1" ? ( + templates + ) : ( + template + )} + {InputValue != null ? ( + <> + for + + '{InputValue}' + + + ) : null} +
+
+ Sort by: +
{selectedOptions}
+ + {options.map((option) => ( + + ))} + +
-
+ + ); } -function ShowcaseCards() { - const filteredUsers = useFilteredUsers(); - +function ShowcaseCards({ filteredUsers }: { filteredUsers: User[] }) { if (filteredUsers.length === 0) { return (
-

Be the first to add an example project! @@ -628,41 +679,6 @@ function ShowcaseCards() { {filteredUsers.length === sortedUsers.length ? ( <>
-
-
- -
-
- {sortedUsers.map((user, index) => ( - <> - {(filteredUsers.length < 6 && - index === filteredUsers.length - 1) || - index === 4 ? ( - <> - - - - - - - - ) : ( - - - - )} - - ))} -
-
-
- - ) : ( -
-
-
- -
{filteredUsers.map((user, index) => ( <> @@ -673,7 +689,7 @@ function ShowcaseCards() { - + @@ -686,6 +702,31 @@ function ShowcaseCards() { ))}
+ + ) : ( +
+
+ {filteredUsers.map((user, index) => ( + <> + {(filteredUsers.length < 6 && + index === filteredUsers.length - 1) || + index === 4 ? ( + <> + + + + + + + + ) : ( + + + + )} + + ))} +
)} diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css index cb0d9652..a6a3ef9d 100644 --- a/website/src/pages/styles.module.css +++ b/website/src/pages/styles.module.css @@ -63,16 +63,6 @@ .showcaseFavoriteHeader { display: flex; - align-items: center; -} - -.showcaseFavoriteHeader > h2 { - margin-bottom: 0; -} - -.showcaseFavoriteHeader > svg { - width: 30px; - height: 30px; } .svgIconFavoriteXs,