React/Redux - publish component #323
|
|
@ -1,4 +1,4 @@
|
||||||
import * as actions from '../constants/action_types.js';
|
import * as actions from 'constants/action_types';
|
||||||
|
|
||||||
// export action creators
|
// export action creators
|
||||||
export function selectFile (file) {
|
export function selectFile (file) {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import ProgressBar from '../components/ProgressBar.jsx';
|
import ProgressBar from 'components/ProgressBar';
|
||||||
import * as publishStates from '../constants/publishing_states';
|
import * as publishStates from 'constants/publishing_states';
|
||||||
|
|
||||||
function PublishStatus ({ status, message }) {
|
function PublishStatus ({ status, message }) {
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { updateLoggedInChannel } from '../../actions';
|
import { updateLoggedInChannel } from 'actions';
|
||||||
import View from './view.jsx';
|
import View from './view';
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => {
|
const mapDispatchToProps = dispatch => {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { makeGetRequest, makePostRequest } from '../../utils/xhr.js';
|
import { makeGetRequest, makePostRequest } from 'utils/xhr';
|
||||||
import { setUserCookies } from '../../utils/cookies.js';
|
import { setUserCookies } from 'utils/cookies';
|
||||||
import { replaceChannelSelectionInNavBar } from '../../utils/page.js';
|
import { replaceChannelSelectionInNavBar } from 'utils/page';
|
||||||
|
|
||||||
class ChannelCreateForm extends React.Component {
|
class ChannelCreateForm extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { updateLoggedInChannel } from '../../actions';
|
import { updateLoggedInChannel } from 'actions';
|
||||||
import View from './view.jsx';
|
import View from './view';
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => {
|
const mapDispatchToProps = dispatch => {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik I really like how they use the Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik
I really like how they use the `render` prop, I think it's a really nice way to interact with React elements
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { makePostRequest } from '../../utils/xhr.js';
|
import { makePostRequest } from 'utils/xhr';
|
||||||
|
Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik I really like how they use the Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik
I really like how they use the `render` prop, I think it's a really nice way to interact with React elements
Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik I really like how they use the Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik
I really like how they use the `render` prop, I think it's a really nice way to interact with React elements
|
|||||||
import { setUserCookies } from '../../utils/cookies.js';
|
import { setUserCookies } from 'utils/cookies';
|
||||||
|
Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik I really like how they use the Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik
I really like how they use the `render` prop, I think it's a really nice way to interact with React elements
Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik I really like how they use the Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik
I really like how they use the `render` prop, I think it's a really nice way to interact with React elements
|
|||||||
import { replaceChannelSelectionInNavBar } from '../../utils/page.js';
|
import { replaceChannelSelectionInNavBar } from 'utils/page';
|
||||||
|
Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik I really like how they use the Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik
I really like how they use the `render` prop, I think it's a really nice way to interact with React elements
Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik I really like how they use the Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik
I really like how they use the `render` prop, I think it's a really nice way to interact with React elements
|
|||||||
|
|
||||||
class ChannelLoginForm extends React.Component {
|
class ChannelLoginForm extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
|
|
|
||||||
|
Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik I really like how they use the Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik
I really like how they use the `render` prop, I think it's a really nice way to interact with React elements
Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik I really like how they use the Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik
I really like how they use the `render` prop, I think it's a really nice way to interact with React elements
|
|||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import {connect} from 'react-redux';
|
import {connect} from 'react-redux';
|
||||||
import {setPublishInChannel} from '../../actions';
|
import {setPublishInChannel} from 'actions';
|
||||||
import View from './view.jsx';
|
import View from './view.jsx';
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
const mapStateToProps = state => {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
|
Same here, this should be moved to Same here, this should be moved to `componentDidMount`
Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state. I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen. Whenever you separate the data into two sources it can cause some weird issues. Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state.
I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen.
Whenever you separate the data into two sources it can cause some weird issues.
@seanyesmunt The issue I am struggling with, is that I (think) I need the @seanyesmunt The issue I am struggling with, is that I (think) I need the `<select>` element to be a controlled component, and if so then it seems like it would be best to use internal state rather than the store, since no other component should care what option is selected unless this component decides to update the state of the store. The reason I am setting the state when the component mounts and when it receives props, is that if another component updates the store when a new channel is logged into, then I want this `<select>` element to re-render with that option selected. Any ideas on how I can approach this differently so that I can eliminate internal state while still accomplishing those goals?
Same here, this should be moved to Same here, this should be moved to `componentDidMount`
Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state. I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen. Whenever you separate the data into two sources it can cause some weird issues. Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state.
I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen.
Whenever you separate the data into two sources it can cause some weird issues.
@seanyesmunt The issue I am struggling with, is that I (think) I need the @seanyesmunt The issue I am struggling with, is that I (think) I need the `<select>` element to be a controlled component, and if so then it seems like it would be best to use internal state rather than the store, since no other component should care what option is selected unless this component decides to update the state of the store. The reason I am setting the state when the component mounts and when it receives props, is that if another component updates the store when a new channel is logged into, then I want this `<select>` element to re-render with that option selected. Any ideas on how I can approach this differently so that I can eliminate internal state while still accomplishing those goals?
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ChannelLoginForm from '../ChannelLoginForm';
|
import ChannelLoginForm from 'containers/ChannelLoginForm';
|
||||||
|
Same here, this should be moved to Same here, this should be moved to `componentDidMount`
Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state. I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen. Whenever you separate the data into two sources it can cause some weird issues. Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state.
I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen.
Whenever you separate the data into two sources it can cause some weird issues.
@seanyesmunt The issue I am struggling with, is that I (think) I need the @seanyesmunt The issue I am struggling with, is that I (think) I need the `<select>` element to be a controlled component, and if so then it seems like it would be best to use internal state rather than the store, since no other component should care what option is selected unless this component decides to update the state of the store. The reason I am setting the state when the component mounts and when it receives props, is that if another component updates the store when a new channel is logged into, then I want this `<select>` element to re-render with that option selected. Any ideas on how I can approach this differently so that I can eliminate internal state while still accomplishing those goals?
Same here, this should be moved to Same here, this should be moved to `componentDidMount`
Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state. I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen. Whenever you separate the data into two sources it can cause some weird issues. Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state.
I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen.
Whenever you separate the data into two sources it can cause some weird issues.
@seanyesmunt The issue I am struggling with, is that I (think) I need the @seanyesmunt The issue I am struggling with, is that I (think) I need the `<select>` element to be a controlled component, and if so then it seems like it would be best to use internal state rather than the store, since no other component should care what option is selected unless this component decides to update the state of the store. The reason I am setting the state when the component mounts and when it receives props, is that if another component updates the store when a new channel is logged into, then I want this `<select>` element to re-render with that option selected. Any ideas on how I can approach this differently so that I can eliminate internal state while still accomplishing those goals?
|
|||||||
import ChannelCreateForm from '../ChannelCreateForm';
|
import ChannelCreateForm from 'containers/ChannelCreateForm';
|
||||||
|
Same here, this should be moved to Same here, this should be moved to `componentDidMount`
Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state. I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen. Whenever you separate the data into two sources it can cause some weird issues. Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state.
I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen.
Whenever you separate the data into two sources it can cause some weird issues.
@seanyesmunt The issue I am struggling with, is that I (think) I need the @seanyesmunt The issue I am struggling with, is that I (think) I need the `<select>` element to be a controlled component, and if so then it seems like it would be best to use internal state rather than the store, since no other component should care what option is selected unless this component decides to update the state of the store. The reason I am setting the state when the component mounts and when it receives props, is that if another component updates the store when a new channel is logged into, then I want this `<select>` element to re-render with that option selected. Any ideas on how I can approach this differently so that I can eliminate internal state while still accomplishing those goals?
Same here, this should be moved to Same here, this should be moved to `componentDidMount`
Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state. I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen. Whenever you separate the data into two sources it can cause some weird issues. Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state.
I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen.
Whenever you separate the data into two sources it can cause some weird issues.
@seanyesmunt The issue I am struggling with, is that I (think) I need the @seanyesmunt The issue I am struggling with, is that I (think) I need the `<select>` element to be a controlled component, and if so then it seems like it would be best to use internal state rather than the store, since no other component should care what option is selected unless this component decides to update the state of the store. The reason I am setting the state when the component mounts and when it receives props, is that if another component updates the store when a new channel is logged into, then I want this `<select>` element to re-render with that option selected. Any ideas on how I can approach this differently so that I can eliminate internal state while still accomplishing those goals?
|
|||||||
|
|
||||||
|
Same here, this should be moved to Same here, this should be moved to `componentDidMount`
Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state. I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen. Whenever you separate the data into two sources it can cause some weird issues. Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state.
I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen.
Whenever you separate the data into two sources it can cause some weird issues.
@seanyesmunt The issue I am struggling with, is that I (think) I need the @seanyesmunt The issue I am struggling with, is that I (think) I need the `<select>` element to be a controlled component, and if so then it seems like it would be best to use internal state rather than the store, since no other component should care what option is selected unless this component decides to update the state of the store. The reason I am setting the state when the component mounts and when it receives props, is that if another component updates the store when a new channel is logged into, then I want this `<select>` element to re-render with that option selected. Any ideas on how I can approach this differently so that I can eliminate internal state while still accomplishing those goals?
|
|||||||
const LOGIN = 'Existing';
|
const LOGIN = 'Existing';
|
||||||
const CREATE = 'New';
|
const CREATE = 'New';
|
||||||
|
|
||||||
|
|
|
||||||
|
Same here, this should be moved to Same here, this should be moved to `componentDidMount`
Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state. I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen. Whenever you separate the data into two sources it can cause some weird issues. Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state.
I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen.
Whenever you separate the data into two sources it can cause some weird issues.
@seanyesmunt The issue I am struggling with, is that I (think) I need the @seanyesmunt The issue I am struggling with, is that I (think) I need the `<select>` element to be a controlled component, and if so then it seems like it would be best to use internal state rather than the store, since no other component should care what option is selected unless this component decides to update the state of the store. The reason I am setting the state when the component mounts and when it receives props, is that if another component updates the store when a new channel is logged into, then I want this `<select>` element to re-render with that option selected. Any ideas on how I can approach this differently so that I can eliminate internal state while still accomplishing those goals?
Same here, this should be moved to Same here, this should be moved to `componentDidMount`
Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state. I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen. Whenever you separate the data into two sources it can cause some weird issues. Instead of reading prop values and adding them to state, you should just use the prop values and not worry about internal state.
I try to avoid internal state whenever possible, one exception is the app homepage, where we store if the user can scroll left or right in a card row. But that isn't dependent on any prop value, just by what is currently on the screen.
Whenever you separate the data into two sources it can cause some weird issues.
@seanyesmunt The issue I am struggling with, is that I (think) I need the @seanyesmunt The issue I am struggling with, is that I (think) I need the `<select>` element to be a controlled component, and if so then it seems like it would be best to use internal state rather than the store, since no other component should care what option is selected unless this component decides to update the state of the store. The reason I am setting the state when the component mounts and when it receives props, is that if another component updates the store when a new channel is logged into, then I want this `<select>` element to re-render with that option selected. Any ideas on how I can approach this differently so that I can eliminate internal state while still accomplishing those goals?
|
|||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { selectFile, updateError } from '../../actions';
|
import { selectFile, updateError } from 'actions';
|
||||||
import View from './view.jsx';
|
import View from './view';
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
const mapStateToProps = state => {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { validateFile } from '../../utils/file.js';
|
import { validateFile } from 'utils/file';
|
||||||
import Preview from '../../components/Preview.jsx';
|
import Preview from 'components/Preview';
|
||||||
|
|
||||||
class Dropzone extends React.Component {
|
class Dropzone extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import {clearFile, selectFile, updateError, updateLoggedInChannel, updatePublishStatus} from '../../actions';
|
|
||||||
import {connect} from 'react-redux';
|
import {connect} from 'react-redux';
|
||||||
import View from './view.jsx';
|
import {clearFile, selectFile, updateError, updateLoggedInChannel, updatePublishStatus} from 'actions';
|
||||||
|
import View from './view';
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
const mapStateToProps = state => {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {getCookie} from '../../utils/cookies.js';
|
import {getCookie} from 'utils/cookies';
|
||||||
import Dropzone from '../Dropzone';
|
import Dropzone from 'containers/Dropzone';
|
||||||
import PublishTitleInput from '../PublishTitleInput';
|
import PublishTitleInput from 'containers/PublishTitleInput';
|
||||||
import PublishUrlInput from '../PublishUrlInput';
|
import PublishUrlInput from 'containers/PublishUrlInput';
|
||||||
import PublishThumbnailInput from '../PublishThumbnailInput';
|
import PublishThumbnailInput from 'containers/PublishThumbnailInput';
|
||||||
import PublishMetadataInputs from '../PublishMetadataInputs';
|
import PublishMetadataInputs from 'containers/PublishMetadataInputs';
|
||||||
import ChannelSelect from '../ChannelSelect';
|
import ChannelSelect from 'containers/ChannelSelect';
|
||||||
import * as publishStates from '../../constants/publishing_states';
|
import * as publishStates from 'constants/publishing_states';
|
||||||
|
|
||||||
class PublishForm extends React.Component {
|
class PublishForm extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import {connect} from 'react-redux';
|
import {connect} from 'react-redux';
|
||||||
import {updateMetadata} from '../../actions';
|
import {updateMetadata} from 'actions';
|
||||||
import View from './view.jsx';
|
import View from './view';
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
const mapStateToProps = state => {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
/*
|
|
||||||
const textarea = document.getElementById('publish-description');
|
|
||||||
const limit = 200;
|
|
||||||
textarea.oninput = () => {
|
|
||||||
textarea.style.height = '';
|
|
||||||
textarea.style.height = Math.min(textarea.scrollHeight, limit) + 'px';
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
class PublishMetadataInputs extends React.Component {
|
class PublishMetadataInputs extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import {connect} from 'react-redux';
|
import {connect} from 'react-redux';
|
||||||
import {updateMetadata} from '../../actions';
|
import {updateMetadata} from 'actions';
|
||||||
import View from './view.jsx';
|
import View from './view';
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
const mapStateToProps = state => {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import {connect} from 'react-redux';
|
import {connect} from 'react-redux';
|
||||||
import {updateMetadata} from '../../actions';
|
import {updateMetadata} from 'actions';
|
||||||
import View from './view.jsx';
|
import View from './view';
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
const mapStateToProps = state => {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import {connect} from 'react-redux';
|
import {connect} from 'react-redux';
|
||||||
import View from './view.jsx';
|
import View from './view';
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
const mapStateToProps = state => {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Dropzone from '../Dropzone';
|
import Dropzone from 'containers/Dropzone';
|
||||||
import PublishForm from '../PublishForm';
|
import PublishForm from 'containers/PublishForm';
|
||||||
import PublishStatus from '../../components/PublishStatus.jsx';
|
import PublishStatus from 'components/PublishStatus';
|
||||||
|
|
||||||
class PublishTool extends React.Component {
|
class PublishTool extends React.Component {
|
||||||
render () {
|
render () {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import {updateClaim, updateError} from '../../actions';
|
import {updateClaim, updateError} from 'actions';
|
||||||
import {connect} from 'react-redux';
|
import {connect} from 'react-redux';
|
||||||
import View from './view.jsx';
|
import View from './view';
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
const mapStateToProps = state => {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { makeGetRequest } from '../../utils/xhr.js';
|
import {makeGetRequest} from 'utils/xhr';
|
||||||
import UrlMiddle from '../../components/PublishUrlMiddle.jsx';
|
import UrlMiddle from 'components/PublishUrlMiddle';
|
||||||
|
|
||||||
class PublishUrlInput extends React.Component {
|
class PublishUrlInput extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import { Provider } from 'react-redux';
|
import {Provider} from 'react-redux';
|
||||||
import { createStore } from 'redux';
|
import {createStore} from 'redux';
|
||||||
import Reducers from './reducers';
|
import Reducers from 'reducers';
|
||||||
import PublishTool from './containers/PublishTool';
|
import PublishTool from 'containers/PublishTool';
|
||||||
|
|
||||||
let store = createStore(
|
let store = createStore(
|
||||||
Reducers,
|
Reducers,
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
|
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
import * as actions from '../constants/action_types';
|
import * as actions from 'constants/action_types';
|
||||||
|
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
loggedInChannel: {
|
loggedInChannel: {
|
||||||
|
|
|
||||||
|
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
`import * as`
Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision). Some of these should possibly be renamed or refactored into separate files (or possibly can wait until next refactor/revision).
|
|||||||
|
|
@ -1,9 +1,11 @@
|
||||||
const path = require('path');
|
const Path = require('path');
|
||||||
|
|
||||||
|
const REACT_ROOT = Path.resolve(__dirname, 'react/');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry : './react/index.js',
|
entry : './react/index.js',
|
||||||
output: {
|
output: {
|
||||||
path : path.join(__dirname, '/public/bundle/'),
|
path : Path.join(__dirname, '/public/bundle/'),
|
||||||
filename: 'bundle.js',
|
filename: 'bundle.js',
|
||||||
},
|
},
|
||||||
watch : true,
|
watch : true,
|
||||||
|
|
@ -19,4 +21,12 @@ module.exports = {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
resolve: {
|
||||||
|
modules: [
|
||||||
|
REACT_ROOT,
|
||||||
|
'node_modules',
|
||||||
|
__dirname,
|
||||||
|
],
|
||||||
|
extensions: ['.js', '.jsx', '.scss'],
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Forms are one of the most painful things in React. It might be worth looking into 3rd party React form elements. I've done a fair bit of work with forms and think that Formik is really nice. Hoping to add it to more parts of the app soon. https://github.com/jaredpalmer/formik
I really like how they use the
renderprop, I think it's a really nice way to interact with React elements