Tukukkk

I want to make the following code more robost, and less repetitive. In my opinion it looks hacky, and not well written code.

At the moment the dashboard page is responsible for, fetching users, and fetching post content. I know there is a way to do this in redux, within an action function. However, my knowledge of using redux is not quite developed.

I will be providing a stackblitz to this(its not loading up atm)

https://stackblitz.com/edit/react-herqe7

I just want to make this more redux friendly, and cleaner. Given the actions file, and the dashboard file.

Dashboard.js

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

Actions.js

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

        })

    }

}

Reducers.js

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

    }

}