Merge pull request #111 from HyperloopUPV-H8/ethernet-view/group-tabs

[ethernet-view] Name adjustments

Author: jmaralo

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

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

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

@@ -3,24 +3,22 @@ import { Tab } from "./Tab/Tab";
 import { TabItem } from "layouts/TabLayout/TabItem";
 
 type Props = {
-    items: TabItem[];
+    tabs: TabItem[];
     onTabClick: (tab: TabItem) => void;
     visibleTabId: string;
 };
 
-export const TabBar = ({ items, onTabClick, visibleTabId }: Props) => {
+export const TabBar = ({ tabs, onTabClick, visibleTabId }: Props) => {
     return (
         <div className={styles.wrapper}>
-            {items.map((item) => {
+            {tabs.map((tab) => {
                 return (
                     <Tab
-                        key={item.id}
-                        className={item.id == visibleTabId ? styles.active : ""}
-                        name={item.name}
-                        icon={item.icon}
-                        onClick={() => {
-                            onTabClick(item);
-                        }}
+                        key={tab.id}
+                        className={tab.id == visibleTabId ? styles.active : ""}
+                        name={tab.name}
+                        icon={tab.icon}
+                        onClick={() => onTabClick(tab)}
                     ></Tab>
                 );
             })}

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

@@ -1,41 +1,41 @@
 import styles from "layouts/TabLayout/TabLayout.module.scss";
 import { TabItem } from "layouts/TabLayout/TabItem";
 import { Header } from "layouts/TabLayout/Header/Header";
-import { useTabs } from "./useTabs";
 import { Island } from "components/Island/Island";
+import { useState } from "react";
 type Props = {
-    items: TabItem[];
+    tabs: TabItem[];
 };
 
-export const TabLayout = ({ items }: Props) => {
-    const [tabs, visibleTab, setVisibleTab] = useTabs(items);
+export const TabLayout = ({ tabs }: Props) => {
+    const [visibleTab, setVisibleTab] = useState(tabs[0]);
 
-    function handleClick(tab: TabItem) {
+    function onTabClick(tab: TabItem) {
         setVisibleTab(tab);
     }
 
     return (
         <Island>
             <Header
-                items={tabs}
+                tabs={tabs}
                 visibleTab={visibleTab}
-                handleClick={handleClick}
+                onTabClick={onTabClick}
             />
             <div className={styles.body}>
                 <div className={styles.componentWrapper}>
-                    {tabs.map((item) => {
+                    {tabs.map((tab) => {
                         return (
                             <div
-                                key={item.id}
+                                key={tab.id}
                                 className={styles.visibilityWrapper}
                                 style={{
                                     display:
-                                        visibleTab.id == item.id
+                                        visibleTab.id == tab.id
                                             ? "flex"
                                             : "none",
                                 }}
                             >
-                                {item.component}
+                                {tab.component}
                             </div>
                         );
                     })}

ethernet-view/src/layouts/TabLayout/useTabs.ts

@@ -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) => {
@@ -27,5 +28,5 @@ export const ChartsColumn = () => {
             },
         ]
 
-    return <TabLayout items={chartsColumnTabItems}></TabLayout>;
+    return <TabLayout tabs={chartsColumnTabItems}></TabLayout>;
 };

ethernet-view/src/pages/HomePage/ChartsColumn/ChartsColumn.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/HomePage.tsx

@@ -38,11 +38,11 @@ export const MessagesColumn = () => {
             <SplitLayout
                 components={[
                     {
-                        component: <TabLayout items={messagesTabItems.current}></TabLayout>,
+                        component: <TabLayout tabs={messagesTabItems.current}></TabLayout>,
                         collapsedIcon: letter,
                     },
                     {
-                        component: <TabLayout items={connectionsTabItems.current}></TabLayout>,
+                        component: <TabLayout tabs={connectionsTabItems.current}></TabLayout>,
                         collapsedIcon: connection,
                     },
                 ]}

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

@@ -14,5 +14,5 @@ export const OrderColumn = () => {
         },
     ]);
 
-    return <TabLayout items={orderTabItems.current}></TabLayout>;
+    return <TabLayout tabs={orderTabItems.current}></TabLayout>;
 };

ethernet-view/src/pages/HomePage/OrderColumn/OrderColumn.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 = [
             {
@@ -17,5 +17,5 @@ export const ReceiveColumn = () => {
             },
         ]
 
-    return <TabLayout items={receiveColumnTabItems}></TabLayout>;
+    return <TabLayout tabs={receiveColumnTabItems}></TabLayout>;
 };