Convert AddressPage.js to TSX.

client/package.json

@@ -9,6 +9,7 @@
     "@lingui/cli": "^2.8.3",
     "@lingui/macro": "^2.8.3",
     "@lingui/react": "^2.8.3",
+    "@types/file-saver": "^2.0.1",
     "@types/googlemaps": "^3.0.0",
     "@types/gtag.js": "^0.0.2",
     "@types/jest": "^24.0.6",

client/src/components/APIDataTypes.ts

@@ -20,7 +20,7 @@ export type GeoSearchData = {
   bbl: string;
 };
 
-type AddressRecord = {
+export type AddressRecord = {
   bbl: string;
   bin: string;
   boro: Borough;

client/src/components/PropertiesList.tsx

@@ -10,35 +10,17 @@ import { t } from "@lingui/macro";
 import { Link } from "react-router-dom";
 import { SupportedLocale } from "../i18n-base";
 import Helpers, { longDateOptions } from "../util/helpers";
+import { AddressRecord } from "./APIDataTypes";
 
-type Addr = {
-  housenumber: string;
-  streetname: string;
-  zip: string;
-  boro: string;
-  bbl: string;
-  yearbuilt: number;
-  unitsres: number;
-  rsunits2007: number;
-  rsunits2017: number;
-  openviolations: number;
-  totalviolations: number;
-  evictions: string | null;
-  ownernames: { title: string; value: string }[];
-  lastsaledate: string;
-  lastsaleamount: string;
-  lastsaleacrisid: string;
-};
-
-export const isPartOfGroupSale = (saleId: string, addrs: Addr[]) => {
+export const isPartOfGroupSale = (saleId: string, addrs: AddressRecord[]) => {
   const addrsWithMatchingSale = addrs.filter((addr) => addr.lastsaleacrisid === saleId);
   return addrsWithMatchingSale.length > 1;
 };
 
 const PropertiesListWithoutI18n: React.FC<{
   i18n: I18n;
-  addrs: Addr[];
-  onOpenDetail: (addr: Addr) => void;
+  addrs: AddressRecord[];
+  onOpenDetail: (addr: AddressRecord) => void;
   generateBaseUrl: () => string;
 }> = (props) => {
   const { i18n } = props;
@@ -214,7 +196,7 @@ const PropertiesListWithoutI18n: React.FC<{
               columns: [
                 {
                   Header: "2019",
-                  accessor: (d) => (d.evictions ? parseInt(d.evictions) : null),
+                  accessor: (d) => (d.evictions ? d.evictions : null),
                   id: "evictions",
                   maxWidth: 75,
                 },
@@ -226,9 +208,11 @@ const PropertiesListWithoutI18n: React.FC<{
                 {
                   Header: i18n._(t`Officer/Owner`),
                   accessor: (d) => {
-                    var owner = d.ownernames.find(
-                      (o) => o.title === "HeadOfficer" || o.title === "IndividualOwner"
-                    );
+                    var owner =
+                      d.ownernames &&
+                      d.ownernames.find(
+                        (o) => o.title === "HeadOfficer" || o.title === "IndividualOwner"
+                      );
                     return owner ? owner.value : "";
                   },
                   id: "ownernames",
@@ -255,7 +239,7 @@ const PropertiesListWithoutI18n: React.FC<{
                 },
                 {
                   Header: i18n._(t`Amount`),
-                  accessor: (d) => (d.lastsaleamount ? parseInt(d.lastsaleamount) : null),
+                  accessor: (d) => (d.lastsaleamount ? d.lastsaleamount : null),
                   Cell: (row) =>
                     row.original.lastsaleamount
                       ? "$" + Helpers.formatPrice(row.original.lastsaleamount, locale)

client/src/containers/AddressPage.js → client/src/containers/AddressPage.tsx

@@ -1,35 +1,64 @@
 import React, { Component } from "react";
 import FileSaver from "file-saver";
-import Browser from "util/browser";
+import Browser from "../util/browser";
 
 import _find from "lodash/find";
 
-import AddressToolbar from "components/AddressToolbar";
-import PropertiesMap from "components/PropertiesMap";
-import PropertiesList from "components/PropertiesList";
-import PropertiesSummary from "components/PropertiesSummary";
-import Indicators from "components/Indicators";
-import DetailView from "components/DetailView";
-import APIClient from "components/APIClient";
-import Loader from "components/Loader";
+import AddressToolbar from "../components/AddressToolbar";
+import PropertiesMap from "../components/PropertiesMap";
+import PropertiesList from "../components/PropertiesList";
+import PropertiesSummary from "../components/PropertiesSummary";
+import Indicators from "../components/Indicators";
+import DetailView from "../components/DetailView";
+import APIClient from "../components/APIClient";
+import Loader from "../components/Loader";
 
 import "styles/AddressPage.css";
 import NychaPage from "./NychaPage";
 import NotRegisteredPage from "./NotRegisteredPage";
 import helpers from "../util/helpers";
 import { Trans, Plural } from "@lingui/macro";
-import { Link } from "react-router-dom";
+import { Link, RouteComponentProps } from "react-router-dom";
 import Page from "../components/Page";
+import { SearchResults, AddressRecord, GeoSearchData } from "../components/APIDataTypes";
 
-export default class AddressPage extends Component {
-  constructor(props) {
+type RouteParams = {
+  locale?: string;
+  boro?: string;
+  housenumber?: string;
+  streetname?: string;
+};
+
+type RouteState = {
+  // TODO: Fix this typing.
+  results?: any;
+};
+
+type AddressPageProps = RouteComponentProps<RouteParams, {}, RouteState> & {
+  currentTab: number;
+};
+
+type State = {
+  hasSearched: boolean;
+  detailMobileSlide: boolean;
+  assocAddrs: AddressRecord[];
+  geosearch?: GeoSearchData;
+
+  // TODO: Fix these typings.
+  searchAddress: any;
+  userAddr: any;
+  detailAddr: any;
+};
+
+export default class AddressPage extends Component<AddressPageProps, State> {
+  constructor(props: AddressPageProps) {
     super(props);
 
     this.state = {
       searchAddress: { ...props.match.params }, // maybe this should be
       userAddr: {}, // merged together?
       hasSearched: false,
-      geosearch: {},
+      geosearch: undefined,
       assocAddrs: [],
       detailAddr: null,
       detailMobileSlide: false,
@@ -61,9 +90,13 @@ export default class AddressPage extends Component {
   }
 
   // Processes the results and setState accordingly. Doesn't care where results comes from
-  handleResults = (results) => {
+  handleResults = (results: SearchResults) => {
     const { geosearch, addrs } = results;
 
+    if (!geosearch) {
+      throw new Error("Address results do not contain geosearch results!");
+    }
+
     this.setState(
       {
         searchAddress: { ...this.state.searchAddress, bbl: geosearch.bbl },
@@ -78,7 +111,8 @@ export default class AddressPage extends Component {
     );
   };
 
-  handleAddrChange = (addr) => {
+  // TODO: Fix this typing.
+  handleAddrChange = (addr: any) => {
     this.setState({
       detailAddr: addr,
       detailMobileSlide: true,
@@ -108,16 +142,15 @@ export default class AddressPage extends Component {
 
   render() {
     if (this.state.hasSearched && this.state.assocAddrs.length === 0) {
-      return this.state.searchAddress &&
-        this.state.searchAddress.bbl &&
-        helpers.getNychaData(this.state.searchAddress.bbl) ? (
+      const nychaData = helpers.getNychaData(this.state.searchAddress.bbl);
+      return this.state.searchAddress && this.state.searchAddress.bbl && nychaData ? (
         <Page
           title={`${this.state.searchAddress.housenumber} ${this.state.searchAddress.streetname}`}
         >
           <NychaPage
             geosearch={this.state.geosearch}
             searchAddress={this.state.searchAddress}
-            nychaData={helpers.getNychaData(this.state.searchAddress.bbl)}
+            nychaData={nychaData}
           />
         </Page>
       ) : (

client/src/containers/NychaPage.tsx

@@ -14,12 +14,12 @@ import { SearchAddress } from "../components/AddressSearch";
 import { SocialShareForNotRegisteredPage } from "./NotRegisteredPage";
 
 type Props = withI18nProps & {
-  geosearch: GeoSearchData;
+  geosearch?: GeoSearchData;
   searchAddress: SearchAddress;
   nychaData: {
     bbl: number;
     development: string;
-    dev_evictions: string;
+    dev_evictions: string | number;
     dev_unitsres: number;
   };
 };

client/yarn.lock

@@ -2562,6 +2562,11 @@
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
   integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
 
+"@types/file-saver@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.1.tgz#e18eb8b069e442f7b956d313f4fadd3ef887354e"
+  integrity sha512-g1QUuhYVVAamfCifK7oB7G3aIl4BbOyzDOqVyUfEr4tfBKrXfeH+M+Tg7HKCXSrbzxYdhyCP7z9WbKo0R2hBCw==
+
 "@types/glob@^7.1.1":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"