From 1ecb2ba13dcf5b379b578a88c5efb5294de9b336 Mon Sep 17 00:00:00 2001 From: "Tom (plebeius.eth)" Date: Fri, 31 May 2024 18:18:42 +0200 Subject: [PATCH] feat(catalog): add sorting option --- .../board-buttons/board-buttons.module.css | 6 +- .../board-buttons/board-buttons.tsx | 64 ++++++++++++------- .../post-menu-desktop/post-menu-desktop.tsx | 3 +- src/stores/use-sorting-store.ts | 13 ++++ src/views/board/board.tsx | 3 +- src/views/catalog/catalog.tsx | 4 +- 6 files changed, 67 insertions(+), 26 deletions(-) create mode 100644 src/stores/use-sorting-store.ts diff --git a/src/components/board-buttons/board-buttons.module.css b/src/components/board-buttons/board-buttons.module.css index 698546c9..64ac2de8 100644 --- a/src/components/board-buttons/board-buttons.module.css +++ b/src/components/board-buttons/board-buttons.module.css @@ -21,6 +21,10 @@ cursor: pointer; } +.mobileBoardButtons .options { + padding: 10px 0; +} + @media (max-width: 640px) { .desktopBoardButtons { display: none; @@ -32,7 +36,7 @@ display: none; } - .subscribeButton { + .rightSideButtons { float: right; } } \ No newline at end of file diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index 0ae72ab3..1b026ad7 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -3,6 +3,7 @@ import { Link, useLocation, useParams } from 'react-router-dom'; import { useAccountComment, useSubscribe } from '@plebbit/plebbit-react-hooks'; import { isAllView, isCatalogView, isPendingPostView, isPostPageView, isSubscriptionsView } from '../../lib/utils/view-utils'; import useFeedResetStore from '../../stores/use-feed-reset-store'; +import useSortingStore from '../../stores/use-sorting-store'; import styles from './board-buttons.module.css'; interface BoardButtonsProps { @@ -58,6 +59,24 @@ const RefreshButton = () => { ); }; +const SortOptions = () => { + const { sortType, setSortType } = useSortingStore(); + + const handleSortChange = (event: React.ChangeEvent) => { + const type = event.target.value as 'active' | 'new'; + setSortType(type); + }; + return ( + <> + Sort by:{' '} + {' '} + + ); +}; + export const MobileBoardButtons = () => { const params = useParams(); const location = useLocation(); @@ -89,6 +108,14 @@ export const MobileBoardButtons = () => { + {isInCatalogView && ( + <> +
+
+ +
+ + )} )} @@ -118,21 +145,7 @@ export const DesktopBoardButtons = () => { ] [ ]{' '} {isInPostView && ( - - [] - - )} - - ) : isInCatalogView ? ( - <> - [ - - ] [ - - ] [ - ]{' '} - {!(isInAllView || isInSubscriptionsView) && ( - + [] )} @@ -140,17 +153,24 @@ export const DesktopBoardButtons = () => { ) : ( <> [ - + {isInCatalogView ? ( + + ) : ( + + )} ] [ ] [ ]{' '} - {!(isInAllView || isInSubscriptionsView) && ( - - [ - ] - - )} + + {isInCatalogView && } + {!(isInAllView || isInSubscriptionsView) && ( + <> + [ + ] + + )} + )} diff --git a/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx index 6c23d60f..a625d34a 100644 --- a/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx +++ b/src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx @@ -8,6 +8,7 @@ import styles from './post-menu-desktop.module.css'; import { getCommentMediaInfo } from '../../../../lib/utils/media-utils'; import { copyShareLinkToClipboard, isValidURL } from '../../../../lib/utils/url-utils'; import { isCatalogView, isPostPageView } from '../../../../lib/utils/view-utils'; +import _ from 'lodash'; interface PostMenuDesktopProps { cid: string; @@ -48,7 +49,7 @@ const ImageSearchButton = ({ url, onClose }: { url: string; onClose: () => void ref={refs.setReference} onClick={onClose} > - {t('image_search')} » + {_.capitalize(t('image_search'))} » {isImageSearchMenuOpen && (
diff --git a/src/stores/use-sorting-store.ts b/src/stores/use-sorting-store.ts new file mode 100644 index 00000000..c279258d --- /dev/null +++ b/src/stores/use-sorting-store.ts @@ -0,0 +1,13 @@ +import { create } from 'zustand'; + +interface SortingStore { + sortType: 'active' | 'new'; + setSortType: (type: 'active' | 'new') => void; +} + +const useSortingStore = create((set) => ({ + sortType: 'active', + setSortType: (type) => set({ sortType: type }), +})); + +export default useSortingStore; diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx index cfdfa771..b2eda2f6 100644 --- a/src/views/board/board.tsx +++ b/src/views/board/board.tsx @@ -9,6 +9,7 @@ import { useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbi import useFeedStateString from '../../hooks/use-feed-state-string'; import useReplyModal from '../../hooks/use-reply-modal'; import useFeedResetStore from '../../stores/use-feed-reset-store'; +import useSortingStore from '../../stores/use-sorting-store'; import LoadingEllipsis from '../../components/loading-ellipsis'; import Post from '../../components/post'; import ReplyModal from '../../components/reply-modal'; @@ -40,7 +41,7 @@ const Board = () => { return [subplebbitAddress]; }, [isInAllView, isInSubscriptionsView, subplebbitAddress, defaultSubplebbitAddresses, subscriptions]); - const sortType = 'active'; + const { sortType } = useSortingStore(); const { feed, hasMore, loadMore, reset } = useFeed({ subplebbitAddresses, sortType }); const setResetFunction = useFeedResetStore((state) => state.setResetFunction); diff --git a/src/views/catalog/catalog.tsx b/src/views/catalog/catalog.tsx index 9784ec96..b6aca5b2 100644 --- a/src/views/catalog/catalog.tsx +++ b/src/views/catalog/catalog.tsx @@ -9,6 +9,7 @@ import useFeedStateString from '../../hooks/use-feed-state-string'; import { useMultisubMetadata } from '../../hooks/use-default-subplebbits'; import useWindowWidth from '../../hooks/use-window-width'; import useFeedResetStore from '../../stores/use-feed-reset-store'; +import useSortingStore from '../../stores/use-sorting-store'; import CatalogRow from '../../components/catalog-row'; import LoadingEllipsis from '../../components/loading-ellipsis'; import SettingsModal from '../../components/settings-modal'; @@ -102,7 +103,8 @@ const Catalog = () => { // eslint-disable-next-line const postsPerPage = useMemo(() => (columnCount <= 2 ? 10 : columnCount === 3 ? 15 : columnCount === 4 ? 20 : 25), []); - const { feed, hasMore, loadMore, reset } = useFeed({ subplebbitAddresses, sortType: 'active', postsPerPage }); + const { sortType } = useSortingStore(); + const { feed, hasMore, loadMore, reset } = useFeed({ subplebbitAddresses, sortType, postsPerPage }); const setResetFunction = useFeedResetStore((state) => state.setResetFunction); useEffect(() => {