diff --git a/.eslintrc.json b/.eslintrc.json index 4e47fb7..032c4aa 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -31,4 +31,4 @@ ], "no-console": 0 } -} \ No newline at end of file +} diff --git a/src/components/app.js b/src/components/app.js index 688ddcc..f0093ed 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -1,6 +1,9 @@ import React from "react"; +import { Switch, Route, Redirect } from "react-router-dom"; -import HelloWorld from "./helloWorld/helloWorld"; + + +import WelcomePage from "./homePage/welcomePage"; class App extends React.Component { constructor(props) { @@ -8,8 +11,19 @@ class App extends React.Component { } render() { - return ; + return ( +
+ + + + + +
+ ); + } } export default App; + + diff --git a/src/components/helloWorld/helloWorld.js b/src/components/helloWorld/helloWorld.js deleted file mode 100644 index c0ba8a7..0000000 --- a/src/components/helloWorld/helloWorld.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react"; - -class HelloWorld extends React.Component { - constructor(props) { - super(props); - } - - render() { - return

Hello World!

; - } -} - -export default HelloWorld; diff --git a/src/components/homePage/headerPage.js b/src/components/homePage/headerPage.js new file mode 100644 index 0000000..6221676 --- /dev/null +++ b/src/components/homePage/headerPage.js @@ -0,0 +1,47 @@ +import React from "react"; + + + +const Header = () => { + return ( +
+ + +
+ ); +}; + +export default Header; \ No newline at end of file diff --git a/src/components/homePage/loginPage.js b/src/components/homePage/loginPage.js new file mode 100644 index 0000000..a6a1db3 --- /dev/null +++ b/src/components/homePage/loginPage.js @@ -0,0 +1,55 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import registerPage from "./registerPage"; + + + + +class LoginPage extends React.Component { + constructor(props) { + super(props); + this.state = { + email: "", + password: "" + }; + this.handleEmailChange = this.handleEmailChange.bind(this); + this.handlePasswordChange = this.handlePasswordChange.bind(this); + this.handleLogin = this.handleLogin.bind(this); + } + + handleEmailChange(event) { + this.setState({ email: event.target.value }); + console.log(event.target.value); + + } + handlePasswordChange(event) { + this.setState({ password: event.target.value }); + console.log(event.target.value); + } + + handleLogin(event) { + let data = { + email: this.state.email, + password: this.state.password + }; + console.log(data); + // this.props.onLogin(data); + } + + render() { + return ( +
+ +
+ Email
+ Password
+ +
+ + +
+ ); + } +} + +export default LoginPage; diff --git a/src/components/homePage/mainPage.js b/src/components/homePage/mainPage.js new file mode 100644 index 0000000..6e9b02d --- /dev/null +++ b/src/components/homePage/mainPage.js @@ -0,0 +1,18 @@ +import React from "react"; +import Header from "HeaderPage"; + + +class MainPage extends React.Component { + constructor(props) { + super(props); + + + } + render (){ + return ( +
+ ); + } +}; + +export default MainPage; \ No newline at end of file diff --git a/src/components/homePage/registerPage.js b/src/components/homePage/registerPage.js new file mode 100644 index 0000000..e75d915 --- /dev/null +++ b/src/components/homePage/registerPage.js @@ -0,0 +1,63 @@ +import React from "react"; +import {Link} from "react-router-dom"; + + + +class RegisterPage extends React.Component { + constructor(props) { + super(props); + this.state = { + name: "", + email: "", + password: "" + }; + this.handleNameRegister = this.handleNameRegister.bind(this); + this.handleEmailRegister = this.handleEmailRegister.bind(this); + this.handlePasswordRegister = this.handlePasswordRegister.bind(this); + this.handleRegister = this.handleRegister.bind(this); + } + handleNameRegister(event) { + this.setState({ name: event.target.value }); + console.log(event.target.value); + } + + handleEmailRegister(event) { + this.setState({ email: event.target.value }); + console.log(event.target.value); + } + handlePasswordRegister(event) { + this.setState({ password: event.target.value }); + console.log(event.target.value); + } + + handleRegister(event) { + let data = { + name: this.state.name, + email: this.state.email, + password: this.state.password + }; + console.log(data); + // this.props.onRegister(data); + } + + + render() { + return ( +
+
+ Name
+ Email
+ Password
+ + +
+ + +
+ ); + } +} + +export default RegisterPage; + + diff --git a/src/components/homePage/welcomePage.js b/src/components/homePage/welcomePage.js new file mode 100644 index 0000000..e3edc57 --- /dev/null +++ b/src/components/homePage/welcomePage.js @@ -0,0 +1,39 @@ +import React from "react"; +import { Switch, Route } from "react-router-dom"; +import { Link } from "react-router-dom"; + +import RegisterPage from "./registerPage"; +import LoginPage from "./loginPage"; + + +class WelcomePage extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+ + +

