Handle not having hetwork better

webclient/src/App.js

@@ -7,15 +7,21 @@ import { Link, Route } from 'react-router-dom';
 import io from 'socket.io-client';
 
 // Move to env var
-const SOCKET_SERVER_URL = 'http://localhost:8080';
+const SOCKET_SERVER_URL = 'https://tools-socket.protospace.ca';
-const AUTH_SERVER_URL = 'http://localhost:8000';
+const AUTH_SERVER_URL = 'https://tools-auth.protospace.ca';
 
 class App extends Component {
 	constructor() {
 		super();
 
 		this.socket = io(SOCKET_SERVER_URL);
-		this.storage = typeof localStorage !== 'undefined';
+
+		try {
+			localStorage.setItem('test', 'test');
+			this.storage = true;
+		} catch (e) {
+			this.storage = false;
+		}
 
 		let token = this.storage ? localStorage.getItem('token') : null;
 
@@ -29,6 +35,11 @@ class App extends Component {
 		};
 	}
 
+	noNetwork = () => {
+		this.setState({ network: false });
+		this.socket.disconnect();
+	}
+
 	getUser = () => {
 		fetch(AUTH_SERVER_URL + '/user/', {
 			headers: {'Authorization': 'Token ' + this.state.login.token},
@@ -47,11 +58,16 @@ class App extends Component {
 
 	componentDidMount() {
 		fetch(AUTH_SERVER_URL + '/tooldata/')
-			.then(response => response.json())
+			.then(response => {
-			.then(data => this.setState({ toolData: data }))
+				if (response.ok) {
+					response.json().then(data => this.setState({ toolData: data }));
+				} else {
+					this.noNetwork();
+				}
+			})
 			.catch(error => {
 				console.log(error)
-				this.setState({network: false});
+				this.noNetwork();
 			});
 
 		if (this.state.login.token) this.getUser();
@@ -85,7 +101,7 @@ class App extends Component {
 		const value = event.target.value;
 
 		this.setState({
-			login: {...this.state.login, [name]: value}
+			login: {...this.state.login, [name]: value, error: false}
 		});
 	}
 
@@ -99,17 +115,17 @@ class App extends Component {
 			.then(response => {
 				if (response.ok) {
 					response.json().then(data => {
-						this.setState({login: {...login, ...data, error: false}});
+						this.setState({ login: {...login, ...data, error: false} });
 						if (this.storage) localStorage.setItem('token', data.token);
 						this.getUser();
 					});
 				} else {
-					this.setState({login: {...login, error: true}});
+					this.setState({ login: {...login, error: true} });
 				}
 			})
 			.catch(error => {
 				console.log(error)
-				this.setState({network: false});
+				this.setState({ network: false });
 			});
 	}
 
@@ -200,11 +216,7 @@ class App extends Component {
 					:
 						<Container text>
 							<Form size='large' onSubmit={this.handleSubmit}>
-								{login.error ?
+								<Message visible warning header='Please log in to access the tools!' />
-									<Message visible error header='Invalid username / password!' />
-								:
-									<Message visible warning header='Please log in to access the tools!' />
-								}
 								<Form.Field>
 									<label>Protospace Username</label>
 									<input name='username' placeholder='Username' value={login.username} onChange={this.handleChange} />
@@ -214,6 +226,9 @@ class App extends Component {
 									<input name='password' type='password' value={login.password} onChange={this.handleChange} />
 								</Form.Field>
 								<Button type='submit'>Submit</Button>
+								{login.error && <Label basic color='red' pointing='left'>
+									Invalid username / password!
+								</Label>}
 							</Form>
 						</Container>
 					}

webclient/src/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
-import registerServiceWorker from './registerServiceWorker';
 import { BrowserRouter } from 'react-router-dom';
 
 ReactDOM.render((
@@ -10,5 +9,3 @@ ReactDOM.render((
 		<App />
 	</BrowserRouter>
 ), document.getElementById('root'));
-
-registerServiceWorker();