import React, {Component} from 'react';
import {fire} from '../firebaseConfig';
import { connect} from "react-redux";
import moment from 'moment';
import  '../index.css';
import {withRouter, Redirect} from "react-router-dom";
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';

const styles = {
  card: {
    minWidth: 275,
    margin:'40px 0px',

  },
  p:{
      margin:'20px 0px',
      letterSpacing: '2.7px',
      fontSize:'0.8em',
      fontStyle: 'italic'
  },
  h:{
    letterSpacing: '5px'
  }
};

class Dashboard extends Component{

    constructor(props){
        super(props)

        this.state = {
            username:"",
            loading: true,
            posts:{}
        }

    }
    componentWillMount(){
        this.getPosts();
    }



    getPosts() {
        const collection2 = fire.collection('posts');
        collection2.get().then(snapshot => {
            let arr = [];
            snapshot.forEach(doc => {
                arr.push(doc.data()); //Collect all the items and push it into the array
            })
            this.setState({
                posts: arr,
            })
            console.log(this.state.posts)
        })


    }


    componentDidMount(){
        if(this.props.userId){
            const collection = fire.collection('users');
            collection.get().then(snapshot => {
              snapshot.forEach(doc => {
                this.setState({
                    username: doc.data().username,
                    loading:false
                })
              });
            });

        }

    }

    render(){
        if (!this.props.userId) return <Redirect to='/' />
        const { loading, posts } = this.state;

        if(loading){
           return(
            <div className="loader"></div>
           )
        }
        return(
            <div className="container">
                <div className="row">
                    <div className="col-md-6 mt-3">
                        <h1>Welcome {this.state.username.toLowerCase()}</h1>

                        {posts.map((post, key)=> {
                            return(
                                 <Card key={key} style={styles.card}>
                                        <CardContent>

                                        <Typography variant="h4" component="h2" style={styles.h}>
                                            {post.description}
                                        </Typography>
                                        <Typography component="p" style={styles.p}>
                                            by: {post.username}
                                        </Typography>

                                        <Typography component="p">
                                            by: {moment(post.createdAt.toDate()).calendar()}
                                        </Typography>

                                    </CardContent>
                                </Card>
                            );
                        })}
                    </div>
                </div>
            </div>


        );
    }


}

const mapStateToProps = (state) => ({
    userId: state.auths.userId
})


export default withRouter(connect(mapStateToProps, null)(Dashboard));

import { auth as firebaseAuth } from '../firebaseConfig'
import {fire} from '../firebaseConfig'
import { history } from '../components/Navbar';

export const SET_USER = "SET_USER";

export const signUp = (user) => { return (dispatch) => {
    firebaseAuth.createUserWithEmailAndPassword(user.email.trim(), user.password)
     .then(resp => {
            return fire.collection('users').doc(resp.user.uid).set({
              username:user.username,
              email: user.email,
              password: user.password,
              uid: resp.user.uid

            });
          })
        .then(() => {
            dispatch({ type: 'SIGNUP_SUCCESS' });
          })
        .then((response) => {
            history.push('/dashboard');
        }).catch((err) => {
            dispatch({ type: 'SIGNUP_ERROR', err});
        });


    }

}

export const signIn = (user) => { return (dispatch) => {

    firebaseAuth.signInWithEmailAndPassword(user.email, user.password)
        .then(()=> {
            dispatch({type: 'SIGNIN_SUCCESS'})
        }).then((response) => {
            history.push('/dashboard');
        }).catch( (err) => {
            dispatch({ type: 'SIGNIN_ERROR', err});
        });
    }

}

export const signOut = () => { return (dispatch) => {

        firebaseAuth.signOut().then(() => {
            dispatch({ type: 'LOGOUT_SUCCESS'})
        })
    }
}


export const CurrentUser = () => dispatch => {
    firebaseAuth.onAuthStateChanged((user) => {
        if (user) {
            dispatch({
                type: SET_USER,
                payload: user
            })
        }
      });

}

export const createPost = (post) => {
    return (dispatch, getState) => {
        // async call to the database
        const profile = getState().firebase.profile;
        const authorId = getState().firebase.auth;
        fire.collection('posts').add({
            description: post.description,
            username: post.username,
            createdAt: new Date()
        }).then(() => {
            dispatch({type: 'CREATE_POST', post})
        }).catch((err) => {
            dispatch({type: 'CREATE_POST_ ERROR', err})
        })
    }
}

import { SET_USER} from '../actions/';
const initialState = {
    authError: null,
    isAuthenticated: false,
    userId: null,
    user: {}
}

export default (state = initialState, action) => {
    switch (action.type) {
        case SET_USER:
            return ({
                userId: action.payload.uid || null,
                // user:action.payload,
                isAuthenticated: true
            })
        case 'LOGOUT_SUCCESS':
            console.log('signout success')
            return ({
                ...state,
                userId: null,
                isAuthenticated: false
            })

        case 'CREATE_POST':
            console.log('created post', action.post)
            return state;

        case 'CREATE_POST_ERROR':
            console.log('create post error', action.err)
            return state;

        case 'SIGNUP_SUCCESS':
            return ({
                ...state,
                authError: null
            })

        case 'SIGNUP_ERROR':
            console.log('signup error')
            return ({
                ...state,
                authError: action.err.message
            })

        case 'SIGNIN_SUCCESS':
            console.log('signin success')
            return ({
                ...state,
                authError: null
            })

        case 'SIGNIN_ERROR':
            console.log('signin error')
            return ({
                ...state,
                authError: action.err.message
            })
        default:
            return state
    }
}