From 987cb9741d4e30244ba291408e350a047cdbc13e Mon Sep 17 00:00:00 2001 From: davidjocic93 <32547752+davidjocic93@users.noreply.github.com> Date: Tue, 21 Nov 2017 10:31:11 +0100 Subject: [PATCH 1/6] updated eslint --- .eslintrc.json | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 544c896..032c4aa 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -5,7 +5,7 @@ "es6": true, "node": true }, - "extends": "eslint:recommended", + "extends": ["plugin:react/recommended"], "parserOptions": { "ecmaFeatures": { "experimentalObjectRestSpread": true, @@ -17,7 +17,6 @@ "react" ], "rules": { - "no-unused-vars": 1, "indent": [ "error", 4 @@ -30,7 +29,6 @@ "error", "always" ], - "no-console": 0, - "react/jsx-uses-vars" : 1 + "no-console": 0 } -} \ No newline at end of file +} From 256b29f62caf2c1d8ceef2af4e8d3d2c85bc21a7 Mon Sep 17 00:00:00 2001 From: BIT Student Date: Tue, 21 Nov 2017 13:02:16 +0100 Subject: [PATCH 2/6] first part --- src/components/app.js | 15 ++++++- src/components/helloWorld/helloWorld.js | 13 ------- src/components/homePage/loginForm.js | 52 +++++++++++++++++++++++++ src/components/homePage/welcomePage.js | 22 +++++++++++ src/index.html | 9 ++++- src/style.css | 3 ++ 6 files changed, 98 insertions(+), 16 deletions(-) delete mode 100644 src/components/helloWorld/helloWorld.js create mode 100644 src/components/homePage/loginForm.js create mode 100644 src/components/homePage/welcomePage.js create mode 100644 src/style.css diff --git a/src/components/app.js b/src/components/app.js index 688ddcc..c404b53 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -1,6 +1,7 @@ import React from "react"; +import { Switch, Route } from "react-router-dom"; -import HelloWorld from "./helloWorld/helloWorld"; +import WelcomePage from "./homePage/welcomePage"; class App extends React.Component { constructor(props) { @@ -8,7 +9,17 @@ class App extends React.Component { } render() { - return ; + return ( +
+ ; + + + + + +
+ ); + } } 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/loginForm.js b/src/components/homePage/loginForm.js new file mode 100644 index 0000000..be9dbc4 --- /dev/null +++ b/src/components/homePage/loginForm.js @@ -0,0 +1,52 @@ +import React from "react"; +import {Link} from "react-router-dom"; + + + + +class LoginForm 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
+ +
+

Register here

+ +
+ ); + } +} + +export default LoginForm; diff --git a/src/components/homePage/welcomePage.js b/src/components/homePage/welcomePage.js new file mode 100644 index 0000000..1d83af8 --- /dev/null +++ b/src/components/homePage/welcomePage.js @@ -0,0 +1,22 @@ +import React from "react"; +import LoginForm from "./loginForm"; + + + + +class WelcomePage extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+

Welcome to BitBook

