LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

React/Redux - publish component #323

Merged
bones7242 merged 80 commits from react-upload into master 2018-01-25 22:43:20 +01:00
Conversation 1 Commits 80 Files changed 82 +157 -122
5 changed files with 157 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit ac0290ae15 - Show all commits

66
react/components/channelSelector.jsx
View file

@ -1,10 +1,72 @@
import React from 'react';
class ChannelSelector extends React.Component {
const LOGIN = 'login';
const CREATE = 'create';
class ChannelLoginForm extends React.Component {
constructor (props) {
super(props);
}
render () {
return (
<div>
<h3>channel component</h3>
<h4>Channel Login Form</h4>
</div>
);
}
}
class ChannelCreateForm extends React.Component {
constructor (props) {
super(props);
}
render () {
return (
<div>
<h4>Create Channel Form</h4>
</div>
);
}
}
class ChannelSelector extends React.Component {
constructor (props) {
super(props);
this.state = {
displayCreateOrLogin: LOGIN,
};
this.toggleCreateOrLogin = this.toggleCreateOrLogin.bind(this);
}
toggleCreateOrLogin (event) {
const selectedOption = event.target.selectedOptions[0].value;
if (selectedOption === 'login') {
this.setState({ displayCreateOrLogin: LOGIN });
} else {
this.setState({ displayCreateOrLogin: CREATE });
}
}
render () {
return (
<div>
{ this.props.publishToChannel && (
<div className="row row--padded row--no-top row--no-bottom row--wide">
<p id="input-error-channel-select" className="info-message-placeholder info-message--failure">{this.props.channelError}</p>
<div className="column column--3">
<label className="label" htmlFor="channel-name-select">Channel:</label>
</div><div className="column column--7">
<select type="text" id="channel-name-select" className="select select--arrow" onChange={this.toggleCreateOrLogin}>
{ this.props.loggedInChannel && <option value={this.props.loggedInChannel} id="publish-channel-select-channel-option">{this.props.loggedInChannel}</option> }
<option value="login">Existing</option>
<option value="create">New</option>
</select>
</div>
{ (this.state.displayCreateOrLogin === LOGIN) ? <ChannelLoginForm /> : <ChannelCreateForm /> }
</div>
)}
</div>
);
}

50
react/components/publishDetails.jsx → react/components/publishForm.jsx
View file

@ -6,9 +6,45 @@ import UrlInput from './urlInput.jsx';
import ThumbnailInput from './thumbnailInput.jsx';
import MetadataInputs from './metadataInputs.jsx';
class PublishDetails extends React.Component {
class AnonymousOrChannelSelect extends React.Component {
constructor (props) {
super(props);
this.toggleAnonymousPublish = this.toggleAnonymousPublish.bind(this);
}
toggleAnonymousPublish (event) {
const value = event.target.value;
if (value === 'anonymous') {
this.props.updateUploaderState('publishToChannel', false);
} else {
this.props.updateUploaderState('publishToChannel', true);
}
}
render () {
return (
<div className="row row--padded row--short row--wide">
<div className="column column--10">
<form>
<div className="column column--3 column--med-10">
<input type="radio" name="anonymous-or-channel" id="anonymous-radio" className="input-radio" value="anonymous" checked={!this.props.publishToChannel} onChange={this.toggleAnonymousPublish}/>
<label className="label label--pointer" htmlFor="anonymous-radio">Anonymous</label>
</div>
<div className="column column--7 column--med-10">
<input type="radio" name="anonymous-or-channel" id="channel-radio" className="input-radio" value="in a channel" checked={this.props.publishToChannel} onChange={this.toggleAnonymousPublish}/>
<label className="label label--pointer" htmlFor="channel-radio">In a channel</label>
</div>
</form>
</div>
</div>
);
}
}
class PublishForm extends React.Component {
constructor (props) {
super(props);
this.state = {
channelError: null,
}
// set defaults
this.updateUploaderState = this.updateUploaderState.bind(this);
this.clearUploaderState = this.clearUploaderState.bind(this);
@ -43,7 +79,15 @@ class PublishDetails extends React.Component {
<div className="column column--5 column--sml-10 align-content-top">
<div id="publish-active-area" className="row row--padded">
<ChannelSelector />
<AnonymousOrChannelSelect publishToChannel={this.props.publishToChannel} updateUploaderState={this.props.updateUploaderState}/>
<ChannelSelector
channel={this.props.channel}
loggedInChannel={this.props.loggedInChannel}
publishToChannel={this.props.publishToChannel}
updateUploaderState={this.updateUploaderState}
channelError={this.state.channelError}
/>
<UrlInput file={this.props.file}/>
@ -71,4 +115,4 @@ class PublishDetails extends React.Component {
}
};
module.exports = PublishDetails;
module.exports = PublishForm;

26
react/components/urlInput.jsx
View file

@ -1,6 +1,32 @@
import React from 'react';
class UrlInput extends React.Component {
constructor (props) {
super(props);
this.updateUrl = this.updateUrl.bind(this);
}
updateUrl (selectedOption) {
const urlChannel = document.getElementById('url-channel');
const urlNoChannelPlaceholder = document.getElementById('url-no-channel-placeholder');
const urlChannelPlaceholder = document.getElementById('url-channel-placeholder');
if (selectedOption === 'new' || selectedOption === 'login' || selectedOption === ''){
urlChannel.hidden = true;
urlNoChannelPlaceholder.hidden = true;
urlChannelPlaceholder.hidden = false;
} else if (selectedOption === 'anonymous'){
urlChannel.hidden = true;
urlNoChannelPlaceholder.hidden = false;
urlChannelPlaceholder.hidden = true;
} else {
urlChannel.hidden = false;
// show channel and short id
const selectedChannel = getCookie('channel_name');
const shortChannelId = getCookie('short_channel_id');
urlChannel.innerText = `${selectedChannel}:${shortChannelId}`;
urlNoChannelPlaceholder.hidden = true;
urlChannelPlaceholder.hidden = true;
}
}
render () {
return (
<div>

16
react/uploader.js
View file

@ -1,7 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom';
import Dropzone from './components/dropzone.jsx';
import PublishDetails from './components/publishDetails.jsx';
import PublishForm from './components/publishForm.jsx';
import PublishStatus from './components/publishStatus.jsx';
const DROPZONE = 'DROPZONE';
@ -9,15 +9,17 @@ const DETAILS = 'DETAILS';
const STATUS = 'STATUS';
const initialState = {
showComponent : DROPZONE, // DROPZONE, DETAILS, or PUBLISHING
loggedInChannel : null,
publishToChannel: false,
file : null,
title : '',
channel : '',
channel : null,
url : '',
thumbnail : '',
description : '',
license : '',
nsfw : '',
}
};
class Uploader extends React.Component {
constructor (props) {
@ -29,6 +31,10 @@ class Uploader extends React.Component {
this.showComponent = this.showComponent.bind(this);
this.stageFileAndShowDetails = this.stageFileAndShowDetails.bind(this);
}
componentDidMount () {
// check for whether a channel is logged in
// if so, setState loggedInChannel to the channel name
}
updateUploaderState (name, value) {
console.log(`updateUploaderState ${name} ${value}`);
this.setState({[name]: value});
@ -53,9 +59,11 @@ class Uploader extends React.Component {
<Dropzone stageFileAndShowDetails={this.stageFileAndShowDetails}/>
}
{ this.state.showComponent === DETAILS &&
<PublishDetails
<PublishForm
updateUploaderState={this.updateUploaderState}
clearUploaderState={this.clearUploaderState}
loggedInChannel={this.state.loggedInChannel}
publishToChannel={this.state.publishToChannel}
file={this.state.file}
title={this.state.title}
channel={this.state.channel}

105
views/partials/publishForm-Channel.handlebars
View file

@ -1,105 +0,0 @@
<!-- select whether to publish anonymously or in a channel -->
<div class="row row--padded row--short row--wide">
<div class="column column--10">
<form>
<div class="column column--3 column--med-10">
<input type="radio" name="anonymous-or-channel" id="anonymous-radio" class="input-radio" value="anonymous" {{#unless user}}checked {{/unless}} onchange="toggleChannel(event.target.value)"/>
<label class="label label--pointer" for="anonymous-radio">Anonymous</label>
</div><div class="column column--7 column--med-10">
<input type="radio" name="anonymous-or-channel" id="channel-radio" class="input-radio" value="in a channel" {{#if user}}checked {{/if}} onchange="toggleChannel(event.target.value)"/>
<label class="label label--pointer" for="channel-radio">In a channel</label>
</div>
</form>
</div>
</div>
<div id="channel-select-options" {{#unless user}}hidden="true"{{/unless}}>
<div class="row row--padded row--no-top row--no-bottom row--wide">
<!--error display-->
<p id="input-error-channel-select" class="info-message-placeholder info-message--failure"></p>
<!--channel login/create select-->
<div class="column column--3">
<label class="label" for="channel-name-select">Channel:</label>
</div><div class="column column--7">
<select type="text" id="channel-name-select" class="select select--arrow" onchange="toggleSelectedChannel(event.target.selectedOptions[0].value)">
{{#if user}}
<option value="{{user.channelName}}" id="publish-channel-select-channel-option">{{user.channelName}}</option>
{{/if}}
<option value="login">Existing</option>
<option value="new" >New</option>
</select>
</div>
</div>
<!-- log into an existing channel -->
<div id="channel-login-details" class="row row--padded row--short row--wide" {{#if user}}hidden="true"{{/if}}>
{{> channelLoginForm}}
</div>
<!-- create a channel -->
<div id="channel-create-details" class="row row--padded row--short row--wide" hidden="true">
{{> channelCreationForm}}
</div>
</div>
<script type="text/javascript">
// show or hide the channel selection tools
function toggleChannel (selectedOption) {
const channelSelectOptions = document.getElementById('channel-select-options');
// show/hide the login and new channel forms
if (selectedOption === 'anonymous') {
channelSelectOptions.hidden = true;
channelSelectOptions.hidden = true;
// update url
updateUrl(selectedOption);
} else if (selectedOption === 'in a channel') {
channelSelectOptions.hidden = false;
// update url
let selectedChannel = document.getElementById('channel-name-select').selectedOptions[0].value
toggleSelectedChannel(selectedChannel);
} else {
console.log('selected option was not recognized');
}
}
// show or hide the channel create/login tool
function toggleSelectedChannel (selectedChannel) {
const createChannelTool = document.getElementById('channel-create-details');
const loginToChannelTool = document.getElementById('channel-login-details');
// show/hide the login and new channel forms
if (selectedChannel === 'new') {
createChannelTool.hidden = false;
loginToChannelTool.hidden = true;
} else if (selectedChannel === 'login') {
loginToChannelTool.hidden = false;
createChannelTool.hidden = true;
} else {
// hide the login and new channel forms
loginToChannelTool.hidden = true;
createChannelTool.hidden = true;
validationFunctions.hideError(document.getElementById('input-error-channel-select'));
}
// update url
updateUrl(selectedChannel);
}
function updateUrl (selectedOption) {
const urlChannel = document.getElementById('url-channel');
const urlNoChannelPlaceholder = document.getElementById('url-no-channel-placeholder');
const urlChannelPlaceholder = document.getElementById('url-channel-placeholder');
if (selectedOption === 'new' || selectedOption === 'login' || selectedOption === ''){
urlChannel.hidden = true;
urlNoChannelPlaceholder.hidden = true;
urlChannelPlaceholder.hidden = false;
} else if (selectedOption === 'anonymous'){
urlChannel.hidden = true;
urlNoChannelPlaceholder.hidden = false;
urlChannelPlaceholder.hidden = true;
} else {
urlChannel.hidden = false;
// show channel and short id
const selectedChannel = getCookie('channel_name');
const shortChannelId = getCookie('short_channel_id');
urlChannel.innerText = `${selectedChannel}:${shortChannelId}`;
urlNoChannelPlaceholder.hidden = true;
urlChannelPlaceholder.hidden = true;
}
}
</script>