From 730141ff26b2933d6d0ab8046b57f85c8f62e072 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Mon, 6 Nov 2023 17:45:12 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Removing=20context=20from=20AirD?=
 =?UTF-8?q?CPP=20settings=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  2 +-
 src/client/components/App.tsx                 |  1 +
 .../AirDCPPSettings/AirDCPPSettingsForm.tsx   |  5 ++--
 src/client/components/Settings/Settings.tsx   |  1 +
 src/client/store/index.ts                     | 27 +++++++++----------
 vite.config.js                                |  5 ++++
 6 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index b5a915f..2ecbacf 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,7 @@
     "socket.io-client": "^4.3.2",
     "styled-components": "^6.0.7",
     "threetwo-ui-typings": "^1.0.14",
-    "vite": "^4.4.9",
+    "vite": "^4.5.0",
     "vite-plugin-html": "^3.2.0",
     "websocket": "^1.0.34",
     "zustand": "^4.4.6"
diff --git a/src/client/components/App.tsx b/src/client/components/App.tsx
index a794f2c..b56bac3 100644
--- a/src/client/components/App.tsx
+++ b/src/client/components/App.tsx
@@ -92,6 +92,7 @@ const AirDCPPSocketComponent = (): ReactElement => {
   return <></>;
 };
 export const App = (): ReactElement => {
+  console.log("randitva");
   // useEffect(() => {
   //   // Check if there is a sessionId in localStorage
   //   const sessionId = localStorage.getItem("sessionId");
diff --git a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx
index 6c7d031..ebd1da5 100644
--- a/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx
+++ b/src/client/components/Settings/AirDCPPSettings/AirDCPPSettingsForm.tsx
@@ -4,12 +4,13 @@ import {
   deleteSettings,
 } from "../../../actions/settings.actions";
 import { AirDCPPSettingsConfirmation } from "./AirDCPPSettingsConfirmation";
-import { AirDCPPSocketContext } from "../../../context/AirDCPPSocket";
 import { isUndefined, isEmpty } from "lodash";
 import { ConnectionForm } from "../../shared/ConnectionForm/ConnectionForm";
+import { useStore } from "../../../store/index";
 
 export const AirDCPPSettingsForm = (): ReactElement => {
-  const airDCPPSettings = useContext(AirDCPPSocketContext);
+  // const airDCPPSettings = useContext(AirDCPPSocketContext);
+  const airDCPPSettings = useStore((store) => store.airDCPPClientConfiguration);
   console.log(airDCPPSettings);
 
   const onSubmit = useCallback(async (values) => {
diff --git a/src/client/components/Settings/Settings.tsx b/src/client/components/Settings/Settings.tsx
index 06c0f85..aca7131 100644
--- a/src/client/components/Settings/Settings.tsx
+++ b/src/client/components/Settings/Settings.tsx
@@ -10,6 +10,7 @@ import { isUndefined, map } from "lodash";
 interface ISettingsProps {}
 
 export const Settings = (props: ISettingsProps): ReactElement => {
+  console.log("Asd");
   const [active, setActive] = useState("gen-db");
   const settingsContent = [
     {
diff --git a/src/client/store/index.ts b/src/client/store/index.ts
index c140acb..abd1070 100644
--- a/src/client/store/index.ts
+++ b/src/client/store/index.ts
@@ -1,6 +1,5 @@
 import { create } from "zustand";
 import { isEmpty, isUndefined } from "lodash";
-import React, { createContext, useEffect, useState } from "react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import AirDCPPSocket from "../services/DcppSearchService";
 import axios from "axios";
@@ -8,6 +7,7 @@ import axios from "axios";
 export const useStore = create((set, get) => ({
   airDCPPSocketConnected: false,
   disconnectionInfo: {},
+  airDCPPClientConfiguration: {},
   setAirDCPPSocketConnectionStatus: () =>
     set((value) => ({
       airDCPPSocketConnected: value,
@@ -20,23 +20,22 @@ export const useStore = create((set, get) => ({
 const { getState, setState } = useStore;
 
 // 1. get settings from mongo
-const { data, isLoading, isError } = useQuery({
-  queryKey: ["settings"],
-  queryFn: async () =>
-    await axios({
-      url: "http://localhost:3000/api/settings/getAllSettings",
-      method: "GET",
-    }),
+const { data } = await axios({
+  url: "http://localhost:3000/api/settings/getAllSettings",
+  method: "GET",
 });
 
-const directConnectConfiguration = data?.data.directConnect.client.host;
+const directConnectConfiguration = data?.directConnect.client.host;
+console.log(directConnectConfiguration);
 
 // 2. If available, init AirDC++ Socket with those settings
-useEffect(() => {
-  if (!isEmpty(directConnectConfiguration)) {
-    initializeAirDCPPSocket(directConnectConfiguration);
-  }
-}, [directConnectConfiguration]);
+
+if (!isEmpty(directConnectConfiguration)) {
+  initializeAirDCPPSocket(directConnectConfiguration);
+  setState({
+    airDCPPClientConfiguration: directConnectConfiguration,
+  });
+}
 
 // Method to init AirDC++ Socket with supplied settings
 const initializeAirDCPPSocket = async (configuration) => {
diff --git a/vite.config.js b/vite.config.js
index 5de3f50..b1768b6 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,6 +6,11 @@ export default defineConfig({
   publicDir: "public",
   base: "",
   build: "esnext",
+  esbuild: {
+    supported: {
+      "top-level-await": true, //browsers can handle top-level-await features
+    },
+  },
   server: { host: true },
   plugins: [
     nodeResolve({