feat: routing for recording & main page

src/pages/PageWrappper.tsx

@@ -7,21 +7,27 @@ import { MainPage } from "./MainPage";
 import { useGlobalInfoStore } from "../context/globalInfo";
 import { getActiveBrowserId } from "../api/recording";
 import { AlertSnackbar } from "../components/atoms/AlertSnackbar";
+import { Routes, Route, useNavigate } from 'react-router-dom';
 
 export const PageWrapper = () => {
-  const [recordingName, setRecordingName] = useState('');
   const [open, setOpen] = useState(false);
 
-  const { browserId, setBrowserId, notification } = useGlobalInfoStore();
+  const navigate = useNavigate();
+
+  const { browserId, setBrowserId, notification, recordingName, setRecordingName } = useGlobalInfoStore();
 
   const handleNewRecording = () => {
     setBrowserId('new-recording');
     setRecordingName('');
+    navigate('/recording');
+
   }
 
   const handleEditRecording = (fileName: string) => {
     setRecordingName(fileName);
     setBrowserId('new-recording');
+    navigate('/recording');
+
   }
 
   const isNotification = (): boolean => {
@@ -36,6 +42,7 @@ export const PageWrapper = () => {
       const id = await getActiveBrowserId();
       if (id) {
         setBrowserId(id);
+        navigate('/recording');
       }
     }
     isRecordingInProgress();
@@ -46,18 +53,20 @@ export const PageWrapper = () => {
       <SocketProvider>
         <React.Fragment>
           <NavBar newRecording={handleNewRecording} recordingName={recordingName} isRecording={!!browserId} />
-          {browserId
+          <Routes>
-            ? (
+        <Route 
-              <BrowserDimensionsProvider>
+          path="/" 
-                <React.Fragment>
+          element={<MainPage handleEditRecording={handleEditRecording} />} 
-                  <RecordingPage recordingName={recordingName} />
+        />
-                </React.Fragment>
+        <Route 
-              </BrowserDimensionsProvider>
+          path="/recording" 
-            )
+          element={
-            : <MainPage
+            <BrowserDimensionsProvider>
-              handleEditRecording={handleEditRecording}
+              <RecordingPage recordingName={recordingName} />
-            />
+            </BrowserDimensionsProvider>
           } 
+        />
+      </Routes>
         </React.Fragment>
       </SocketProvider>
       {isNotification() ?