refresh after put/post; handle auth state

TACC-Cloud · Jan 17, 2025 · c83faeb · c83faeb
1 parent 34fe03b
commit c83faeb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/react/src/components/LayersPanel/LayersPanel.tsx b/react/src/components/LayersPanel/LayersPanel.tsx
@@ -41,6 +41,9 @@ import {
 import { zodResolver } from '@hookform/resolvers/zod';
 import * as z from 'zod';
 import { SortableItem } from './SortableItem';
+import { useSelector } from 'react-redux';
+import { RootState } from '@hazmapper/redux/store';
+import { isTokenValid } from '@hazmapper/utils/authUtils';
 
 const formLayerTheme: ThemeConfig = {
   components: {
@@ -118,13 +121,15 @@ const LayersPanel: React.FC<{
   tileLayers?: TileServerLayer[];
   projectId: number;
 }> = ({ tileLayers = [], projectId }) => {
+  const isAuthenticated = useSelector((state: RootState) =>
+    isTokenValid(state.auth.authToken)
+  );
   const [form] = Form.useForm();
   const { Header, Content } = Layout;
   const { mutate: updateTileLayers, isPending } = usePutTileServer({
     projectId,
   });
   const [editLayerField, setEditLayerField] = useState({});
-  const [saveButtonEnabled, setSaveButtonEnabled] = useState(false);
 
   const initialValues = useMemo(
     () => ({
@@ -153,10 +158,6 @@ const LayersPanel: React.FC<{
     reset(initialValues);
   }, [initialValues, reset]);
 
-  useEffect(() => {
-    if (isDirty && !saveButtonEnabled) setSaveButtonEnabled(true);
-  }, [isDirty, saveButtonEnabled]);
-
   type TLayerOptionsFormData = {
     tileLayers: {
       layer: TileServerLayer;
@@ -221,9 +222,6 @@ const LayersPanel: React.FC<{
                   onFinish={handleSubmit(saveLayerOptions, (error) => {
                     console.log('error submit data', error);
                   })}
-                  onValuesChange={() => {
-                    if (!saveButtonEnabled) setSaveButtonEnabled(true);
-                  }}
                 >
                   <fieldset disabled={isPending}>
                     <Flex vertical>
@@ -347,10 +345,12 @@ const LayersPanel: React.FC<{
                                           });
                                         }}
                                       />
-                                      <DeleteTileLayerButton
-                                        projectId={projectId}
-                                        tileLayerId={field.layer.id}
-                                      />
+                                      {isAuthenticated && (
+                                        <DeleteTileLayerButton
+                                          projectId={projectId}
+                                          tileLayerId={field.layer.id}
+                                        />
+                                      )}
                                     </Flex>
                                   </Flex>
                                   <FormItem
@@ -373,7 +373,7 @@ const LayersPanel: React.FC<{
                       </DndContext>
                     </Flex>
 
-                    {saveButtonEnabled && (
+                    {isDirty && isAuthenticated && (
                       <Flex
                         align="center"
                         justify="center"

diff --git a/react/src/hooks/tileServers/useTileServers.ts b/react/src/hooks/tileServers/useTileServers.ts
@@ -38,14 +38,28 @@ export const useGetTileServers = ({
 };
 
 export const usePutTileServer = ({ projectId }: UsePostTileServerParams) => {
+  const queryClient = useQueryClient();
   return usePut<TileServerLayer[], TileServerLayer[]>({
     endpoint: `/projects/${projectId}/tile-servers/`,
+    options: {
+      onSuccess: () =>
+        queryClient.invalidateQueries({
+          queryKey: ['useGetTileServers'],
+        }),
+    },
   });
 };
 
 export const usePostTileServer = ({ projectId }: UsePostTileServerParams) => {
+  const queryClient = useQueryClient();
   return usePost<TileServerLayer, TileServerLayer>({
     endpoint: `/projects/${projectId}/tile-servers/`,
+    options: {
+      onSuccess: () =>
+        queryClient.invalidateQueries({
+          queryKey: ['useGetTileServers'],
+        }),
+    },
   });
 };