import React from 'react';
import {connect} from 'react-redux';
import ComponentForm from './ComponentForm';
import {startAddComponent} from '../actions/components';

export class AddComponentPage extends React.Component {
    onSubmit = (component) => {
        console.log(this.props);
        this.props.startAddComponent(component);
        this.props.history.push('/');
    };

    render() {
        //console.log(this.props);
        return (
            <div>
                <h1 className="page-header__title">Add Component</h1>
                <ComponentForm onSubmit={this.onSubmit}/>
            </div>
        )
    }
}

const mapDispatchToProps = (dispatch) => {
    return { startAddComponent: (comp) => dispatch(startAddComponent(comp))}
};

export default connect(undefined, mapDispatchToProps)(AddComponentPage);

import database from '../firebase/firebase';

export const addComponent = (component) => ({
    type: 'ADD_COMPONENT',
    component
});

export const startAddComponent = (componentData = {})=> {
    return (dispatch, getState) => {
        const uid = getState().auth.uid;
        const {
            description = '',
            startDate = 0,
            endDate = 0,
            tags = []
        } = componentData;

        const component = {description, startDate, endDate, tags };
        database.ref(`users/${uid}/components`).push(component)
            .then ((ref) => {
                dispatch(addComponent({
                    id: ref.key,
                    ...component
                }));
            });
    };
};

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import authReducer from '../reducers/auth';
import componentReducer from '../reducers/components';


const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default () => {
    const store = createStore(
        combineReducers({
            auth: authReducer,
            components: componentReducer
        }),
        composeEnhancers(applyMiddleware(thunk))
        //window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    );
    return store;
};

const componentsReducerDefaultState = [];

export default (state = componentsReducerDefaultState, action) => {
    //console.log(action)
    switch (action.type) {
        case 'ADD_COMPONENT':
            return [
                ...state,
                action.component
            ];
        case 'SET_COMPONENTS':
            return action.components;
        default:
            return state;
    }
};