Update dependencies, fix reconnection and implement darkmode

.editorconfig

@@ -5,4 +5,4 @@ indent_style = space
 indent_size = 2
 charset = utf-8
 trim_trailing_whitespace = true
-insert_final_newline = true
+insert_final_newline = true

.eslintrc.js

@@ -4,7 +4,7 @@ module.exports = {
         "jest": true,
         "browser": true
     },
-    parser: "babel-eslint",
+    parser: "@babel/eslint-parser",
     extends: [
         "airbnb",
         "plugin:prettier/recommended",

.prettierrc.js

@@ -4,4 +4,5 @@
 // But in some cases ESLing and Prettier confuse eachother
 module.exports = {
   trailingComma: "es5", // Makes diffs nicer
+  endOfLine: "auto", // To not freak out on Windows
 }

app/main/app.js

@@ -5,6 +5,7 @@ import installExtension, {
 import {
   initListeners,
   initRateLimiter,
+  setDarkMode,
   ensureEnv,
 } from "./initialize-project/initialize-project";
 import { windows } from "../shared/resources/Windows/Windows";
@@ -78,6 +79,7 @@ if (!gotTheLock) {
 
   app.whenReady().then(() => {
     ensureEnv();
+    setDarkMode();
 
     // Subscribing to the listeners happens even before creating the window to be ready to actively respond to initial events coming from renderer.
     initListeners();

app/main/initialize-project/initialize-project.js

@@ -1,4 +1,4 @@
-import { ipcMain, dialog } from "electron";
+import { ipcMain, dialog, nativeTheme } from "electron";
 import GlobalStore from "../../shared/GlobalStore/GlobalStore";
 import { ipcEvents } from "../../shared/resources/IPCEvents/IPCEvents";
 import { storeKeys } from "../../shared/resources/StoreKeys/StoreKeys";
@@ -104,3 +104,9 @@ export const initRateLimiter = () =>
     // The reservoir's value must be decremented by one because the initialization contains a fetch which already counts towards the rate limit.
     return HttpRequestLimiter.incrementReservoir(-1);
   });
+
+export const setDarkMode = () => {
+  const globalStore = GlobalStore.getInstance();
+
+  globalStore.set(storeKeys.DARK_MODE, nativeTheme.shouldUseDarkColors);
+}

app/main/web-sockets/actions.js

@@ -126,26 +126,26 @@ const connect = id =>
 
         ws.socket.on("close", () => {
           devLog(
-            `SOCKET CLOSE - ${ws.searchUrl} / ${ws.id} ${ws.error.code} ${ws.error.reason}`
+            `SOCKET CLOSE - ${ws.searchUrl} / ${ws.id} ${ws.error?.code} ${ws.error?.reason}`
           );
 
           updateState(ws.id, ws.socket);
 
-          if (ws.error.code === 429) {
+          if (ws.error?.code === 429) {
             sendError(
               `Rate limit exceded! Closing connection for ${ws.searchUrl}. This should not happen, please open an issue.`
             );
             return;
           }
 
-          if (ws.error.code === 404) {
+          if (ws.error?.code === 404) {
             sendError(
               `Search not found. Closing connection for ${ws.searchUrl}.`
             );
             return;
           }
 
-          if (ws.error.code === 401) {
+          if (ws.error?.code === 401) {
             sendError(
               `Unauthorized. Closing connection for ${ws.searchUrl}. Check Session ID.`
             );
@@ -208,11 +208,12 @@ export const updateConnections = () => {
   return disconnectAll();
 };
 
-export const reconnect = id => disconnect(id);
+export const reconnect = id => {
+  disconnect(id);
+  connect(id);  // socket close event has auto-reconnect, but abnormal disconnection does not. So force connect when user requests it.
+}
 
 export const reconnectAll = () => {
   disconnectAll();
-  // Disconnect triggers a re-connect in case the socket was already open.
-  // In case sockets were not open before we also call connect
-  connectAll();
+  connectAll(); // socket close event has auto-reconnect, but abnormal disconnection does not. So force connect when user requests it.
 };

app/renderer/components/NavigationBar/NavigationBar.js

@@ -6,10 +6,8 @@ import RateLimitFeedback from "./RateLimitFeedback/RateLimitFeedback";
 import { useNavigationBarStyles } from "./NavigationBar.style";
 
 export default () => {
-  const classes = useNavigationBarStyles();
-
   return (
-    <Paper className={classes.container}>
+    <Paper sx={useNavigationBarStyles.container}>
       <RateLimitFeedback />
       <NavigationItems />
       <RightSide />

app/renderer/components/NavigationBar/NavigationBar.style.js

@@ -1,13 +1,11 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-export const useNavigationBarStyles = makeStyles({
+export const useNavigationBarStyles = {
   container: {
     display: "flex",
     position: "relative",
     justifyContent: "space-evenly",
     alignItems: "center",
-    padding: 5,
-    marginBottom: 15,
-    marginTop: 10,
-  },
-});
+    padding: 1,
+    marginBottom: 2,
+    marginTop: 1,
+  }
+};

app/renderer/components/NavigationBar/NavigationItems/NavigationItems.js

@@ -1,19 +1,20 @@
 import React from "react";
 import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Link from '@mui/material/Link';
 import { NavLink } from "react-router-dom";
 import { routes } from "../../../resources/Routes/Routes";
 
 const navigationItems = () => (
   <Breadcrumbs separator="">
     {routes.map(route => (
-      <NavLink
+      <Link
+        component={NavLink}
         key={route.displayName}
-        style={{ color: "#000000" }}
-        activeStyle={{ fontWeight: "bold" }}
+        style={({ isActive }) => ({ fontWeight: isActive ? 'bold' : 'normal' })}
         to={route.path}
       >
         {route.displayName}
-      </NavLink>
+      </Link>
     ))}
   </Breadcrumbs>
 );

app/renderer/components/NavigationBar/RateLimitFeedback/RateLimitFeedback.js

@@ -7,7 +7,7 @@ import { ipcEvents } from "../../../../shared/resources/IPCEvents/IPCEvents";
 import { useRateLimitFeedbackStyles } from "./RateLimitFeedback.style";
 
 export default () => {
-  const classes = useRateLimitFeedbackStyles();
+  const classes = useRateLimitFeedbackStyles;
 
   const [requestsExhausted, setRequestsExhausted] = useState(false);
 
@@ -37,11 +37,11 @@ export default () => {
   }
 
   return (
-    <Tooltip title={buildMessage()} classes={{ tooltip: classes.tooltip }}>
+    <Tooltip title={buildMessage()} sx={ classes.tooltip }>
       {requestsExhausted ? (
-        <WarningIcon className={classes.warningIcon} />
+        <WarningIcon sx={ classes.warningIcon } />
       ) : (
-        <CheckCircleIcon className={classes.checkCircleIcon} />
+        <CheckCircleIcon sx={ classes.checkCircleIcon } />
       )}
     </Tooltip>
   );

app/renderer/components/NavigationBar/RateLimitFeedback/RateLimitFeedback.style.js

@@ -1,6 +1,4 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-export const useRateLimitFeedbackStyles = makeStyles({
+export const useRateLimitFeedbackStyles = {
   tooltip: {
     maxWidth: "none",
     fontSize: 14,
@@ -10,5 +8,5 @@ export const useRateLimitFeedbackStyles = makeStyles({
   },
   checkCircleIcon: {
     color: "#228B22",
-  },
-});
+  }
+};

app/renderer/components/NavigationBar/RightSide/RightSide.js

@@ -7,13 +7,14 @@ import * as baseUrls from "../../../../shared/resources/BaseUrls/BaseUrls";
 import { useRightSideStyles } from "./RightSide.style";
 
 export default () => {
-  const classes = useRightSideStyles();
+  const classes = useRightSideStyles;
+
   return (
     <Box display="flex" alignItems="center">
       <Typography variant="subtitle2">{process.env.REVISION}</Typography>
 
       <Button
-        className={classes.button}
+        sx={classes.button}
         onClick={() => electronUtils.openExternalUrl(baseUrls.reportIssue)}
       >
         Report issue

app/renderer/components/NavigationBar/RightSide/RightSide.style.js

@@ -1,8 +1,6 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-export const useRightSideStyles = makeStyles({
+export const useRightSideStyles = {
   button: {
     textTransform: "none",
-    marginLeft: 10,
-  },
-});
+    marginLeft: 1,
+  }
+};

app/renderer/components/Screens/Account/Account.js

@@ -13,7 +13,7 @@ export default () => {
         justifyContent="space-between"
       >
         <Typography variant="h6" gutterBottom>
-          {`Logged in as anonymus`}
+          Logged in as anonymous
         </Typography>
       </Box>
       <SessionIdEditor />

app/renderer/components/Screens/Account/SessionIdEditor/InfoButton/InfoButton.js

@@ -6,15 +6,15 @@ import * as baseUrls from "../../../../../../shared/resources/BaseUrls/BaseUrls"
 import { useInfoButtonStyles } from "./InfoButton.style";
 
 export default () => {
-  const classes = useInfoButtonStyles();
+  const classes = useInfoButtonStyles;
 
   return (
     <IconButton
-      className={classes.iconButton}
+      sx={classes.iconButton}
       onClick={() => electronUtils.openExternalUrl(baseUrls.sessionIdWiki)}
       size="large"
     >
-      <HelpOutline className={classes.helpIcon} />
+      <HelpOutline sx={classes.helpIcon} />
     </IconButton>
   );
 };

app/renderer/components/Screens/Account/SessionIdEditor/InfoButton/InfoButton.style.js

@@ -1,6 +1,4 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-export const useInfoButtonStyles = makeStyles({
+export const useInfoButtonStyles = {
   iconButton: {
     padding: 0,
     marginLeft: 5,
@@ -9,4 +7,4 @@ export const useInfoButtonStyles = makeStyles({
     color: "#FFFFFF",
     fontSize: "35px",
   },
-});
+};

app/renderer/components/Screens/News/News.js

@@ -11,7 +11,7 @@ import {
 } from "../../../../shared/utils/JavaScriptUtils/JavaScriptUtils";
 
 export default () => {
-  const classes = useNewsStyles();
+  const classes = useNewsStyles;
   const [githubReleaseNotes, setGithubReleaseNotes] = useState([]);
 
   useEffect(() => {
@@ -24,7 +24,7 @@ export default () => {
   }, []);
 
   return (
-    <Paper className={classes.root}>
+    <Paper sx={classes.root}>
       {Announcements.map(announcement => {
         return (
           <Announcement

app/renderer/components/Screens/News/News.style.js

@@ -1,15 +1,13 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-export const useNewsStyles = makeStyles({
+export const useNewsStyles = {
   root: {
     overflow: "auto",
     height: "600px",
-    padding: 20,
+    padding: 2,
     "& > div": {
-      marginBottom: 30,
+      marginBottom: 4,
       "&:last-child": {
         marginBottom: 0,
       },
     },
   },
-});
+};

app/renderer/components/Screens/News/Types/Announcement.js

@@ -27,11 +27,11 @@ const Announcement = ({ ...details }) => (
       {moment(details.date).format("DD.MM.YYYY")}
     </Typography>
     <ReactMarkdown
-      source={details.description}
-      renderers={{
+      children={details.description}
+      components={{
         link: props => <Url {...props} />,
       }}
-      plugins={[breaks]}
+      remarkPlugins={[breaks]}
     />
     <Divider />
   </div>

app/renderer/components/Screens/News/Types/ReleaseNote.js

@@ -23,11 +23,11 @@ const ReleaseNote = ({ ...details }) => (
       {moment(details.published_at).format("DD.MM.YYYY")}
     </Typography>
     <ReactMarkdown
-      source={details.body}
-      renderers={{
+      children={details.body}
+      components={{
         link: props => <Url {...props} />,
       }}
-      plugins={[breaks]}
+      remarkPlugins={[breaks]}
     />
     <Divider />
   </div>

app/renderer/components/Screens/Results/Results.js

@@ -3,7 +3,8 @@ import React, { useState, useEffect } from "react";
 import { clipboard, ipcRenderer } from "electron";
 import Box from "@mui/material/Box";
 import MaterialTable from "@material-table/core";
-import { Link } from "react-router-dom";
+import { Link as ReactLink } from "react-router-dom";
+import Link from '@mui/material/Link';
 import { ipcEvents } from "../../../../shared/resources/IPCEvents/IPCEvents";
 import GlobalStore from "../../../../shared/GlobalStore/GlobalStore";
 import { storeKeys } from "../../../../shared/resources/StoreKeys/StoreKeys";
@@ -65,7 +66,7 @@ export default () => {
         Pagination: () => (
           <Box component="td" padding={2} fontSize="13px">
             Result count: <b>{results.length}</b>
-            <Link to="/settings" style={{ marginLeft: 3 }}>
+            <Link to="/settings" style={{ marginLeft: 3 }} component={ReactLink}>
               (limit: <b>{resultsLimit}</b>)
             </Link>
           </Box>

app/renderer/components/Screens/Screens.js

@@ -1,19 +1,19 @@
 import React from "react";
-import { Switch, Route } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 import News from "./News/News";
 import Searches from "./Searches/Searches";
 import Account from "./Account/Account";
 import Settings from "./Settings/Settings";
 import Results from "./Results/Results";
 
 const Screens = () => (
-  <Switch>
-    <Route path="/account" component={Account} />
-    <Route path="/searches" component={Searches} />
-    <Route path="/settings" component={Settings} />
-    <Route path="/results" component={Results} />
-    <Route component={News} />
-  </Switch>
+  <Routes>
+    <Route path="/account" element={<Account />} />
+    <Route path="/searches" element={<Searches />} />
+    <Route path="/settings" element={<Settings />} />
+    <Route path="/results" element={<Results />} />
+    <Route path="/news" element={<News />} />
+  </Routes>
 );
 
 export default Screens;