From 3d2aeb63a0fdab641442aa98fd2a01befec3be35 Mon Sep 17 00:00:00 2001
From: Olivier Gagnon <oli.gagnon4418@gmail.com>
Date: Sat, 28 Aug 2021 00:29:19 -0400
Subject: [PATCH] more convert

---
 src/Corporation/IDivision.ts      |  2 +
 src/Corporation/ui/CityTab.tsx    | 20 ++++++++++
 src/Corporation/ui/CityTabs.jsx   | 62 -------------------------------
 src/Corporation/ui/CityTabs.tsx   | 36 ++++++++++++++++++
 src/Corporation/ui/HeaderTabs.tsx |  1 -
 5 files changed, 58 insertions(+), 63 deletions(-)
 create mode 100644 src/Corporation/ui/CityTab.tsx
 delete mode 100644 src/Corporation/ui/CityTabs.jsx
 create mode 100644 src/Corporation/ui/CityTabs.tsx

diff --git a/src/Corporation/IDivision.ts b/src/Corporation/IDivision.ts
index 603d9b538..1ed13a8e8 100644
--- a/src/Corporation/IDivision.ts
+++ b/src/Corporation/IDivision.ts
@@ -1,3 +1,5 @@
+import { IOfficeSpace } from "./IOfficeSpace";
+import { IMap } from "../types";
 
 export interface IDivision {
     name: string;
diff --git a/src/Corporation/ui/CityTab.tsx b/src/Corporation/ui/CityTab.tsx
new file mode 100644
index 000000000..8e6759417
--- /dev/null
+++ b/src/Corporation/ui/CityTab.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+interface IProps {
+    onClick: () => void;
+    name: string;
+    current: boolean;
+}
+
+export function CityTab(props: IProps): React.ReactElement {
+    let className = "cmpy-mgmt-city-tab";
+    if (props.current) {
+        className += " current";
+    }
+
+    return (
+        <button className={className} onClick={props.onClick}>
+            {props.name}
+        </button>
+    )
+}
\ No newline at end of file
diff --git a/src/Corporation/ui/CityTabs.jsx b/src/Corporation/ui/CityTabs.jsx
deleted file mode 100644
index 56dfbf27b..000000000
--- a/src/Corporation/ui/CityTabs.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-// React Components for the Corporation UI's City navigation tabs
-// These allow player to navigate between different cities for each industry
-import React from "react";
-import { BaseReactComponent } from "./BaseReactComponent";
-
-export class CityTabs extends BaseReactComponent {
-    constructor(props) {
-        // An object with [key = city name] and [value = click handler]
-        // needs to be passed into the constructor as the "onClicks" property.
-        // We'll make sure that that happens here
-        if (props.onClicks == null) {
-            throw new Error(`CityTabs component constructed without onClick handlers`);
-        }
-        if (props.city == null) {
-            throw new Error(`CityTabs component constructed without 'city' property`)
-        }
-        if (props.cityStateSetter == null) {
-            throw new Error(`CityTabs component constructed without 'cityStateSetter' property`)
-        }
-
-        super(props);
-    }
-
-    renderTab(props) {
-        let className = "cmpy-mgmt-city-tab";
-        if (props.current) {
-            className += " current";
-        }
-
-        return (
-            <button className={className} onClick={props.onClick} key={props.key}>
-                {props.key}
-            </button>
-        )
-    }
-
-    render() {
-        const division = this.routing().currentDivision;
-
-        const tabs = [];
-
-        // Tabs for each city
-        for (const cityName in this.props.onClicks) {
-            tabs.push(this.renderTab({
-                current: this.props.city === cityName,
-                key: cityName,
-                onClick: this.props.onClicks[cityName],
-            }));
-        }
-
-        // Tab to "Expand into new City"
-        const newCityOnClick = this.eventHandler().createNewCityPopup.bind(this.eventHandler(), division, this.props.cityStateSetter);
-
-        tabs.push(this.renderTab({
-            current: false,
-            key: "Expand into new City",
-            onClick: newCityOnClick,
-        }));
-
-        return tabs;
-    }
-}
diff --git a/src/Corporation/ui/CityTabs.tsx b/src/Corporation/ui/CityTabs.tsx
new file mode 100644
index 000000000..e0f222a49
--- /dev/null
+++ b/src/Corporation/ui/CityTabs.tsx
@@ -0,0 +1,36 @@
+// React Components for the Corporation UI's City navigation tabs
+// These allow player to navigate between different cities for each industry
+import React from "react";
+import { CityTab } from "./CityTab";
+
+interface IProps {
+    eventHandler: any;
+    routing: any;
+    onClicks: {[key: string]: () => void};
+    city: string; // currentCity
+    cityStateSetter: any;
+}
+
+export function CityTabs(props: IProps): React.ReactElement {
+    const division = props.routing.currentDivision;
+
+    const tabs = [];
+
+    // Tabs for each city
+    for (const cityName in props.onClicks) {
+        tabs.push(
+            <CityTab current={props.city === cityName} key={cityName} name={cityName} onClick={props.onClicks[cityName]} />
+        );
+    }
+
+    tabs.push(
+        <CityTab
+        current={false}
+        key={"Expand into new City"}
+        name={"Expand into new City"}
+        onClick={() => props.eventHandler.createNewCityPopup(division, props.cityStateSetter)}
+        />
+    );
+
+    return <>{tabs}</>;
+}
\ No newline at end of file
diff --git a/src/Corporation/ui/HeaderTabs.tsx b/src/Corporation/ui/HeaderTabs.tsx
index 75f41b4ef..1888ba7c6 100644
--- a/src/Corporation/ui/HeaderTabs.tsx
+++ b/src/Corporation/ui/HeaderTabs.tsx
@@ -12,7 +12,6 @@ interface IProps {
 }
 
 export function HeaderTabs(props: IProps): React.ReactElement {
-    console.log(props);
     function overviewOnClick() {
         props.routing.routeToOverviewPage();
         props.corp.rerender();