+ +
+ ); + } +} + +export default WelcomePage; 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/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; +} From a701ddf819761060be491fc44d581088e81a448b Mon Sep 17 00:00:00 2001 From: BIT Student Date: Tue, 21 Nov 2017 15:29:10 +0100 Subject: [PATCH 3/6] communication service finished --- src/components/app.js | 2 + src/constants.js | 4 +- src/service/authenticationService.js | 5 ++ src/service/communicationService.js | 70 ++++++++++++++++++++++++++++ src/service/redirectionService.js | 10 ++++ 5 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 src/service/authenticationService.js create mode 100644 src/service/communicationService.js create mode 100644 src/service/redirectionService.js diff --git a/src/components/app.js b/src/components/app.js index 688ddcc..9bd172f 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -13,3 +13,5 @@ class App extends React.Component { } export default App; + + 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/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..684e9ae --- /dev/null +++ b/src/service/redirectionService.js @@ -0,0 +1,10 @@ +import React from "react"; + +class RedirectionService { + constructor() { + this.bindEventHandlers(); + } + + + +} \ No newline at end of file From 409d7284b82df9a7df531470a61968b4c8286b0b Mon Sep 17 00:00:00 2001 From: BIT Student Date: Tue, 21 Nov 2017 15:33:16 +0100 Subject: [PATCH 4/6] finished login and registration page --- src/components/app.js | 9 ++- .../homePage/{loginForm.js => loginPage.js} | 15 +++-- src/components/homePage/registerPage.js | 62 +++++++++++++++++++ src/components/homePage/welcomePage.js | 23 ++++++- src/index.js | 6 +- 5 files changed, 98 insertions(+), 17 deletions(-) rename src/components/homePage/{loginForm.js => loginPage.js} (84%) create mode 100644 src/components/homePage/registerPage.js diff --git a/src/components/app.js b/src/components/app.js index c404b53..3e80710 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -1,5 +1,6 @@ import React from "react"; -import { Switch, Route } from "react-router-dom"; +import { Switch, Route, Redirect } from "react-router-dom"; + import WelcomePage from "./homePage/welcomePage"; @@ -11,11 +12,9 @@ class App extends React.Component { render() { return (
- ; + - - - +
); diff --git a/src/components/homePage/loginForm.js b/src/components/homePage/loginPage.js similarity index 84% rename from src/components/homePage/loginForm.js rename to src/components/homePage/loginPage.js index be9dbc4..a6a1db3 100644 --- a/src/components/homePage/loginForm.js +++ b/src/components/homePage/loginPage.js @@ -1,10 +1,11 @@ import React from "react"; -import {Link} from "react-router-dom"; +import { Link } from "react-router-dom"; +import registerPage from "./registerPage"; -class LoginForm extends React.Component { +class LoginPage extends React.Component { constructor(props) { super(props); this.state = { @@ -19,6 +20,7 @@ class LoginForm extends React.Component { handleEmailChange(event) { this.setState({ email: event.target.value }); console.log(event.target.value); + } handlePasswordChange(event) { this.setState({ password: event.target.value }); @@ -36,17 +38,18 @@ class LoginForm extends React.Component { render() { return ( -
+
+
Email
Password
-

Register here

- + +
); } } -export default LoginForm; +export default LoginPage; diff --git a/src/components/homePage/registerPage.js b/src/components/homePage/registerPage.js new file mode 100644 index 0000000..fc9fe77 --- /dev/null +++ b/src/components/homePage/registerPage.js @@ -0,0 +1,62 @@ +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 index 1d83af8..e3edc57 100644 --- a/src/components/homePage/welcomePage.js +++ b/src/components/homePage/welcomePage.js @@ -1,7 +1,9 @@ import React from "react"; -import LoginForm from "./loginForm"; - +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 { @@ -12,8 +14,23 @@ class WelcomePage extends React.Component { render() { return (
+ +

Welcome to BitBook

- +
+ +
    +
  • Login
    • +
  • Register here
    • +
+
+
+ + + + + +
); } 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") ); From b07cf601752f48e522338baef66eae26c4f2f0b7 Mon Sep 17 00:00:00 2001 From: BIT Student Date: Tue, 21 Nov 2017 16:52:20 +0100 Subject: [PATCH 5/6] redirection_service --- src/components/homePage/registerPage.js | 1 + src/service/redirectionService.js | 17 ++++++++++++----- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/homePage/registerPage.js b/src/components/homePage/registerPage.js index fc9fe77..e75d915 100644 --- a/src/components/homePage/registerPage.js +++ b/src/components/homePage/registerPage.js @@ -2,6 +2,7 @@ import React from "react"; import {Link} from "react-router-dom"; + class RegisterPage extends React.Component { constructor(props) { super(props); diff --git a/src/service/redirectionService.js b/src/service/redirectionService.js index 684e9ae..1bb84f1 100644 --- a/src/service/redirectionService.js +++ b/src/service/redirectionService.js @@ -1,10 +1,17 @@ -import React from "react"; + + class RedirectionService { - constructor() { - this.bindEventHandlers(); + + + goTo(path) { + + + window.location.assign(`#/${path}`); + } - -} \ No newline at end of file +} + +export default RedirectionService; \ No newline at end of file From dec6d6d731a5281a2d389b4810715bcfbf681d81 Mon Sep 17 00:00:00 2001 From: BIT Student Date: Tue, 21 Nov 2017 17:45:06 +0100 Subject: [PATCH 6/6] header_main_page --- src/components/app.js | 2 ++ src/components/homePage/headerPage.js | 47 +++++++++++++++++++++++++++ src/components/homePage/mainPage.js | 18 ++++++++++ 3 files changed, 67 insertions(+) create mode 100644 src/components/homePage/headerPage.js create mode 100644 src/components/homePage/mainPage.js diff --git a/src/components/app.js b/src/components/app.js index 3874c1f..f0093ed 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -2,6 +2,7 @@ import React from "react"; import { Switch, Route, Redirect } from "react-router-dom"; + import WelcomePage from "./homePage/welcomePage"; class App extends React.Component { @@ -12,6 +13,7 @@ class App extends React.Component { render() { return (
+ 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/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