Welcome to BitBook

+
+ +
    +
  • Login
    • +
  • Register here
    • +
+
+
+ + + + + +
+
+ ); + } +} + +export default WelcomePage; diff --git a/src/constants.js b/src/constants.js index ca54aec..bd72ce2 100644 --- a/src/constants.js +++ b/src/constants.js @@ -1 +1,3 @@ -// export const SOME_GLOBAL_CONFIG = "value"; \ No newline at end of file +// export const SOME_GLOBAL_CONFIG = "value"; +export const BASE_URL = "https://bitbookapi.azurewebsites.net"; +export const API_KEY = "2fNXsD2f"; \ No newline at end of file diff --git a/src/index.html b/src/index.html index ac437dd..84d78ca 100644 --- a/src/index.html +++ b/src/index.html @@ -4,12 +4,19 @@ - + + My React App
+ + + + + + diff --git a/src/index.js b/src/index.js index 80d7d1b..7cb4896 100644 --- a/src/index.js +++ b/src/index.js @@ -1,13 +1,13 @@ import React from "react"; import ReactDOM from "react-dom"; -import { BrowserRouter } from "react-router-dom"; +import { HashRouter } from "react-router-dom"; import "babel-polyfill"; import App from "./components/app"; ReactDOM.render( - + - , + , document.querySelector(".container") ); diff --git a/src/service/authenticationService.js b/src/service/authenticationService.js new file mode 100644 index 0000000..54b4c92 --- /dev/null +++ b/src/service/authenticationService.js @@ -0,0 +1,5 @@ +import React from "react"; + +class AuthenticationService { + +} \ No newline at end of file diff --git a/src/service/communicationService.js b/src/service/communicationService.js new file mode 100644 index 0000000..1bb703d --- /dev/null +++ b/src/service/communicationService.js @@ -0,0 +1,70 @@ +import React from "react"; +import { BASE_URL, API_KEY } from "../constants"; + +class CommunicationService { + constructor() { + this.bindEventHandlers(); + } + + bindEventHandlers() { + this.getRequest = this.getRequest.bind(this); + this.postRequest = this.postRequest.bind(this); + this.createHeaders = this.createHeaders.bind(this); + } + + + createHeaders() { + + const requestHeaders = { + "Content-type": "application/json; charset=UTF-8", + "Key": API_KEY + }; + + const sessionId = sessionStorage.getItem(SESSION_ID); + + + if(sessionId) { + const requestHeaders = { + "Content-type": "application/json; charset=UTF-8", + "Key": API_KEY, + "SessionID": sessionId + }; + return requestHeaders; + } + + return requestHeaders; + } + + getRequest(url, getDataHandler, errorHandler) { + + const requestUrl = `${BASE_URL}/${url}`; + + + fetch(requestUrl, { + method: "get", + headers: this.createHeaders() + }) + .then(response => response.json()) + .then(response => getDataHandler(response)) + .catch((error) => errorHandler(error)); + } + + postRequest(url, postData, postDataHandler, errorHandler) { + + const requestUrl = `${BASE_URL}/${url}`; + + + fetch(requestUrl, { + method: "post", + body: JSON.stringify(postData), + headers: this.createHeaders() + }) + .then(response => response.json()) + .then(response => postDataHandler(response)) + .catch((error) => errorHandler(error)); + + } + +} + +export default CommunicationService; diff --git a/src/service/redirectionService.js b/src/service/redirectionService.js new file mode 100644 index 0000000..1bb84f1 --- /dev/null +++ b/src/service/redirectionService.js @@ -0,0 +1,17 @@ + + + +class RedirectionService { + + + goTo(path) { + + + window.location.assign(`#/${path}`); + + } + + +} + +export default RedirectionService; \ No newline at end of file diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..73a0aa1 --- /dev/null +++ b/src/style.css @@ -0,0 +1,3 @@ +.loginFormDiv { + border: 1px solid black; +}