rename tabs elements

Author: andresdlt03

ethernet-view/src/layouts/SplitLayout/SplitLayout.tsx

@@ -13,16 +13,10 @@ type Props = {
     orientation?: Orientation;
 };
 
-//TODO: not rerender elements that dont resize
-export const SplitLayout = ({
-    components,
-    orientation = Orientation.HORIZONTAL,
-}: Props) => {
+export const SplitLayout = ({ components, orientation = Orientation.HORIZONTAL }: Props) => {
+
     const minSizes = components.map(() => 0.05);
-    const [splitElements, onSeparatorMouseDown] = useSplit(
-        minSizes,
-        orientation
-    );
+    const [splitElements, onSeparatorMouseDown] = useSplit(minSizes, orientation);
 
     return (
         <div

ethernet-view/src/layouts/TabLayout/Header/Header.tsx

@@ -5,17 +5,17 @@ import { TabItem } from "layouts/TabLayout/TabItem";
 type Props = {
     tabs: TabItem[];
     visibleTab: TabItem;
-    handleClick: (tab: TabItem) => void;
+    onTabClick: (tab: TabItem) => void;
 };
 
-export const Header = ({ tabs, visibleTab, handleClick }: Props) => {
+export const Header = ({ tabs, visibleTab, onTabClick }: Props) => {
     return (
         <div className={styles.headerWrapper}>
             <div className={styles.name}>{visibleTab.name}</div>
             {tabs.length > 1 && (
                 <TabBar
                     tabs={tabs}
-                    onTabClick={handleClick}
+                    onTabClick={onTabClick}
                     visibleTabId={visibleTab.id}
                 />
             )}

ethernet-view/src/layouts/TabLayout/Header/TabBar/TabBar.tsx

@@ -18,9 +18,7 @@ export const TabBar = ({ tabs, onTabClick, visibleTabId }: Props) => {
                         className={tab.id == visibleTabId ? styles.active : ""}
                         name={tab.name}
                         icon={tab.icon}
-                        onClick={() => {
-                            onTabClick(tab);
-                        }}
+                        onClick={() => onTabClick(tab)}
                     ></Tab>
                 );
             })}

ethernet-view/src/layouts/TabLayout/TabLayout.tsx

@@ -10,7 +10,7 @@ type Props = {
 export const TabLayout = ({ tabs }: Props) => {
     const [visibleTab, setVisibleTab] = useState(tabs[0]);
 
-    function handleClick(tab: TabItem) {
+    function onTabClick(tab: TabItem) {
         setVisibleTab(tab);
     }
 
@@ -19,7 +19,7 @@ export const TabLayout = ({ tabs }: Props) => {
             <Header
                 tabs={tabs}
                 visibleTab={visibleTab}
-                handleClick={handleClick}
+                onTabClick={onTabClick}
             />
             <div className={styles.body}>
                 <div className={styles.componentWrapper}>

ethernet-view/src/pages/HomePage/ChartsColumn/ChartsColumn.tsx

@@ -6,7 +6,8 @@ import { useMeasurementsStore, usePodDataStore, useSubscribe } from "common";
 import { createSidebarSections } from "components/ChartMenu/sidebar";
 
 export const ChartsColumn = () => {
-    const {podData, updatePodData} = usePodDataStore(state => ({podData: state.podData, updatePodData: state.updatePodData}))
+    const podData = usePodDataStore(state => state.podData);
+    const updatePodData = usePodDataStore(state => state.updatePodData)
     const updateMeasurements = useMeasurementsStore(state => state.updateMeasurements)
 
     useSubscribe("podData/update", (update) => {

ethernet-view/src/pages/HomePage/HomePage.tsx

@@ -24,11 +24,11 @@ export const HomePage = () => {
                             component: <ReceiveColumn />,
                             collapsedIcon: incomingMessage
                         },
-                        { 
+                        {
                             component: <OrderColumn />,
                             collapsedIcon: paperAirplane
                         },
-                        { 
+                        {
                             component: <MessagesColumn />,
                             collapsedIcon: outgoingMessage
                         },

ethernet-view/src/pages/HomePage/ReceiveColumn/ReceiveColumn.tsx

@@ -4,7 +4,7 @@ import { ReceiveTable } from "components/ReceiveTable/ReceiveTable";
 import { usePodDataStore } from "common";
 
 export const ReceiveColumn = () => {
-    const {podData} = usePodDataStore(state => ({podData: state.podData, updatePodData: state.updatePodData}))
+    const podData = usePodDataStore(state => state.podData)
 
     const receiveColumnTabItems = [
             {