🔧 Removing context from AirDCPP settings page

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"

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");

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) => {

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 = [
     {

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) => {

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({