Pull my most recent changes

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
+    "firebase": "^7.3.0",
+    "lodash": "^4.17.15",
     "react": "^16.11.0",
     "react-bootstrap": "^1.0.0-beta.14",
     "react-dom": "^16.11.0",

public/index.html

@@ -40,4 +40,26 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+  <script>
+    window.fbAsyncInit = function () {
+      FB.init({
+        appId: '1813842465324998',
+        autoLogAppEvents: true,
+        xfbml: true,
+        version: 'v2.11'
+      });
+
+      // Broadcast an event when FB object is ready
+      var fbInitEvent = new Event('FBObjectReady');
+      document.dispatchEvent(fbInitEvent);
+    };
+
+    (function (d, s, id) {
+      var js, fjs = d.getElementsByTagName(s)[0];
+      if (d.getElementById(id)) { return; }
+      js = d.createElement(s); js.id = id;
+      js.src = "https://connect.facebook.net/en_US/sdk.js";
+      fjs.parentNode.insertBefore(js, fjs);
+    }(document, 'script', 'facebook-jssdk'));
+  </script>
 </html>

src/App.css

@@ -7,8 +7,8 @@
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+  background-color: #FFFFFF;
+  min-height: 0vh;
   display: flex;
   flex-direction: column;
   align-items: center;

src/App.jsx

@@ -0,0 +1,39 @@
+import React, {Component} from 'react'
+import Register from './Component/Register.jsx'
+import LoginForm from './Component/Login.jsx'
+import RegisterMentor from './Component/RegisterMentor.jsx'
+import './App.css';
+import { fromEventPattern } from 'rxjs';
+import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
+export default class App extends Component 
+{
+ constructor(props) 
+  {
+    super(props);
+    this.state = {
+      activeItem: 'home',
+      loading: true,
+      messages: [],
+    };
+  }
+  render () 
+  {
+
+
+
+
+            return (
+              <Router>
+              <div>
+                <Route exact path="/" component={LoginForm} />
+                <Route path="/register" component={Register} />
+                <Route path="/registermentor" component={RegisterMentor} />
+
+              </div>
+            </Router>
+
+
+            );
+
+  }
+}

src/Component/ChatMessagingService/ChatInput.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+
+
+class ChatInput extends React.Component {
+
+  constructor(props) {
+
+    super(props);
+
+    this.state = { chatInput: '' };
+
+
+
+
+
+    this.submitHandler = this.submitHandler.bind(this);
+
+    this.textChangeHandler = this.textChangeHandler.bind(this);
+
+  }
+
+
+
+  submitHandler(event) {
+
+
+
+    event.preventDefault();
+
+
+
+
+
+    this.setState({ chatInput: '' });
+
+
+
+
+
+    this.props.onSend(this.state.chatInput);
+
+  }
+
+
+
+  textChangeHandler(event)  {
+
+    this.setState({ chatInput: event.target.value });
+
+  }
+
+
+
+  render() {
+
+    return (
+
+      <form className="chat-input" onSubmit={this.submitHandler}>
+
+        <input type="text"
+
+          onChange={this.textChangeHandler}
+
+          value={this.state.chatInput}
+
+          placeholder="Write a message..."
+
+          required />
+
+      </form>
+
+    );
+
+  }
+
+}
+
+
+
+ChatInput.defaultProps = {
+
+};
+
+
+
+export default ChatInput;

src/Component/FacebookLogin.jsx

@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+
+export default class FacebookLogin extends Component {
+
+  componentDidMount() {
+    document.addEventListener('FBObjectReady', this.initializeFacebookLogin);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('FBObjectReady', this.initializeFacebookLogin);
+  }
+
+  /**
+   * Init FB object and check Facebook Login status
+   */
+  initializeFacebookLogin = () => {
+    this.FB = window.FB;
+    this.checkLoginStatus();
+  }
+
+  /**
+   * Check login status
+   */
+  checkLoginStatus = () => {
+    this.FB.getLoginStatus(this.facebookLoginHandler);
+  }
+
+  /**
+   * Check login status and call login api is user is not logged in
+   */
+  facebookLogin = () => {
+    if (!this.FB) return;
+
+    this.FB.getLoginStatus(response => {
+      if (response.status === 'connected') {
+        this.facebookLoginHandler(response);
+      } else {
+        this.FB.login(this.facebookLoginHandler, {scope: 'public_profile'});
+      }
+    }, );
+  }
+
+  /**
+   * Handle login response
+   */
+  facebookLoginHandler = response => {
+    if (response.status === 'connected') {
+      this.FB.api('/me', userData => {
+        let result = {
+          ...response,
+          user: userData
+        };
+        this.props.onLogin(true, result);
+      });
+    } else {
+      this.props.onLogin(false);
+    }
+  }
+
+  render() {
+    let {children} = this.props;
+    return (
+      <div onClick={this.facebookLogin}>
+        {children}
+      </div>
+    );
+  }
+}

src/Component/Firebase/index.js

@@ -0,0 +1,23 @@
+import firebase from 'firebase/app';
+import 'firebase/database';
+import 'firebase/auth';
+
+const config = {
+    apiKey: "AIzaSyC0WsBKeedWAuMsRMLeyHHFL6Y9_WVW2yA",
+    authDomain: "opwproject-c7a0b.firebaseapp.com",
+    databaseURL: "https://opwproject-c7a0b.firebaseio.com",
+    projectId: "opwproject-c7a0b",
+    storageBucket: "",
+    messagingSenderId: "271023480655",
+    appId: "1:271023480655:web:4f46d001b8552a066d2f3a"
+};
+
+ firebase.initializeApp(config);
+const dbSyncRoot = firebase.database().ref();
+const auth = firebase.auth();
+const dbUsers = dbSyncRoot.child('users');
+
+export {
+    auth,
+    dbUsers,
+}

src/Component/Home.js

@@ -1,48 +1,41 @@
 import React, { Component } from 'react';
-import { Input, Menu, Segment, Image } from 'semantic-ui-react'
-import { Route } from 'react-router-dom'
-export default class Home extends Component {
+import { Input, Menu, Segment, Image, Button } from 'semantic-ui-react';
+import { withRouter } from 'react-router-dom'
+
+class Home extends Component {
+  constuctor() {
+    this.routeChange = this.routeChange.bind(this);
+  }
+
+  routeChange() {
+    let path = `login`;
+    this.props.history.push(path);
+  }
     componentDidMount()
     {
-      console.log('mounted!');
+      this.state.activeItem = 'home'
     }
     state = {}
 
-  handleItemClick = (e, { name }) => alert('Hello!')
+  handleItemClick = (e, { name }) => {
+      this.setState({ activeItem: name });
+  }
+  login = (e, {name}) => {
+      this.routeChange();
+  }
 
   render() {
     const { activeItem } = this.state
 
 
         return (
           <div>
-            <Image src='Assets/heymentorsplash.png'></Image>
-            <Menu pointing>
-              <Menu.Item
-                name='home'
-                active={activeItem === 'home'}
-                onClick={this.handleItemClick}
-              />
-              <Menu.Item
-                name='messages'
-                active={activeItem === 'messages'}
-                onClick={this.handleItemClick}
-              />
-              <Menu.Item
-                name='friends'
-                active={activeItem === 'friends'}
-                onClick={this.handleItemClick}
-              />
-              <Menu.Menu position='right'>
-                <Menu.Item>
-                  <Input icon='search' placeholder='Search...' />
-                </Menu.Item>
-              </Menu.Menu>
-            </Menu>
+
 
 
           </div>
         )
       }
 
 }
+export default withRouter(Home)