Rewrite FTL info to only fetch data once

Signed-off-by: Eric Stout <ericwstout@gmail.com>

src/components/settings/FTLInfo.tsx

@@ -12,15 +12,58 @@ import React, { Component } from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Form, Col, Input, FormGroup, Label } from "reactstrap";
 import api from "../../util/api";
-import { WithAPIData } from "../common/WithAPIData";
+import {
+  CancelablePromise,
+  ignoreCancel,
+  makeCancelable
+} from "../../util/CancelablePromise";
 
 export interface FTLInfoProps {
+  fileSize?: number;
+  queries?: number;
+  sqliteVersion?: string;
+}
+
+export interface FTLInfoState {
   fileSize: number;
   queries: number;
   sqliteVersion: string;
 }
 
-class FTLInfo extends Component<FTLInfoProps & WithTranslation, {}> {
+class FTLInfo extends Component<FTLInfoProps & WithTranslation, FTLInfoState> {
+  state: FTLInfoState = {
+    fileSize: 0,
+    queries: 0,
+    sqliteVersion: ""
+  };
+
+  componentDidMount() {
+    this.loadFTLInfo();
+  }
+
+  componentWillUnmount() {
+    if (this.loadHandler) {
+      this.loadHandler.cancel();
+    }
+  }
+
+  private loadHandler: undefined | CancelablePromise<ApiFtlDbResponse>;
+
+  loadFTLInfo = () => {
+    this.loadHandler = makeCancelable(api.getFTLdb());
+    this.loadHandler.promise
+      .then(res => {
+        const transformData = (data: ApiFtlDbResponse): FTLInfoState => ({
+          fileSize: data.filesize,
+          queries: data.queries,
+          sqliteVersion: data.sqlite_version
+        });
+
+        this.setState({ ...transformData(res) });
+      })
+      .catch(ignoreCancel);
+  };
+
   render() {
     const { t } = this.props;
 
@@ -35,7 +78,7 @@ class FTLInfo extends Component<FTLInfoProps & WithTranslation, {}> {
               plaintext
               readOnly
               id="queries"
-              value={this.props.queries.toLocaleString()}
+              value={this.state.queries.toLocaleString()}
             />
           </Col>
         </FormGroup>
@@ -48,7 +91,7 @@ class FTLInfo extends Component<FTLInfoProps & WithTranslation, {}> {
               plaintext
               readOnly
               id="filesize"
-              value={`${this.props.fileSize.toLocaleString()} B`}
+              value={`${this.state.fileSize.toLocaleString()} B`}
             />
           </Col>
         </FormGroup>
@@ -61,7 +104,7 @@ class FTLInfo extends Component<FTLInfoProps & WithTranslation, {}> {
               plaintext
               readOnly
               id="sqliteversion"
-              value={this.props.sqliteVersion}
+              value={this.state.sqliteVersion}
             />
           </Col>
         </FormGroup>
@@ -70,29 +113,4 @@ class FTLInfo extends Component<FTLInfoProps & WithTranslation, {}> {
   }
 }
 
-export const transformData = (data: ApiFtlDbResponse): FTLInfoProps => ({
-  fileSize: data.filesize,
-  queries: data.queries,
-  sqliteVersion: data.sqlite_version
-});
-
-export const initialData = {
-  fileSize: 0,
-  queries: 0,
-  sqliteVersion: ""
-};
-
-export const TranslatedFTLInfo = withTranslation(["settings"])(FTLInfo);
-
-export default (props: any) => (
-  <WithAPIData
-    apiCall={api.getFTLdb}
-    repeatOptions={{
-      interval: 600000,
-      ignoreCancel: true
-    }}
-    renderInitial={() => <TranslatedFTLInfo {...initialData} {...props} />}
-    renderOk={data => <TranslatedFTLInfo {...transformData(data)} {...props} />}
-    renderErr={() => <TranslatedFTLInfo {...initialData} {...props} />}
-  />
-);
+export default withTranslation(["settings"])(FTLInfo);

src/components/settings/NetworkInfo.tsx

@@ -132,37 +132,4 @@ class NetworkInfo extends Component<NetworkInfoProps, NetworkInfoState> {
   }
 }
 
-// export const transformData = (
-//   data: ApiNetworkSettings
-// ): Omit<NetworkInfoProps, keyof WithTranslation> => ({
-//   interface: data.interface,
-//   ipv4Address: data.ipv4_address,
-//   ipv6Address: data.ipv6_address,
-//   hostname: data.hostname
-// });
-
-// export const initialData = () => ({
-//   interface: "",
-//   ipv4Address: "",
-//   ipv6Address: "",
-//   hostname: ""
-// });
-
 export default withTranslation(["common", "settings"])(NetworkInfo);
-
-// export default (props: any) => (
-//   <WithAPIData
-//     apiCall={api.getNetworkInfo}
-//     repeatOptions={{
-//       interval: 600000,
-//       ignoreCancel: true
-//     }}
-//     renderInitial={() => (
-//       <TranslatedNetworkInfo {...initialData()} {...props} />
-//     )}
-//     renderOk={data => (
-//       <TranslatedNetworkInfo {...transformData(data)} {...props} />
-//     )}
-//     renderErr={() => <TranslatedNetworkInfo {...initialData()} {...props} />}
-//   />
-// );