lbry-desktop/ui/page/search/view.jsx

150 lines
4.5 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
import { SIMPLE_SITE, SHOW_ADS } from 'config';
2019-06-11 20:10:58 +02:00
import * as ICONS from 'constants/icons';
2020-02-11 20:04:51 +01:00
import * as PAGES from 'constants/pages';
2019-03-28 17:53:13 +01:00
import React, { useEffect, Fragment } from 'react';
import { Lbry, regexInvalidURI, parseURI, isNameValid } from 'lbry-redux';
import ClaimPreview from 'component/claimPreview';
2019-06-19 07:05:43 +02:00
import ClaimList from 'component/claimList';
2018-03-26 23:32:43 +02:00
import Page from 'component/page';
2019-02-18 18:24:56 +01:00
import SearchOptions from 'component/searchOptions';
import Button from 'component/button';
2019-11-22 22:13:00 +01:00
import ClaimUri from 'component/claimUri';
import Ads from 'web/component/ads';
import { formatLbryUrlForWeb } from 'util/url';
import { useHistory } from 'react-router';
2017-05-05 10:01:16 +02:00
type AdditionalOptions = {
isBackgroundSearch: boolean,
nsfw?: boolean,
};
2019-06-11 20:10:58 +02:00
type Props = {
search: (string, AdditionalOptions) => void,
isSearching: boolean,
2019-06-11 20:10:58 +02:00
location: UrlLocation,
uris: Array<string>,
onFeedbackNegative: string => void,
onFeedbackPositive: string => void,
showNsfw: boolean,
2020-03-26 22:47:07 +01:00
isAuthenticated: boolean,
2019-06-11 20:10:58 +02:00
};
2018-03-26 23:32:43 +02:00
2019-03-28 17:53:13 +01:00
export default function SearchPage(props: Props) {
2020-03-26 22:47:07 +01:00
const {
search,
uris,
onFeedbackPositive,
onFeedbackNegative,
location,
isSearching,
showNsfw,
isAuthenticated,
} = props;
const { push } = useHistory();
2019-06-20 02:57:51 +02:00
const urlParams = new URLSearchParams(location.search);
const urlQuery = urlParams.get('q') || '';
const additionalOptions: AdditionalOptions = { isBackgroundSearch: false };
if (!showNsfw) {
additionalOptions['nsfw'] = false;
}
2019-04-15 06:07:23 +02:00
const INVALID_URI_CHARS = new RegExp(regexInvalidURI, 'gu');
let path;
let isValid = true;
try {
let { streamName } = parseURI(urlQuery.replace(/ /g, '-').replace(/:/g, '#'));
if (!isNameValid(streamName)) {
isValid = false;
}
} catch (e) {
isValid = false;
}
let claimId;
if (!/\s/.test(urlQuery) && urlQuery.length === 40) {
try {
const dummyUrlForClaimId = `x#${urlQuery}`;
({ claimId } = parseURI(dummyUrlForClaimId));
Lbry.claim_search({ claim_id: claimId }).then(res => {
if (res.items && res.items.length) {
const claim = res.items[0];
const url = formatLbryUrlForWeb(claim.canonical_url);
push(url);
}
});
} catch (e) {}
}
2020-03-26 22:47:07 +01:00
const modifiedUrlQuery =
isValid && path
? path
: urlQuery
.trim()
.replace(/\s+/g, '-')
.replace(INVALID_URI_CHARS, '');
const uriFromQuery = `lbry://${modifiedUrlQuery}`;
2019-03-28 17:53:13 +01:00
useEffect(() => {
if (urlQuery) {
search(urlQuery, additionalOptions);
2018-08-24 23:25:18 +02:00
}
2019-06-20 02:57:51 +02:00
}, [search, urlQuery]);
2019-03-28 17:53:13 +01:00
return (
2019-05-07 04:35:04 +02:00
<Page>
2019-04-04 23:05:23 +02:00
<section className="search">
{urlQuery && (
<Fragment>
{!SIMPLE_SITE && isValid && (
<header className="search__header">
<div className="claim-preview__actions--header">
<ClaimUri uri={uriFromQuery} noShortUrl />
<Button
button="link"
className="media__uri--right"
label={__('View top claims for %normalized_uri%', {
normalized_uri: uriFromQuery,
})}
navigate={`/$/${PAGES.TOP}?name=${modifiedUrlQuery}`}
icon={ICONS.TOP}
/>
</div>
<div className="card">
<ClaimPreview uri={uriFromQuery} type="large" placeholder="publish" />
</div>
</header>
)}
2019-04-04 23:05:23 +02:00
2020-01-02 23:30:58 +01:00
<ClaimList
uris={uris}
loading={isSearching}
header={<SearchOptions additionalOptions={additionalOptions} />}
injectedItem={SHOW_ADS && !isAuthenticated && IS_WEB && <Ads type="video" />}
2020-01-02 23:30:58 +01:00
headerAltControls={
<Fragment>
<span>{__('Find what you were looking for?')}</span>
<Button
button="alt"
description={__('Yes')}
onClick={() => onFeedbackPositive(urlQuery)}
icon={ICONS.YES}
/>
<Button
button="alt"
description={__('No')}
onClick={() => onFeedbackNegative(urlQuery)}
icon={ICONS.NO}
/>
</Fragment>
}
/>
2019-07-21 23:31:22 +02:00
<div className="help">{__('These search results are provided by LBRY, Inc.')}</div>
2019-04-04 23:05:23 +02:00
</Fragment>
)}
</section>
2019-03-28 17:53:13 +01:00
</Page>
);
2017-05-05 10:01:16 +02:00
}