Merge pull request #123 from getmaxun/tab-name-bug-fix

fix: browser recorder tab name

src/components/organisms/BrowserContent.tsx

@@ -1,12 +1,16 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from "react";
 import styled from "styled-components";
 import BrowserNavBar from "../molecules/BrowserNavBar";
 import { BrowserWindow } from "./BrowserWindow";
 import { useBrowserDimensionsStore } from "../../context/browserDimensions";
 import { BrowserTabs } from "../molecules/BrowserTabs";
 import { useSocketStore } from "../../context/socket";
-import { getCurrentTabs, getCurrentUrl, interpretCurrentRecording } from "../../api/recording";
-import { Box } from '@mui/material';
+import {
+  getCurrentTabs,
+  getCurrentUrl,
+  interpretCurrentRecording,
+} from "../../api/recording";
+import { Box } from "@mui/material";
 import { InterpretationLog } from "../molecules/InterpretationLog";
 
 // TODO: Tab !show currentUrl after recordingUrl global state
@@ -14,107 +18,125 @@ export const BrowserContent = () => {
   const { width } = useBrowserDimensionsStore();
   const { socket } = useSocketStore();
 
-  const [tabs, setTabs] = useState<string[]>(['current']);
+  const [tabs, setTabs] = useState<string[]>(["current"]);
   const [tabIndex, setTabIndex] = React.useState(0);
   const [showOutputData, setShowOutputData] = useState(false);
 
-  const handleChangeIndex = useCallback((index: number) => {
-    setTabIndex(index);
-  }, [tabIndex])
+  const handleChangeIndex = useCallback(
+    (index: number) => {
+      setTabIndex(index);
+    },
+    [tabIndex]
+  );
 
-  const handleCloseTab = useCallback((index: number) => {
-    // the tab needs to be closed on the backend
-    socket?.emit('closeTab', {
-      index,
-      isCurrent: tabIndex === index,
-    });
-    // change the current index as current tab gets closed
-    if (tabIndex === index) {
-      if (tabs.length > index + 1) {
-        handleChangeIndex(index);
+  const handleCloseTab = useCallback(
+    (index: number) => {
+      // the tab needs to be closed on the backend
+      socket?.emit("closeTab", {
+        index,
+        isCurrent: tabIndex === index,
+      });
+      // change the current index as current tab gets closed
+      if (tabIndex === index) {
+        if (tabs.length > index + 1) {
+          handleChangeIndex(index);
+        } else {
+          handleChangeIndex(index - 1);
+        }
       } else {
-        handleChangeIndex(index - 1);
+        handleChangeIndex(tabIndex - 1);
       }
-    } else {
-      handleChangeIndex(tabIndex - 1);
-    }
-    // update client tabs
-    setTabs((prevState) => [
-      ...prevState.slice(0, index),
-      ...prevState.slice(index + 1)
-    ])
-  }, [tabs, socket, tabIndex]);
+      // update client tabs
+      setTabs((prevState) => [
+        ...prevState.slice(0, index),
+        ...prevState.slice(index + 1),
+      ]);
+    },
+    [tabs, socket, tabIndex]
+  );
 
   const handleAddNewTab = useCallback(() => {
     // Adds new tab by pressing the plus button
-    socket?.emit('addTab');
+    socket?.emit("addTab");
     // Adds a new tab to the end of the tabs array and shifts focus
-    setTabs((prevState) => [...prevState, 'new tab']);
+    setTabs((prevState) => [...prevState, "new tab"]);
     handleChangeIndex(tabs.length);
   }, [socket, tabs]);
 
-  const handleNewTab = useCallback((tab: string) => {
-    // Adds a new tab to the end of the tabs array and shifts focus
-    setTabs((prevState) => [...prevState, tab]);
-    // changes focus on the new tab - same happens in the remote browser
-    handleChangeIndex(tabs.length);
-    handleTabChange(tabs.length);
-  }, [tabs]);
+  const handleNewTab = useCallback(
+    (tab: string) => {
+      // Adds a new tab to the end of the tabs array and shifts focus
+      setTabs((prevState) => [...prevState, tab]);
+      // changes focus on the new tab - same happens in the remote browser
+      handleChangeIndex(tabs.length);
+      handleTabChange(tabs.length);
+    },
+    [tabs]
+  );
 
-  const handleTabChange = useCallback((index: number) => {
-    // page screencast and focus needs to be changed on backend
-    socket?.emit('changeTab', index);
-  }, [socket]);
+  const handleTabChange = useCallback(
+    (index: number) => {
+      // page screencast and focus needs to be changed on backend
+      socket?.emit("changeTab", index);
+    },
+    [socket]
+  );
 
   const handleUrlChanged = (url: string) => {
     const parsedUrl = new URL(url);
     if (parsedUrl.hostname) {
-      const host = parsedUrl.hostname.match(/\b(?!www\.)[a-zA-Z0-9]+/g)?.join('.')
+      const host = parsedUrl.hostname
+        .match(/\b(?!www\.)[a-zA-Z0-9]+/g)
+        ?.join(".");
       if (host && host !== tabs[tabIndex]) {
         setTabs((prevState) => [
           ...prevState.slice(0, tabIndex),
           host,
-          ...prevState.slice(tabIndex + 1)
-        ])
+          ...prevState.slice(tabIndex + 1),
+        ]);
       }
     } else {
-      if (tabs[tabIndex] !== 'new tab') {
+      if (tabs[tabIndex] !== "new tab") {
         setTabs((prevState) => [
           ...prevState.slice(0, tabIndex),
-          'new tab',
-          ...prevState.slice(tabIndex + 1)
-        ])
+          "new tab",
+          ...prevState.slice(tabIndex + 1),
+        ]);
       }
     }
-
   };
 
-  const tabHasBeenClosedHandler = useCallback((index: number) => {
-    handleCloseTab(index);
-  }, [handleCloseTab])
+  const tabHasBeenClosedHandler = useCallback(
+    (index: number) => {
+      handleCloseTab(index);
+    },
+    [handleCloseTab]
+  );
 
   useEffect(() => {
     if (socket) {
-      socket.on('newTab', handleNewTab);
-      socket.on('tabHasBeenClosed', tabHasBeenClosedHandler);
+      socket.on("newTab", handleNewTab);
+      socket.on("tabHasBeenClosed", tabHasBeenClosedHandler);
     }
     return () => {
       if (socket) {
-        socket.off('newTab', handleNewTab);
-        socket.off('tabHasBeenClosed', tabHasBeenClosedHandler);
+        socket.off("newTab", handleNewTab);
+        socket.off("tabHasBeenClosed", tabHasBeenClosedHandler);
       }
-    }
-  }, [socket, handleNewTab])
+    };
+  }, [socket, handleNewTab]);
 
   useEffect(() => {
-    getCurrentTabs().then((response) => {
-      if (response) {
-        setTabs(response);
-      }
-    }).catch((error) => {
-      console.log("Fetching current url failed");
-    })
-  }, [])
+    getCurrentTabs()
+      .then((response) => {
+        if (response) {
+          setTabs(response);
+        }
+      })
+      .catch((error) => {
+        console.log("Fetching current url failed");
+      });
+  }, [handleUrlChanged]);
 
   return (
     <div id="browser">
@@ -134,7 +156,6 @@ export const BrowserContent = () => {
       <BrowserWindow />
     </div>
   );
-}
+};
 
-const BrowserContentWrapper = styled.div`
-`;
+const BrowserContentWrapper = styled.div``;