From 1d84728bb6eb16cc4241d24ada0cc150ad4dc0b4 Mon Sep 17 00:00:00 2001 From: bill bittner Date: Thu, 4 Jan 2018 14:14:03 -0800 Subject: [PATCH] separated out the details components --- react/components/channelSelector.jsx | 13 +++ react/components/metadataInputs.jsx | 13 +++ .../{preview.jsx => previewDropzone.jsx} | 4 +- react/components/publishDetails.jsx | 86 +++++-------------- react/components/thumbnailInput.jsx | 13 +++ react/components/titleInput.jsx | 21 +++++ react/components/urlInput.jsx | 13 +++ 7 files changed, 96 insertions(+), 67 deletions(-) create mode 100644 react/components/channelSelector.jsx create mode 100644 react/components/metadataInputs.jsx rename react/components/{preview.jsx => previewDropzone.jsx} (93%) create mode 100644 react/components/thumbnailInput.jsx create mode 100644 react/components/titleInput.jsx create mode 100644 react/components/urlInput.jsx diff --git a/react/components/channelSelector.jsx b/react/components/channelSelector.jsx new file mode 100644 index 00000000..5598b0fb --- /dev/null +++ b/react/components/channelSelector.jsx @@ -0,0 +1,13 @@ +import React from 'react'; + +class ChannelSelector extends React.Component { + render () { + return ( +
+

channel component

+
+ ); + } +} + +module.exports = ChannelSelector; diff --git a/react/components/metadataInputs.jsx b/react/components/metadataInputs.jsx new file mode 100644 index 00000000..09d76351 --- /dev/null +++ b/react/components/metadataInputs.jsx @@ -0,0 +1,13 @@ +import React from 'react'; + +class MetadataInputs extends React.Component { + render () { + return ( +
+

details component

+
+ ); + } +} + +module.exports = MetadataInputs; diff --git a/react/components/preview.jsx b/react/components/previewDropzone.jsx similarity index 93% rename from react/components/preview.jsx rename to react/components/previewDropzone.jsx index 0d650929..752bbf2e 100644 --- a/react/components/preview.jsx +++ b/react/components/previewDropzone.jsx @@ -1,6 +1,6 @@ import React from 'react'; -class Preview extends React.Component { +class PreviewDropzone extends React.Component { constructor (props) { super(props); this.state = { @@ -39,4 +39,4 @@ class Preview extends React.Component { } }; -module.exports = Preview; +module.exports = PreviewDropzone; diff --git a/react/components/publishDetails.jsx b/react/components/publishDetails.jsx index 4b9562e6..e73f5c23 100644 --- a/react/components/publishDetails.jsx +++ b/react/components/publishDetails.jsx @@ -1,63 +1,10 @@ import React from 'react'; -import Preview from './preview.jsx'; - -class Title extends React.Component { - constructor (props) { - super(props); - this.handleInput = this.handleInput.bind(this); - } - handleInput (e) { - e.preventDefault(); - const name = e.target.name; - const value = e.target.value; - this.props.updateUploaderState(name, value); - } - render () { - return ( - - ); - } -} - -class Channel extends React.Component { - render () { - return ( -
-

channel component

-
- ); - } -} - -class Url extends React.Component { - render () { - return ( -
-

url component

-
- ); - } -} - -class Thumbnail extends React.Component { - render () { - return ( -
-

thumbnail component

-
- ); - } -} - -class Details extends React.Component { - render () { - return ( -
-

details component

-
- ); - } -} +import PreviewDropzone from './previewDropzone.jsx'; +import TitleInput from './titleInput.jsx'; +import ChannelSelector from './channelSelector.jsx'; +import UrlInput from './urlInput.jsx'; +import ThumbnailInput from './thumbnailInput.jsx'; +import MetadataInputs from './metadataInputs.jsx'; class PublishDetails extends React.Component { constructor (props) { @@ -80,21 +27,29 @@ class PublishDetails extends React.Component { return (
- + + <TitleInput title={this.props.title} updateUploaderState={this.updateUploaderState}/> + </div> <div className="column column--5 column--sml-10" > <div className="row row--padded"> - <Preview + + <PreviewDropzone file={this.props.file} /> + </div> </div> <div className="column column--5 column--sml-10 align-content-top"> <div id="publish-active-area" className="row row--padded"> - <Channel /> - <Url file={this.props.file}/> - { (this.props.file.type === 'video/mp4') && <Thumbnail thumbnail={this.props.thumbnail}/> } - <Details /> + + <ChannelSelector /> + + <UrlInput file={this.props.file}/> + + { (this.props.file.type === 'video/mp4') && <ThumbnailInput thumbnail={this.props.thumbnail}/> } + + <MetadataInputs /> <div className="row row--padded row--wide"> <div className="input-error" id="input-error-publish-submit" hidden="true">{this.props.inputError}</div> @@ -108,6 +63,7 @@ class PublishDetails extends React.Component { <div className="row row--short align-content-center"> <p className="fine-print">By clicking 'Upload', you affirm that you have the rights to publish this content to the LBRY network, and that you understand the properties of publishing it to a decentralized, user-controlled network. <a className="link--primary" target="_blank" href="https://lbry.io/learn">Read more.</a></p> </div> + </div> </div> </div> diff --git a/react/components/thumbnailInput.jsx b/react/components/thumbnailInput.jsx new file mode 100644 index 00000000..1f578b00 --- /dev/null +++ b/react/components/thumbnailInput.jsx @@ -0,0 +1,13 @@ +import React from 'react'; + +class ThumbnailInput extends React.Component { + render () { + return ( + <div> + <h3>thumbnail component</h3> + </div> + ); + } +} + +module.exports = ThumbnailInput; diff --git a/react/components/titleInput.jsx b/react/components/titleInput.jsx new file mode 100644 index 00000000..5540fd30 --- /dev/null +++ b/react/components/titleInput.jsx @@ -0,0 +1,21 @@ +import React from 'react'; + +class TitleInput extends React.Component { + constructor (props) { + super(props); + this.handleInput = this.handleInput.bind(this); + } + handleInput (e) { + e.preventDefault(); + const name = e.target.name; + const value = e.target.value; + this.props.updateUploaderState(name, value); + } + render () { + return ( + <input type="text" id="publish-title" className="input-text text--large input-text--full-width" name="title" placeholder="Give your post a title..." onChange={this.handleInput} value={this.props.title}/> + ); + } +} + +module.exports = TitleInput; diff --git a/react/components/urlInput.jsx b/react/components/urlInput.jsx new file mode 100644 index 00000000..5edc96e4 --- /dev/null +++ b/react/components/urlInput.jsx @@ -0,0 +1,13 @@ +import React from 'react'; + +class UrlInput extends React.Component { + render () { + return ( + <div> + <h3>url component</h3> + </div> + ); + } +} + +module.exports = UrlInput;