diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js
index 8e18621..8656ef0 100644
--- a/twistter-frontend/src/App.js
+++ b/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 Route from "react-router-dom/Route";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
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 (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
+
+
+ {/* */}
+
+
+
+
+
+
+
+
+
+ {/*
+
+
+
+
+ */}
+
+
+
+
+
-
);
}
}
diff --git a/twistter-frontend/src/Writing_Microblogs.js b/twistter-frontend/src/Writing_Microblogs.js
index 3bda6cc..b1570d8 100644
--- a/twistter-frontend/src/Writing_Microblogs.js
+++ b/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 = {
+ 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'}
+ }
- const response = axios.post(
- '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(', ')
-
- },
- { headers: { 'Content-Type': 'application/json'} }
-
- )
- console.log(response.data);
- alert('Post was shared successfully!');
+ axios
+ .post('/putPost', postData, headers)
+ .then((res) =>{
+ alert('Post was shared successfully!')
+ console.log(res.data);
+ })
+ .catch((err) => {
+ alert('An error occured.');
+ console.error(err);
+ })
event.preventDefault();
this.setState({value: '', title: '',characterCount: 250, topics: ''})
}
diff --git a/twistter-frontend/src/pages/Register.js b/twistter-frontend/src/pages/Register.js
index d168315..3ae9047 100644
--- a/twistter-frontend/src/pages/Register.js
+++ b/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 {
@@ -21,30 +45,28 @@ class Register extends Component {
this.handleSubmit = this.handleSubmit.bind(this);
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
+ });
-handleSubmit = (event) => {
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 => {
- 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: ''});
+
+ this.props.signupUser(newUserData, this.props.history);
};
@@ -55,7 +77,7 @@ handleChange = (event) => {
};
render() {
- const { classes } = this.props;
+ const { classes, UI: { loading } } = this.props;
const { errors } = this.state;
return (
@@ -83,6 +105,9 @@ handleChange = (event) => {
{errors.general}
)
}
+ {/* {
+ loading && Loading...
+ } */}
@@ -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;
\ No newline at end of file
+const mapStateToProps = (state) => ({
+ user: state.user,
+ UI: state.UI
+});
+
+export default connect(mapStateToProps, {signupUser})(withStyles(styles)(Register));
\ No newline at end of file
diff --git a/twistter-frontend/src/redux/actions/userActions.js b/twistter-frontend/src/redux/actions/userActions.js
index cc6eb56..ddb159e 100644
--- a/twistter-frontend/src/redux/actions/userActions.js
+++ b/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}`;
- localStorage.setItem('FBIdToken', FBIdToken);
- axios.defaults.headers.common['Authorization'] = FBIdToken;
+ setAuthorizationHeader(res.data.token);
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;
}
\ No newline at end of file
diff --git a/twistter-frontend/src/util/AuthRoute.js b/twistter-frontend/src/util/AuthRoute.js
index 309ccf0..f2d9bc2 100644
--- a/twistter-frontend/src/util/AuthRoute.js
+++ b/twistter-frontend/src/util/AuthRoute.js
@@ -1,22 +1,23 @@
-import React from 'react'
-import { Route, Redirect} from 'react-router-dom';
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
const AuthRoute = ({ component: Component, authenticated, ...rest }) => (
-
- authenticated === true ? : }
- />
+ render={(props) =>
+ authenticated === true ? :
+ }
+ />
);
const mapStateToProps = (state) => ({
- authenticated: state.user.authenticated
+ authenticated: state.user.authenticated
});
AuthRoute.propTypes = {
- user: PropTypes.object
-}
+ user: PropTypes.object
+};
-export default connect(mapStateToProps)(AuthRoute);
+export default connect(mapStateToProps)(AuthRoute);
\ No newline at end of file