Federation view fixes (#923)

.pre-commit-config.yaml

@@ -4,7 +4,7 @@
 exclude: '(api|chat|control)/migrations/.*'
 repos:
   - repo: 'https://github.com/pre-commit/pre-commit-hooks'
-    rev: v2.3.0
+    rev: v4.5.0
     hooks:
       - id: check-merge-conflict
       - id: check-yaml

frontend/src/basic/NavBar/NavBar.tsx

@@ -60,7 +60,7 @@ const NavBar = (): JSX.Element => {
   useEffect(() => {
     // change tab (page) into the current route
     const pathPage: Page | string = location.pathname.split('/')[1];
-    if (pathPage === 'index.html') {
+    if (pathPage === 'index.html' || !pathPage) {
       navigate('/robot');
       setPage('robot');
     }

frontend/src/basic/SettingsPage/index.tsx

@@ -3,7 +3,6 @@ import { Grid, Paper } from '@mui/material';
 import SettingsForm from '../../components/SettingsForm';
 import { AppContext, type UseAppStoreType } from '../../contexts/AppContext';
 import FederationTable from '../../components/FederationTable';
-import { FederationContext, UseFederationStoreType } from '../../contexts/FederationContext';
 
 const SettingsPage = (): JSX.Element => {
   const { windowSize, navbarHeight, settings, setOpen, open, hostUrl } =

frontend/src/components/Dialogs/Coordinator.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {

frontend/src/components/FederationTable/index.tsx

@@ -30,7 +30,7 @@ const FederationTable = ({
   fillContainer = false,
 }: FederationTableProps): JSX.Element => {
   const { t } = useTranslation();
-  const { federation, setFocusedCoordinator } =
+  const { federation, setFocusedCoordinator, coordinatorUpdatedAt } =
     useContext<UseFederationStoreType>(FederationContext);
   const { hostUrl } = useContext<UseAppStoreType>(AppContext);
   const theme = useTheme();
@@ -47,11 +47,12 @@ const FederationTable = ({
   const height = defaultPageSize * verticalHeightRow + verticalHeightFrame;
 
   const [useDefaultPageSize, setUseDefaultPageSize] = useState(true);
+
   useEffect(() => {
     if (useDefaultPageSize) {
       setPageSize(defaultPageSize);
     }
-  });
+  }, [coordinatorUpdatedAt]);
 
   const localeText = {
     MuiTablePagination: { labelRowsPerPage: t('Coordinators per page:') },

frontend/src/models/Coordinator.model.ts

@@ -227,8 +227,11 @@ export class Coordinator {
       });
   };
 
-  enable = () => {
+  enable = (onEnabled: () => void = () => {}) => {
     this.enabled = true;
+    this.update(() => {
+      onEnabled();
+    });
   };
 
   disable = () => {

frontend/src/models/Federation.model.ts

@@ -117,10 +117,13 @@ export class Federation {
 
   disableCoordinator = (shortAlias: string) => {
     this.coordinators[shortAlias].disable();
+    this.triggerHook('onCoordinatorUpdate');
   };
 
   enableCoordinator = (shortAlias: string) => {
-    this.coordinators[shortAlias].enable();
+    this.coordinators[shortAlias].enable(() => {
+      this.triggerHook('onCoordinatorUpdate');
+    });
   };
 }