From 9da8381a1f21c7835c2143e83eca7b4b92644113 Mon Sep 17 00:00:00 2001
From: Stefan Kraus <stefan.kraus@methodpark.de>
Date: Sun, 13 Dec 2020 15:41:40 +0100
Subject: [PATCH] Add new status info if init connection failed
---
.../src/backendconnection/communication.ts | 8 ++++++--
.../connectionstatus/ConnectionStatusBar.tsx | 20 +++++++++++++------
.../connectionstatus/ConnectionStatusSlice.ts | 4 ++--
frontend/tsconfig.json | 1 +
4 files changed, 23 insertions(+), 10 deletions(-)
diff --git a/frontend/src/backendconnection/communication.ts b/frontend/src/backendconnection/communication.ts
index 14fe03a..3bd97a3 100644
--- a/frontend/src/backendconnection/communication.ts
+++ b/frontend/src/backendconnection/communication.ts
@@ -4,7 +4,7 @@ import {
setPlaySeconds,
} from "../player/PlayerSlice";
-import { setConnectionStatus } from "../connectionstatus/ConnectionStatusSlice";
+import { selectConnected, setConnectionStatus } from "../connectionstatus/ConnectionStatusSlice";
import { all, put, select, takeEvery } from "redux-saga/effects";
@@ -110,7 +110,11 @@ function* handleConnectionStatus(action: any) {
break;
}
case "REDUX_WEBSOCKET::CLOSED": {
- yield put(setConnectionStatus(false));
+ let isConnect = yield select(selectConnected);
+ if (isConnect !== null)
+ {
+ yield put(setConnectionStatus(false));
+ }
break;
}
}
diff --git a/frontend/src/connectionstatus/ConnectionStatusBar.tsx b/frontend/src/connectionstatus/ConnectionStatusBar.tsx
index 5fc0d49..5de5c46 100644
--- a/frontend/src/connectionstatus/ConnectionStatusBar.tsx
+++ b/frontend/src/connectionstatus/ConnectionStatusBar.tsx
@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme: Theme) =>
);
interface StateProps {
- connected: boolean;
+ connected: boolean | null;
}
export type Props = StateProps;
@@ -28,16 +28,24 @@ export type Props = StateProps;
export function ConnectionStatusBar(
props: Props
) {
+
+ function TypographyHelper(){
+ console.log(props.connected)
+ if (props.connected === true){
+ return <Typography variant="h6" className={classes.title}>Connected to server</Typography>
+ } else if (props.connected === false){
+ return <Typography style={{color: 'red'}} variant="h6" className={classes.title}>Lost connection to server</Typography>
+ } else if (props.connected === null) {
+ return <Typography style={{color: 'red'}} variant="h1" className={classes.title}>Server is offline, pls restart website to connect</Typography>
+ }
+ }
+
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="static" color="default">
<Toolbar>
- <Typography variant="h6" className={classes.title}>
- {props.connected
- ? "Connected to server"
- : "Lost connection to server"}
- </Typography>
+ { TypographyHelper() }
</Toolbar>
</AppBar>
</div>
diff --git a/frontend/src/connectionstatus/ConnectionStatusSlice.ts b/frontend/src/connectionstatus/ConnectionStatusSlice.ts
index 1f96414..8d60bba 100644
--- a/frontend/src/connectionstatus/ConnectionStatusSlice.ts
+++ b/frontend/src/connectionstatus/ConnectionStatusSlice.ts
@@ -2,11 +2,11 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { RootState } from "../store/store";
export interface ConnectionStatusState {
- connected: boolean;
+ connected: boolean | null;
}
export const initialState: ConnectionStatusState = {
- connected: false,
+ connected: null,
};
export type ConnectionStatusAction = PayloadAction<boolean>;
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 1d693b2..a0553fb 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -14,6 +14,7 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
+ "strictNullChecks": true,
"jsx": "react"
},
"include": ["src"]
--
GitLab