External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add time filter to p/all and p/subscriptions

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-06-09 16:40:32 +02:00
parent b25899ef3e
commit 15bffe89bf
10 changed files with 166 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/board-buttons/board-buttons.tsx
+56 -6
View File
@@ -1,9 +1,10 @@
import { useTranslation } from 'react-i18next';
import { Link, useLocation, useParams } from 'react-router-dom';
import { Link, useLocation, useNavigate, 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 useTimeFilter from '../../hooks/use-time-filter';
import styles from './board-buttons.module.css';
interface BoardButtonsProps {
@@ -55,6 +56,7 @@ const RefreshButton = () => {
};
const SortOptions = () => {
const { t } = useTranslation();
const { sortType, setSortType } = useSortingStore();
const handleSortChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
@@ -63,21 +65,54 @@ const SortOptions = () => {
};
return (
<>
Sort by:&nbsp;
{t('sort_by')}:&nbsp;
<select value={sortType} onChange={handleSortChange}>
<option value='active'>Bump order</option>
<option value='new'>Creation date</option>
<option value='active'>{t('bump_order')}</option>
<option value='new'>{t('creation_date')}</option>
</select>
&nbsp;
</>
);
};
export const TimeFilter = ({ isInCatalogView, isTopbar = false }: { isInCatalogView: boolean; isTopbar?: boolean }) => {
const { t } = useTranslation();
const params = useParams();
const navigate = useNavigate();
const { timeFilterNames } = useTimeFilter();
const selectedTimeFilterName = params.timeFilterName;
const changeTimeFilter = (event: React.ChangeEvent<HTMLSelectElement>) => {
const timeFilterName = event.target.value;
const link = isInCatalogView ? `/p/all/catalog/${timeFilterName}` : `/p/all/${timeFilterName}`;
navigate(link);
};
return (
<>
{!isTopbar ? (
<>
<span className='capitalize'>{t('time_filter')}</span>:&nbsp;
</>
) : (
<> </>
)}
<select onChange={changeTimeFilter} className={[styles.feedName, styles.menuItem].join(' ')} value={selectedTimeFilterName}>
{timeFilterNames.map((timeFilterName, i) => (
<option key={timeFilterName + i} value={timeFilterName}>
{timeFilterName}
</option>
))}
</select>
</>
);
};
export const MobileBoardButtons = () => {
const params = useParams();
const location = useLocation();
const isInAllView = isAllView(location.pathname);
const isInCatalogView = isCatalogView(location.pathname);
const isInCatalogView = isCatalogView(location.pathname, params);
const isInPendingPostPage = isPendingPostView(location.pathname, params);
const isInPostView = isPostPageView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname);
@@ -106,10 +141,20 @@ export const MobileBoardButtons = () => {
<>
<hr />
<div className={styles.options}>
<TimeFilter isInCatalogView={true} />
&nbsp;&nbsp;
<SortOptions />
</div>
</>
)}
{(isInAllView || isInSubscriptionsView) && !isInCatalogView && (
<>
<hr />
<div className={styles.options}>
<TimeFilter isInCatalogView={false} />
</div>
</>
)}
</>
)}
</div>
@@ -121,7 +166,7 @@ export const DesktopBoardButtons = () => {
const location = useLocation();
const accountComment = useAccountComment({ commentIndex: params?.accountCommentIndex as any });
const subplebbitAddress = params?.subplebbitAddress || accountComment?.subplebbitAddress;
const isInCatalogView = isCatalogView(location.pathname);
const isInCatalogView = isCatalogView(location.pathname, params);
const isInAllView = isAllView(location.pathname);
const isInPendingPostPage = isPendingPostView(location.pathname, params);
const isInPostView = isPostPageView(location.pathname, params);
@@ -166,6 +211,11 @@ export const DesktopBoardButtons = () => {
<SubscribeButton address={subplebbitAddress} />]
</>
)}
{(isInAllView || isInSubscriptionsView) && (
<>
<TimeFilter isInCatalogView={isInCatalogView} />
</>
)}
</span>
</>
)}
src/components/board-buttons/index.ts
+1 -1
View File
@@ -1 +1 @@
export { MobileBoardButtons, DesktopBoardButtons } from './board-buttons';
export { TimeFilter, MobileBoardButtons, DesktopBoardButtons } from './board-buttons';
src/components/board-header/board-header.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ const BoardHeader = () => {
const multisubMetadata = useMultisubMetadata();
const title = isInAllView ? multisubMetadata?.title : isInSubscriptionsView ? 'Subscriptions' : subplebbit?.title;
const title = isInAllView ? multisubMetadata?.title || 'all' : isInSubscriptionsView ? 'Subscriptions' : subplebbit?.title;
const subtitle = isInAllView ? 'p/all' : isInSubscriptionsView ? 'p/subscriptions' : `p/${address}`;
const isBoardOffline = subplebbit?.updatedAt && subplebbit.updatedAt < Date.now() / 1000 - 60 * 60;
src/components/post/post-desktop/post-menu-desktop/post-menu-desktop.tsx
+1 -1
View File
@@ -114,7 +114,7 @@ const PostMenuDesktop = ({ post }: { post: Comment }) => {
const location = useLocation();
const params = useParams();
const isInAllView = isAllView(location.pathname);
const isInCatalogView = isCatalogView(location.pathname);
const isInCatalogView = isCatalogView(location.pathname, params);
const isInPostPageView = isPostPageView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname);
src/components/topbar/topbar.tsx
+14 -4
View File
@@ -4,8 +4,10 @@ import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { isAllView, isCatalogView, isSubscriptionsView } from '../../lib/utils/view-utils';
import styles from './topbar.module.css';
import useTimeFilter from '../../hooks/use-time-filter';
import useDefaultSubplebbits, { categorizeSubplebbits, useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
import _, { debounce } from 'lodash';
import { TimeFilter } from '../board-buttons';
const SearchBar = ({ setShowSearchBar }: { setShowSearchBar: (show: boolean) => void }) => {
const navigate = useNavigate();
@@ -55,7 +57,8 @@ const SearchBar = ({ setShowSearchBar }: { setShowSearchBar: (show: boolean) =>
const TopBarDesktop = () => {
const { t } = useTranslation();
const location = useLocation();
const isInCatalogView = isCatalogView(location.pathname);
const params = useParams();
const isInCatalogView = isCatalogView(location.pathname, params);
const subplebbits = useDefaultSubplebbits();
const [showSearchBar, setShowSearchBar] = useState(false);
@@ -74,8 +77,13 @@ const TopBarDesktop = () => {
return (
<div className={styles.boardNavDesktop}>
<span className={styles.boardList}>
[<Link to='/p/all'>all</Link> / <Link to='/p/subscriptions'>subscriptions</Link>] [{renderSubplebbits(plebbitSubs)}] [{renderSubplebbits(projectsSubs)}] [
{renderSubplebbits(interestsSubs)}] [{renderSubplebbits(randomSubs)}] [{renderSubplebbits(internationalSubs)}]
[<Link to='/p/all'>all</Link> / <Link to='/p/subscriptions'>subscriptions</Link>]{' '}
{subplebbits && (
<>
[{renderSubplebbits(plebbitSubs)}] [{renderSubplebbits(projectsSubs)}] [{renderSubplebbits(interestsSubs)}] [{renderSubplebbits(randomSubs)}] [
{renderSubplebbits(internationalSubs)}]
</>
)}
</span>
<span className={styles.navTopRight}>
[<Link to={!location.pathname.endsWith('settings') ? location.pathname.replace(/\/$/, '') + '/settings' : location.pathname}>{t('settings')}</Link>] [
@@ -96,8 +104,9 @@ const TopBarMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
const currentSubplebbitIsInList = subplebbitAddresses.some((address: string) => address === subplebbitAddress);
const location = useLocation();
const params = useParams();
const isInAllView = isAllView(location.pathname);
const isInCatalogView = isCatalogView(location.pathname);
const isInCatalogView = isCatalogView(location.pathname, params);
const isInSubscriptionsView = isSubscriptionsView(location.pathname);
const selectValue = isInAllView ? 'all' : isInSubscriptionsView ? 'subscriptions' : subplebbitAddress;
@@ -140,6 +149,7 @@ const TopBarMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
<div className={styles.boardSelect}>
<strong>{t('board')}</strong>
{boardSelect}
<TimeFilter isTopbar={true} isInCatalogView={isInCatalogView} />
</div>
<div className={styles.pageJump}>
<Link to={useLocation().pathname.replace(/\/$/, '') + '/settings'}>{t('settings')}</Link>