update time filter for subscriptions feed

This commit is contained in:
Tom (plebeius.eth)
2024-06-09 16:50:51 +02:00
parent 15bffe89bf
commit d66d5b5d39
2 changed files with 24 additions and 10 deletions
+21 -8
View File
@@ -8,10 +8,11 @@ import useTimeFilter from '../../hooks/use-time-filter';
import styles from './board-buttons.module.css'; import styles from './board-buttons.module.css';
interface BoardButtonsProps { interface BoardButtonsProps {
isInAllView?: boolean;
address?: string | undefined; address?: string | undefined;
isInAllView?: boolean;
isInCatalogView?: boolean; isInCatalogView?: boolean;
isInSubscriptionsView?: boolean; isInSubscriptionsView?: boolean;
isTopbar?: boolean;
} }
const CatalogButton = ({ address, isInAllView, isInSubscriptionsView }: BoardButtonsProps) => { const CatalogButton = ({ address, isInAllView, isInSubscriptionsView }: BoardButtonsProps) => {
@@ -75,7 +76,7 @@ const SortOptions = () => {
); );
}; };
export const TimeFilter = ({ isInCatalogView, isTopbar = false }: { isInCatalogView: boolean; isTopbar?: boolean }) => { export const TimeFilter = ({ isInAllView, isInCatalogView, isInSubscriptionsView, isTopbar = false }: BoardButtonsProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const params = useParams(); const params = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
@@ -84,8 +85,16 @@ export const TimeFilter = ({ isInCatalogView, isTopbar = false }: { isInCatalogV
const changeTimeFilter = (event: React.ChangeEvent<HTMLSelectElement>) => { const changeTimeFilter = (event: React.ChangeEvent<HTMLSelectElement>) => {
const timeFilterName = event.target.value; const timeFilterName = event.target.value;
const link = isInCatalogView ? `/p/all/catalog/${timeFilterName}` : `/p/all/${timeFilterName}`; const link = isInAllView
navigate(link); ? isInCatalogView
? `/p/all/catalog/${timeFilterName}`
: `/p/all/${timeFilterName}`
: isInSubscriptionsView
? isInCatalogView
? `/p/subscriptions/catalog/${timeFilterName}`
: `/p/subscriptions/${timeFilterName}`
: null;
link && navigate(link);
}; };
return ( return (
@@ -141,8 +150,12 @@ export const MobileBoardButtons = () => {
<> <>
<hr /> <hr />
<div className={styles.options}> <div className={styles.options}>
<TimeFilter isInCatalogView={true} /> {(isInAllView || isInSubscriptionsView) && (
&nbsp;&nbsp; <>
<TimeFilter isInAllView={isInAllView} isInCatalogView={false} isInSubscriptionsView={isInSubscriptionsView} />
&nbsp;&nbsp;
</>
)}
<SortOptions /> <SortOptions />
</div> </div>
</> </>
@@ -151,7 +164,7 @@ export const MobileBoardButtons = () => {
<> <>
<hr /> <hr />
<div className={styles.options}> <div className={styles.options}>
<TimeFilter isInCatalogView={false} /> <TimeFilter isInAllView={isInAllView} isInCatalogView={false} isInSubscriptionsView={isInSubscriptionsView} />
</div> </div>
</> </>
)} )}
@@ -213,7 +226,7 @@ export const DesktopBoardButtons = () => {
)} )}
{(isInAllView || isInSubscriptionsView) && ( {(isInAllView || isInSubscriptionsView) && (
<> <>
<TimeFilter isInCatalogView={isInCatalogView} /> <TimeFilter isInAllView={isInAllView} isInCatalogView={false} isInSubscriptionsView={isInSubscriptionsView} />
</> </>
)} )}
</span> </span>
+3 -2
View File
@@ -4,7 +4,6 @@ import { Link, useLocation, useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { isAllView, isCatalogView, isSubscriptionsView } from '../../lib/utils/view-utils'; import { isAllView, isCatalogView, isSubscriptionsView } from '../../lib/utils/view-utils';
import styles from './topbar.module.css'; import styles from './topbar.module.css';
import useTimeFilter from '../../hooks/use-time-filter';
import useDefaultSubplebbits, { categorizeSubplebbits, useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits'; import useDefaultSubplebbits, { categorizeSubplebbits, useDefaultSubplebbitAddresses } from '../../hooks/use-default-subplebbits';
import _, { debounce } from 'lodash'; import _, { debounce } from 'lodash';
import { TimeFilter } from '../board-buttons'; import { TimeFilter } from '../board-buttons';
@@ -149,7 +148,9 @@ const TopBarMobile = ({ subplebbitAddress }: { subplebbitAddress: string }) => {
<div className={styles.boardSelect}> <div className={styles.boardSelect}>
<strong>{t('board')}</strong> <strong>{t('board')}</strong>
{boardSelect} {boardSelect}
<TimeFilter isTopbar={true} isInCatalogView={isInCatalogView} /> {(isInAllView || isInSubscriptionsView) && (
<TimeFilter isTopbar={true} isInAllView={isInAllView} isInCatalogView={false} isInSubscriptionsView={isInSubscriptionsView} />
)}
</div> </div>
<div className={styles.pageJump}> <div className={styles.pageJump}>
<Link to={useLocation().pathname.replace(/\/$/, '') + '/settings'}>{t('settings')}</Link> <Link to={useLocation().pathname.replace(/\/$/, '') + '/settings'}>{t('settings')}</Link>