🐛 fixed: save network & reset server selector when switching network

src/main/store/store.ts

@@ -2,12 +2,12 @@ import electronStore from "electron-store";
 
 import { Server } from "../../shared/interfaces/server.interface";
 import { serversConstant } from "../../shared/constants/servers.cosntant";
-import { SettingInStore } from "../../shared/interfaces/settings.interface";
+import {
+  SettingInStore,
+  StoreKey,
+} from "../../shared/interfaces/settings.interface";
 
-export const store = new electronStore<{
-  dnsList: Server[];
-  settings: SettingInStore;
-}>({
+export const store = new electronStore<StoreKey>({
   defaults: {
     dnsList: serversConstant,
     settings: {

src/preload/index.ts

@@ -4,8 +4,14 @@ import { contextBridge, ipcRenderer } from "electron";
 
 import { Server } from "../shared/interfaces/server.interface";
 import { EventsKeys } from "../shared/constants/eventsKeys.constant";
-import { SettingInStore } from "../shared/interfaces/settings.interface";
+import {
+  SettingInStore,
+  StoreKey,
+} from "../shared/interfaces/settings.interface";
 import os from "os";
+import { store } from "../main/store/store";
+
+console.log(store.get("settings"));
 export const ipcPreload = {
   setDns: (server: Server) => ipcRenderer.invoke(EventsKeys.SET_DNS, server),
   clearDns: () => ipcRenderer.invoke(EventsKeys.CLEAR_DNS),
@@ -50,6 +56,12 @@ export const osItems = {
   getInterfaces: () => os.networkInterfaces(),
 };
 
+// Todo use 'set' in client
+export const storePreload = {
+  get: <T extends keyof StoreKey>(key: T) => store.get<T>(key),
+};
+
 contextBridge.exposeInMainWorld("ui", uiPreload);
 contextBridge.exposeInMainWorld("ipc", ipcPreload);
 contextBridge.exposeInMainWorld("os", osItems);
+contextBridge.exposeInMainWorld("storePreload", storePreload);

src/renderer/component/buttons/add-custom-btn-component.tsx

@@ -15,7 +15,7 @@ export function AddCustomBtnComponent() {
   return (
     <div>
       <Button
-        shape={"square"}
+        shape={"circle"}
         size={"sm"}
         onClick={toggleOpenModal}
         className={

src/renderer/component/buttons/connect-btn.component.tsx

@@ -16,7 +16,6 @@ export function ConnectButtonComponent() {
   const [loading, setLoading] = useState<boolean>(false);
   async function clickHandler(step: statusStep) {
     if (loading) return;
-
     if (!serversStateContext.selected) {
       appNotif("Error", "please first pick your favorite server");
       return;

src/renderer/component/buttons/delete-btn.component.tsx

@@ -44,10 +44,10 @@ export function DeleteButtonComponent() {
   return (
     <>
       <ButtonDaisyui
-        shape={"square"}
+        shape={"circle"}
         size={"sm"}
         className={
-          "bg-[#d8d8d8] hover:bg-[#c4c4c4] dark:bg-[#383838] hover:dark:bg-[#323232] border-none text-center"
+          "dark:bg-[#262626] bg-base-200 hover:bg-[#c4c4c4] hover:dark:bg-[#323232] border-none text-center"
         }
         onClick={handleOpen}
       >

src/renderer/component/buttons/interfaces-dialog-btn-component.tsx

@@ -1,7 +1,5 @@
-import { MdOutlineAddModerator } from "react-icons/md";
 import { Button } from "react-daisyui";
 import { useContext, useState } from "react";
-import { AddDnsModalComponent } from "../modals/add-dns.component";
 import { serversContext } from "../../context/servers.context";
 import { BsHddNetwork } from "react-icons/bs";
 import { NetworkOptionsModalComponent } from "../modals/network-options.component";
@@ -17,7 +15,7 @@ export function InterfacesDialogButtonComponent() {
   return (
     <div>
       <Button
-        shape={"square"}
+        shape={"circle"}
         size={"sm"}
         onClick={toggleOpenModal}
         className={

src/renderer/component/cards/server-info/index.tsx

@@ -3,7 +3,6 @@ import { FiCopy } from "react-icons/fi";
 import { TfiReload } from "react-icons/tfi";
 import { useContext, useEffect, useState } from "react";
 import { serversContext } from "../../../context/servers.context";
-import { Server } from "../../../../shared/interfaces/server.interface";
 import { useI18nContext } from "../../../../i18n/i18n-react";
 import icon from "../../../../../public/icons/icon.png";
 import { getPingIcon } from "../../../utils/icons.util";
@@ -28,7 +27,6 @@ export function ServerInfoCardComponent(prop: Prop) {
 
   useEffect(() => {
     if (serversStateContext.selected) getPing();
-    console.log(serversStateContext.currentActive);
   }, [serversStateContext.selected, serversStateContext.currentActive]);
 
   function getPing() {
@@ -77,6 +75,12 @@ export function ServerInfoCardComponent(prop: Prop) {
     serversStateContext.selected.name?.length > 14
       ? serversStateContext.selected.name.slice(0, 12) + "..."
       : serversStateContext.selected.name;
+
+  const network =
+    serversStateContext.network?.length > 14
+      ? serversStateContext.network.slice(0, 12) + "..."
+      : serversStateContext.network;
+
   return (
     <div className="dark:bg-[#262626] bg-base-200 h-[189px] w-[362px] mt-5 rounded-[23px]">
       <div
@@ -171,7 +175,7 @@ export function ServerInfoCardComponent(prop: Prop) {
           </div>
         </div>
         <div className={"flex flex-col gap-2 text-center  justify-center"}>
-          <h3 className={"font-semibold  text-gray-500"}>Status</h3>
+          <h3 className={"font-semibold  text-gray-500"}>Network</h3>
 
           <div
             className={"w-100 flex flex-row gap-1   justify-center text-center"}
@@ -181,7 +185,13 @@ export function ServerInfoCardComponent(prop: Prop) {
                 variant="ghost"
                 color={isConnect ? "green" : "red"}
                 size="sm"
-                value={isConnect ? "Connected" : "Disconnect"}
+                value={
+                  network == "Auto"
+                    ? isConnect
+                      ? "Connected"
+                      : "Disconnect"
+                    : network
+                }
                 className={`font-[0px]  ${
                   isConnect ? "text-[#42A752]" : "text-[#B43D3D]"
                 }`}

src/renderer/component/modals/network-options.component.tsx

@@ -74,7 +74,7 @@ export function NetworkOptionsModalComponent(props: Props) {
             <div>
               <div className="label">
                 <span className="label-text text-lg font-normal ">
-                  Network interface
+                  Network Interface
                 </span>
               </div>
 

src/renderer/component/selectes/servers/index.tsx

@@ -1,38 +1,27 @@
 import { Server } from "../../../../shared/interfaces/server.interface";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext } from "react";
 import { serversContext } from "../../../context/servers.context";
 import { ServersContext } from "../../../interfaces/servers-context.interface";
 import { Select } from "react-daisyui";
 
 export function ServersListSelectComponent() {
   const serversStateContext = useContext(serversContext);
-  const [selectedKey, setSelectedKey] = useState<string | undefined>("default");
-  useEffect(() => {
-    if (selectedKey != "default" && serversStateContext.servers.length) {
-      const server = serversStateContext.servers.find(
-        (ser) => ser.key == selectedKey
-      );
-      if (server) {
-        serversStateContext.setSelected(server);
-      }
-    } else {
-    }
-  }, [selectedKey]);
-
+  const selectedDef =
+    serversStateContext.selected?.key == "unknown" ||
+    !serversStateContext.selected;
+  function onChange(key: string) {
+    const server = serversStateContext.servers.find((ser) => ser.key == key);
+    serversStateContext.setSelected(server);
+  }
   return (
     <Select
       className={
         "w-[360px] dark:bg-[#262626] bg-base-200 text-[#6B6A6A] border-none rounded-[23px]"
       }
-      // disabled={!!serversStateContext.currentActive}
       borderOffset={true}
-      onChange={(data) => setSelectedKey(data.target.value)}
+      onChange={(data) => onChange(data.target.value)}
     >
-      <Select.Option
-        value={"default"}
-        selected={selectedKey == "default"}
-        disabled={true}
-      >
+      <Select.Option value={"default"} selected={selectedDef} disabled={true}>
         Pick your favorite Server
       </Select.Option>
       {servers(serversStateContext)}

src/renderer/pages/home.page.tsx

@@ -28,9 +28,12 @@ export function HomePage() {
   useEffect(() => {
     async function getCurrentActive() {
       try {
+        setSelectedServer(null);
         const response = await window.ipc.getCurrentActive();
         setCurrentActive(response.server);
         setSelectedServer(response.server);
+        if (!network)
+          setNetwork(window.storePreload.get("settings").network_interface);
       } finally {
         setLoadingCurrentActive(false);
       }
@@ -82,7 +85,7 @@ export function HomePage() {
               </div>
               <div
                 className={
-                  "absolute bottom-[260px] left-[290px] flex flex-col gap-2 h-10"
+                  "absolute top-[330px] left-[360px] flex flex-col gap-2 h-10"
                 }
               >
                 <DeleteButtonComponent />

src/renderer/vite-env.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="vite/client" />
-import { uiPreload, ipcPreload, osItems } from "../preload";
+import { uiPreload, ipcPreload, osItems, storePreload } from "../preload";
 
 interface ImportMetaEnv {
   readonly PACKAGE_VERSION: string;
@@ -14,5 +14,6 @@ declare global {
     ipc: typeof ipcPreload;
     ui: typeof uiPreload;
     os: typeof osItems;
+    storePreload: typeof storePreload;
   }
 }

src/shared/interfaces/settings.interface.ts

@@ -1,4 +1,5 @@
 import { Locales } from "../../i18n/i18n-types";
+import { Server } from "./server.interface";
 
 export interface Settings {
   startUp: boolean;
@@ -9,3 +10,8 @@ export interface Settings {
 }
 
 export interface SettingInStore extends Omit<Settings, "startUp"> {}
+
+export type StoreKey = {
+  dnsList: Server[];
+  settings: SettingInStore;
+};