lbry-desktop/ui/js/page/discover.js

170 lines
4.5 KiB
JavaScript
Raw Normal View History

2016-11-22 21:19:08 +01:00
import React from 'react';
import lbry from '../lbry.js';
import lighthouse from '../lighthouse.js';
2017-01-13 18:13:46 +01:00
import {FileTile} from '../component/file-tile.js';
2017-01-21 22:31:41 +01:00
import {Link} from '../component/link.js';
import {ToolTip} from '../component/tooltip.js';
import {BusyMessage} from '../component/common.js';
2016-11-22 21:19:08 +01:00
2016-08-08 06:47:48 +02:00
var fetchResultsStyle = {
2016-04-10 02:00:56 +02:00
color: '#888',
textAlign: 'center',
fontSize: '1.2em'
};
var SearchActive = React.createClass({
render: function() {
return (
<div style={fetchResultsStyle}>
<BusyMessage message="Looking up the Dewey Decimals" />
</div>
2016-04-10 02:00:56 +02:00
);
}
});
var searchNoResultsStyle = {
textAlign: 'center'
}, searchNoResultsMessageStyle = {
fontStyle: 'italic',
marginRight: '5px'
};
var SearchNoResults = React.createClass({
render: function() {
return (
<section style={searchNoResultsStyle}>
<span style={searchNoResultsMessageStyle}>No one has checked anything in for {this.props.query} yet.</span>
<Link label="Be the first" href="?publish" />
2016-04-10 02:00:56 +02:00
</section>
);
}
});
var SearchResults = React.createClass({
render: function() {
2017-01-13 05:12:53 +01:00
var rows = [],
seenNames = {}; //fix this when the search API returns claim IDs
this.props.results.forEach(function({name, value}) {
2017-01-13 05:12:53 +01:00
if (!seenNames[name]) {
seenNames[name] = name;
rows.push(
<FileTile key={name} name={name} sdHash={value.sources.lbry_sd_hash} />
2017-01-13 05:12:53 +01:00
);
}
2016-04-10 02:00:56 +02:00
});
return (
<div>{rows}</div>
2016-04-10 02:00:56 +02:00
);
}
});
var featuredContentLegendStyle = {
fontSize: '12px',
color: '#aaa',
verticalAlign: '15%',
};
var FeaturedContent = React.createClass({
2017-02-09 21:53:19 +01:00
getInitialState: function() {
return {
featuredNames: [],
};
},
componentWillMount: function() {
lbry.getFeaturedDiscoverNames().then((featuredNames) => {
this.setState({ featuredNames: featuredNames });
});
},
render: function() {
const toolTipText = ('Community Content is a public space where anyone can share content with the ' +
'rest of the LBRY community. Bid on the names "one," "two," "three," "four" and ' +
'"five" to put your content here!');
2017-02-09 21:53:19 +01:00
return (
<div className="row-fluid">
<div className="span6">
<h3>Featured Content</h3>
2017-02-09 21:53:19 +01:00
{ this.state.featuredNames.map((name) => { return <FileTile key={name} name={name} /> }) }
</div>
<div className="span6">
<h3>
2017-01-21 22:31:41 +01:00
Community Content
<ToolTip label="What's this?" body={toolTipText} className="tooltip--header"/>
</h3>
<FileTile name="one" />
<FileTile name="two" />
<FileTile name="three" />
<FileTile name="four" />
<FileTile name="five" />
</div>
</div>
);
}
});
2016-04-10 02:00:56 +02:00
2016-08-08 02:57:12 +02:00
var DiscoverPage = React.createClass({
2016-04-10 02:00:56 +02:00
userTypingTimer: null,
componentDidUpdate: function() {
if (this.props.query != this.state.query)
{
this.handleSearchChanged(this.props.query);
}
},
componentWillReceiveProps: function(nextProps, nextState) {
if (nextProps.query != nextState.query)
{
this.handleSearchChanged(nextProps.query);
}
},
handleSearchChanged: function(query) {
this.setState({
searching: true,
query: query,
});
lighthouse.search(query).then(this.searchCallback);
},
componentWillMount: function() {
2016-08-08 02:57:12 +02:00
document.title = "Discover";
if (this.props.query) {
// Rendering with a query already typed
this.handleSearchChanged(this.props.query);
}
2016-08-08 02:57:12 +02:00
},
2016-04-10 02:00:56 +02:00
getInitialState: function() {
return {
results: [],
2016-08-08 06:47:48 +02:00
query: this.props.query,
searching: ('query' in this.props) && (this.props.query.length > 0)
2016-04-10 02:00:56 +02:00
};
},
2016-08-08 06:47:48 +02:00
searchCallback: function(results) {
2016-04-10 02:00:56 +02:00
if (this.state.searching) //could have canceled while results were pending, in which case nothing to do
{
this.setState({
results: results,
2016-08-08 06:47:48 +02:00
searching: false //multiple searches can be out, we're only done if we receive one we actually care about
2016-04-10 02:00:56 +02:00
});
}
},
render: function() {
return (
2016-08-08 02:57:12 +02:00
<main>
2016-04-10 02:00:56 +02:00
{ this.state.searching ? <SearchActive /> : null }
{ !this.state.searching && this.props.query && this.state.results.length ? <SearchResults results={this.state.results} /> : null }
{ !this.state.searching && this.props.query && !this.state.results.length ? <SearchNoResults query={this.props.query} /> : null }
{ !this.props.query && !this.state.searching ? <FeaturedContent /> : null }
2016-04-10 02:00:56 +02:00
</main>
);
}
2016-08-21 22:59:32 +02:00
});
2016-11-22 21:19:08 +01:00
export default DiscoverPage;