Updated frontend dependencies

matrixgw_frontend/src/routes/APITokensRoute.tsx

@@ -19,7 +19,7 @@ import { useAlert } from "../hooks/contexts_provider/AlertDialogProvider";
 import { time } from "../utils/DateUtils";
 
 export function APITokensRoute(): React.ReactElement {
-  const count = React.useRef(0);
+  const [count, setCount] = React.useState(0);
 
   const [openCreateTokenDialog, setOpenCreateTokenDialog] =
     React.useState(false);
@@ -34,7 +34,7 @@ export function APITokensRoute(): React.ReactElement {
   };
 
   const handleRefreshTokensList = () => {
-    count.current += 1;
+    setCount((c) => c + 1);
     setList(undefined);
   };
 
@@ -79,7 +79,7 @@ export function APITokensRoute(): React.ReactElement {
 
       {/* Tokens list */}
       <AsyncWidget
-        loadKey={count.current}
+        loadKey={count}
         ready={list !== undefined}
         load={load}
         errMsg="Failed to load the list of tokens!"

matrixgw_frontend/src/widgets/AsyncWidget.tsx

@@ -1,5 +1,5 @@
 import { Alert, Box, Button, CircularProgress } from "@mui/material";
-import { useEffect, useRef, useState } from "react";
+import React from "react";
 
 const State = {
   Loading: 0,
@@ -17,9 +17,7 @@ export function AsyncWidget(p: {
   ready?: boolean;
   errAdditionalElement?: () => React.ReactElement;
 }): React.ReactElement {
-  const [state, setState] = useState<number>(State.Loading);
-
-  const counter = useRef<unknown>(null);
+  const [state, setState] = React.useState<number>(State.Loading);
 
   const load = async () => {
     try {
@@ -32,12 +30,10 @@ export function AsyncWidget(p: {
     }
   };
 
-  useEffect(() => {
-    if (counter.current === p.loadKey) return;
-    counter.current = p.loadKey;
-
+  React.useEffect(() => {
     load();
-  });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [p.loadKey]);
 
   if (state === State.Error)
     return (