Category: Hide "Repost" from ContentType filter, except for WildWest

## Ticket
1368
> can we remove the repost filter option on categories outside of wildwest/following?

## Approach
Using `context` to:
- reduce the amount of files that need to change.
- avoid prop-drilling.
- allow the ability to dynamically define the Filter's allowed values in a contained manner.

Clients that don't need customization simply does not need to wrap their component with the context.

The context only contains Content Type for now, but can include anything that future clients need to dynamically adjust.
This commit is contained in:
infinite-persistence 2022-04-25 13:44:22 +08:00 committed by Thomas Zarebczan
parent 1c9d89b250
commit 1ad66fccd0
4 changed files with 54 additions and 33 deletions

View file

@ -16,6 +16,7 @@
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
module.name_mapper='^constants\(.*\)$' -> '<PROJECT_ROOT>/ui/constants\1' module.name_mapper='^constants\(.*\)$' -> '<PROJECT_ROOT>/ui/constants\1'
module.name_mapper='^contexts\(.*\)$' -> '<PROJECT_ROOT>/ui/contexts\1'
module.name_mapper='^util\(.*\)$' -> '<PROJECT_ROOT>/ui/util\1' module.name_mapper='^util\(.*\)$' -> '<PROJECT_ROOT>/ui/util\1'
module.name_mapper='^redux\(.*\)$' -> '<PROJECT_ROOT>/ui/redux\1' module.name_mapper='^redux\(.*\)$' -> '<PROJECT_ROOT>/ui/redux\1'
module.name_mapper='^types\(.*\)$' -> '<PROJECT_ROOT>/ui/types\1' module.name_mapper='^types\(.*\)$' -> '<PROJECT_ROOT>/ui/types\1'

View file

@ -11,6 +11,7 @@ import { FormField } from 'component/common/form';
import Button from 'component/button'; import Button from 'component/button';
import { toCapitalCase } from 'util/string'; import { toCapitalCase } from 'util/string';
import SEARCHABLE_LANGUAGES from 'constants/searchable_languages'; import SEARCHABLE_LANGUAGES from 'constants/searchable_languages';
import { ClaimSearchFilterContext } from 'contexts/claimSearchFilterContext';
type Props = { type Props = {
defaultTags: string, defaultTags: string,
@ -62,6 +63,7 @@ function ClaimListHeader(props: Props) {
languageSetting, languageSetting,
scrollAnchor, scrollAnchor,
} = props; } = props;
const filterCtx = React.useContext(ClaimSearchFilterContext);
const { action, push, location } = useHistory(); const { action, push, location } = useHistory();
const { search } = location; const { search } = location;
const [expanded, setExpanded] = usePersistedState(`expanded-${location.pathname}`, false); const [expanded, setExpanded] = usePersistedState(`expanded-${location.pathname}`, false);
@ -345,7 +347,7 @@ function ClaimListHeader(props: Props) {
}) })
} }
> >
{CS.CONTENT_TYPES.map((type) => { {filterCtx.contentTypes.map((type) => {
if (type !== CS.CLAIM_CHANNEL || (type === CS.CLAIM_CHANNEL && !channelIdsParam)) { if (type !== CS.CLAIM_CHANNEL || (type === CS.CLAIM_CHANNEL && !channelIdsParam)) {
return ( return (
<option key={type} value={type}> <option key={type} value={type}>

View file

@ -0,0 +1,9 @@
import React from 'react';
import * as CS from 'constants/claim_search';
export const ClaimSearchFilterContext = React.createContext({
contentTypes: CS.CONTENT_TYPES,
// --Future expansion:
// durationTypes: CS.DURATION_TYPES,
// ...
});

View file

@ -8,6 +8,7 @@ import * as CS from 'constants/claim_search';
import Page from 'component/page'; import Page from 'component/page';
import ClaimListDiscover from 'component/claimListDiscover'; import ClaimListDiscover from 'component/claimListDiscover';
import Button from 'component/button'; import Button from 'component/button';
import { ClaimSearchFilterContext } from 'contexts/claimSearchFilterContext';
import useHover from 'effects/use-hover'; import useHover from 'effects/use-hover';
import { useIsMobile } from 'effects/use-screensize'; import { useIsMobile } from 'effects/use-screensize';
import analytics from 'analytics'; import analytics from 'analytics';
@ -19,6 +20,8 @@ import I18nMessage from 'component/i18nMessage';
import moment from 'moment'; import moment from 'moment';
import LivestreamSection from './livestreamSection'; import LivestreamSection from './livestreamSection';
const CATEGORY_CONTENT_TYPES_FILTER = CS.CONTENT_TYPES.filter((x) => x !== CS.CLAIM_REPOST);
type Props = { type Props = {
dynamicRouteProps: RowDataItem, dynamicRouteProps: RowDataItem,
location: { search: string }, location: { search: string },
@ -77,6 +80,10 @@ function DiscoverPage(props: Props) {
} }
const includeLivestreams = !tagsQuery; const includeLivestreams = !tagsQuery;
const filters = { contentTypes: isCategory && !isWildWest ? CATEGORY_CONTENT_TYPES_FILTER : CS.CONTENT_TYPES };
// **************************************************************************
// **************************************************************************
function getMeta() { function getMeta() {
if (!dynamicRouteProps) { if (!dynamicRouteProps) {
@ -191,6 +198,7 @@ function DiscoverPage(props: Props) {
fullWidthPage={tileLayout} fullWidthPage={tileLayout}
className={classnames('main__discover', { 'hide-ribbon': hideRepostRibbon })} className={classnames('main__discover', { 'hide-ribbon': hideRepostRibbon })}
> >
<ClaimSearchFilterContext.Provider value={filters}>
<ClaimListDiscover <ClaimListDiscover
pins={getPins(dynamicRouteProps)} pins={getPins(dynamicRouteProps)}
hideFilters={isWildWest ? true : undefined} hideFilters={isWildWest ? true : undefined}
@ -223,6 +231,7 @@ function DiscoverPage(props: Props) {
forceShowReposts={dynamicRouteProps} forceShowReposts={dynamicRouteProps}
searchLanguages={dynamicRouteProps?.options?.searchLanguages} searchLanguages={dynamicRouteProps?.options?.searchLanguages}
/> />
</ClaimSearchFilterContext.Provider>
</Page> </Page>
); );
} }