listen for connection changes

src-tauri/src/commands.rs

@@ -221,8 +221,8 @@ pub async fn all_instances(app_state: State<'_, AppState>) -> Result<Vec<Instanc
 #[derive(Serialize)]
 pub struct LocationInfo {
     pub id: i64,
-    pub instance_id: i64,
     // Native id of network from defguard
+    pub instance_id: i64,
     pub name: String,
     pub address: String,
     pub endpoint: String,

src/pages/client/components/LocationsList/LocationsList.tsx

@@ -1,4 +1,6 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { listen, UnlistenFn } from '@tauri-apps/api/event';
+import { useEffect } from 'react';
 
 import { clientApi } from '../../clientAPI/clientApi';
 import { useClientStore } from '../../hooks/useClientStore';
@@ -10,12 +12,32 @@ const { getLocations } = clientApi;
 export const LocationsList = () => {
   const selectedInstance = useClientStore((state) => state.selectedInstance);
 
+  const queryClient = useQueryClient();
+
   const { data: locations } = useQuery({
     queryKey: [clientQueryKeys.getLocations, selectedInstance as number],
     queryFn: () => getLocations({ instanceId: selectedInstance as number }),
     enabled: !!selectedInstance,
   });
 
+  // listen to connection changes
+  // TODO: move to main page component
+  useEffect(() => {
+    let cleanup: UnlistenFn | undefined;
+
+    listen('connection-changed', () => {
+      queryClient.invalidateQueries([clientQueryKeys.getLocations]);
+      queryClient.invalidateQueries([clientQueryKeys.getInstances]);
+    }).then((c) => {
+      cleanup = c;
+    });
+
+    return () => {
+      cleanup?.();
+    };
+  }, [queryClient]);
+
+  // TODO: add loader or another placeholder view pointing to opening enter token modal if no instances are found / present
   if (!selectedInstance || !locations) return null;
 
   return (

src/pages/client/components/LocationsList/components/LocationCardConnectButton/LocationCardConnectButton.tsx

@@ -26,16 +26,14 @@ export const LocationCardConnectButton = ({ location }: Props) => {
   const [isLoading, setIsLoading] = useState(false);
   const { LL } = useI18nContext();
 
-  const active = false;
-
   const cn = classNames('location-card-connect-button', {
-    connected: active,
+    connected: location.active,
   });
 
   const handleClick = async () => {
     setIsLoading(true);
     try {
-      if (active) {
+      if (location.active) {
         await disconnect({ locationId: location.id });
       } else {
         await connect({ locationId: location.id });
@@ -52,12 +50,12 @@ export const LocationCardConnectButton = ({ location }: Props) => {
     <Button
       onClick={handleClick}
       className={cn}
-      icon={active ? <SvgIconX /> : <SvgIconCheckmarkSmall />}
+      icon={location.active ? <SvgIconX /> : <SvgIconCheckmarkSmall />}
       size={ButtonSize.SMALL}
       styleVariant={ButtonStyleVariant.STANDARD}
       loading={isLoading}
       text={
-        active
+        location.active
           ? LL.pages.client.controls.disconnect()
           : LL.pages.client.controls.connect()
       }

src/pages/client/components/LocationsList/components/LocationsGridView/LocationsGridView.tsx

@@ -29,11 +29,10 @@ type GridItemProps = {
 
 const GridItem = ({ location }: GridItemProps) => {
   const { LL } = useI18nContext();
-  const active = false;
   const cn = classNames(
     'grid-item',
     {
-      active: active,
+      active: location.active,
     },
     'no-info',
   );

src/pages/client/types.ts

@@ -10,9 +10,9 @@ export type DefguardInstance = {
 export type DefguardLocation = {
   id: number;
   instance_id: number;
-  network_id: number;
   name: string;
   address: string;
   endpoint: string;
-  allowed_ips: string;
+  // connected
+  active: boolean;
 };