offline tweaks

CHANGELOG.md

@@ -5,6 +5,7 @@
 - add a service worker for basic caching
 - 1.4.1 fix service worker location and working
 - 1.4.2 add offline view with last books stored in local storage
+- 1.4.3 start offline when not online, highlight the offline state
 
 ## 1.3.0 Add lists by title (2023-01-05)
 

src/js/components/App.tsx

@@ -64,7 +64,9 @@ export default function App(): JSX.Element {
 
 function AppInsideRouter(): JSX.Element {
   // state for application
-  const [state, setState] = React.useState<AppState>(AppState.starting);
+  const [state, setState] = React.useState<AppState>(
+    navigator.onLine ? AppState.starting : AppState.loggedOut,
+  );
   const [customMessage, setCustomMessage] = React.useState('');
   const [email, setEmail] = React.useState<string>();
   const [bookTemplate, setBookTemplate] = React.useState<Partial<NewBook>>({});

src/js/components/#.tsx

@@ -52,13 +52,11 @@ export default function Login({ state, setState }: LoginProps): JSX.Element {
   let mainEl: JSX.Element;
   switch (state) {
     case AppState.starting:
-    case AppState.offline:
     case AppState.loggedOut:
-      mainEl = (
-        <Button color="inherit" onClick={openMenu}>
-          { state === AppState.offline ? 'Offline' : 'Login' }
-        </Button>
-      );
+      mainEl = <Button color="inherit" onClick={openMenu}>Login</Button>;
+      break;
+    case AppState.offline:
+      mainEl = <Button color="secondary" variant="contained" onClick={openMenu}>Offline</Button>;
       break;
     case AppState.loggedIn:
     case AppState.progress: