From 361ef31fe773f95eb78ec207dfd517b6e448a3a1 Mon Sep 17 00:00:00 2001 From: Olivier Gagnon Date: Sat, 28 Aug 2021 03:49:15 -0400 Subject: [PATCH] more conversion --- src/Corporation/ui/BaseReactComponent.js | 20 ----- src/Corporation/ui/Industry.jsx | 44 ---------- src/Corporation/ui/Industry.tsx | 40 +++++++++ src/Corporation/ui/MainPanel.jsx | 106 ----------------------- src/Corporation/ui/MainPanel.tsx | 93 ++++++++++++++++++++ src/Corporation/ui/Root.jsx | 17 ---- src/Corporation/ui/Root.tsx | 20 +++++ 7 files changed, 153 insertions(+), 187 deletions(-) delete mode 100644 src/Corporation/ui/BaseReactComponent.js delete mode 100644 src/Corporation/ui/Industry.jsx create mode 100644 src/Corporation/ui/Industry.tsx delete mode 100644 src/Corporation/ui/MainPanel.jsx create mode 100644 src/Corporation/ui/MainPanel.tsx delete mode 100644 src/Corporation/ui/Root.jsx create mode 100644 src/Corporation/ui/Root.tsx diff --git a/src/Corporation/ui/BaseReactComponent.js b/src/Corporation/ui/BaseReactComponent.js deleted file mode 100644 index b3da9a6fc..000000000 --- a/src/Corporation/ui/BaseReactComponent.js +++ /dev/null @@ -1,20 +0,0 @@ -// Base class for React Components for Corporation UI -// Contains a few helper functions that let derived classes easily -// access Corporation properties -import React from "react"; - -const Component = React.Component; - -export class BaseReactComponent extends Component { - corp() { - return this.props.corp; - } - - eventHandler() { - return this.props.eventHandler; - } - - routing() { - return this.props.routing; - } -} diff --git a/src/Corporation/ui/Industry.jsx b/src/Corporation/ui/Industry.jsx deleted file mode 100644 index 4b5988c1d..000000000 --- a/src/Corporation/ui/Industry.jsx +++ /dev/null @@ -1,44 +0,0 @@ -// React Component for managing the Corporation's Industry UI -// This Industry component does NOT include the city tabs at the top -import React from "react"; -import { BaseReactComponent } from "./BaseReactComponent"; - -import { IndustryOffice } from "./IndustryOffice"; -import { IndustryOverview } from "./IndustryOverview"; -import { IndustryWarehouse } from "./IndustryWarehouse"; - -export class Industry extends BaseReactComponent { - constructor(props) { - if (props.currentCity == null) { - throw new Error(`Industry component constructed without 'city' prop`); - } - - super(props); - } - - render() { - return ( -
-
- - -
- -
- -
-
- ) - - } -} diff --git a/src/Corporation/ui/Industry.tsx b/src/Corporation/ui/Industry.tsx new file mode 100644 index 000000000..ef2dac622 --- /dev/null +++ b/src/Corporation/ui/Industry.tsx @@ -0,0 +1,40 @@ +// React Component for managing the Corporation's Industry UI +// This Industry component does NOT include the city tabs at the top +import React from "react"; + +import { IndustryOffice } from "./IndustryOffice"; +import { IndustryOverview } from "./IndustryOverview"; +import { IndustryWarehouse } from "./IndustryWarehouse"; + +interface IProps { + routing: any; + eventHandler: any; + corp: any; + currentCity: string; +} + +export function Industry(props: IProps): React.ReactElement { + return ( +
+
+ + +
+
+ +
+
+ ) +} diff --git a/src/Corporation/ui/MainPanel.jsx b/src/Corporation/ui/MainPanel.jsx deleted file mode 100644 index 5ed4cad31..000000000 --- a/src/Corporation/ui/MainPanel.jsx +++ /dev/null @@ -1,106 +0,0 @@ -// React Component for the element that contains the actual info/data -// for the Corporation UI. This panel lies below the header tabs and will -// be filled with whatever is needed based on the routing/navigation -import React from "react"; -import { BaseReactComponent } from "./BaseReactComponent"; - -import { CityTabs } from "./CityTabs"; -import { Industry } from "./Industry"; -import { Overview } from "./Overview"; - -import { OfficeSpace } from "../OfficeSpace"; - -import { CityName } from "../../Locations/data/CityNames"; - -export class MainPanel extends BaseReactComponent { - constructor(props) { - super(props); - - this.state = { - division: "", - city: CityName.Sector12, - } - } - - // We can pass this setter to child components - changeCityState(newCity) { - if (Object.values(CityName).includes(newCity)) { - this.state.city = newCity; - } else { - console.error(`Tried to change MainPanel's city state to an invalid city: ${newCity}`); - } - } - - // Determines what UI content to render based on routing - renderContent() { - if (this.routing().isOnOverviewPage()) { - // Corporation overview Content - return this.renderOverviewPage(); - } else { - // Division content - - // First, check if we're at a new division. If so, we need to reset the city to Sector-12 - // Otherwise, just switch the 'city' state - const currentDivision = this.routing().current(); - if (currentDivision !== this.state.division) { - this.state.division = currentDivision; - this.state.city = CityName.Sector12; - } - - return this.renderDivisionPage(); - } - } - - renderOverviewPage() { - return ( -
- -
- ) - } - - renderDivisionPage() { - // Note: Division is the same thing as Industry...I wasn't consistent with naming - const division = this.routing().currentDivision; - if (division == null) { - throw new Error(`Routing does not hold reference to the current Industry`); - } - - // City tabs - const onClicks = {}; - for (const cityName in division.offices) { - if (division.offices[cityName] instanceof OfficeSpace) { - onClicks[cityName] = () => { - this.state.city = cityName; - this.corp().rerender(); - } - } - } - - const cityTabs = ( - - ) - - // Rest of Industry UI - const industry = ( - - ) - - return ( -
- {cityTabs} - {industry} -
- ) - } - - render() { - return this.renderContent(); - } -} diff --git a/src/Corporation/ui/MainPanel.tsx b/src/Corporation/ui/MainPanel.tsx new file mode 100644 index 000000000..c46acf65f --- /dev/null +++ b/src/Corporation/ui/MainPanel.tsx @@ -0,0 +1,93 @@ +// React Component for the element that contains the actual info/data +// for the Corporation UI. This panel lies below the header tabs and will +// be filled with whatever is needed based on the routing/navigation +import React, { useState } from "react"; + +import { CityTabs } from "./CityTabs"; +import { Industry } from "./Industry"; +import { Overview } from "./Overview"; + +import { OfficeSpace } from "../OfficeSpace"; + +import { CityName } from "../../Locations/data/CityNames"; + +interface IProps { + corp: any; + eventHandler: any; + routing: any; +} + +export function MainPanel(props: IProps): React.ReactElement { + const [division, setDivision] = useState(""); + const [city, setCity] = useState(CityName.Sector12); + + // We can pass this setter to child components + function changeCityState(newCity: string): void { + if (Object.values(CityName).includes(newCity as CityName)) { + setCity(newCity); + } else { + console.error(`Tried to change MainPanel's city state to an invalid city: ${newCity}`); + } + } + + function renderOverviewPage() { + return ( +
+ +
+ ) + } + + function renderDivisionPage() { + // Note: Division is the same thing as Industry...I wasn't consistent with naming + const division = props.routing.currentDivision; + if (division == null) { + throw new Error(`Routing does not hold reference to the current Industry`); + } + + // City tabs + const onClicks: { [key: string]: () => void } = {}; + for (const cityName in division.offices) { + if (division.offices[cityName] instanceof OfficeSpace) { + onClicks[cityName] = () => { + setCity(cityName); + props.corp.rerender(); + } + } + } + + const cityTabs = ( + + ) + + return ( +
+ {cityTabs} + +
+ ) + } + + if (props.routing.isOnOverviewPage()) { + // Corporation overview Content + return renderOverviewPage(); + } else { + // Division content + + // First, check if we're at a new division. If so, we need to reset the city to Sector-12 + // Otherwise, just switch the 'city' state + const currentDivision = props.routing.current(); + if (currentDivision !== division) { + setDivision(currentDivision); + setCity(CityName.Sector12); + } + + return renderDivisionPage(); + } +} diff --git a/src/Corporation/ui/Root.jsx b/src/Corporation/ui/Root.jsx deleted file mode 100644 index b9071646a..000000000 --- a/src/Corporation/ui/Root.jsx +++ /dev/null @@ -1,17 +0,0 @@ -// Root React Component for the Corporation UI -import React from "react"; -import { BaseReactComponent } from "./BaseReactComponent"; - -import { HeaderTabs } from "./HeaderTabs"; -import { MainPanel } from "./MainPanel"; - -export class CorporationRoot extends BaseReactComponent { - render() { - return ( -
- - -
- ) - } -} diff --git a/src/Corporation/ui/Root.tsx b/src/Corporation/ui/Root.tsx new file mode 100644 index 000000000..7c3294390 --- /dev/null +++ b/src/Corporation/ui/Root.tsx @@ -0,0 +1,20 @@ +// Root React Component for the Corporation UI +import React from "react"; + +import { HeaderTabs } from "./HeaderTabs"; +import { MainPanel } from "./MainPanel"; + +interface IProps { + corp: any; + eventHandler: any; + routing: any; +} + +export function CorporationRoot(props: IProps): React.ReactElement { + return ( +
+ + +
+ ) +}