lbry-desktop/ui/js/component/fileListSearch/view.jsx

import React from 'react';
import lbry from 'lbry';
import lbryio from 'lbryio';
import lbryuri from 'lbryuri';
import lighthouse from 'lighthouse';
import FileTile from 'component/fileTile';
import Link from 'component/link';
import { ToolTip } from 'component/tooltip.js';
import { BusyMessage } from 'component/common.js';

const SearchNoResults = props => {
	const { navigate, query } = props;

	return (
		<section>
			<span className="empty">
				{(__('No one has checked anything in for %s yet.'), query)} {' '}
				<Link label={__('Be the first')} onClick={() => navigate('/publish')} />
			</span>
		</section>
	);
};

const FileListSearchResults = props => {
	const { results } = props;

	const rows = [],
		seenNames = {}; //fix this when the search API returns claim IDs

	for (let {
		name,
		claim,
		claim_id,
		channel_name,
		channel_id,
		txid,
		nout
	} of results) {
		const uri = lbryuri.build({
			channelName: channel_name,
			contentName: name,
			claimId: channel_id || claim_id
		});

		rows.push(<FileTile key={uri} uri={uri} />);
	}
	return <div>{rows}</div>;
};

class FileListSearch extends React.Component {
	componentWillMount() {
		this.props.search(this.props.query);
	}

	render() {
		const { isSearching, results } = this.props;

		return (
			<div>
				{isSearching &&
					!results &&
					<BusyMessage message={__('Looking up the Dewey Decimals')} />}

				{isSearching &&
					results &&
					<BusyMessage message={__('Refreshing the Dewey Decimals')} />}

				{results && !!results.length
					? <FileListSearchResults {...this.props} />
					: <SearchNoResults {...this.props} />}
			</div>
		);
	}
}

export default FileListSearch;