refactor: also rename props on properties panel header component

mbta · Oct 23, 2023 · 768a696 · 768a696
1 parent 8f60fb0
commit 768a696
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 33 deletions.
diff --git a/assets/src/components/propertiesPanel/ghostPropertiesPanel.tsx b/assets/src/components/propertiesPanel/ghostPropertiesPanel.tsx
@@ -36,8 +36,8 @@ const GhostPropertiesPanel = ({
       <Header
         vehicle={selectedGhost}
         tabMode={tabMode}
-        setTabMode={onChangeTabMode}
-        closePanel={onClosePanel}
+        onChangeTabMode={onChangeTabMode}
+        onClosePanel={onClosePanel}
       />
 
       <TabPanels

diff --git a/assets/src/components/propertiesPanel/header.tsx b/assets/src/components/propertiesPanel/header.tsx
@@ -28,8 +28,8 @@ import ViewHeader from "../viewHeader"
 interface Props {
   vehicle: Vehicle | Ghost
   tabMode: TabMode
-  setTabMode: Dispatch<SetStateAction<TabMode>>
-  closePanel: () => void
+  onChangeTabMode: Dispatch<SetStateAction<TabMode>>
+  onClosePanel: () => void
 }
 
 const ScheduleAdherenceStatusIcon = () => (
@@ -92,7 +92,7 @@ const ScheduleAdherence = ({
   )
 }
 
-const Header = ({ vehicle, tabMode, setTabMode, closePanel }: Props) => {
+const Header = ({ vehicle, tabMode, onChangeTabMode, onClosePanel }: Props) => {
   const [{ routeTabs, userSettings, previousView }, dispatch] =
     useContext(StateDispatchContext)
   const epochNowInSeconds = useCurrentTimeSeconds()
@@ -109,7 +109,7 @@ const Header = ({ vehicle, tabMode, setTabMode, closePanel }: Props) => {
     <div className="c-properties-panel__header-wrapper">
       <ViewHeader
         title="Vehicles"
-        closeView={closePanel}
+        closeView={onClosePanel}
         backlinkToView={previousView}
         followBacklink={() => dispatch(returnToPreviousView())}
       />
@@ -144,7 +144,7 @@ const Header = ({ vehicle, tabMode, setTabMode, closePanel }: Props) => {
         </div>
       </div>
       {vehicleIsShuttle || (
-        <TabList activeTab={tabMode} setActiveTab={setTabMode} />
+        <TabList activeTab={tabMode} setActiveTab={onChangeTabMode} />
       )}
     </div>
   )

diff --git a/assets/src/components/propertiesPanel/vehiclePropertiesPanel.tsx b/assets/src/components/propertiesPanel/vehiclePropertiesPanel.tsx
@@ -211,15 +211,15 @@ const VehiclePropertiesPanel = ({
       <Header
         vehicle={selectedVehicle}
         tabMode={tabMode}
-        setTabMode={(newTabMode) => {
+        onChangeTabMode={(newTabMode) => {
           if (newTabMode !== tabMode) {
             fullStoryEvent("Switched tab in Vehicle Properties Panel", {
               tab_str: newTabMode,
             })
           }
           onChangeTabMode(newTabMode)
         }}
-        closePanel={onClosePanel}
+        onClosePanel={onClosePanel}
       />
 
       {isVehicleInScheduledService(selectedVehicle) ? (

diff --git a/assets/tests/components/propertiesPanel/header.test.tsx b/assets/tests/components/propertiesPanel/header.test.tsx
@@ -90,8 +90,8 @@ describe("Header", () => {
         <Header
           vehicle={vehicle}
           tabMode={"status"}
-          setTabMode={setTabMode}
-          closePanel={jest.fn()}
+          onChangeTabMode={setTabMode}
+          onClosePanel={jest.fn()}
         />
       )
       .toJSON()
@@ -110,8 +110,8 @@ describe("Header", () => {
           <Header
             vehicle={vehicle}
             tabMode={"status"}
-            setTabMode={setTabMode}
-            closePanel={jest.fn()}
+            onChangeTabMode={setTabMode}
+            onClosePanel={jest.fn()}
           />
         </RoutesProvider>
       )
@@ -130,8 +130,8 @@ describe("Header", () => {
         <Header
           vehicle={earlyVehicle}
           tabMode={"status"}
-          setTabMode={setTabMode}
-          closePanel={jest.fn()}
+          onChangeTabMode={setTabMode}
+          onClosePanel={jest.fn()}
         />
       )
       .toJSON()
@@ -149,8 +149,8 @@ describe("Header", () => {
         <Header
           vehicle={earlyVehicle}
           tabMode={"status"}
-          setTabMode={setTabMode}
-          closePanel={jest.fn()}
+          onChangeTabMode={setTabMode}
+          onClosePanel={jest.fn()}
         />
       )
       .toJSON()
@@ -169,8 +169,8 @@ describe("Header", () => {
         <Header
           vehicle={offCourseVehicle}
           tabMode={"status"}
-          setTabMode={setTabMode}
-          closePanel={jest.fn()}
+          onChangeTabMode={setTabMode}
+          onClosePanel={jest.fn()}
         />
       )
       .toJSON()
@@ -189,8 +189,8 @@ describe("Header", () => {
         <Header
           vehicle={shuttleVehicle}
           tabMode={"status"}
-          setTabMode={setTabMode}
-          closePanel={jest.fn()}
+          onChangeTabMode={setTabMode}
+          onClosePanel={jest.fn()}
         />
       )
       .toJSON()
@@ -223,8 +223,8 @@ describe("Header", () => {
         <Header
           vehicle={ghost}
           tabMode={"status"}
-          setTabMode={setTabMode}
-          closePanel={jest.fn()}
+          onChangeTabMode={setTabMode}
+          onClosePanel={jest.fn()}
         />
       )
       .toJSON()
@@ -237,8 +237,8 @@ describe("Header", () => {
       <Header
         vehicle={{ ...vehicle, directionId: 0, routeStatus: "laying_over" }}
         tabMode={"status"}
-        setTabMode={setTabMode}
-        closePanel={jest.fn()}
+        onChangeTabMode={setTabMode}
+        onClosePanel={jest.fn()}
       />
     )
     expect(result.getByTestId("vehicle-triangle")).toHaveAttribute(
@@ -252,8 +252,8 @@ describe("Header", () => {
       <Header
         vehicle={{ ...vehicle, directionId: 1, routeStatus: "laying_over" }}
         tabMode={"status"}
-        setTabMode={setTabMode}
-        closePanel={jest.fn()}
+        onChangeTabMode={setTabMode}
+        onClosePanel={jest.fn()}
       />
     )
 
@@ -282,8 +282,8 @@ describe("Header", () => {
         <Header
           vehicle={vehicle}
           tabMode={"status"}
-          setTabMode={setTabMode}
-          closePanel={jest.fn()}
+          onChangeTabMode={setTabMode}
+          onClosePanel={jest.fn()}
         />
       </StateDispatchProvider>
     )
@@ -305,8 +305,8 @@ describe("Header", () => {
       <Header
         vehicle={shuttleVehicle}
         tabMode={"status"}
-        setTabMode={setTabMode}
-        closePanel={jest.fn()}
+        onChangeTabMode={setTabMode}
+        onClosePanel={jest.fn()}
       />
     )
 
@@ -324,8 +324,8 @@ describe("Header", () => {
       <Header
         vehicle={vehicle}
         tabMode={"status"}
-        setTabMode={setTabMode}
-        closePanel={mockClosePanel}
+        onChangeTabMode={setTabMode}
+        onClosePanel={mockClosePanel}
       />
     )