⚡️ Improve performance.

Author: Hi-Ray

electron-builder.yml

@@ -1,6 +1,6 @@
 appId: dev.hextechdocs.lcuexplorer
 productName: LCU Explorer
-copyright: Copyright © 2021 HextechDocs
+copyright: Copyright © 2022 HextechDocs
 directories:
   output: dist
   buildResources: resources

package.json

@@ -39,6 +39,7 @@
     "electron-serve": "^1.1.0",
     "electron-store": "^8.0.0",
     "lcu-connector": "^2.1.3",
+    "lodash": "^4.17.21",
     "recoil": "^0.4.0",
     "sass": "^1.37.5",
     "styled-components": "^5.3.0",
@@ -47,6 +48,7 @@
     "tracer": "^1.1.5"
   },
   "devDependencies": {
+    "@types/lodash": "^4",
     "@types/node": "^16.6.1",
     "@types/react": "^17.0.17",
     "@types/styled-components": "^5.1.12",

renderer/pages/_app.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import type { AppProps } from "next/app";
 import { RecoilRoot } from "recoil";
 
 import "css-reset-and-normalize/css/button-reset.min.css";
@@ -8,11 +9,9 @@ import "css-reset-and-normalize/css/reset-and-normalize.min.css";
 import "swagger-ui/dist/swagger-ui.css";
 import "../styles/globals.sass";
 
-const LCUExplorer = ({ Component, pageProps }: never): JSX.Element => {
+const LCUExplorer = ({ Component, pageProps }: AppProps): JSX.Element => {
   return (
     <RecoilRoot>
-      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-      {/* @ts-ignore */}
       <Component {...pageProps} />
     </RecoilRoot>
   );

renderer/pages/home.tsx

@@ -2,29 +2,35 @@ import React, { useState, useEffect } from "react";
 import { ipcRenderer } from "electron";
 import Swagger from "swagger-ui";
 import axios, { AxiosResponse } from "axios";
+import { isEmpty } from "lodash";
 
 import Titlebar from "@components/Titlebar";
 
 type Credentials = {
-  address: string;
-  port: number;
-  username: string;
-  password: string;
-  protocol: string;
+  address?: string;
+  port?: number;
+  username?: string;
+  password?: string;
+  protocol?: string;
 };
 type SwaggerUIPlugged = Swagger & {
   updateSpec: (specUpdates: any) => void;
 };
 
 const BASIC_AUTH = "BasicAuth";
 
-const Home = (): JSX.Element => {
-  const [swagger, SetSwagger] = useState<SwaggerUIPlugged>();
-  const [credentials, SetCredentials] = useState<Credentials>();
-  const [spec, SetSpec] = useState<any>();
+const Home: React.FC = () => {
+  const [swagger, SetSwagger] = useState<any>({});
+  const [credentials, SetCredentials] = useState<Credentials>({});
+  const [spec, SetSpec] = useState<any>({});
 
   // Get spec.
   useEffect(() => {
+    if (!isEmpty(spec)) {
+      console.log("spec is not empty returning");
+      return;
+    }
+    console.warn("spec is empty fetching");
     axios
       .get("https://www.mingweisamuel.com/lcu-schema/lcu/openapi.json")
       .then((res: AxiosResponse<any>) => SetSpec(res.data));
@@ -34,14 +40,17 @@ const Home = (): JSX.Element => {
   useEffect(() => {
     ipcRenderer.on("credentialspass", (_event, newCredentials) => {
       console.log(`FE received credentials: ${JSON.stringify(newCredentials)}`);
-      SetCredentials(newCredentials);
+      if (isEmpty(credentials)) {
+        SetCredentials(newCredentials);
+      }
     });
     ipcRenderer.send("fe-ready");
   }, []);
 
   // Setup Swagger UI.
   useEffect(() => {
     const swaggerInst = Swagger({
+      syntaxHighlight: false,
       dom_id: "#swagger",
       spec: {
         openapi: "3.0.0",
@@ -63,8 +72,13 @@ const Home = (): JSX.Element => {
       operationsSorter: "alpha",
       tagsSorter: "alpha",
       docExpansion: "none",
-      defaultModelExpandDepth: 1,
+      defaultModelExpandDepth: 10,
+      maxDisplayedTags: 100,
+      tryItOutEnabled: true,
       displayRequestDuration: true,
+      pluginsOptions: {
+        pluginLoadType: "chain",
+      },
       filter: "",
       deepLinking: false, // @ts-ignore
       requestInterceptor: (request: any) => {
@@ -77,8 +91,9 @@ const Home = (): JSX.Element => {
             spec: {
               wrapSelectors: {
                 allowTryItOutFor: () => () => {
-                  const jsonSpec = system.getState().toJSON().spec.json;
-                  return jsonSpec.servers.length > 0;
+                  // const jsonSpec = system.getState().toJSON().spec.json;
+                  console.log("rerendering");
+                  return true;
                 },
               },
             },
@@ -97,7 +112,12 @@ const Home = (): JSX.Element => {
       ],
       onComplete: () => {
         console.log("Swagger UI loading complete.");
-        SetSwagger(swaggerInst);
+        if (isEmpty(swagger)) {
+          console.log("swagger is empty applying instance");
+          SetSwagger(swaggerInst);
+        } else {
+          console.log("swagger instance is present");
+        }
       },
     }) as SwaggerUIPlugged;
   }, []);
@@ -116,6 +136,11 @@ const Home = (): JSX.Element => {
 
     // Update credentials/port from connector.
     if (credentials != null) {
+      if (isEmpty(swagger)) {
+        console.log("swager is empty and credentials arent null");
+        return;
+      }
+      console.log("updating spec...");
       swagger.updateSpec({
         servers: [
           {
@@ -130,13 +155,18 @@ const Home = (): JSX.Element => {
         credentials.password
       );
     } else {
+      if (isEmpty(swagger)) {
+        return;
+      }
+      console.log("updating spec");
       swagger.updateSpec({
         servers: [],
       });
     }
 
     // Update OpenAPI spec lcu-schema.
     if (spec != null) {
+      console.log("updating spec");
       swagger.updateSpec(spec);
     }
   }, [swagger, credentials, spec]);

renderer/state/Theme.ts

@@ -1761,6 +1761,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash@npm:^4":
+  version: 4.14.186
+  resolution: "@types/lodash@npm:4.14.186"
+  checksum: ee0c1368a8100bb6efb88335107473a41928fc307ff1ef4ff1278868ccddba9c04c68c36d1ffe3a0392ef4a956e1955f7de3203ec09df4f1655dd1b88485c549
+  languageName: node
+  linkType: hard
+
 "@types/minimatch@npm:*":
   version: 3.0.5
   resolution: "@types/minimatch@npm:3.0.5"
@@ -6958,6 +6965,7 @@ fsevents@^1.2.7:
   version: 0.0.0-use.local
   resolution: "lcu-explorer@workspace:."
   dependencies:
+    "@types/lodash": ^4
     "@types/node": ^16.6.1
     "@types/react": ^17.0.17
     "@types/styled-components": ^5.1.12
@@ -6981,6 +6989,7 @@ fsevents@^1.2.7:
     eslint-plugin-react: 7.24.0
     eslint-plugin-react-hooks: 4.2.0
     lcu-connector: ^2.1.3
+    lodash: ^4.17.21
     next: ^11.1.1
     nextron: ^7.0.0
     prettier: ^2.3.2