data from tauri

src/pages/client/ClientPage.tsx

@@ -1,13 +1,32 @@
 import './style.scss';
 
+import { useQuery } from '@tanstack/react-query';
+
 import { useI18nContext } from '../../i18n/i18n-react';
+import { clientApi } from './clientAPI/clientApi';
 import { ClientSideBar } from './components/ClientSideBar/ClientSideBar';
 import { LocationsList } from './components/LocationsList/LocationsList';
 import { AddInstanceModal } from './components/modals/AddInstanceModal/AddInstanceModal';
+import { useClientStore } from './hooks/useClientStore';
+import { clientQueryKeys } from './query';
+
+const { getInstances } = clientApi;
 
 export const ClientPage = () => {
   const { LL } = useI18nContext();
   const pageLL = LL.pages.client;
+  const setInstances = useClientStore((state) => state.setInstances);
+
+  useQuery({
+    queryKey: [clientQueryKeys.getInstances],
+    queryFn: getInstances,
+    refetchOnMount: true,
+    refetchOnWindowFocus: false,
+    onSuccess: (res) => {
+      setInstances(res);
+    },
+  });
+
   return (
     <>
       <section id="client-page">

src/pages/client/clientAPI/clientApi.ts

@@ -5,13 +5,13 @@ import { DefguardInstance, DefguardLocation } from '../types';
 const getInstances = async (): Promise<DefguardInstance[]> => invoke('all_instances');
 
 type GetLocationsRequest = {
-  instance_id: number;
+  instanceId: number;
 };
 
 const getLocations = async (data: GetLocationsRequest): Promise<DefguardLocation[]> =>
   invoke('all_locations', data);
 
-export const clientApi = () => ({
+export const clientApi = {
   getInstances,
   getLocations,
-});
+};

src/pages/client/components/ClientSideBar/components/ClientBarItem/ClientBarItem.tsx

@@ -1,23 +1,20 @@
 import { autoUpdate, useFloating } from '@floating-ui/react';
 import classNames from 'classnames';
-import { isUndefined } from 'lodash-es';
-import { useMemo } from 'react';
 
 import SvgIconConnection from '../../../../../../shared/defguard-ui/components/svg/IconConnection';
+import { useClientStore } from '../../../../hooks/useClientStore';
 import { DefguardInstance } from '../../../../types';
 
 type Props = {
   instance: DefguardInstance;
 };
 
 export const ClientBarItem = ({ instance }: Props) => {
-  const active = useMemo(() => {
-    if (instance.locations.length === 0) return false;
-    return !isUndefined(instance.locations.find((l) => l.connected));
-  }, [instance.locations]);
-
+  const setClientStore = useClientStore((state) => state.setState);
+  const selectedInstance = useClientStore((state) => state.selectedInstance);
   const cn = classNames('client-bar-item', 'clickable', {
-    active,
+    active: instance.id === selectedInstance,
+    connected: instance.connected,
   });
 
   const { refs, floatingStyles } = useFloating({
@@ -28,11 +25,15 @@ export const ClientBarItem = ({ instance }: Props) => {
 
   return (
     <>
-      <div className={cn} ref={refs.setReference}>
+      <div
+        className={cn}
+        ref={refs.setReference}
+        onClick={() => setClientStore({ selectedInstance: instance.id })}
+      >
         <SvgIconConnection className="connection-icon" />
         <p>{instance.name}</p>
       </div>
-      {active && (
+      {instance.connected && (
         <div
           className="client-bar-active-item-bar"
           ref={refs.setFloating}

src/pages/client/components/ClientSideBar/style.scss

@@ -81,6 +81,9 @@
         & > p {
           color: var(--text-body-primary);
         }
+      }
+
+      &.connected {
         & > .connection-icon {
           path {
             stroke: var(--surface-positive-primary);

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

@@ -1,20 +1,22 @@
-import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
 
+import { clientApi } from '../../clientAPI/clientApi';
 import { useClientStore } from '../../hooks/useClientStore';
+import { clientQueryKeys } from '../../query';
 import { LocationsGridView } from './components/LocationsGridView/LocationsGridView';
 
+const { getLocations } = clientApi;
+
 export const LocationsList = () => {
-  const instances = useClientStore((state) => state.instances);
   const selectedInstance = useClientStore((state) => state.selectedInstance);
-  const locations = useMemo(() => {
-    const selected = instances.find((i) => i.id === selectedInstance);
-    if (selected) {
-      return selected.locations;
-    }
-    return [];
-  }, [selectedInstance, instances]);
 
-  if (!selectedInstance) return null;
+  const { data: locations } = useQuery({
+    queryKey: [clientQueryKeys.getLocations, selectedInstance as number],
+    queryFn: () => getLocations({ instanceId: selectedInstance as number }),
+    enabled: !!selectedInstance,
+  });
+
+  if (!selectedInstance || !locations) return null;
 
   return (
     <>

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

@@ -13,13 +13,13 @@ type Props = {
 
 export const LocationCardTitle = ({ location }: Props) => {
   const cn = classNames('location-card-title', {
-    active: location.connected,
+    active: false,
   });
   return (
     <div className={cn}>
       <SvgIconConnection />
       <span className="location-name">{location.name}</span>
-      <Badge text={location.ip} styleVariant={BadgeStyleVariant.STANDARD} />
+      <Badge text={location.address} styleVariant={BadgeStyleVariant.STANDARD} />
     </div>
   );
 };

src/pages/client/hooks/useClientStore.tsx

@@ -1,105 +1,25 @@
+import { isUndefined } from 'lodash-es';
 import { createWithEqualityFn } from 'zustand/traditional';
 
 import { DefguardInstance } from '../types';
 
-const mockValues: StoreValues = {
-  instances: [
-    {
-      id: 'instance-1',
-      name: 'Teonite',
-      locations: [
-        {
-          id: 'location-teonite-1',
-          ip: '169.254.0.0',
-          name: 'Szczecin',
-          connected: false,
-        },
-        {
-          id: 'location-teonite-2',
-          ip: '169.253.0.0',
-          name: 'Zurich',
-          connected: false,
-        },
-        {
-          id: 'location-teonite-3',
-          ip: '169.252.0.0',
-          name: 'Monaco',
-          connected: true,
-        },
-        {
-          id: 'location-teonite-4',
-          ip: '169.251.0.0',
-          name: 'Berlin',
-          connected: false,
-        },
-        {
-          id: 'location-teonite-5',
-          ip: '169.250.0.0',
-          name: 'Paris',
-          connected: false,
-        },
-        {
-          id: 'location-teonite-6',
-          ip: '169.249.0.0',
-          name: 'US East',
-          connected: true,
-        },
-      ],
-    },
-    {
-      id: 'instance-2',
-      name: 'WideStreet',
-      locations: [
-        {
-          id: 'location-widestreet-1',
-          ip: '169.254.0.0',
-          name: 'Szczecin',
-          connected: false,
-        },
-        {
-          id: 'location-widestreet-2',
-          ip: '169.253.0.0',
-          name: 'Zurich',
-          connected: false,
-        },
-        {
-          id: 'location-widestreet-3',
-          ip: '169.252.0.0',
-          name: 'Monaco',
-          connected: false,
-        },
-        {
-          id: 'location-widestreet-4',
-          ip: '169.251.0.0',
-          name: 'Berlin',
-          connected: false,
-        },
-        {
-          id: 'location-widestreet-5',
-          ip: '169.250.0.0',
-          name: 'Paris',
-          connected: false,
-        },
-        {
-          id: 'location-widestreet-6',
-          ip: '169.249.0.0',
-          name: 'US East',
-          connected: false,
-        },
-      ],
-    },
-  ],
-  selectedInstance: 'instance-1',
-};
-
 // eslint-disable-next-line
 const defaultValues: StoreValues = {
   instances: [],
   selectedInstance: undefined,
 };
 
 export const useClientStore = createWithEqualityFn<Store>(
-  (set) => ({ ...mockValues, setState: (values) => set({ ...values }) }),
+  (set, get) => ({
+    ...defaultValues,
+    setState: (values) => set({ ...values }),
+    setInstances: (values) => {
+      if (isUndefined(get().selectedInstance)) {
+        return set({ instances: values, selectedInstance: values[0]?.id ?? undefined });
+      }
+      return set({ instances: values });
+    },
+  }),
   Object.is,
 );
 
@@ -112,4 +32,5 @@ type StoreValues = {
 
 type StoreMethods = {
   setState: (values: Partial<StoreValues>) => void;
+  setInstances: (instances: DefguardInstance[]) => void;
 };

src/pages/client/query.ts

@@ -0,0 +1,4 @@
+export const clientQueryKeys = {
+  getInstances: 'GET_INSTANCES',
+  getLocations: 'GET_LOCATIONS',
+};

src/pages/client/types.ts

@@ -3,6 +3,7 @@ export type DefguardInstance = {
   uuid: string;
   name: string;
   url: string;
+  connected: boolean;
 };
 
 export type DefguardLocation = {