From 1352b47546576e65a7a28eb02613bafde4090b15 Mon Sep 17 00:00:00 2001
From: Joshua Kitenge <83226114+joshuadkitenge@users.noreply.github.com>
Date: Thu, 17 Aug 2023 14:36:41 +0100
Subject: [PATCH] address review comments

---
 src/api/sessions.tsx                          | 14 ++++
 .../sessionDrawer.component.test.tsx.snap     |  8 +-
 .../deleteSessionDialogue.component.test.tsx  |  4 -
 .../deleteSessionDialogue.component.tsx       | 13 +---
 .../sessionDialogue.component.test.tsx        |  6 --
 src/session/sessionDialogue.component.tsx     | 16 +---
 src/session/sessionDrawer.component.test.tsx  | 11 ++-
 src/session/sessionDrawer.component.tsx       | 38 ++++------
 .../sessionSaveButtons.component.test.tsx     | 40 +++++-----
 src/session/sessionSaveButtons.component.tsx  | 74 ++++++++-----------
 src/views/viewTabs.component.test.tsx         | 29 ++++++++
 src/views/viewTabs.component.tsx              | 57 ++++++--------
 12 files changed, 145 insertions(+), 165 deletions(-)

diff --git a/src/api/sessions.tsx b/src/api/sessions.tsx
index 1eebf7099..80fe4c9e8 100644
--- a/src/api/sessions.tsx
+++ b/src/api/sessions.tsx
@@ -4,6 +4,7 @@ import {
   UseMutationResult,
   useQuery,
   UseQueryResult,
+  useQueryClient,
 } from '@tanstack/react-query';
 import { Session, SessionListItem, SessionResponse } from '../app.types';
 import { useAppSelector } from '../state/hooks';
@@ -32,10 +33,14 @@ export const useSaveSession = (): UseMutationResult<
   Session
 > => {
   const { apiUrl } = useAppSelector(selectUrls);
+  const queryClient = useQueryClient();
   return useMutation((session: Session) => saveSession(apiUrl, session), {
     onError: (error) => {
       console.log('Got error ' + error.message);
     },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['sessionList'] });
+    },
   });
 };
 
@@ -65,12 +70,17 @@ export const useEditSession = (): UseMutationResult<
   SessionResponse
 > => {
   const { apiUrl } = useAppSelector(selectUrls);
+  const queryClient = useQueryClient();
   return useMutation(
     (session: SessionResponse) => editSession(apiUrl, session),
     {
       onError: (error) => {
         console.log('Got error ' + error.message);
       },
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: ['sessionList'] });
+        queryClient.invalidateQueries({ queryKey: ['session'] });
+      },
     }
   );
 };
@@ -94,12 +104,16 @@ export const useDeleteSession = (): UseMutationResult<
   SessionResponse
 > => {
   const { apiUrl } = useAppSelector(selectUrls);
+  const queryClient = useQueryClient();
   return useMutation(
     (session: SessionResponse) => deleteSession(apiUrl, session),
     {
       onError: (error) => {
         console.log('Got error ' + error.message);
       },
+      onSuccess: () => {
+        queryClient.invalidateQueries({ queryKey: ['sessionList'] });
+      },
     }
   );
 };
