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/chartjs-plugin-annotation": "^0.5.0",
     "@types/googlemaps": "^3.0.0",
     "@types/gtag.js": "^0.0.2",

client/src/components/APIClient.ts

@@ -66,8 +66,8 @@ function getIndicatorHistory(bbl: string): Promise<IndicatorsHistoryResults> {
   return get(`/api/address/indicatorhistory?bbl=${bbl}`);
 }
 
-function getAddressExport(q: SearchAddress & WithBoroBlockLot) {
-  return fetch(apiURL(`/api/address/export?bbl=${q.bbl}`)).then(checkStatus);
+function getAddressExport(bbl: string) {
+  return fetch(apiURL(`/api/address/export?bbl=${bbl}`)).then(checkStatus);
 }
 
 // OTHER API FUNCTIONS AND HELPERS:

client/src/components/AddressToolbar.tsx

@@ -4,15 +4,12 @@ import Modal from "./Modal";
 
 import "styles/AddressToolbar.css";
 import { Trans } from "@lingui/macro";
+import { SearchAddress } from "./AddressSearch";
 
 export type AddressToolbarProps = {
   onExportClick: () => void;
   numOfAssocAddrs: number;
-  userAddr: {
-    housenumber: string;
-    streetname: string;
-    boro: string;
-  };
+  searchAddr: SearchAddress;
 };
 
 type State = {
@@ -37,7 +34,7 @@ export default class AddressToolbar extends Component<AddressToolbarProps, State
     //   ({ boro, block, lot } = Helpers.splitBBL(bbl));
     // }
 
-    const userAddrStr = `${this.props.userAddr.housenumber} ${this.props.userAddr.streetname}, ${this.props.userAddr.boro}`;
+    const userAddrStr = `${this.props.searchAddr.housenumber} ${this.props.searchAddr.streetname}, ${this.props.searchAddr.boro}`;
 
     return (
       <div className="AddressToolbar">

client/src/components/DetailView.tsx

@@ -20,7 +20,7 @@ import { SupportedLocale } from "../i18n-base";
 
 type Props = withI18nProps & {
   addrs: AddressRecord[];
-  addr: AddressRecord;
+  addr: AddressRecord | null;
   portfolioSize: number;
   mobileShow: boolean;
   userAddr: AddressRecord;
@@ -69,11 +69,7 @@ class DetailViewWithoutI18n extends Component<Props, State> {
 
       takeActionURL = Helpers.createTakeActionURL(addr, "detail_view");
 
-      formattedRegEndDate = Helpers.formatDate(
-        this.props.addr.registrationenddate,
-        longDateOptions,
-        locale
-      );
+      formattedRegEndDate = Helpers.formatDate(addr.registrationenddate, longDateOptions, locale);
 
       streetViewAddr =
         addr.lat && addr.lng

client/src/components/Indicators.tsx

@@ -188,7 +188,11 @@ class IndicatorsWithoutI18n extends Component<IndicatorsProps, IndicatorsState>
         this.state[this.state.defaultVis].labels) ||
       prevState.activeTimeSpan !== this.state.activeTimeSpan
     ) {
-      if (this.props.detailAddr.lastsaledate && this.props.detailAddr.lastsaleacrisid) {
+      if (
+        this.props.detailAddr &&
+        this.props.detailAddr.lastsaledate &&
+        this.props.detailAddr.lastsaleacrisid
+      ) {
         var lastSaleDate = this.props.detailAddr.lastsaledate;
         var lastSaleYear = lastSaleDate.slice(0, 4);
         var lastSaleQuarter =
@@ -216,11 +220,13 @@ class IndicatorsWithoutI18n extends Component<IndicatorsProps, IndicatorsState>
   }
 
   render() {
-    const boro = this.props.detailAddr ? this.props.detailAddr.bbl.slice(0, 1) : null;
-    const block = this.props.detailAddr ? this.props.detailAddr.bbl.slice(1, 6) : null;
-    const lot = this.props.detailAddr ? this.props.detailAddr.bbl.slice(6, 10) : null;
-    const housenumber = this.props.detailAddr ? this.props.detailAddr.housenumber : null;
-    const streetname = this.props.detailAddr ? this.props.detailAddr.streetname : null;
+    const detailAddr = this.props.detailAddr;
+
+    const boro = detailAddr ? detailAddr.bbl.slice(0, 1) : null;
+    const block = detailAddr ? detailAddr.bbl.slice(1, 6) : null;
+    const lot = detailAddr ? detailAddr.bbl.slice(6, 10) : null;
+    const housenumber = detailAddr ? detailAddr.housenumber : null;
+    const streetname = detailAddr ? detailAddr.streetname : null;
 
     const { activeVis } = this.state;
     const data = this.state[activeVis];
@@ -230,11 +236,12 @@ class IndicatorsWithoutI18n extends Component<IndicatorsProps, IndicatorsState>
       : null;
 
     const i18n = this.props.i18n;
+
     const detailAddrStr =
-      this.props.detailAddr &&
-      `${this.props.detailAddr.housenumber} ${Helpers.titleCase(
-        this.props.detailAddr.streetname
-      )}, ${Helpers.titleCase(this.props.detailAddr.boro)}`;
+      detailAddr &&
+      `${detailAddr.housenumber} ${Helpers.titleCase(detailAddr.streetname)}, ${Helpers.titleCase(
+        detailAddr.boro
+      )}`;
 
     const dataset = INDICATORS_DATASETS[this.state.activeVis];
 
@@ -252,24 +259,22 @@ class IndicatorsWithoutI18n extends Component<IndicatorsProps, IndicatorsState>
           ) : (
             <div className="columns">
               <div className="column col-8 col-lg-12">
-                <div className="title-card">
-                  <h4 className="title">
-                    {this.props.detailAddr ? (
+                {detailAddr && (
+                  <div className="title-card">
+                    <h4 className="title">
                       <span>
                         <Trans>BUILDING:</Trans> <b>{detailAddrStr}</b>
                       </span>
-                    ) : (
-                      <span />
-                    )}
-                  </h4>
-                  <br />
-                  <Link
-                    to={this.props.generateBaseUrl()}
-                    onClick={() => this.props.onBackToOverview(this.props.detailAddr)}
-                  >
-                    <Trans>Back to Overview</Trans>
-                  </Link>
-                </div>
+                    </h4>
+                    <br />
+                    <Link
+                      to={this.props.generateBaseUrl()}
+                      onClick={() => this.props.onBackToOverview(detailAddr)}
+                    >
+                      <Trans>Back to Overview</Trans>
+                    </Link>
+                  </div>
+                )}
 
                 <div className="Indicators__links">
                   <div className="Indicators__linksContainer">

client/src/components/IndicatorsTypes.tsx

@@ -122,7 +122,7 @@ export const indicatorsInitialState: IndicatorsState = {
 
 export type IndicatorsProps = withI18nProps & {
   isVisible: boolean;
-  detailAddr: AddressRecord;
+  detailAddr: AddressRecord | null;
   onBackToOverview: (addr: AddressRecord) => void;
   generateBaseUrl: () => string;
 };

client/src/components/PropertiesList.tsx

@@ -171,7 +171,7 @@ const PropertiesListWithoutI18n: React.FC<{
                 },
                 {
                   Header: i18n._(t`Amount`),
-                  accessor: (d) => d.lastsaleamount,
+                  accessor: (d) => d.lastsaleamount || null,
                   Cell: (row) =>
                     row.original.lastsaleamount
                       ? "$" + Helpers.formatPrice(row.original.lastsaleamount, locale)

client/src/components/PropertiesMap.tsx

@@ -15,7 +15,7 @@ import { Events as MapboxMapEvents } from "react-mapbox-gl/lib/map-events";
 type Props = {
   addrs: AddressRecord[];
   userAddr: AddressRecord;
-  detailAddr: AddressRecord;
+  detailAddr: AddressRecord | null;
   onAddrChange: (addr: AddressRecord) => void;
   isVisible: boolean;
 };