Frontend improvement and cleanup (#1690)

* Replace Create-React-App with Vite.js

* Update React-Router to v6

* Cleanup unused codes

2 files changed, 80 insertions, 0 deletions

diff --git a/frontend/config/api-key.ts b/frontend/config/api-key.ts
new file mode 100644
index 000000000..af817ebba
--- /dev/null
+++ b/frontend/config/api-key.ts
@@ -0,0 +1,50 @@
+import { readFile } from "fs/promises";
+
+async function parseConfig(path: string) {
+  const config = await readFile(path, "utf8");
+
+  const targetSection = config
+    .split("\n\n")
+    .filter((section) => section.includes("[auth]"));
+
+  if (targetSection.length === 0) {
+    throw new Error("Cannot find [auth] section in config");
+  }
+
+  const section = targetSection[0];
+
+  for (const line of section.split("\n")) {
+    const matched = line.startsWith("apikey");
+    if (matched) {
+      const results = line.split("=");
+      if (results.length === 2) {
+        const key = results[1].trim();
+        return key;
+      }
+    }
+  }
+
+  throw new Error("Cannot find apikey in config");
+}
+
+export async function findApiKey(
+  env: Record<string, string>
+): Promise<string | undefined> {
+  if (env["VITE_API_KEY"] !== undefined) {
+    return undefined;
+  }
+
+  if (env["VITE_BAZARR_CONFIG_FILE"] !== undefined) {
+    const path = env["VITE_BAZARR_CONFIG_FILE"];
+
+    try {
+      const apiKey = await parseConfig(path);
+
+      return apiKey;
+    } catch (err) {
+      console.warn(err.message);
+    }
+  }
+
+  return undefined;
+}
diff --git a/frontend/config/chunks.ts b/frontend/config/chunks.ts
new file mode 100644
index 000000000..1d992f5a2
--- /dev/null
+++ b/frontend/config/chunks.ts
@@ -0,0 +1,30 @@
+import { dependencies } from "../package.json";
+
+const vendors = [
+  "react",
+  "react-redux",
+  "react-router-dom",
+  "react-dom",
+  "react-query",
+  "axios",
+  "socket.io-client",
+];
+
+function renderChunks() {
+  const chunks: Record<string, string[]> = {};
+
+  for (const key in dependencies) {
+    if (!vendors.includes(key)) {
+      chunks[key] = [key];
+    }
+  }
+
+  return chunks;
+}
+
+const chunks = {
+  vendors,
+  ...renderChunks(),
+};
+
+export default chunks;