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
Thomas Zarebczan
parent
1c9d89b250
commit
1ad66fccd0
4 changed files with 54 additions and 33 deletions
|
|
@ -16,6 +16,7 @@
|
|||
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
|
||||
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='^redux\(.*\)$' -> '<PROJECT_ROOT>/ui/redux\1'
|
||||
module.name_mapper='^types\(.*\)$' -> '<PROJECT_ROOT>/ui/types\1'
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { FormField } from 'component/common/form';
|
|||
import Button from 'component/button';
|
||||
import { toCapitalCase } from 'util/string';
|
||||
import SEARCHABLE_LANGUAGES from 'constants/searchable_languages';
|
||||
import { ClaimSearchFilterContext } from 'contexts/claimSearchFilterContext';
|
||||
|
||||
type Props = {
|
||||
defaultTags: string,
|
||||
|
|
@ -62,6 +63,7 @@ function ClaimListHeader(props: Props) {
|
|||
languageSetting,
|
||||
scrollAnchor,
|
||||
} = props;
|
||||
const filterCtx = React.useContext(ClaimSearchFilterContext);
|
||||
const { action, push, location } = useHistory();
|
||||
const { search } = location;
|
||||
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)) {
|
||||
return (
|
||||
<option key={type} value={type}>
|
||||
|
|
|
|||
9
ui/contexts/claimSearchFilterContext.jsx
Normal file
9
ui/contexts/claimSearchFilterContext.jsx
Normal 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,
|
||||
// ...
|
||||
});
|
||||
|
|
@ -8,6 +8,7 @@ import * as CS from 'constants/claim_search';
|
|||
import Page from 'component/page';
|
||||
import ClaimListDiscover from 'component/claimListDiscover';
|
||||
import Button from 'component/button';
|
||||
import { ClaimSearchFilterContext } from 'contexts/claimSearchFilterContext';
|
||||
import useHover from 'effects/use-hover';
|
||||
import { useIsMobile } from 'effects/use-screensize';
|
||||
import analytics from 'analytics';
|
||||
|
|
@ -19,6 +20,8 @@ import I18nMessage from 'component/i18nMessage';
|
|||
import moment from 'moment';
|
||||
import LivestreamSection from './livestreamSection';
|
||||
|
||||
const CATEGORY_CONTENT_TYPES_FILTER = CS.CONTENT_TYPES.filter((x) => x !== CS.CLAIM_REPOST);
|
||||
|
||||
type Props = {
|
||||
dynamicRouteProps: RowDataItem,
|
||||
location: { search: string },
|
||||
|
|
@ -77,6 +80,10 @@ function DiscoverPage(props: Props) {
|
|||
}
|
||||
|
||||
const includeLivestreams = !tagsQuery;
|
||||
const filters = { contentTypes: isCategory && !isWildWest ? CATEGORY_CONTENT_TYPES_FILTER : CS.CONTENT_TYPES };
|
||||
|
||||
// **************************************************************************
|
||||
// **************************************************************************
|
||||
|
||||
function getMeta() {
|
||||
if (!dynamicRouteProps) {
|
||||
|
|
@ -191,38 +198,40 @@ function DiscoverPage(props: Props) {
|
|||
fullWidthPage={tileLayout}
|
||||
className={classnames('main__discover', { 'hide-ribbon': hideRepostRibbon })}
|
||||
>
|
||||
<ClaimListDiscover
|
||||
pins={getPins(dynamicRouteProps)}
|
||||
hideFilters={isWildWest ? true : undefined}
|
||||
header={repostedUri ? <span /> : undefined}
|
||||
subSection={getSubSection()}
|
||||
tileLayout={repostedUri ? false : tileLayout}
|
||||
defaultOrderBy={isWildWest || tags ? CS.ORDER_BY_TRENDING : undefined}
|
||||
claimType={claimType ? [claimType] : undefined}
|
||||
headerLabel={headerLabel}
|
||||
tags={tags}
|
||||
hiddenNsfwMessage={<HiddenNsfw type="page" />}
|
||||
repostedClaimId={repostedClaim ? repostedClaim.claim_id : null}
|
||||
injectedItem={!isWildWest && { node: <Ads small type="video" tileLayout={tileLayout} /> }}
|
||||
// Assume wild west page if no dynamicRouteProps
|
||||
// Not a very good solution, but just doing it for now
|
||||
// until we are sure this page will stay around
|
||||
// TODO: find a better way to determine discover / wild west vs other modes release times
|
||||
// for now including && !tags so that
|
||||
releaseTime={releaseTime || undefined}
|
||||
feeAmount={isWildWest || tags ? CS.FEE_AMOUNT_ANY : undefined}
|
||||
channelIds={channelIds}
|
||||
excludedChannelIds={excludedChannelIds}
|
||||
limitClaimsPerChannel={
|
||||
SIMPLE_SITE
|
||||
? (dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.limitClaimsPerChannel) || 3
|
||||
: 3
|
||||
}
|
||||
meta={getMeta()}
|
||||
hasSource
|
||||
forceShowReposts={dynamicRouteProps}
|
||||
searchLanguages={dynamicRouteProps?.options?.searchLanguages}
|
||||
/>
|
||||
<ClaimSearchFilterContext.Provider value={filters}>
|
||||
<ClaimListDiscover
|
||||
pins={getPins(dynamicRouteProps)}
|
||||
hideFilters={isWildWest ? true : undefined}
|
||||
header={repostedUri ? <span /> : undefined}
|
||||
subSection={getSubSection()}
|
||||
tileLayout={repostedUri ? false : tileLayout}
|
||||
defaultOrderBy={isWildWest || tags ? CS.ORDER_BY_TRENDING : undefined}
|
||||
claimType={claimType ? [claimType] : undefined}
|
||||
headerLabel={headerLabel}
|
||||
tags={tags}
|
||||
hiddenNsfwMessage={<HiddenNsfw type="page" />}
|
||||
repostedClaimId={repostedClaim ? repostedClaim.claim_id : null}
|
||||
injectedItem={!isWildWest && { node: <Ads small type="video" tileLayout={tileLayout} /> }}
|
||||
// Assume wild west page if no dynamicRouteProps
|
||||
// Not a very good solution, but just doing it for now
|
||||
// until we are sure this page will stay around
|
||||
// TODO: find a better way to determine discover / wild west vs other modes release times
|
||||
// for now including && !tags so that
|
||||
releaseTime={releaseTime || undefined}
|
||||
feeAmount={isWildWest || tags ? CS.FEE_AMOUNT_ANY : undefined}
|
||||
channelIds={channelIds}
|
||||
excludedChannelIds={excludedChannelIds}
|
||||
limitClaimsPerChannel={
|
||||
SIMPLE_SITE
|
||||
? (dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.limitClaimsPerChannel) || 3
|
||||
: 3
|
||||
}
|
||||
meta={getMeta()}
|
||||
hasSource
|
||||
forceShowReposts={dynamicRouteProps}
|
||||
searchLanguages={dynamicRouteProps?.options?.searchLanguages}
|
||||
/>
|
||||
</ClaimSearchFilterContext.Provider>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue