From e4ca14aa47b049ae39125b371084753882e3ecbc Mon Sep 17 00:00:00 2001 From: Jeremy Kauffman Date: Mon, 8 May 2017 18:22:27 -0400 Subject: [PATCH] fix some minor things with search --- .../{fileCardStream => fileCard}/index.js | 4 +- .../{fileCardStream => fileCard}/view.jsx | 5 +- ui/js/component/fileList/view.jsx | 6 +- ui/js/component/fileTile/index.js | 28 +++ ui/js/component/fileTile/view.jsx | 126 +++++++++++-- ui/js/component/fileTileStream/index.js | 55 ------ ui/js/component/fileTileStream/view.jsx | 165 ------------------ ui/js/component/tooltip.js | 4 +- ui/js/page/discover/view.jsx | 7 +- ui/js/page/fileListDownloaded/view.jsx | 2 +- ui/js/page/fileListPublished/view.jsx | 2 +- ui/js/page/search/view.jsx | 16 +- 12 files changed, 158 insertions(+), 262 deletions(-) rename ui/js/component/{fileCardStream => fileCard}/index.js (92%) rename ui/js/component/{fileCardStream => fileCard}/view.jsx (96%) delete mode 100644 ui/js/component/fileTileStream/index.js delete mode 100644 ui/js/component/fileTileStream/view.jsx diff --git a/ui/js/component/fileCardStream/index.js b/ui/js/component/fileCard/index.js similarity index 92% rename from ui/js/component/fileCardStream/index.js rename to ui/js/component/fileCard/index.js index 35ef03cc9..4ee8482c9 100644 --- a/ui/js/component/fileCardStream/index.js +++ b/ui/js/component/fileCard/index.js @@ -20,7 +20,7 @@ import { import { makeSelectResolvingUri, } from 'selectors/content' -import FileCardStream from './view' +import FileCard from './view' const makeSelect = () => { const selectClaimForUri = makeSelectClaimForUri() @@ -47,4 +47,4 @@ const perform = (dispatch) => ({ navigate: (path, params) => dispatch(doNavigate(path, params)), }) -export default connect(makeSelect, perform)(FileCardStream) +export default connect(makeSelect, perform)(FileCard) diff --git a/ui/js/component/fileCardStream/view.jsx b/ui/js/component/fileCard/view.jsx similarity index 96% rename from ui/js/component/fileCardStream/view.jsx rename to ui/js/component/fileCard/view.jsx index 9e2e14083..ee21f7b37 100644 --- a/ui/js/component/fileCardStream/view.jsx +++ b/ui/js/component/fileCard/view.jsx @@ -6,7 +6,7 @@ import {Thumbnail, TruncatedText,} from 'component/common'; import FilePrice from 'component/filePrice' import UriIndicator from 'component/uriIndicator'; -class FileCardStream extends React.Component { +class FileCard extends React.Component { constructor(props) { super(props) this._fileInfoSubscribeId = null @@ -67,7 +67,6 @@ class FileCardStream extends React.Component { const isConfirmed = !!metadata; const title = isConfirmed ? metadata.title : uri; const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw; - const primaryUrl = '/show?uri=' + uri; let description = "" if (isConfirmed) { description = metadata.description @@ -109,4 +108,4 @@ class FileCardStream extends React.Component { } } -export default FileCardStream +export default FileCard diff --git a/ui/js/component/fileList/view.jsx b/ui/js/component/fileList/view.jsx index 2a946746c..be1349987 100644 --- a/ui/js/component/fileList/view.jsx +++ b/ui/js/component/fileList/view.jsx @@ -3,7 +3,7 @@ import lbry from 'lbry.js'; import lbryuri from 'lbryuri.js'; import Link from 'component/link'; import {FormField} from 'component/form.js'; -import FileTileStream from 'component/fileTileStream'; +import FileTile from 'component/fileTile'; import rewards from 'rewards.js'; import lbryio from 'lbryio.js'; import {BusyMessage, Thumbnail} from 'component/common.js'; @@ -71,7 +71,7 @@ class FileList extends React.Component { contentName: fileInfo.name, channelName: fileInfo.channel_name, }) - content.push() + content.push() }) return (
@@ -162,7 +162,7 @@ class FileList extends React.Component { // const uri = lbryuri.build({contentName: name, channelName: channel_name}); // seenUris[name] = true; -// content.push() +// content.push() // } // return ( diff --git a/ui/js/component/fileTile/index.js b/ui/js/component/fileTile/index.js index 5703e28cd..9d4347db9 100644 --- a/ui/js/component/fileTile/index.js +++ b/ui/js/component/fileTile/index.js @@ -2,26 +2,54 @@ import React from 'react' import { connect } from 'react-redux' +import { + doNavigate, +} from 'actions/app' import { makeSelectClaimForUri, + makeSelectSourceForUri, + makeSelectMetadataForUri, } from 'selectors/claims' import { makeSelectFileInfoForUri, } from 'selectors/file_info' +import { + makeSelectFetchingAvailabilityForUri, + makeSelectAvailabilityForUri, +} from 'selectors/availability' +import { + selectObscureNsfw, +} from 'selectors/app' +import { + makeSelectResolvingUri, +} from 'selectors/content' import FileTile from './view' const makeSelect = () => { const selectClaimForUri = makeSelectClaimForUri() const selectFileInfoForUri = makeSelectFileInfoForUri() + const selectFetchingAvailabilityForUri = makeSelectFetchingAvailabilityForUri() + const selectAvailabilityForUri = makeSelectAvailabilityForUri() + const selectMetadataForUri = makeSelectMetadataForUri() + const selectSourceForUri = makeSelectSourceForUri() + const selectResolvingUri = makeSelectResolvingUri() + const select = (state, props) => ({ claim: selectClaimForUri(state, props), fileInfo: selectFileInfoForUri(state, props), + fetchingAvailability: selectFetchingAvailabilityForUri(state, props), + selectAvailabilityForUri: selectAvailabilityForUri(state, props), + obscureNsfw: selectObscureNsfw(state), + metadata: selectMetadataForUri(state, props), + source: selectSourceForUri(state, props), + isResolvingUri: selectResolvingUri(state, props), }) return select } const perform = (dispatch) => ({ + navigate: (path, params) => dispatch(doNavigate(path, params)) }) export default connect(makeSelect, perform)(FileTile) diff --git a/ui/js/component/fileTile/view.jsx b/ui/js/component/fileTile/view.jsx index c85309995..1f8df397e 100644 --- a/ui/js/component/fileTile/view.jsx +++ b/ui/js/component/fileTile/view.jsx @@ -2,30 +2,120 @@ import React from 'react'; import lbry from 'lbry.js'; import lbryuri from 'lbryuri.js'; import Link from 'component/link'; -import FileCardStream from 'component/fileCardStream' -import FileTileStream from 'component/fileTileStream' import FileActions from 'component/fileActions'; +import {Thumbnail, TruncatedText,} from 'component/common.js'; +import FilePrice from 'component/filePrice' +import UriIndicator from 'component/uriIndicator'; +/*should be merged into FileTile once FileTile is refactored to take a single id*/ class FileTile extends React.Component { - render() { - const { - displayStyle, - uri, - claim, - } = this.props + constructor(props) { + super(props) + this._fileInfoSubscribeId = null + this._isMounted = null + this.state = { + showNsfwHelp: false, + isHidden: false, + } + } - if(!claim) { - if (displayStyle == 'card') { - return - } - return null + componentDidMount() { + this._isMounted = true; + if (this.props.hideOnRemove) { + this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.outpoint, this.onFileInfoUpdate); + } + } + + componentWillUnmount() { + if (this._fileInfoSubscribeId) { + lbry.fileInfoUnsubscribe(this.props.outpoint, this._fileInfoSubscribeId); + } + } + + onFileInfoUpdate(fileInfo) { + if (!fileInfo && this._isMounted && this.props.hideOnRemove) { + this.setState({ + isHidden: true + }); + } + } + + handleMouseOver() { + if (this.props.obscureNsfw && this.props.metadata && this.props.metadata.nsfw) { + this.setState({ + showNsfwHelp: true, + }); + } + } + + handleMouseOut() { + if (this.state.showNsfwHelp) { + this.setState({ + showNsfwHelp: false, + }); + } + } + + render() { + if (this.state.isHidden) { + return null; } - return displayStyle == 'card' ? - - : - + const { + metadata, + isResolvingUri, + navigate, + hidePrice, + } = this.props + + const uri = lbryuri.normalize(this.props.uri); + const isConfirmed = !!metadata; + const title = isConfirmed ? metadata.title : uri; + const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw; + + let description = "" + if (isConfirmed) { + description = metadata.description + } else if (isResolvingUri) { + description = "Loading..." + } else { + description = This file is pending confirmation + } + + return ( +
+ navigate('/show', { uri })} className="card__link"> +
+
+
+
+
+ { !hidePrice ? : null} +
{title}
+
+ +
+
+
+ + {description} + +
+
+ {this.state.showNsfwHelp && this.state.hovered + ?
+

+ This content is Not Safe For Work. + To view adult content, please change your navigate('/settings')} label="Settings" />. +

+
+ : null} +
+ +
+ ); } } -export default FileTile \ No newline at end of file +export default FileTile diff --git a/ui/js/component/fileTileStream/index.js b/ui/js/component/fileTileStream/index.js deleted file mode 100644 index 7e49856ef..000000000 --- a/ui/js/component/fileTileStream/index.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react' -import { - connect -} from 'react-redux' -import { - doNavigate, -} from 'actions/app' -import { - makeSelectClaimForUri, - makeSelectSourceForUri, - makeSelectMetadataForUri, -} from 'selectors/claims' -import { - makeSelectFileInfoForUri, -} from 'selectors/file_info' -import { - makeSelectFetchingAvailabilityForUri, - makeSelectAvailabilityForUri, -} from 'selectors/availability' -import { - selectObscureNsfw, -} from 'selectors/app' -import { - makeSelectResolvingUri, -} from 'selectors/content' -import FileTileStream from './view' - -const makeSelect = () => { - const selectClaimForUri = makeSelectClaimForUri() - const selectFileInfoForUri = makeSelectFileInfoForUri() - const selectFetchingAvailabilityForUri = makeSelectFetchingAvailabilityForUri() - const selectAvailabilityForUri = makeSelectAvailabilityForUri() - const selectMetadataForUri = makeSelectMetadataForUri() - const selectSourceForUri = makeSelectSourceForUri() - const selectResolvingUri = makeSelectResolvingUri() - - const select = (state, props) => ({ - claim: selectClaimForUri(state, props), - fileInfo: selectFileInfoForUri(state, props), - fetchingAvailability: selectFetchingAvailabilityForUri(state, props), - selectAvailabilityForUri: selectAvailabilityForUri(state, props), - obscureNsfw: selectObscureNsfw(state), - metadata: selectMetadataForUri(state, props), - source: selectSourceForUri(state, props), - isResolvingUri: selectResolvingUri(state, props), - }) - - return select -} - -const perform = (dispatch) => ({ - navigate: (path, params) => dispatch(doNavigate(path, params)) -}) - -export default connect(makeSelect, perform)(FileTileStream) diff --git a/ui/js/component/fileTileStream/view.jsx b/ui/js/component/fileTileStream/view.jsx deleted file mode 100644 index 9453f0cb0..000000000 --- a/ui/js/component/fileTileStream/view.jsx +++ /dev/null @@ -1,165 +0,0 @@ -import React from 'react'; -import lbry from 'lbry.js'; -import lbryuri from 'lbryuri.js'; -import Link from 'component/link'; -import FileActions from 'component/fileActions'; -import {Thumbnail, TruncatedText,} from 'component/common.js'; -import FilePrice from 'component/filePrice' -import UriIndicator from 'component/uriIndicator'; - -/*should be merged into FileTile once FileTile is refactored to take a single id*/ -class FileTileStream extends React.Component { - constructor(props) { - super(props) - this._fileInfoSubscribeId = null - this._isMounted = null - this.state = { - showNsfwHelp: false, - isHidden: false, - } - } - - componentDidMount() { - this._isMounted = true; - if (this.props.hideOnRemove) { - this._fileInfoSubscribeId = lbry.fileInfoSubscribe(this.props.outpoint, this.onFileInfoUpdate); - } - } - - componentWillUnmount() { - if (this._fileInfoSubscribeId) { - lbry.fileInfoUnsubscribe(this.props.outpoint, this._fileInfoSubscribeId); - } - } - - onFileInfoUpdate(fileInfo) { - if (!fileInfo && this._isMounted && this.props.hideOnRemove) { - this.setState({ - isHidden: true - }); - } - } - - handleMouseOver() { - if (this.props.obscureNsfw && this.props.metadata && this.props.metadata.nsfw) { - this.setState({ - showNsfwHelp: true, - }); - } - } - - handleMouseOut() { - if (this.state.showNsfwHelp) { - this.setState({ - showNsfwHelp: false, - }); - } - } - - render() { - if (this.state.isHidden) { - return null; - } - - const { - metadata, - isResolvingUri, - navigate, - hidePrice, - } = this.props - - const uri = lbryuri.normalize(this.props.uri); - const isConfirmed = !!metadata; - const title = isConfirmed ? metadata.title : uri; - const obscureNsfw = this.props.obscureNsfw && isConfirmed && metadata.nsfw; - - let description = "" - if (isConfirmed) { - description = metadata.description - } else if (isResolvingUri) { - description = "Loading..." - } else { - description = This file is pending confirmation - } - - return ( -
-
- navigate('/show', { uri })} className="card__link"> -
-
{title}
-
- { !this.props.hidePrice ? : null} - -
-
- { metadata && metadata.thumbnail ? -
: -
- } -
- - {isConfirmed - ? metadata.description - : This file is pending confirmation.} - -
- - {this.state.showNsfwHelp && this.state.hovered - ?
-

- This content is Not Safe For Work. - To view adult content, please change your navigate('/settings')} label="Settings" />. -

