Make educated guess if 'no result' is due to language filter, and warn user.

This commit is contained in:
infiinte-persistence 2021-02-18 16:55:29 +08:00 committed by Sean Yesmunt
parent 545ee46a02
commit 6f67af5ec3
3 changed files with 19 additions and 17 deletions

View file

@ -18,6 +18,7 @@
"Settings": "Settings", "Settings": "Settings",
"Help": "Help", "Help": "Help",
"No results": "No results", "No results": "No results",
"No results. Contents may be hidden by the Language filter.": "No results. Contents may be hidden by the Language filter.",
"Home": "Home", "Home": "Home",
"Library": "Library", "Library": "Library",
"Purchased": "Purchased", "Purchased": "Purchased",
@ -1531,7 +1532,6 @@
"Explore": "Explore", "Explore": "Explore",
"There is a bug... somewhere": "There is a bug... somewhere", "There is a bug... somewhere": "There is a bug... somewhere",
"Try refreshing to fix the issue. If that doesn't work, email help@lbry.com for support.": "Try refreshing to fix the issue. If that doesn't work, email help@lbry.com for support.", "Try refreshing to fix the issue. If that doesn't work, email help@lbry.com for support.": "Try refreshing to fix the issue. If that doesn't work, email help@lbry.com for support.",
"No Results": "No Results",
"Content preview": "Content preview", "Content preview": "Content preview",
"Repost url": "Repost url", "Repost url": "Repost url",
"Close sidebar - hide channels you are following": "Close sidebar - hide channels you are following", "Close sidebar - hide channels you are following": "Close sidebar - hide channels you are following",

View file

@ -1,11 +1,12 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import ClaimList from './view'; import ClaimList from './view';
import { SETTINGS } from 'lbry-redux';
import { makeSelectClientSetting } from 'redux/selectors/settings';
const select = state => ({}); const select = (state) => ({
searchInLanguage: makeSelectClientSetting(SETTINGS.SEARCH_IN_LANGUAGE)(state),
});
const perform = dispatch => ({}); const perform = (dispatch) => ({});
export default connect( export default connect(select, perform)(ClaimList);
select,
perform
)(ClaimList);

View file

@ -22,7 +22,7 @@ type Props = {
type: string, type: string,
empty?: string, empty?: string,
defaultSort?: boolean, defaultSort?: boolean,
onScrollBottom?: any => void, onScrollBottom?: (any) => void,
page?: number, page?: number,
pageSize?: number, pageSize?: number,
id?: string, id?: string,
@ -36,7 +36,8 @@ type Props = {
injectedItem: ?Node, injectedItem: ?Node,
timedOutMessage?: Node, timedOutMessage?: Node,
tileLayout?: boolean, tileLayout?: boolean,
renderActions?: Claim => ?Node, renderActions?: (Claim) => ?Node,
searchInLanguage: boolean,
}; };
export default function ClaimList(props: Props) { export default function ClaimList(props: Props) {
@ -61,19 +62,23 @@ export default function ClaimList(props: Props) {
timedOutMessage, timedOutMessage,
tileLayout = false, tileLayout = false,
renderActions, renderActions,
searchInLanguage,
} = props; } = props;
const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW); const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
const timedOut = uris === null; const timedOut = uris === null;
const urisLength = (uris && uris.length) || 0; const urisLength = (uris && uris.length) || 0;
const sortedUris = (urisLength > 0 && (currentSort === SORT_NEW ? uris : uris.slice().reverse())) || []; const sortedUris = (urisLength > 0 && (currentSort === SORT_NEW ? uris : uris.slice().reverse())) || [];
const noResultMsg = searchInLanguage
? __('No results. Contents may be hidden by the Language filter.')
: __('No results');
function handleSortChange() { function handleSortChange() {
setCurrentSort(currentSort === SORT_NEW ? SORT_OLD : SORT_NEW); setCurrentSort(currentSort === SORT_NEW ? SORT_OLD : SORT_NEW);
} }
useEffect(() => { useEffect(() => {
const handleScroll = debounce(e => { const handleScroll = debounce((e) => {
if (page && pageSize && onScrollBottom) { if (page && pageSize && onScrollBottom) {
const mainEl = document.querySelector(`.${MAIN_CLASS}`); const mainEl = document.querySelector(`.${MAIN_CLASS}`);
@ -95,10 +100,8 @@ export default function ClaimList(props: Props) {
return tileLayout && !header ? ( return tileLayout && !header ? (
<section className="claim-grid"> <section className="claim-grid">
{urisLength > 0 && uris.map(uri => <ClaimPreviewTile key={uri} uri={uri} />)} {urisLength > 0 && uris.map((uri) => <ClaimPreviewTile key={uri} uri={uri} />)}
{!timedOut && urisLength === 0 && !loading && ( {!timedOut && urisLength === 0 && !loading && <div className="empty main--empty">{empty || noResultMsg}</div>}
<div className="empty main--empty">{empty || __('No results')}</div>
)}
{timedOut && timedOutMessage && <div className="empty main--empty">{timedOutMessage}</div>} {timedOut && timedOutMessage && <div className="empty main--empty">{timedOutMessage}</div>}
</section> </section>
) : ( ) : (
@ -168,9 +171,7 @@ export default function ClaimList(props: Props) {
</ul> </ul>
)} )}
{!timedOut && urisLength === 0 && !loading && ( {!timedOut && urisLength === 0 && !loading && <div className="empty empty--centered">{empty || noResultMsg}</div>}
<div className="empty empty--centered">{empty || __('No results')}</div>
)}
{!loading && timedOut && timedOutMessage && <div className="empty empty--centered">{timedOutMessage}</div>} {!loading && timedOut && timedOutMessage && <div className="empty empty--centered">{timedOutMessage}</div>}
</section> </section>
); );