Dúvida Alura - React

gistfile1.txt

index.js
----
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Login from './components/Login';
import Logout from './components/Logout';

import './assets/css/reset.css';  
import './assets/css/timeline.css';  
import './assets/css/login.css';  

import {Router,Route,browserHistory} from 'react-router';
import {matchPattern} from 'react-router/lib/PatternUtils';

import * as serviceWorker from './serviceWorker';
// REACT REDUX
import {Provider} from 'react-redux';

import { Store } from './store';

// console.log(Store);


function verificarAutenticacao(nextState,replace) {
    let resultado = matchPattern('/timeline(/:login)',nextState.location.pathname);
    let enderecoPrivado = (resultado.paramValues[0] ? true : false);
    // console.log(enderecoPrivado);

    
    // console.log(resultado);

    if(localStorage.getItem('auth-token') === null && !enderecoPrivado  ) {
        replace("/?msg=você precisa está logado para acessar o endereço");
    }
}

ReactDOM.render(
    (
        <Provider store={Store} >
            <Router history={browserHistory}>
                <Route path="/" component={Login}/>
                <Route path="/timeline(/:login)" component={App} onEnter={verificarAutenticacao} />
                <Route path="/logout" component={Logout} />
            </Router>
        </Provider>
    )
    , document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();


----



store.js
----
import React, { Component } from 'react';
import TimelineApi from './../logica/TimelineApi';

export default class Header extends Component {
    constructor(props){
        super(props);
        this.state = {
            msg : ""
        }
    }

    componentWillMount() {
        // REDUX
        // this.props.store.subscribe(() => {
        //     this.setState({msg:this.props.store.getState().notificacao});
        //   });
        console.log(this.props.store);
    }
    pesquisa(event) {
        event.preventDefault();
        this.props.store.dispatch(TimelineApi.pesquisa(this.loginPesquisado.value))
    }
    
    render() {
        return (
            <header className="header container">
                <h1 className="header-logo">
                    Instalura
                </h1>

                <form className="header-busca" onSubmit={this.pesquisa.bind(this)}>
                    <input type="text" name="search" placeholder="Pesquisa" className="header-busca-campo" ref={input => this.loginPesquisado = input } />
                    <input type="submit" value="Buscar"
                    className="header-busca-submit" />
                    <span>{this.state.msg}</span>
                </form>


                <nav>
                    <ul className="header-nav">
                        <li className="header-nav-item">
                            <a href="#">
                                ♡
                            </a>
                        </li>
                    </ul>
                </nav>
            </header>
        );
    }
}
----


app.js
----
import React, { Component } from 'react';
import Header from './components/Header';
import Timeline from './components/TimeLine';

import { connect } from 'react-redux';

import PropTypes from 'prop-types';


class App extends Component {
	
  render() {
		// const store = this.props.store;
		console.log(this.props);
		// console.log(store);
    return (
		<div className="App">
			<div id="root">
				<div className="main">

					<Header store={this.props.store} />
					
					<Timeline login={this.props.params.login} store={this.props.store} />

				 </div>
			</div>
		</div>
    );
  }
}

// App.contextTypes = {
// 	store : PropTypes.object.isRequired
// }

const mapStateToProps = state => {
	return {
			store : state
	}
}

const AppContainer = connect(mapStateToProps)(App);

export default AppContainer;
----

timeline.js
----
import React, { Component } from 'react';
import FotoItem from './Foto';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 

import TimelineApi from './../logica/TimelineApi';
import { connect } from 'react-redux';




export class Timeline extends Component {

    constructor(props) {
        super(props);
        this.login = this.props.login;
        // console.log(this.props)
    }
    

    // NO CARREGAMENTO
    componentDidMount() {
        this.props.carregaFoto(this.login)
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.login !== this.login)
        {
            this.login = nextProps.login;
            this.props.carregaFoto(this.login);
        }
    }
    

    render() {
        return (
            
            <div className="fotos container">
                <ReactCSSTransitionGroup
                    transitionName="timeline"
                    transitionEnterTimeout={500}
                    transitionLeaveTimeout={300}>
                {
                    this.props.fotos.map(foto => <FotoItem foto={foto} key={foto.id} like={this.props.like} comenta={this.props.comenta} /> )
                }
                </ReactCSSTransitionGroup>
                
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        fotos : state.timeline
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        like: (fotoId) => {
            dispatch(TimelineApi.like(fotoId));
        },
        comenta: (fotoId,comentario) => {
            dispatch(TimelineApi.comenta(fotoId,comentario));
        },
        carregaFoto : (login) => {      
            dispatch(TimelineApi.carregaFoto(login));
        }   
    }
}
const TimelineContainer = connect(mapStateToProps,mapDispatchToProps)(Timeline);

export default TimelineContainer;
----