Before finishing authentication

twistter-frontend/src/App.js

@@ -2,8 +2,7 @@
 import React, { Component } from "react";
 import "./App.css";
 
-import { BrowserRouter as Router } from "react-router-dom";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-import Route from "react-router-dom/Route";
 import Navbar from "./components/layout/NavBar";
 import jwtDecode from "jwt-decode";
 
@@ -27,6 +26,7 @@ import userLine from "./Userline.js";
 import AuthRoute from "./util/AuthRoute";
 
 let authenticated;
+
 const token = localStorage.FBIdToken;
 if (token) {
   const decodedToken = jwtDecode(token);
@@ -43,25 +43,37 @@ const theme = createMuiTheme(themeObject);
 class App extends Component {
   render() {
     return (
-      <Provider store={store}>
       <MuiThemeProvider theme={theme}>
+        <Provider store={store}>
           <Router>
             <div className='container' >
               <Navbar />
             </div>
+
             <div className="app">
+              <Switch>
+              {/* <AuthRoute exact path="/" component={home} authenticated={authenticated}/> */}
+              <AuthRoute exact path="/register" component={register} authenticated={authenticated}/>
+              <AuthRoute exact path="/login" component={login} authenticated={authenticated}/>
+
+              <AuthRoute exact path="/user" component={user} authenticated={authenticated}/>
+              <AuthRoute exact path="/home" component={writeMicroblog} authenticated={authenticated}/>
+              <AuthRoute exact path="/edit" component={edit} authenticated={authenticated}/>
+              <AuthRoute exact path="/user" component={userLine} authenticated={authenticated}/>
+
               <Route exact path="/" component={home}/>
-          <Route exact path="/register" component={register}/>
+              {/* <Route exact path="/register" component={register}/>
               <Route exact path="/login" component={login}/>
               <Route exact path="/user" component={user}/>
               <Route exact path="/home" component={writeMicroblog}/>
               <Route exact path="/edit" component={edit}/>
-          <Route exact path="/user" component={userLine}/>
+              <Route exact path="/user" component={userLine}/> */}
+              </Switch>
             </div>
 
           </Router>
-      </MuiThemeProvider>
         </Provider>
+      </MuiThemeProvider>
     );
   }
 }

twistter-frontend/src/Writing_Microblogs.js

@@ -34,21 +34,27 @@ class Writing_Microblogs extends Component {
 
     handleSubmit(event) {
         // alert('A title for the microblog was inputted: ' + this.state.title + '\nA microblog was posted: ' + this.state.value);
-        
+        const postData = {
-        const response = axios.post(
+            body: this.state.value,  
-            'http://localhost:5001/twistter-e4649/us-central1/api/putPost',
-            { body: this.state.value,  
             userHandle: "new user",
             userImage: "bing-url",
             microBlogTitle: this.state.title,
             microBlogTopics: this.state.topics.split(', ')
+        }
+        const headers = {
+            headers: { 'Content-Type': 'application/json'}
+        }
         
-            },
+        axios
-            { headers: { 'Content-Type': 'application/json'} }
+            .post('/putPost', postData, headers)
-            
+            .then((res) =>{
-        )
+                alert('Post was shared successfully!')
-        console.log(response.data);
+                console.log(res.data);
-        alert('Post was shared successfully!');
+            })
+            .catch((err) => {
+                alert('An error occured.');
+                console.error(err);
+            })
         event.preventDefault();
         this.setState({value: '', title: '',characterCount: 250, topics: ''})
     }

twistter-frontend/src/pages/Register.js

@@ -6,6 +6,30 @@ import axios from 'axios';
 import TextField from '@material-ui/core/TextField';
 import PropTypes from 'prop-types';
 
+// Redux Stuff
+import {connect} from 'react-redux';
+import {signupUser, logoutUser} from '../redux/actions/userActions';
+import withStyles from '@material-ui/core/styles/withStyles';
+
+const styles = {
+  form: {
+    textAlign: "center"
+  },
+  textField: {
+    marginBottom: 30
+  },
+  pageTitle: {
+    // marginTop: 20,
+    marginBottom: 40
+  },
+  button: {
+    positon: "relative",
+    marginBottom: 30
+  },
+  progress: {
+    position: "absolute"
+  }
+};
 
 class Register extends Component {
 
@@ -23,28 +47,26 @@ class Register extends Component {
     this.handleChange = this.handleChange.bind(this);
   };
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.UI.errors) {
+      this.setState({ errors: nextProps.UI.errors });
+    }
+  }
 
   handleSubmit = (event) => {
+    event.preventDefault();
+    this.setState({
+    loading: true
+  });
+
    const newUserData = {
       email: this.state.email,
       handle: this.state.handle,
       password: this.state.password,
       confirmPassword: this.state.confirmPassword
   };
-  axios.post('http://localhost:5001/twistter-e4649/us-central1/api/signup', newUserData)
+
-  .then(res => {
+  this.props.signupUser(newUserData, this.props.history);
-      console.log(res.data);
-      localStorage.setItem('firebaseIdToken', `Bearer ${res.data.token}`);
-      this.props.history.push('/');
-  })
-  .catch(err => {
-      this.setState({
-          errors: err.response.data
-      });
-  });
-  alert("You successfully registered");
-  event.preventDefault();
-  this.setState({email: '', handle: '', password: '', confirmPassword: ''});
 };
  
  
@@ -55,7 +77,7 @@ handleChange = (event) => {
 };
 
   render() {
-    const { classes } = this.props;
+    const { classes, UI: { loading } } = this.props;
     const { errors } = this.state;
     return (
       <div>
@@ -83,6 +105,9 @@ handleChange = (event) => {
                                 {errors.general}
                             </div>)
         }
+        {/* {
+          loading && <TextField>Loading...</TextField>
+        } */}
         <button class="authButtons register" id="submit">Sign up</button>
         </form>
       </div>
@@ -91,7 +116,15 @@ handleChange = (event) => {
   
 }
 Register.propTypes = {
-  classes: PropTypes.object.isRequired
+  classes: PropTypes.object.isRequired,
+  user: PropTypes.object.isRequired,
+  UI: PropTypes.object.isRequired,
+  signupUser: PropTypes.func.isRequired
 };
 
-export default Register;
+const mapStateToProps = (state) => ({
+  user: state.user,
+  UI: state.UI
+});
+
+export default connect(mapStateToProps, {signupUser})(withStyles(styles)(Register));

twistter-frontend/src/redux/actions/userActions.js

@@ -1,4 +1,4 @@
-import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI} from '../types';
+import {SET_USER, SET_ERRORS, CLEAR_ERRORS, LOADING_UI, SET_AUTHENTICATED, SET_UNAUTHENTICATED} from '../types';
 import axios from 'axios';
 
 
@@ -19,9 +19,7 @@ export const loginUser = (loginData, history) => (dispatch) => {
       .post("/login", loginData)
       .then((res) => {
         // Save the login token
-        const FBIdToken = `Bearer ${res.data.token}`;
+        setAuthorizationHeader(res.data.token);
-        localStorage.setItem('FBIdToken', FBIdToken);
-        axios.defaults.headers.common['Authorization'] = FBIdToken;
         dispatch(getUserData());
         dispatch({ type: CLEAR_ERRORS })
         // Redirects to home page
@@ -33,4 +31,36 @@ export const loginUser = (loginData, history) => (dispatch) => {
             payload: err.response.data,
         })
       });
+};
+
+export const signupUser = (newUserData, history) => (dispatch) => {
+    dispatch({ type: LOADING_UI });
+    axios
+      .post("/signup", newUserData)
+      .then((res) => {
+        // Save the signup token
+        setAuthorizationHeader(res.data.token);
+        dispatch(getUserData());
+        dispatch({ type: CLEAR_ERRORS })
+        // Redirects to home page
+        history.push('/home');
+      })
+      .catch((err) => {
+        dispatch ({
+            type: SET_ERRORS,
+            payload: err.response.data,
+        })
+      });
+};
+
+export const logoutUser = () => (dispatch) => {
+    localStorage.removeItem('FBIdToken');
+    delete axios.defaults.headers.common['Authorization'];
+    dispatch({ type: SET_UNAUTHENTICATED });
+}
+
+const setAuthorizationHeader = (token) => {
+    const FBIdToken = `Bearer ${token}`;
+    localStorage.setItem('FBIdToken', FBIdToken);
+    axios.defaults.headers.common['Authorization'] = FBIdToken;
 }

twistter-frontend/src/util/AuthRoute.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 import { Route, Redirect } from 'react-router-dom';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -7,7 +7,8 @@ const AuthRoute = ({ component: Component, authenticated, ...rest }) => (
   <Route
     {...rest}
     render={(props) =>
-        authenticated === true ? <Redirect to='/home'/> : <Component {...props} />}
+      authenticated === true ? <Redirect to="/" /> : <Component {...props} />
+    }
   />
 );
 
@@ -17,6 +18,6 @@ const mapStateToProps = (state) => ({
 
 AuthRoute.propTypes = {
   user: PropTypes.object
-}
+};
 
 export default connect(mapStateToProps)(AuthRoute);