From ecb23a64fcde5d77970c69b5654ca72eb3335f46 Mon Sep 17 00:00:00 2001
From: Davide Iadeluca <146922689+DavideIadeluca@users.noreply.github.com>
Date: Fri, 14 Feb 2025 09:19:01 +0100
Subject: [PATCH] feat: reusable component for showing IP address (#4187)

---
 .../js/src/common/components/IPAddress.tsx    | 38 +++++++++++++++++++
 .../src/forum/components/AccessTokensList.tsx |  8 +++-
 .../core/js/src/forum/components/PostMeta.tsx |  5 ++-
 3 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 framework/core/js/src/common/components/IPAddress.tsx

diff --git a/framework/core/js/src/common/components/IPAddress.tsx b/framework/core/js/src/common/components/IPAddress.tsx
new file mode 100644
index 000000000..1576ae4d3
--- /dev/null
+++ b/framework/core/js/src/common/components/IPAddress.tsx
@@ -0,0 +1,38 @@
+import Component, { ComponentAttrs } from '../Component';
+import ItemList from '../utils/ItemList';
+import type Mithril from 'mithril';
+
+export interface IIPAddressAttrs extends ComponentAttrs {
+  ip: string | undefined | null;
+}
+
+/**
+ * A component to wrap an IP address for display.
+ * Designed to be customizable for different use cases.
+ *
+ * @example
+ * <IPAddress ip="127.0.0.1" />
+ * @example
+ * <IPAddress ip={post.data.attributes.ipAddress} />
+ */
+export default class IPAddress<CustomAttrs extends IIPAddressAttrs = IIPAddressAttrs> extends Component<CustomAttrs> {
+  ip!: string;
+
+  oninit(vnode: Mithril.Vnode<CustomAttrs, this>) {
+    super.oninit(vnode);
+
+    this.ip = this.attrs.ip || '';
+  }
+
+  view() {
+    return <span className="IPAddress">{this.viewItems().toArray()}</span>;
+  }
+
+  viewItems(): ItemList<Mithril.Children> {
+    const items = new ItemList<Mithril.Children>();
+
+    items.add('ip', <>{this.ip}</>, 100);
+
+    return items;
+  }
+}
diff --git a/framework/core/js/src/forum/components/AccessTokensList.tsx b/framework/core/js/src/forum/components/AccessTokensList.tsx
index e93e557fd..e064dac27 100644
--- a/framework/core/js/src/forum/components/AccessTokensList.tsx
+++ b/framework/core/js/src/forum/components/AccessTokensList.tsx
@@ -1,6 +1,7 @@
 import app from '../app';
 import Component, { ComponentAttrs } from '../../common/Component';
 import Button from '../../common/components/Button';
+import IPAddress from '../../common/components/IPAddress';
 import humanTime from '../../common/helpers/humanTime';
 import ItemList from '../../common/utils/ItemList';
 import LabelValue from '../../common/components/LabelValue';
@@ -105,7 +106,12 @@ export default class AccessTokensList<CustomAttrs extends IAccessTokensListAttrs
             token.lastActivityAt() ? (
               <>
                 {humanTime(token.lastActivityAt())}
-                {token.lastIpAddress() && ` — ${token.lastIpAddress()}`}
+                {token.lastIpAddress() && (
+                  <span>
+                    {' '}
+                    — <IPAddress ip={token.lastIpAddress()} />
+                  </span>
+                )}
                 {this.attrs.type === 'developer_token' && token.device() && (
                   <>
                     {' '}
diff --git a/framework/core/js/src/forum/components/PostMeta.tsx b/framework/core/js/src/forum/components/PostMeta.tsx
index 3e6d9096d..8d022326a 100644
--- a/framework/core/js/src/forum/components/PostMeta.tsx
+++ b/framework/core/js/src/forum/components/PostMeta.tsx
@@ -2,6 +2,7 @@ import app from '../../forum/app';
 import Component, { type ComponentAttrs } from '../../common/Component';
 import humanTime from '../../common/helpers/humanTime';
 import fullTime from '../../common/helpers/fullTime';
+import IPAddress from '../../common/components/IPAddress';
 import Post from '../../common/models/Post';
 import type Model from '../../common/Model';
 import type User from '../../common/models/User';
@@ -51,7 +52,9 @@ export default class PostMeta<CustomAttrs extends IPostMetaAttrs = IPostMetaAttr
         {!!permalink && (
           <div className="Dropdown-menu dropdown-menu">
             <span className="PostMeta-number">{this.postIdentifier(post)}</span> <span className="PostMeta-time">{fullTime(time)}</span>{' '}
-            <span className="PostMeta-ip">{post.data.attributes!.ipAddress}</span>
+            <span className="PostMeta-ip">
+              <IPAddress ip={post.data.attributes?.ipAddress} />
+            </span>
             {touch ? (
               <a className="Button PostMeta-permalink" href={permalink}>
                 {permalink}