-
- : null} -
-
- //
- //
- //
- // navigate('/show', { uri })}> - // {metadata && metadata.thumbnail ? - // - // : - // - // } - // - //
- //
- //
- // { !this.props.hidePrice - // ? - // : null} - //
navigate('/show', { uri })}>{uri}
- //

- // navigate('/show', { uri })} title={title}> - // - // {title} - // - // - //

- //
- //
- //
- //
- //

- // {description} - //

- //
- //
- //
- // {this.state.showNsfwHelp - // ?
- //

- // This content is Not Safe For Work. - // To view adult content, please change your navigate('/settings')} label="Settings" />. - //

- //
- // : null} - //
- ); - } -} - -export default FileTileStream diff --git a/ui/js/component/tooltip.js b/ui/js/component/tooltip.js index eb7d7d4fb..052de0513 100644 --- a/ui/js/component/tooltip.js +++ b/ui/js/component/tooltip.js @@ -33,4 +33,6 @@ export let ToolTip = React.createClass({ ); } -}); \ No newline at end of file +}); + +export default ToolTip \ No newline at end of file diff --git a/ui/js/page/discover/view.jsx b/ui/js/page/discover/view.jsx index 07d1823d5..c9dbfeabf 100644 --- a/ui/js/page/discover/view.jsx +++ b/ui/js/page/discover/view.jsx @@ -1,9 +1,8 @@ import React from 'react'; import lbryio from 'lbryio.js'; import lbryuri from 'lbryuri' -import FileTile from 'component/fileTile'; -import { FileTileStream } from 'component/fileTileStream' -import {ToolTip} from 'component/tooltip.js'; +import FileCard from 'component/fileCard'; +import ToolTip from 'component/tooltip.js'; const communityCategoryToolTipText = ('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 ' + @@ -19,7 +18,7 @@ const FeaturedCategory = (props) => {

{category} {category && category.match(/^community/i) && }

- {names && names.map(name => )} + {names && names.map(name => )} } diff --git a/ui/js/page/fileListDownloaded/view.jsx b/ui/js/page/fileListDownloaded/view.jsx index 7163160ff..48d85b864 100644 --- a/ui/js/page/fileListDownloaded/view.jsx +++ b/ui/js/page/fileListDownloaded/view.jsx @@ -3,7 +3,7 @@ import lbry from 'lbry.js'; import lbryuri from 'lbryuri.js'; import Link from 'component/link'; import {FormField} from 'component/form.js'; -import {FileTileStream} from 'component/fileTile'; +import {FileTile} from 'component/fileTile'; import rewards from 'rewards.js'; import lbryio from 'lbryio.js'; import {BusyMessage, Thumbnail} from 'component/common.js'; diff --git a/ui/js/page/fileListPublished/view.jsx b/ui/js/page/fileListPublished/view.jsx index 0306c543c..686e7e314 100644 --- a/ui/js/page/fileListPublished/view.jsx +++ b/ui/js/page/fileListPublished/view.jsx @@ -3,7 +3,7 @@ import lbry from 'lbry.js'; import lbryuri from 'lbryuri.js'; import Link from 'component/link'; import {FormField} from 'component/form.js'; -import {FileTileStream} from 'component/fileTile'; +import {FileTile} from 'component/fileTile'; import rewards from 'rewards.js'; import lbryio from 'lbryio.js'; import {BusyMessage, Thumbnail} from 'component/common.js'; diff --git a/ui/js/page/search/view.jsx b/ui/js/page/search/view.jsx index 7dc5028be..15fa36671 100644 --- a/ui/js/page/search/view.jsx +++ b/ui/js/page/search/view.jsx @@ -4,7 +4,6 @@ import lbryio from 'lbryio'; import lbryuri from 'lbryuri'; import lighthouse from 'lighthouse'; import FileTile from 'component/fileTile' -import FileTileStream from 'component/fileTileStream' import Link from 'component/link' import {ToolTip} from 'component/tooltip.js'; import {BusyMessage} from 'component/common.js'; @@ -17,7 +16,7 @@ const SearchNoResults = (props) => { return
- No one has checked anything in for {query} yet. + No one has checked anything in for {query} yet. { ' ' } navigate('/publish')} />
; @@ -39,7 +38,7 @@ const SearchResultList = (props) => { }); rows.push( - + ); } return ( @@ -49,13 +48,12 @@ const SearchResultList = (props) => { const SearchResults = (props) => { const { - searching, - results, - query, + isSearching, + results } = props return ( - searching ? + isSearching ? : (results && results.length) ? : @@ -68,7 +66,7 @@ const SearchPage = (props) => { const { query, } = props - +// return (
{ isValidUri(query) ? @@ -84,7 +82,7 @@ const SearchPage = (props) => { Search Results for {query} - +
)