From 156a944e01ca2b0d8bbc90e6c50823d56b0e75ad Mon Sep 17 00:00:00 2001
From: IanM <ian@morland.me>
Date: Sun, 20 Oct 2024 09:01:24 +0100
Subject: [PATCH] chore: ts

---
 js/src/forum/components/MapModal.tsx          |  82 ++++++++++---
 .../{ZipCodeMap.js => ZipCodeMap.tsx}         | 111 ++++++++++--------
 2 files changed, 124 insertions(+), 69 deletions(-)
 rename js/src/forum/components/{ZipCodeMap.js => ZipCodeMap.tsx} (56%)

diff --git a/js/src/forum/components/MapModal.tsx b/js/src/forum/components/MapModal.tsx
index 44a9632..e8908b0 100644
--- a/js/src/forum/components/MapModal.tsx
+++ b/js/src/forum/components/MapModal.tsx
@@ -6,6 +6,7 @@ import { handleCopyIP } from '../helpers/ClipboardHelper';
 import LabelValue from 'flarum/common/components/LabelValue';
 import type Mithril from 'mithril';
 import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
+import ItemList from 'flarum/common/utils/ItemList';
 
 interface MapModalAttrs extends IInternalModalAttrs {
   ipInfo?: IPInfo;
@@ -14,10 +15,12 @@ interface MapModalAttrs extends IInternalModalAttrs {
 
 export default class MapModal extends Modal<MapModalAttrs> {
   ipInfo: IPInfo | undefined;
+  ipAddr!: string;
 
   oninit(vnode: Mithril.Vnode<MapModalAttrs, this>) {
     super.oninit(vnode);
     this.ipInfo = this.attrs.ipInfo;
+    this.ipAddr = this.attrs.ipAddr;
   }
 
   className() {
@@ -42,22 +45,8 @@ export default class MapModal extends Modal<MapModalAttrs> {
     return (
       <div className="Modal-body">
         <div className="IPDetails">
-          <LabelValue
-            label={app.translator.trans('fof-geoip.forum.map_modal.ip_address')}
-            value={
-              <span className="clickable-ip" onclick={handleCopyIP(this.attrs.ipAddr)}>
-                {this.attrs.ipAddr}
-              </span>
-            }
-          />
-          {ipInfo.countryCode() && <LabelValue label={app.translator.trans('fof-geoip.forum.map_modal.country_code')} value={ipInfo.countryCode()} />}
-          {ipInfo.zipCode() && <LabelValue label={app.translator.trans('fof-geoip.forum.map_modal.zip_code')} value={ipInfo.zipCode()} />}
-          {ipInfo.isp() && <LabelValue label={app.translator.trans('fof-geoip.forum.map_modal.isp')} value={ipInfo.isp()} />}
-          {ipInfo.organization() && (
-            <LabelValue label={app.translator.trans('fof-geoip.forum.map_modal.organization')} value={ipInfo.organization()} />
-          )}
-          {ipInfo.as() && <LabelValue label={app.translator.trans('fof-geoip.forum.map_modal.as')} value={ipInfo.as()} />}
-          {<LabelValue label={app.translator.trans('fof-geoip.forum.map_modal.mobile')} value={ipInfo.mobile() ? 'yes' : 'no'} />}
+          {this.dataItems().toArray()}
+
           {ipInfo.threatLevel() && <LabelValue label={app.translator.trans('fof-geoip.forum.map_modal.threat_level')} value={ipInfo.threatLevel()} />}
           {ipInfo.threatTypes().length > 0 && (
             <LabelValue label={app.translator.trans('fof-geoip.forum.map_modal.threat_types')} value={ipInfo.threatTypes().join(', ')} />
@@ -65,10 +54,65 @@ export default class MapModal extends Modal<MapModalAttrs> {
           {ipInfo.error() && <LabelValue label={app.translator.trans('fof-geoip.forum.map_modal.error')} value={ipInfo.error()} />}
         </div>
         <hr />
-        <div id="mapContainer">
-          <ZipCodeMap ipInfo={ipInfo} />
-        </div>
+        <div className="IPDetails--map">{this.mapItems().toArray()}</div>
       </div>
     );
   }
+
+  dataItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add(
+      'ipAddress',
+      <LabelValue
+        label={app.translator.trans('fof-geoip.forum.map_modal.ip_address')}
+        value={
+          <span className="clickable-ip" onclick={handleCopyIP(this.ipAddr)}>
+            {this.ipAddr}
+          </span>
+        }
+      />,
+      100
+    );
+
+    if (this.ipInfo) {
+      this.ipInfo.countryCode?.() &&
+        items.add(
+          'countryCode',
+          <LabelValue label={app.translator.trans('fof-geoip.forum.map_modal.country_code')} value={this.ipInfo.countryCode()} />,
+          90
+        );
+
+      this.ipInfo.zipCode?.() &&
+        items.add('zipCode', <LabelValue label={app.translator.trans('fof-geoip.forum.map_modal.zip_code')} value={this.ipInfo.zipCode()} />, 80);
+
+      this.ipInfo.isp?.() &&
+        items.add('isp', <LabelValue label={app.translator.trans('fof-geoip.forum.map_modal.isp')} value={this.ipInfo.isp()} />, 70);
+
+      this.ipInfo.organization?.() &&
+        items.add(
+          'organization',
+          <LabelValue label={app.translator.trans('fof-geoip.forum.map_modal.organization')} value={this.ipInfo.organization()} />,
+          60
+        );
+
+      this.ipInfo.as?.() && items.add('as', <LabelValue label={app.translator.trans('fof-geoip.forum.map_modal.as')} value={this.ipInfo.as()} />, 50);
+
+      items.add(
+        'mobileNetwork',
+        <LabelValue label={app.translator.trans('fof-geoip.forum.map_modal.mobile')} value={this.ipInfo.mobile() ? 'yes' : 'no'} />,
+        40
+      );
+    }
+
+    return items;
+  }
+
+  mapItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add('mapContainer', <ZipCodeMap id="mapContainer" ipInfo={this.ipInfo} />, 100);
+
+    return items;
+  }
 }
diff --git a/js/src/forum/components/ZipCodeMap.js b/js/src/forum/components/ZipCodeMap.tsx
similarity index 56%
rename from js/src/forum/components/ZipCodeMap.js
rename to js/src/forum/components/ZipCodeMap.tsx
index 43a6402..fb7c93e 100644
--- a/js/src/forum/components/ZipCodeMap.js
+++ b/js/src/forum/components/ZipCodeMap.tsx
@@ -1,24 +1,31 @@
 import app from 'flarum/forum/app';
-import Component from 'flarum/common/Component';
+import Component, { ComponentAttrs } from 'flarum/common/Component';
 import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
+// @ts-expect-error
 import load from 'external-load';
+import type Mithril from 'mithril';
+import IPInfo from '../models/IPInfo';
 
-let addedResources = false;
-const addResources = async () => {
-  if (addedResources) return;
+const leafletCDN = 'https://unpkg.com/leaflet@1.9.4/dist/';
 
-  await load.css('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css');
-  await load.js('https://unpkg.com/leaflet@1.9.4/dist/leaflet.js');
+export interface ZipCodeMapAttrs extends ComponentAttrs {
+  ipInfo: IPInfo;
+}
 
-  addedResources = true;
-};
+export default class ZipCodeMap extends Component<ZipCodeMapAttrs> {
+  ipInfo!: IPInfo;
+  loading = false;
+  map: any;
+  data: any;
+  addedResources = false;
 
-export default class ZipCodeMap extends Component {
-  oninit(vnode) {
+  oninit(vnode: Mithril.Vnode<ZipCodeMapAttrs, this>) {
     super.oninit(vnode);
 
     this.ipInfo = this.attrs.ipInfo;
 
+    this.addResources();
+
     this.data = null;
 
     if (this.ipInfo.latitude() && this.ipInfo.longitude()) {
@@ -30,6 +37,15 @@ export default class ZipCodeMap extends Component {
     }
   }
 
+  async addResources() {
+    if (this.addedResources) return;
+
+    await load.css(leafletCDN + 'leaflet.css');
+    await load.js(leafletCDN + 'leaflet.js');
+
+    this.addedResources = true;
+  }
+
   view() {
     if (this.loading) {
       return <LoadingIndicator size="medium" />;
@@ -42,58 +58,50 @@ export default class ZipCodeMap extends Component {
     return <div id="geoip-map" oncreate={this.configMap.bind(this)} />;
   }
 
-  searchLatLon() {
+  async searchLatLon() {
     if (this.loading) return;
 
     this.loading = true;
 
-    return addResources().then(
-      app
-        .request({
-          url: `https://nominatim.openstreetmap.org/reverse`,
-          method: 'GET',
-          params: {
-            lat: this.ipInfo.latitude(),
-            lon: this.ipInfo.longitude(),
-            format: 'json',
-          },
-        })
-        .then((data) => {
-          this.data = data;
-          this.loading = false;
-
-          m.redraw();
-        })
-    );
+    const data = await app.request<any>({
+      url: `https://nominatim.openstreetmap.org/reverse`,
+      method: 'GET',
+      params: {
+        lat: this.ipInfo.latitude(),
+        lon: this.ipInfo.longitude(),
+        format: 'json',
+      },
+    });
+
+    this.data = data;
+    this.loading = false;
+
+    m.redraw();
   }
 
-  searchZip() {
+  async searchZip() {
     if (this.loading) return;
 
     this.loading = true;
 
-    return addResources().then(
-      app
-        .request({
-          url: `https://nominatim.openstreetmap.org/search`,
-          method: 'GET',
-          params: {
-            q: this.ipInfo.zipCode(),
-            countrycodes: this.ipInfo.countryCode(),
-            limit: 1,
-            format: 'json',
-          },
-        })
-        .then((data) => {
-          this.data = data[0];
-          this.loading = false;
-
-          m.redraw();
-        })
-    );
+    const data = await app.request<any>({
+      url: `https://nominatim.openstreetmap.org/search`,
+      method: 'GET',
+      params: {
+        q: this.ipInfo.zipCode(),
+        countrycodes: this.ipInfo.countryCode(),
+        limit: 1,
+        format: 'json',
+      },
+    });
+
+    this.data = data[0];
+    this.loading = false;
+
+    m.redraw();
   }
 
-  configMap(vnode) {
+  configMap(vnode: Mithril.VnodeDOM) {
     if (!this.data) return;
 
     const { boundingbox: bounding, display_name: displayName } = this.data;
@@ -110,13 +118,16 @@ export default class ZipCodeMap extends Component {
 
     const zoomLevel = 5; // Set your preferred zoom level here
 
+    // @ts-expect-error
     this.map = L.map(vnode.dom).setView([centerLat, centerLon], zoomLevel);
 
+    // @ts-expect-error
     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
     }).addTo(this.map);
 
     // Set a marker at the center of the bounding box
+    // @ts-expect-error
     L.marker([centerLat, centerLon]).addTo(this.map).bindPopup(displayName).openPopup();
   }
 }