diff --git a/src/session/__snapshots__/sessionDrawer.component.test.tsx.snap b/src/session/__snapshots__/sessionDrawer.component.test.tsx.snap
index 0bcd7c3f9..17fad4071 100644
--- a/src/session/__snapshots__/sessionDrawer.component.test.tsx.snap
+++ b/src/session/__snapshots__/sessionDrawer.component.test.tsx.snap
@@ -68,7 +68,7 @@ exports[`session Drawer renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root css-0"
+                class="MuiBox-root css-epvm6"
               >
                 <button
                   aria-label="edit Session 3 session"
@@ -136,7 +136,7 @@ exports[`session Drawer renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root css-0"
+                class="MuiBox-root css-epvm6"
               >
                 <button
                   aria-label="edit Session 1 session"
@@ -204,7 +204,7 @@ exports[`session Drawer renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root css-0"
+                class="MuiBox-root css-epvm6"
               >
                 <button
                   aria-label="edit Session 4 session"
@@ -272,7 +272,7 @@ exports[`session Drawer renders correctly 1`] = `
                 </span>
               </div>
               <div
-                class="MuiBox-root css-0"
+                class="MuiBox-root css-epvm6"
               >
                 <button
                   aria-label="edit Session 2 session"
diff --git a/src/session/deleteSessionDialogue.component.test.tsx b/src/session/deleteSessionDialogue.component.test.tsx
index f782bc22f..cbba59dda 100644
--- a/src/session/deleteSessionDialogue.component.test.tsx
+++ b/src/session/deleteSessionDialogue.component.test.tsx
@@ -10,7 +10,6 @@ describe('delete session dialogue', () => {
   let props: DeleteSessionDialogueProps;
   let user;
   const onClose = jest.fn();
-  const refetchSessionsList = jest.fn();
   const onDeleteLoadedsession = jest.fn();
 
   const createView = (): RenderResult => {
@@ -28,7 +27,6 @@ describe('delete session dialogue', () => {
     props = {
       open: true,
       onClose: onClose,
-      refetchSessionsList: refetchSessionsList,
       sessionData: sessionData,
       onDeleteLoadedsession: onDeleteLoadedsession,
       loadedSessionId: undefined,
@@ -77,7 +75,6 @@ describe('delete session dialogue', () => {
     await waitFor(() => {
       expect(onClose).toHaveBeenCalled();
     });
-    expect(refetchSessionsList).toHaveBeenCalled();
   });
 
   it('calls handleDeleteSession when continue button is clicked with a valid session name and clears loaded session id', async () => {
@@ -89,7 +86,6 @@ describe('delete session dialogue', () => {
     await waitFor(() => {
       expect(onClose).toHaveBeenCalled();
     });
-    expect(refetchSessionsList).toHaveBeenCalled();
     expect(onDeleteLoadedsession).toHaveBeenCalled();
   });
 });
diff --git a/src/session/deleteSessionDialogue.component.tsx b/src/session/deleteSessionDialogue.component.tsx
index 1a4442bfe..4a4c12956 100644
--- a/src/session/deleteSessionDialogue.component.tsx
+++ b/src/session/deleteSessionDialogue.component.tsx
@@ -14,20 +14,13 @@ export interface DeleteSessionDialogueProps {
   open: boolean;
   onClose: () => void;
   sessionData: SessionResponse | undefined;
-  refetchSessionsList: () => void;
   loadedSessionId: string | undefined;
   onDeleteLoadedsession: () => void;
 }
 
 const DeleteSessionDialogue = (props: DeleteSessionDialogueProps) => {
-  const {
-    open,
-    onClose,
-    sessionData,
-    refetchSessionsList,
-    loadedSessionId,
-    onDeleteLoadedsession,
-  } = props;
+  const { open, onClose, sessionData, loadedSessionId, onDeleteLoadedsession } =
+    props;
 
   const [error, setError] = useState(false);
   const [errorMessage, setErrorMessage] = React.useState<string | undefined>(
@@ -40,7 +33,6 @@ const DeleteSessionDialogue = (props: DeleteSessionDialogueProps) => {
     if (sessionData) {
       deleteSession(sessionData)
         .then((response) => {
-          refetchSessionsList();
           if (loadedSessionId === sessionData._id) {
             onDeleteLoadedsession();
           }
@@ -59,7 +51,6 @@ const DeleteSessionDialogue = (props: DeleteSessionDialogueProps) => {
     loadedSessionId,
     onClose,
     onDeleteLoadedsession,
-    refetchSessionsList,
     sessionData,
   ]);
 
diff --git a/src/session/sessionDialogue.component.test.tsx b/src/session/sessionDialogue.component.test.tsx
index df46e4b65..c070f28e1 100644
--- a/src/session/sessionDialogue.component.test.tsx
+++ b/src/session/sessionDialogue.component.test.tsx
@@ -13,7 +13,6 @@ describe('session dialogue', () => {
   const onChangeSessionName = jest.fn();
   const onChangeSessionSummary = jest.fn();
   const onChangeLoadedSessionId = jest.fn();
-  const refetchSessionsList = jest.fn();
   const onChangeAutoSaveSessionId = jest.fn();
 
   const createView = (): RenderResult => {
@@ -31,7 +30,6 @@ describe('session dialogue', () => {
         onChangeSessionSummary: onChangeSessionSummary,
         requestType: 'create',
         onChangeLoadedSessionId: onChangeLoadedSessionId,
-        refetchSessionsList: refetchSessionsList,
         onChangeAutoSaveSessionId: onChangeAutoSaveSessionId,
       };
 
@@ -97,7 +95,6 @@ describe('session dialogue', () => {
       await waitFor(() => {
         expect(onClose).toHaveBeenCalled();
       });
-      expect(refetchSessionsList).toHaveBeenCalled();
       expect(onChangeLoadedSessionId).toHaveBeenCalledWith('1');
       expect(onChangeAutoSaveSessionId).toHaveBeenCalledWith(undefined);
     });
@@ -122,7 +119,6 @@ describe('session dialogue', () => {
         onChangeSessionSummary: onChangeSessionSummary,
         requestType: 'edit',
         onChangeLoadedSessionId: onChangeLoadedSessionId,
-        refetchSessionsList: refetchSessionsList,
         sessionData: sessionData,
         onChangeAutoSaveSessionId: onChangeAutoSaveSessionId,
       };
@@ -161,8 +157,6 @@ describe('session dialogue', () => {
       await waitFor(() => {
         expect(onClose).toHaveBeenCalled();
       });
-      expect(refetchSessionsList).toHaveBeenCalled();
-      expect(onChangeAutoSaveSessionId).toHaveBeenCalledWith(undefined);
     });
   });
 });
diff --git a/src/session/sessionDialogue.component.tsx b/src/session/sessionDialogue.component.tsx
index 9b4b2949b..10dcdc8f1 100644
--- a/src/session/sessionDialogue.component.tsx
+++ b/src/session/sessionDialogue.component.tsx
@@ -20,7 +20,6 @@ export interface SessionDialogueProps {
   onChangeSessionSummary: (sessionSummary: string) => void;
   requestType: 'edit' | 'create';
   onChangeLoadedSessionId: (loadedSessionId: string | undefined) => void;
-  refetchSessionsList: () => void;
   onChangeAutoSaveSessionId: (autoSaveSessionId: string | undefined) => void;
   sessionData?: SessionResponse;
 }
@@ -36,7 +35,6 @@ const SessionDialogue = (props: SessionDialogueProps) => {
     requestType,
     sessionData,
     onChangeLoadedSessionId,
-    refetchSessionsList,
     onChangeAutoSaveSessionId,
   } = props;
 
@@ -65,7 +63,6 @@ const SessionDialogue = (props: SessionDialogueProps) => {
       };
       saveSession(session)
         .then((response) => {
-          refetchSessionsList();
           onChangeAutoSaveSessionId(undefined);
           onChangeLoadedSessionId(response);
           handleClose();
@@ -83,7 +80,6 @@ const SessionDialogue = (props: SessionDialogueProps) => {
     handleClose,
     onChangeAutoSaveSessionId,
     onChangeLoadedSessionId,
-    refetchSessionsList,
     saveSession,
     sessionName,
     sessionSummary,
@@ -103,8 +99,6 @@ const SessionDialogue = (props: SessionDialogueProps) => {
 
       editSession(session)
         .then((response) => {
-          refetchSessionsList();
-          onChangeAutoSaveSessionId(undefined);
           handleClose();
         })
         .catch((error) => {
@@ -116,15 +110,7 @@ const SessionDialogue = (props: SessionDialogueProps) => {
       setError(true);
       setErrorMessage('Please enter a name');
     }
-  }, [
-    sessionName,
-    sessionData,
-    sessionSummary,
-    editSession,
-    refetchSessionsList,
-    onChangeAutoSaveSessionId,
-    handleClose,
-  ]);
+  }, [sessionName, sessionData, sessionSummary, editSession, handleClose]);
 
   return (
     <Dialog open={open} onClose={handleClose} maxWidth="lg">
diff --git a/src/session/sessionDrawer.component.test.tsx b/src/session/sessionDrawer.component.test.tsx
index e43032edf..c499c8ff1 100644
--- a/src/session/sessionDrawer.component.test.tsx
+++ b/src/session/sessionDrawer.component.test.tsx
@@ -10,8 +10,7 @@ describe('session Drawer', () => {
   const openSessionEdit = jest.fn();
   const openSessionDelete = jest.fn();
   const onChangeLoadedSessionId = jest.fn();
-  const onChangeSelectedSessionTimestamp = jest.fn();
-  const refetchSessionsData = jest.fn();
+  const onChangeLoadedSessionTimestamp = jest.fn();
   const onChangeAutoSaveSessionId = jest.fn();
   let user;
   let props: SessionDrawerProps;
@@ -25,10 +24,10 @@ describe('session Drawer', () => {
       openSessionEdit: openSessionEdit,
       openSessionDelete: openSessionDelete,
       loadedSessionId: undefined,
+      loadedSessionData: undefined,
       onChangeLoadedSessionId: onChangeLoadedSessionId,
       sessionsList: SessionsListJSON,
-      onChangeSelectedSessionTimestamp: onChangeSelectedSessionTimestamp,
-      refetchSessionsData: refetchSessionsData,
+      onChangeLoadedSessionTimestamp: onChangeLoadedSessionTimestamp,
       onChangeAutoSaveSessionId: onChangeAutoSaveSessionId,
     };
   });
@@ -67,11 +66,11 @@ describe('session Drawer', () => {
       expect(session1).toHaveStyle('background-color: primary.main');
     });
 
-    expect(onChangeSelectedSessionTimestamp).toHaveBeenCalledWith(
+    expect(onChangeLoadedSessionTimestamp).toHaveBeenCalledWith(
       '2023-06-29T10:30:00',
       true
     );
-    expect(refetchSessionsData).toHaveBeenCalledWith('1');
+
     expect(onChangeAutoSaveSessionId).toHaveBeenCalledWith(undefined);
   });
 
diff --git a/src/session/sessionDrawer.component.tsx b/src/session/sessionDrawer.component.tsx
index 186b708fd..2eb4ddbe0 100644
--- a/src/session/sessionDrawer.component.tsx
+++ b/src/session/sessionDrawer.component.tsx
@@ -14,8 +14,7 @@ import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 import Drawer from '@mui/material/Drawer';
 import AddCircleIcon from '@mui/icons-material/AddCircle';
-import { useSession } from '../api/sessions';
-import { SessionListItem } from '../app.types';
+import { SessionListItem, SessionResponse } from '../app.types';
 import { importSession } from '../state/store';
 import { useAppDispatch } from '../state/hooks';
 
@@ -29,12 +28,12 @@ export interface SessionDrawerProps {
   openSessionDelete: (sessionData: SessionListItem) => void;
   sessionsList: SessionListItem[] | undefined;
   loadedSessionId: string | undefined;
+  loadedSessionData: SessionResponse | undefined;
   onChangeLoadedSessionId: (loadedSessionId: string | undefined) => void;
-  onChangeSelectedSessionTimestamp: (
+  onChangeLoadedSessionTimestamp: (
     timestamp: string | undefined,
     autoSaved: boolean | undefined
   ) => void;
-  refetchSessionsData: (sessionId: string) => void;
   onChangeAutoSaveSessionId: (autoSaveSessionId: string | undefined) => void;
 }
 
@@ -43,11 +42,10 @@ interface SessionListElementProps extends SessionListItem {
   selected: boolean;
   openSessionEdit: (sessionData: SessionListItem) => void;
   openSessionDelete: (sessionData: SessionListItem) => void;
-  onChangeSelectedSessionTimestamp: (
+  onChangeLoadedSessionTimestamp: (
     timestamp: string | undefined,
     autoSaved: boolean | undefined
   ) => void;
-  refetchSessionsData: (sessionId: string) => void;
   onChangeAutoSaveSessionId: (autoSaveSessionId: string | undefined) => void;
 }
 
@@ -68,8 +66,7 @@ const SessionListElement = (
     openSessionEdit,
     selected,
     handleImport,
-    onChangeSelectedSessionTimestamp,
-    refetchSessionsData,
+    onChangeLoadedSessionTimestamp,
     onChangeAutoSaveSessionId,
     ...session
   } = props;
@@ -87,10 +84,10 @@ const SessionListElement = (
         prevAutoSavedRef.current = session.auto_saved;
 
         // Call the onChangeSelectedSessionTimestamp function
-        onChangeSelectedSessionTimestamp(session.timestamp, session.auto_saved);
+        onChangeLoadedSessionTimestamp(session.timestamp, session.auto_saved);
       }
     }
-  }, [onChangeSelectedSessionTimestamp, selected, session]);
+  }, [onChangeLoadedSessionTimestamp, selected, session]);
   return (
     <ListItemButton
       selected={selected}
@@ -99,9 +96,8 @@ const SessionListElement = (
         padding: 1,
       }}
       onClick={() => {
-        refetchSessionsData(session._id);
         onChangeAutoSaveSessionId(undefined);
-        onChangeSelectedSessionTimestamp(session.timestamp, session.auto_saved);
+        onChangeLoadedSessionTimestamp(session.timestamp, session.auto_saved);
         handleImport(session._id);
       }}
     >
@@ -117,7 +113,7 @@ const SessionListElement = (
       >
         {session.name}
       </ListItemText>
-      <Box>
+      <Box sx={{ whiteSpace: 'nowrap' }}>
         <IconButton
           size="small"
           onClick={(event) => {
@@ -151,12 +147,11 @@ const SessionsDrawer = (props: SessionDrawerProps): React.ReactElement => {
     sessionsList,
     loadedSessionId,
     onChangeLoadedSessionId,
-    onChangeSelectedSessionTimestamp,
-    refetchSessionsData,
+    onChangeLoadedSessionTimestamp,
     onChangeAutoSaveSessionId,
+    loadedSessionData,
   } = props;
 
-  const { data: sessionData } = useSession(loadedSessionId);
   const dispatch = useAppDispatch();
 
   const drawer = (
@@ -185,10 +180,10 @@ const SessionsDrawer = (props: SessionDrawerProps): React.ReactElement => {
   );
 
   React.useEffect(() => {
-    if (sessionData) {
-      dispatch(importSession(sessionData.session));
+    if (loadedSessionData) {
+      dispatch(importSession(loadedSessionData.session));
     }
-  }, [dispatch, sessionData]);
+  }, [dispatch, loadedSessionData]);
 
   const handleSessionClick = (sessionId: string) => {
     onChangeLoadedSessionId(undefined);
@@ -224,10 +219,9 @@ const SessionsDrawer = (props: SessionDrawerProps): React.ReactElement => {
                   selected={loadedSessionId === item._id}
                   openSessionDelete={openSessionDelete}
                   openSessionEdit={openSessionEdit}
-                  onChangeSelectedSessionTimestamp={
-                    onChangeSelectedSessionTimestamp
+                  onChangeLoadedSessionTimestamp={
+                    onChangeLoadedSessionTimestamp
                   }
-                  refetchSessionsData={refetchSessionsData}
                   onChangeAutoSaveSessionId={onChangeAutoSaveSessionId}
                 />
               </ListItem>
diff --git a/src/session/sessionSaveButtons.component.test.tsx b/src/session/sessionSaveButtons.component.test.tsx
index e120d44ba..340d76bc2 100644
--- a/src/session/sessionSaveButtons.component.test.tsx
+++ b/src/session/sessionSaveButtons.component.test.tsx
@@ -22,7 +22,6 @@ jest.mock('../api/sessions', () => ({
 describe('session buttons', () => {
   let props: SessionsSaveButtonsProps;
   const onSaveAsSessionClick = jest.fn();
-  const refetchSessionsList = jest.fn();
   const onChangeAutoSaveSessionId = jest.fn();
   const createView = (): RenderResult => {
     return renderComponentWithProviders(<SessionSaveButtons {...props} />);
@@ -30,11 +29,16 @@ describe('session buttons', () => {
 
   beforeEach(() => {
     props = {
-      sessionId: undefined,
       onSaveAsSessionClick: onSaveAsSessionClick,
-      selectedSessionData: undefined,
-      selectedSessionTimestamp: { timestamp: undefined, autoSaved: undefined },
-      refetchSessionsList: refetchSessionsList,
+      loadedSessionData: {
+        _id: '',
+        auto_saved: false,
+        name: 'test',
+        summary: 'test',
+        session: {},
+        timestamp: '',
+      },
+      loadedSessionTimestamp: { timestamp: undefined, autoSaved: undefined },
       onChangeAutoSaveSessionId: onChangeAutoSaveSessionId,
       autoSaveSessionId: undefined,
     };
@@ -42,7 +46,7 @@ describe('session buttons', () => {
 
     // Mock the return value of useEditSession hook
     useEditSession.mockReturnValue({
-      mutateAsync: jest.fn().mockResolvedValue({}),
+      mutate: jest.fn().mockResolvedValue({}),
     });
     useSaveSession.mockReturnValue({
       mutateAsync: jest.fn().mockResolvedValue({}),
@@ -62,7 +66,7 @@ describe('session buttons', () => {
   it('should be able to create an autosaved session from the current state of session', () => {
     props = {
       ...props,
-      selectedSessionData: {
+      loadedSessionData: {
         name: 'test',
         summary: 'test',
         auto_saved: false,
@@ -70,7 +74,6 @@ describe('session buttons', () => {
         _id: '1',
         timestamp: '',
       },
-      sessionId: '1',
     };
     const { rerender } = createView();
 
@@ -107,7 +110,7 @@ describe('session buttons', () => {
 
     props = {
       ...props,
-      selectedSessionData: {
+      loadedSessionData: {
         name: 'test',
         summary: 'test',
         auto_saved: false,
@@ -115,7 +118,6 @@ describe('session buttons', () => {
         _id: '2',
         timestamp: '',
       },
-      sessionId: '2',
     };
 
     rerender(<SessionSaveButtons {...props} />);
@@ -151,7 +153,7 @@ describe('session buttons', () => {
   it('should update autosave session when autoSavedSessionId exist', () => {
     props = {
       ...props,
-      selectedSessionData: {
+      loadedSessionData: {
         name: 'test',
         summary: 'test',
         auto_saved: false,
@@ -159,7 +161,6 @@ describe('session buttons', () => {
         _id: '1',
         timestamp: '',
       },
-      sessionId: '1',
       autoSaveSessionId: '5',
     };
     createView();
@@ -168,8 +169,8 @@ describe('session buttons', () => {
       jest.advanceTimersByTime(AUTO_SAVE_INTERVAL_MS);
     });
 
-    expect(useEditSession().mutateAsync).toHaveBeenCalledTimes(1);
-    expect(useEditSession().mutateAsync).toHaveBeenCalledWith({
+    expect(useEditSession().mutate).toHaveBeenCalledTimes(1);
+    expect(useEditSession().mutate).toHaveBeenCalledWith({
       _id: '5',
       auto_saved: true,
       name: 'test (autosaved)',
@@ -205,11 +206,11 @@ describe('session buttons', () => {
       jest.advanceTimersByTime(AUTO_SAVE_INTERVAL_MS);
     });
 
-    expect(useEditSession().mutateAsync).not.toHaveBeenCalledTimes(1);
+    expect(useEditSession().mutate).not.toHaveBeenCalledTimes(1);
   });
 
   it('save a user session', async () => {
-    props.selectedSessionData = {
+    props.loadedSessionData = {
       name: 'test',
       summary: 'test',
       auto_saved: false,
@@ -224,11 +225,12 @@ describe('session buttons', () => {
     await fireEvent.click(saveButton);
 
     await waitFor(() => {
-      expect(useEditSession().mutateAsync).toHaveBeenCalledTimes(1);
+      expect(useEditSession().mutate).toHaveBeenCalledTimes(1);
     });
   });
 
   it('opens the save dialog when there is not a user session selected', async () => {
+    props.loadedSessionData = undefined;
     createView();
     const saveAsButton = screen.getByRole('button', { name: 'Save' });
     expect(saveAsButton).toBeInTheDocument();
@@ -254,7 +256,7 @@ describe('session buttons', () => {
   it('shows the last time a selected user session was saved', async () => {
     props = {
       ...props,
-      selectedSessionTimestamp: {
+      loadedSessionTimestamp: {
         timestamp: '2023-06-29T15:45:00',
         autoSaved: false,
       },
@@ -271,7 +273,7 @@ describe('session buttons', () => {
   it('shows the last time a selected user session was auto saved', async () => {
     props = {
       ...props,
-      selectedSessionTimestamp: {
+      loadedSessionTimestamp: {
         timestamp: '2023-06-29T15:45:00',
         autoSaved: true,
       },
diff --git a/src/session/sessionSaveButtons.component.tsx b/src/session/sessionSaveButtons.component.tsx
index dd217230c..972785701 100644
--- a/src/session/sessionSaveButtons.component.tsx
+++ b/src/session/sessionSaveButtons.component.tsx
@@ -5,18 +5,17 @@ import { SessionResponse } from '../app.types';
 import { useAppSelector } from '../state/hooks';
 import { useEditSession, useSaveSession } from '../api/sessions';
 import { format, parseISO } from 'date-fns';
+import { ImportSessionType } from '../state/store';
 
 export interface SessionsSaveButtonsProps {
-  sessionId: string | undefined;
   onSaveAsSessionClick: () => void;
-  selectedSessionData: SessionResponse | undefined;
-  selectedSessionTimestamp: {
+  loadedSessionData: SessionResponse | undefined;
+  loadedSessionTimestamp: {
     timestamp: string | undefined;
     autoSaved: boolean | undefined;
   };
   autoSaveSessionId: string | undefined;
   onChangeAutoSaveSessionId: (autoSaveSessionId: string | undefined) => void;
-  refetchSessionsList: () => void;
 }
 
 export const AUTO_SAVE_INTERVAL_MS = 5 * 60 * 1000;
@@ -30,15 +29,13 @@ const formatDate = (inputDate: string) => {
 const SessionSaveButtons = (props: SessionsSaveButtonsProps) => {
   const {
     onSaveAsSessionClick,
-    selectedSessionData,
-    selectedSessionTimestamp,
-    refetchSessionsList,
-    sessionId,
+    loadedSessionData,
+    loadedSessionTimestamp,
     autoSaveSessionId,
     onChangeAutoSaveSessionId,
   } = props;
 
-  const { mutateAsync: editSession } = useEditSession();
+  const { mutate: editSession } = useEditSession();
   const { mutateAsync: saveSession } = useSaveSession();
 
   const autoSaveTimeout = React.useRef<ReturnType<typeof setInterval> | null>(
@@ -46,29 +43,29 @@ const SessionSaveButtons = (props: SessionsSaveButtonsProps) => {
   );
 
   const state = useAppSelector(({ config, ...state }) => state);
+
+  const prevReduxState = React.useRef<ImportSessionType | null>(null); // Initialize with null
+
+  // Update the previous state when the state changes
+  React.useEffect(() => {
+    prevReduxState.current = state;
+  }, [state]);
+
   const handleSaveSession = React.useCallback(() => {
-    if (selectedSessionData) {
+    if (loadedSessionData) {
       const session = {
         session: state,
         auto_saved: false,
-        _id: selectedSessionData._id,
-        summary: selectedSessionData.summary,
-        timestamp: selectedSessionData.timestamp,
-        name: selectedSessionData.name,
+        _id: loadedSessionData._id,
+        summary: loadedSessionData.summary,
+        timestamp: loadedSessionData.timestamp,
+        name: loadedSessionData.name,
       };
-      editSession(session).then((response) => {
-        refetchSessionsList();
-      });
+      editSession(session);
     } else {
       onSaveAsSessionClick();
     }
-  }, [
-    editSession,
-    onSaveAsSessionClick,
-    refetchSessionsList,
-    selectedSessionData,
-    state,
-  ]);
+  }, [loadedSessionData, state, editSession, onSaveAsSessionClick]);
 
   React.useEffect(() => {
     let autoSaveTimer: ReturnType<typeof setInterval> | null;
@@ -77,26 +74,23 @@ const SessionSaveButtons = (props: SessionsSaveButtonsProps) => {
       clearInterval(autoSaveTimeout.current);
     }
 
-    if (selectedSessionData) {
+    if (loadedSessionData && !loadedSessionData.auto_saved) {
       autoSaveTimer = setInterval(() => {
         const sessionData = {
-          name: `${selectedSessionData.name} (autosaved)`,
-          session: state,
-          summary: selectedSessionData.summary,
+          name: `${loadedSessionData.name} (autosaved)`,
+          session: prevReduxState.current ?? state,
+          summary: loadedSessionData.summary,
           auto_saved: true,
         };
         if (!autoSaveSessionId) {
           saveSession(sessionData).then((repsonse) => {
             onChangeAutoSaveSessionId(repsonse);
-            refetchSessionsList();
           });
         } else {
           editSession({
             _id: autoSaveSessionId,
-            timestamp: selectedSessionData.timestamp,
+            timestamp: loadedSessionData.timestamp,
             ...sessionData,
-          }).then((repsonse) => {
-            refetchSessionsList();
           });
         }
       }, AUTO_SAVE_INTERVAL_MS);
@@ -111,13 +105,7 @@ const SessionSaveButtons = (props: SessionsSaveButtonsProps) => {
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    editSession,
-    handleSaveSession,
-    refetchSessionsList,
-    selectedSessionData,
-    sessionId,
-  ]);
+  }, [autoSaveSessionId, loadedSessionData]);
 
   return (
     <Box
@@ -133,14 +121,14 @@ const SessionSaveButtons = (props: SessionsSaveButtonsProps) => {
           data-testid="session-save-buttons-timestamp"
           style={{ fontSize: 'small', margin: '8px' }}
         >
-          {selectedSessionTimestamp.autoSaved !== undefined
-            ? selectedSessionTimestamp.autoSaved
+          {loadedSessionTimestamp.autoSaved !== undefined
+            ? loadedSessionTimestamp.autoSaved
               ? 'Session last autosaved: '
               : 'Session last saved: '
             : ''}
           <span style={{ fontWeight: 'bold' }}>
-            {selectedSessionTimestamp.timestamp !== undefined
-              ? formatDate(selectedSessionTimestamp.timestamp)
+            {loadedSessionTimestamp.timestamp !== undefined
+              ? formatDate(loadedSessionTimestamp.timestamp)
               : ''}
           </span>
         </Typography>
diff --git a/src/views/viewTabs.component.test.tsx b/src/views/viewTabs.component.test.tsx
index 100528ad4..88f608a02 100644
--- a/src/views/viewTabs.component.test.tsx
+++ b/src/views/viewTabs.component.test.tsx
@@ -114,6 +114,35 @@ describe('View Tabs', () => {
     });
   });
 
+  it('deletes currently loaded user session', async () => {
+    createView();
+    await waitFor(() => {
+      expect(screen.getByText('Session 1')).toBeInTheDocument();
+    });
+
+    const session1 = screen.getByText('Session 1');
+    await user.click(session1);
+
+    const deleteButton = screen.getByRole('button', {
+      name: 'delete Session 1 session',
+    });
+
+    await user.click(deleteButton);
+
+    const deleteDialog = screen.getByRole('dialog');
+
+    expect(deleteDialog).toBeVisible();
+    expect(
+      within(deleteDialog).getByTestId('delete-session-name')
+    ).toHaveTextContent('Session 1');
+
+    const contniueButton = screen.getByRole('button', { name: 'Continue' });
+    user.click(contniueButton);
+    await waitFor(() => {
+      expect(deleteDialog).not.toBeInTheDocument();
+    });
+  });
+
   it('opens the edit session dialogue', async () => {
     createView();
     await waitFor(() => {
diff --git a/src/views/viewTabs.component.tsx b/src/views/viewTabs.component.tsx
index b6c0e28ed..49c379dd2 100644
--- a/src/views/viewTabs.component.tsx
+++ b/src/views/viewTabs.component.tsx
@@ -70,24 +70,15 @@ const ViewTabs = () => {
     string | undefined
   >(selectedSessionId);
 
-  const [selectedSessionTimestamp, setSelectedSessionTimestamp] =
-    React.useState<{
-      timestamp: string | undefined;
-      autoSaved: boolean | undefined;
-    }>({ timestamp: undefined, autoSaved: undefined });
-
-  const { data: sessionsList, refetch: refetchSessionsList } = useSessionList();
-
-  const { data: sessionData, refetch: refetchSessionData } =
-    useSession(selectedSessionId);
-
-  const onChangeRefetchSessionData = React.useCallback(
-    (sessionId: string) => {
-      setSelectedSessionId(sessionId);
-      refetchSessionData();
-    },
-    [refetchSessionData]
-  );
+  const [loadedSessionTimestamp, setLoadedSessionTimestamp] = React.useState<{
+    timestamp: string | undefined;
+    autoSaved: boolean | undefined;
+  }>({ timestamp: undefined, autoSaved: undefined });
+
+  const { data: sessionsList } = useSessionList();
+
+  const { data: loadedSessionData } = useSession(loadedSessionId);
+
   const { data: selectedSessionData } = useSession(selectedSessionId);
 
   const [sessionSaveOpen, setSessionSaveOpen] = React.useState<boolean>(false);
@@ -114,22 +105,23 @@ const ViewTabs = () => {
 
   const onSaveAsSessionClick = () => {
     setSessionSaveOpen(true);
-    if (selectedSessionData) {
-      setSessionName(`${selectedSessionData.name}_copy`);
-      setSessionSummary(selectedSessionData.summary ?? '');
+    if (loadedSessionData) {
+      setSessionName(`${loadedSessionData.name}_copy`);
+      setSessionSummary(loadedSessionData.summary ?? '');
     }
   };
-  const onChangeSelectedSessionTimestamp = (
+  const onChangeLoadedSessionTimestamp = (
     timestamp: string | undefined,
     autoSaved: boolean | undefined
   ) => {
-    setSelectedSessionTimestamp({ timestamp, autoSaved });
+    setLoadedSessionTimestamp({ timestamp, autoSaved });
   };
 
   const onDeleteLoadedsession = () => {
     setLoadedSessionId(undefined);
     setSelectedSessionId(undefined);
-    setSelectedSessionTimestamp({
+    setAutoSaveSessionId(undefined);
+    setLoadedSessionTimestamp({
       timestamp: undefined,
       autoSaved: undefined,
     });
@@ -152,9 +144,9 @@ const ViewTabs = () => {
         openSessionDelete={onSessionDeleteOpen}
         sessionsList={sessionsList}
         loadedSessionId={loadedSessionId}
+        loadedSessionData={loadedSessionData}
         onChangeLoadedSessionId={setLoadedSessionId}
-        onChangeSelectedSessionTimestamp={onChangeSelectedSessionTimestamp}
-        refetchSessionsData={onChangeRefetchSessionData}
+        onChangeLoadedSessionTimestamp={onChangeLoadedSessionTimestamp}
         onChangeAutoSaveSessionId={setAutoSaveSessionId}
       />
 
@@ -175,11 +167,9 @@ const ViewTabs = () => {
           </Tabs>
           <Box marginLeft="auto">
             <SessionSaveButtons
-              sessionId={selectedSessionId}
               onSaveAsSessionClick={onSaveAsSessionClick}
-              selectedSessionData={selectedSessionData}
-              selectedSessionTimestamp={selectedSessionTimestamp}
-              refetchSessionsList={refetchSessionsList}
+              loadedSessionData={loadedSessionData}
+              loadedSessionTimestamp={loadedSessionTimestamp}
               autoSaveSessionId={autoSaveSessionId}
               onChangeAutoSaveSessionId={setAutoSaveSessionId}
             />
@@ -199,9 +189,8 @@ const ViewTabs = () => {
           onChangeSessionName={setSessionName}
           onChangeSessionSummary={setSessionSummary}
           requestType="edit"
-          sessionData={sessionData}
+          sessionData={selectedSessionData}
           onChangeLoadedSessionId={setLoadedSessionId}
-          refetchSessionsList={refetchSessionsList}
           onChangeAutoSaveSessionId={setAutoSaveSessionId}
         />
         <SessionDialogue
@@ -213,14 +202,12 @@ const ViewTabs = () => {
           onChangeSessionSummary={setSessionSummary}
           onChangeLoadedSessionId={setLoadedSessionId}
           requestType="create"
-          refetchSessionsList={refetchSessionsList}
           onChangeAutoSaveSessionId={setAutoSaveSessionId}
         />
         <DeleteSessionDialogue
           open={sessionDeleteOpen}
           onClose={() => setSessionDeleteOpen(false)}
-          sessionData={sessionData}
-          refetchSessionsList={refetchSessionsList}
+          sessionData={selectedSessionData}
           loadedSessionId={loadedSessionId}
           onDeleteLoadedsession={onDeleteLoadedsession}
         />