From 36c1e4a7bedaae12f6159e478eb92bf9ace973e9 Mon Sep 17 00:00:00 2001 From: Max Schmitt Date: Sun, 5 Nov 2017 20:25:04 +0100 Subject: [PATCH] Added a bit for the routing component --- static/package.json | 7 ++-- static/src/App/App.js | 29 +++++++-------- static/src/Menu/Menu.js | 82 +++++++++++++++++++++++++++++++++++++++++ static/src/index.js | 3 +- static/yarn.lock | 48 ++++++++++++++++++++++-- 5 files changed, 146 insertions(+), 23 deletions(-) create mode 100644 static/src/Menu/Menu.js diff --git a/static/package.json b/static/package.json index 780a260..a5a23ab 100644 --- a/static/package.json +++ b/static/package.json @@ -11,9 +11,10 @@ "dependencies": { "react": "^16.0.0", "react-dom": "^16.0.0", - "react-scripts": "1.0.16", + "react-router": "^4.2.0", + "react-scripts": "1.0.17", "semantic-ui-css": "^2.2.12", - "semantic-ui-react": "^0.75.1" + "semantic-ui-react": "^0.76.0" }, "scripts": { "start": "react-scripts start", @@ -21,4 +22,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} diff --git a/static/src/App/App.js b/static/src/App/App.js index 2eec63e..269ab65 100644 --- a/static/src/App/App.js +++ b/static/src/App/App.js @@ -5,18 +5,17 @@ import './App.css'; class AppComponent extends Component { handleURLChange = (e, { value }) => this.url = value handleURLSubmit = () => { - console.log("handle Submit", "URL:", this.url) - fetch("/api/v1/protected/create", { - method: "POST", + fetch('/api/v1/protected/create', { + method: 'POST', body: JSON.stringify({ URL: this.url }), headers: { - "Authorization": window.localStorage.getItem("token"), + 'Authorization': window.localStorage.getItem('token'), 'Content-Type': 'application/json' } }).then(res => res.ok ? res.json() : Promise.reject(res.json())) - .then(d => console.log(d)) + .then(r => alert(r.URL)) } componentWillMount() { @@ -34,10 +33,10 @@ class AppComponent extends Component { } checkAuth = () => { const that = this, - token = window.localStorage.getItem("token"); + token = window.localStorage.getItem('token'); if (token) { - fetch("/api/v1/check", { - method: "POST", + fetch('/api/v1/check', { + method: 'POST', body: JSON.stringify({ Token: token }), @@ -50,7 +49,7 @@ class AppComponent extends Component { that.setState({ authorized: true }) }) .catch(e => { - window.localStorage.removeItem("token"); + window.localStorage.removeItem('token'); that.setState({ authorized: false }) }) } @@ -58,7 +57,7 @@ class AppComponent extends Component { onAuthCallback = data => { // clear the old event listener, so that the event can only emitted be once window.removeEventListener('onAuthCallback', this.onAuthCallback); - window.localStorage.setItem("token", data.detail.token); + window.localStorage.setItem('token', data.detail.token); this.checkAuth(); } onAuthClick = () => { @@ -68,7 +67,7 @@ class AppComponent extends Component { wHeight = 500; var wLeft = (window.screen.width / 2) - (wwidth / 2); var wTop = (window.screen.height / 2) - (wHeight / 2); - window.open("/api/v1/login", "", `width=${wwidth}, height=${wHeight}, top=${wTop}, left=${wLeft}`) + window.open('/api/v1/login', '', `width=${wwidth}, height=${wHeight}, top=${wTop}, left=${wLeft}`) } render() { @@ -88,15 +87,15 @@ class AppComponent extends Component { ) } else { return ( - + Authentication

Currently you are only able to use Google as authentication service:

-
-
diff --git a/static/src/Menu/Menu.js b/static/src/Menu/Menu.js new file mode 100644 index 0000000..04073d1 --- /dev/null +++ b/static/src/Menu/Menu.js @@ -0,0 +1,82 @@ +import React, { Component } from 'react' +import { Container, Menu, Input } from 'semantic-ui-react' +import Home from '../App/App' + +import React from 'react' +import { render } from 'react-dom' + +// First we import some modules... +import { Router, Route, IndexRoute, Link, hashHistory } from 'react-router' + +// Make a new component to render inside of Inbox +const Message = React.createClass({ + render() { + return

Message

+ } +}) + +const Inbox = React.createClass({ + render() { + return ( +
+

Inbox

+
+ ) + } +}) + + + +class MenuComponent extends Component { + componentWillMount() { + + } + + state = { + activeItem: 'home', + history: null + } + + handleItemClick = (e, { name }) => this.setState({ activeItem: name }) + + render() { + const { activeItem, history } = this.state + let currentItem; + switch (activeItem) { + case 'home': + currentItem = + break; + } + return ( + // + // + // + // + // + // + // + // + // + // + // + // + // {{ currentItem }} + // + + + + + + {/* add some nested routes where we want the UI to nest */} + {/* render the stats page when at `/inbox` */} + + {/* render the message component at /inbox/messages/123 */} + + + + + ) + } +} + +export default MenuComponent; diff --git a/static/src/index.js b/static/src/index.js index 08b76d3..70993d5 100644 --- a/static/src/index.js +++ b/static/src/index.js @@ -3,7 +3,8 @@ import ReactDOM from 'react-dom'; import './index.css'; import 'semantic-ui-css/semantic.min.css'; import App from './App/App'; +import Menu from './Menu/Menu'; import registerServiceWorker from './registerServiceWorker'; -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); registerServiceWorker(); diff --git a/static/yarn.lock b/static/yarn.lock index ddc9862..f535986 100644 --- a/static/yarn.lock +++ b/static/yarn.lock @@ -2857,6 +2857,16 @@ he@1.1.x: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" +history@^4.7.2: + version "4.7.2" + resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b" + dependencies: + invariant "^2.2.1" + loose-envify "^1.2.0" + resolve-pathname "^2.2.0" + value-equal "^0.4.0" + warning "^3.0.0" + hmac-drbg@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -2869,6 +2879,10 @@ hoek@2.x.x: version "2.16.3" resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" +hoist-non-react-statics@^2.3.0: + version "2.3.1" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz#343db84c6018c650778898240135a1420ee22ce0" + home-or-tmp@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8" @@ -3082,7 +3096,7 @@ interpret@^1.0.0: version "1.0.4" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.4.tgz#820cdd588b868ffb191a809506d6c9c8f212b1b0" -invariant@^2.2.2: +invariant@^2.2.1, invariant@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" dependencies: @@ -3884,7 +3898,7 @@ longest@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" dependencies: @@ -4470,7 +4484,7 @@ path-to-regexp@0.1.7: version "0.1.7" resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c" -path-to-regexp@^1.0.1: +path-to-regexp@^1.0.1, path-to-regexp@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d" dependencies: @@ -4892,7 +4906,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.10, prop-types@^15.6.0: +prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0: version "15.6.0" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" dependencies: @@ -5045,6 +5059,18 @@ react-error-overlay@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655" +react-router@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.2.0.tgz#61f7b3e3770daeb24062dae3eedef1b054155986" + dependencies: + history "^4.7.2" + hoist-non-react-statics "^2.3.0" + invariant "^2.2.2" + loose-envify "^1.3.1" + path-to-regexp "^1.7.0" + prop-types "^15.5.4" + warning "^3.0.0" + react-scripts@1.0.16: version "1.0.16" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.0.16.tgz#0d3c7ec30925fb0017cd185b1056ee085065f92c" @@ -5355,6 +5381,10 @@ resolve-from@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748" +resolve-pathname@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879" + resolve@1.1.7: version "1.1.7" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b" @@ -6159,6 +6189,10 @@ validate-npm-package-license@^3.0.1: spdx-correct "~1.0.0" spdx-expression-parse "~1.0.0" +value-equal@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7" + vary@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" @@ -6187,6 +6221,12 @@ walker@~1.0.5: dependencies: makeerror "1.0.x" +warning@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" + dependencies: + loose-envify "^1.0.0" + watch@~0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc"