React/Redux - publish component #323

Merged
bones7242 merged 80 commits from react-upload into master 2018-01-25 22:43:20 +01:00
23 changed files with 62 additions and 60 deletions
Showing only changes of commit f369ba88cc - Show all commits

View file

@ -1,4 +1,4 @@
import * as actions from '../constants/action_types.js';
import * as actions from 'constants/action_types';
// export action creators
export function selectFile (file) {

View file

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import ProgressBar from '../components/ProgressBar.jsx';
import * as publishStates from '../constants/publishing_states';
import ProgressBar from 'components/ProgressBar';
import * as publishStates from 'constants/publishing_states';
function PublishStatus ({ status, message }) {
return (

View file

@ -1,6 +1,6 @@
import { connect } from 'react-redux';
import { updateLoggedInChannel } from '../../actions';
import View from './view.jsx';
import { updateLoggedInChannel } from 'actions';
import View from './view';
const mapDispatchToProps = dispatch => {
return {

View file

@ -1,7 +1,7 @@
import React from 'react';
import { makeGetRequest, makePostRequest } from '../../utils/xhr.js';
import { setUserCookies } from '../../utils/cookies.js';
import { replaceChannelSelectionInNavBar } from '../../utils/page.js';
import { makeGetRequest, makePostRequest } from 'utils/xhr';
import { setUserCookies } from 'utils/cookies';
import { replaceChannelSelectionInNavBar } from 'utils/page';
class ChannelCreateForm extends React.Component {
constructor (props) {

View file

@ -1,6 +1,6 @@
import { connect } from 'react-redux';
import { updateLoggedInChannel } from '../../actions';
import View from './view.jsx';
import { updateLoggedInChannel } from 'actions';
import View from './view';
const mapDispatchToProps = dispatch => {
return {

View file

@ -1,7 +1,7 @@
neb-b commented 2018-01-18 06:19:30 +01:00 (Migrated from github.com)
Review

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 `render` prop, I think it's a really nice way to interact with React elements
neb-b commented 2018-01-18 06:19:30 +01:00 (Migrated from github.com)
Review

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 `render` prop, I think it's a really nice way to interact with React elements
import React from 'react';
import { makePostRequest } from '../../utils/xhr.js';
neb-b commented 2018-01-18 06:19:30 +01:00 (Migrated from github.com)
Review

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 `render` prop, I think it's a really nice way to interact with React elements
import { setUserCookies } from '../../utils/cookies.js';
neb-b commented 2018-01-18 06:19:30 +01:00 (Migrated from github.com)
Review

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 `render` prop, I think it's a really nice way to interact with React elements
import { replaceChannelSelectionInNavBar } from '../../utils/page.js';
neb-b commented 2018-01-18 06:19:30 +01:00 (Migrated from github.com)
Review

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 `render` prop, I think it's a really nice way to interact with React elements
import { makePostRequest } from 'utils/xhr';
neb-b commented 2018-01-18 06:19:30 +01:00 (Migrated from github.com)
Review

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 `render` prop, I think it's a really nice way to interact with React elements
import { setUserCookies } from 'utils/cookies';
neb-b commented 2018-01-18 06:19:30 +01:00 (Migrated from github.com)
Review

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 `render` prop, I think it's a really nice way to interact with React elements
import { replaceChannelSelectionInNavBar } from 'utils/page';
neb-b commented 2018-01-18 06:19:30 +01:00 (Migrated from github.com)
Review

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 `render` prop, I think it's a really nice way to interact with React elements
class ChannelLoginForm extends React.Component {
constructor (props) {

neb-b commented 2018-01-18 06:19:30 +01:00 (Migrated from github.com)
Review

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 `render` prop, I think it's a really nice way to interact with React elements
neb-b commented 2018-01-18 06:19:30 +01:00 (Migrated from github.com)
Review

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 `render` prop, I think it's a really nice way to interact with React elements

View file

@ -1,5 +1,5 @@
import {connect} from 'react-redux';
import {setPublishInChannel} from '../../actions';
import {setPublishInChannel} from 'actions';
import View from './view.jsx';
const mapStateToProps = state => {

View file

@ -1,6 +1,7 @@
neb-b commented 2018-01-18 06:19:56 +01:00 (Migrated from github.com)
Review

Same here, this should be moved to componentDidMount

Same here, this should be moved to `componentDidMount`
neb-b commented 2018-01-18 06:24:14 +01:00 (Migrated from github.com)
Review

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.
bones7242 commented 2018-01-19 00:57:08 +01:00 (Migrated from github.com)
Review

@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?

@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?
neb-b commented 2018-01-18 06:19:56 +01:00 (Migrated from github.com)
Review

Same here, this should be moved to componentDidMount

Same here, this should be moved to `componentDidMount`
neb-b commented 2018-01-18 06:24:14 +01:00 (Migrated from github.com)
Review

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.
bones7242 commented 2018-01-19 00:57:08 +01:00 (Migrated from github.com)
Review

@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?

@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 ChannelLoginForm from '../ChannelLoginForm';
neb-b commented 2018-01-18 06:19:56 +01:00 (Migrated from github.com)
Review

Same here, this should be moved to componentDidMount

Same here, this should be moved to `componentDidMount`
neb-b commented 2018-01-18 06:24:14 +01:00 (Migrated from github.com)
Review

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.
bones7242 commented 2018-01-19 00:57:08 +01:00 (Migrated from github.com)
Review

@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?

@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';
neb-b commented 2018-01-18 06:19:56 +01:00 (Migrated from github.com)
Review

Same here, this should be moved to componentDidMount

Same here, this should be moved to `componentDidMount`
neb-b commented 2018-01-18 06:24:14 +01:00 (Migrated from github.com)
Review

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.
bones7242 commented 2018-01-19 00:57:08 +01:00 (Migrated from github.com)
Review

@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?

@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 ChannelLoginForm from 'containers/ChannelLoginForm';
neb-b commented 2018-01-18 06:19:56 +01:00 (Migrated from github.com)
Review

Same here, this should be moved to componentDidMount

Same here, this should be moved to `componentDidMount`
neb-b commented 2018-01-18 06:24:14 +01:00 (Migrated from github.com)
Review

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.
bones7242 commented 2018-01-19 00:57:08 +01:00 (Migrated from github.com)
Review

@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?

@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 'containers/ChannelCreateForm';
neb-b commented 2018-01-18 06:19:56 +01:00 (Migrated from github.com)
Review

Same here, this should be moved to componentDidMount

Same here, this should be moved to `componentDidMount`
neb-b commented 2018-01-18 06:24:14 +01:00 (Migrated from github.com)
Review

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.
bones7242 commented 2018-01-19 00:57:08 +01:00 (Migrated from github.com)
Review

@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?

@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?
neb-b commented 2018-01-18 06:19:56 +01:00 (Migrated from github.com)
Review

Same here, this should be moved to componentDidMount

Same here, this should be moved to `componentDidMount`
neb-b commented 2018-01-18 06:24:14 +01:00 (Migrated from github.com)
Review

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.
bones7242 commented 2018-01-19 00:57:08 +01:00 (Migrated from github.com)
Review

@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?

@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 CREATE = 'New';

neb-b commented 2018-01-18 06:19:56 +01:00 (Migrated from github.com)
Review

Same here, this should be moved to componentDidMount

Same here, this should be moved to `componentDidMount`
neb-b commented 2018-01-18 06:24:14 +01:00 (Migrated from github.com)
Review

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.
bones7242 commented 2018-01-19 00:57:08 +01:00 (Migrated from github.com)
Review

@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?

@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?
neb-b commented 2018-01-18 06:19:56 +01:00 (Migrated from github.com)
Review

Same here, this should be moved to componentDidMount

Same here, this should be moved to `componentDidMount`
neb-b commented 2018-01-18 06:24:14 +01:00 (Migrated from github.com)
Review

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.
bones7242 commented 2018-01-19 00:57:08 +01:00 (Migrated from github.com)
Review

@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?

@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?

View file

@ -1,6 +1,6 @@
import { connect } from 'react-redux';
import { selectFile, updateError } from '../../actions';
import View from './view.jsx';
import { selectFile, updateError } from 'actions';
import View from './view';
const mapStateToProps = state => {
return {

View file

@ -1,6 +1,6 @@
import React from 'react';
import { validateFile } from '../../utils/file.js';
import Preview from '../../components/Preview.jsx';
import { validateFile } from 'utils/file';
import Preview from 'components/Preview';
class Dropzone extends React.Component {
constructor (props) {

View file

@ -1,6 +1,6 @@
import {clearFile, selectFile, updateError, updateLoggedInChannel, updatePublishStatus} from '../../actions';
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 => {
return {

View file

@ -1,12 +1,12 @@
import React from 'react';
import {getCookie} from '../../utils/cookies.js';
import Dropzone from '../Dropzone';
import PublishTitleInput from '../PublishTitleInput';
import PublishUrlInput from '../PublishUrlInput';
import PublishThumbnailInput from '../PublishThumbnailInput';
import PublishMetadataInputs from '../PublishMetadataInputs';
import ChannelSelect from '../ChannelSelect';
import * as publishStates from '../../constants/publishing_states';
import {getCookie} from 'utils/cookies';
import Dropzone from 'containers/Dropzone';
import PublishTitleInput from 'containers/PublishTitleInput';
import PublishUrlInput from 'containers/PublishUrlInput';
import PublishThumbnailInput from 'containers/PublishThumbnailInput';
import PublishMetadataInputs from 'containers/PublishMetadataInputs';
import ChannelSelect from 'containers/ChannelSelect';
import * as publishStates from 'constants/publishing_states';
class PublishForm extends React.Component {
constructor (props) {

View file

@ -1,6 +1,6 @@
import {connect} from 'react-redux';
import {updateMetadata} from '../../actions';
import View from './view.jsx';
import {updateMetadata} from 'actions';
import View from './view';
const mapStateToProps = state => {
return {

View file

@ -1,14 +1,5 @@
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 {
constructor (props) {
super(props);

View file

@ -1,6 +1,6 @@
import {connect} from 'react-redux';
import {updateMetadata} from '../../actions';
import View from './view.jsx';
import {updateMetadata} from 'actions';
import View from './view';
const mapStateToProps = state => {
return {

View file

@ -1,6 +1,6 @@
import {connect} from 'react-redux';
import {updateMetadata} from '../../actions';
import View from './view.jsx';
import {updateMetadata} from 'actions';
import View from './view';
const mapStateToProps = state => {
return {

View file

@ -1,5 +1,5 @@
import {connect} from 'react-redux';
import View from './view.jsx';
import View from './view';
const mapStateToProps = state => {
return {

View file

@ -1,7 +1,7 @@
import React from 'react';
import Dropzone from '../Dropzone';
import PublishForm from '../PublishForm';
import PublishStatus from '../../components/PublishStatus.jsx';
import Dropzone from 'containers/Dropzone';
import PublishForm from 'containers/PublishForm';
import PublishStatus from 'components/PublishStatus';
class PublishTool extends React.Component {
render () {

View file

@ -1,6 +1,6 @@
import {updateClaim, updateError} from '../../actions';
import {updateClaim, updateError} from 'actions';
import {connect} from 'react-redux';
import View from './view.jsx';
import View from './view';
const mapStateToProps = state => {
return {

View file

@ -1,6 +1,6 @@
import React from 'react';
import { makeGetRequest } from '../../utils/xhr.js';
import UrlMiddle from '../../components/PublishUrlMiddle.jsx';
import {makeGetRequest} from 'utils/xhr';
import UrlMiddle from 'components/PublishUrlMiddle';
class PublishUrlInput extends React.Component {
constructor (props) {

View file

@ -1,9 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import Reducers from './reducers';
import PublishTool from './containers/PublishTool';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import Reducers from 'reducers';
import PublishTool from 'containers/PublishTool';
let store = createStore(
Reducers,

View file

@ -1,4 +1,4 @@
kauffj commented 2018-01-15 20:27:22 +01:00 (Migrated from github.com)
Review

import * as

`import * as`
kauffj commented 2018-01-15 20:28:40 +01:00 (Migrated from github.com)
Review

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).
kauffj commented 2018-01-15 20:27:22 +01:00 (Migrated from github.com)
Review

import * as

`import * as`
kauffj commented 2018-01-15 20:28:40 +01:00 (Migrated from github.com)
Review

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';
kauffj commented 2018-01-15 20:27:22 +01:00 (Migrated from github.com)
Review

import * as

`import * as`
kauffj commented 2018-01-15 20:28:40 +01:00 (Migrated from github.com)
Review

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';
kauffj commented 2018-01-15 20:27:22 +01:00 (Migrated from github.com)
Review

import * as

`import * as`
kauffj commented 2018-01-15 20:28:40 +01:00 (Migrated from github.com)
Review

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 = {
loggedInChannel: {

kauffj commented 2018-01-15 20:27:22 +01:00 (Migrated from github.com)
Review

import * as

`import * as`
kauffj commented 2018-01-15 20:28:40 +01:00 (Migrated from github.com)
Review

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).
kauffj commented 2018-01-15 20:27:22 +01:00 (Migrated from github.com)
Review

import * as

`import * as`
kauffj commented 2018-01-15 20:28:40 +01:00 (Migrated from github.com)
Review

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).

View file

@ -1,9 +1,11 @@
const path = require('path');
const Path = require('path');
const REACT_ROOT = Path.resolve(__dirname, 'react/');
module.exports = {
entry : './react/index.js',
output: {
path : path.join(__dirname, '/public/bundle/'),
path : Path.join(__dirname, '/public/bundle/'),
filename: 'bundle.js',
},
watch : true,
@ -19,4 +21,12 @@ module.exports = {
},
],
},
resolve: {
modules: [
REACT_ROOT,
'node_modules',
__dirname,
],
extensions: ['.js', '.jsx', '.scss'],
},
};