end of day

client/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.0",
     "react-scripts": "2.1.8"
   },
   "scripts": {

client/src/App.css

@@ -2,32 +2,10 @@
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+.linkStyle{
+  padding: 1%;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.formStyle{
+  margin: 1%;
+}

client/src/App.js

@@ -1,26 +1,45 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
 import './App.css';
+import {BrowserRouter as Router, Link, Route} from 'react-router-dom';
+import TwitterHome from "./TwitterHome";
+import TwitterRegistration from "./TwitterRegistration";
+import TwitterProfile from "./TwitterProfile";
+import TwitterLogout from "./TwitterLogout";
 
 class App extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      username:null,
+      isLoggedIn:false,
+    }
+  }
+
+  userInfo = (username,isLoggedIn) =>{
+    this.setState({username:username, isLoggedIn:isLoggedIn})
+  };
+
+  userLogout = () => {
+    this.setState({username:null, isLoggedIn:false});
+    console.log('user has been logged out')
+  };
+
   render() {
     return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
-      </div>
+        <Router>
+          <div className="App">
+            <h1>Mock Twitter</h1>
+            <Link className={'linkStyle'} to={'/'}>Home</Link>
+            <Link className={'linkStyle'} to={'/register'}>Register</Link>
+            <Link className={'linkStyle'} to={'/profile'}>Profile</Link>
+            <Link className={'linkStyle'} to={'/logout'} onClick={this.userLogout}>Logout</Link>
+          </div>
+          <Route path={'/'} exact component={()=> <TwitterHome username={this.state.username} isLoggedIn={this.state.isLoggedIn} userInfo={this.userInfo}/>} />
+          <Route path={'/register'} component={() => <TwitterRegistration userInfo={this.userInfo} />} />
+          <Route path={'/profile'} component={() => <TwitterProfile username={this.state.username} isLoggedIn={this.state.isLoggedIn}/>} />
+          <Route path={'/logout'} component={()=> <TwitterLogout/>} />
+        </Router>
     );
   }
 }