use proxy, set up modal in frontend

Add row to session card with IP Address. Clickable, opens modal.

Modal WIP - displays general info about IP location (maybe can include a map within this modal?)

backend/routes/utils.js

@@ -21,7 +21,7 @@ const axios_instance = axios.create({
     httpsAgent: agent
 });
 
-router.get("/geolocateIp", async (req, res) => {
+router.post("/geolocateIp", async (req, res) => {
   try {
     if(!(geoliteAccountId && geoliteLicenseKey)) {
         return res.status(501).send('GeoLite information missing!');

src/pages/components/ip-info.js

@@ -0,0 +1,30 @@
+import React from "react";
+import Loading from "./general/loading";
+import Modal from 'react-bootstrap/Modal';
+
+export default function IpInfoModal(props) {
+    let modalBody = <Loading/>;
+
+    if(props.geodata) {
+        modalBody = <Modal.Body className="card">
+                        <p className="card-text">City: {props.geodata.city.names['en']}</p>
+                        <p className="card-text">Country: {props.geodata.country.names['en']}</p>
+                        <p className="card-text">Postcode: {props.geodata.postal.code}</p>
+                        <p className="card-text">ISP: {props.geodata.traits.autonomous_system_organization}</p>
+                    </Modal.Body>
+    }
+
+    return (
+        <div>
+            <Modal show={props.show} onHide={() => props.onHide()}>
+                <Modal.Header closeButton>
+                    <Modal.Title>
+                        Geolocation info for {props.ipAddress}
+                    </Modal.Title>
+                </Modal.Header>
+                
+                {modalBody}
+            </Modal>
+        </div>
+    );
+}

src/pages/components/sessions/session-card.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, {useState} from "react";
 import { Link } from 'react-router-dom';
 import Card from 'react-bootstrap/Card';
 import Row from 'react-bootstrap/Row';
@@ -11,7 +11,9 @@ import PauseFillIcon from "remixicon-react/PauseFillIcon";
 
 import { clientData } from "../../../lib/devices";
 import  Tooltip  from "@mui/material/Tooltip";
+import IpInfoModal from '../ip-info';
 
+import axios from 'axios';
 
 function ticksToTimeString(ticks) {
   // Convert ticks to seconds
@@ -56,7 +58,7 @@ function convertBitrate(bitrate) {
   }
 }
 
-function sessionCard(props) {
+function SessionCard(props) {
   const cardStyle = {
     backgroundImage: `url(Proxy/Items/Images/Backdrop?id=${(props.data.session.NowPlayingItem.SeriesId ? props.data.session.NowPlayingItem.SeriesId : props.data.session.NowPlayingItem.Id)}&fillHeight=320&fillWidth=213&quality=80), linear-gradient(to right, #00A4DC, #AA5CC3)`,
     height:'100%',
@@ -69,9 +71,42 @@ function sessionCard(props) {
     height:'100%',
   };
 
+  const token = localStorage.getItem('token');
+
+  const [modalVisible, setModalVisible] = useState(false);
+  const [modalData, setModalData] = useState();
+
+  function showModal() {
+    const fetchData = async () => {
+      const result = await axios.post(`/utils/geolocateIp`, {
+          ipAddress: props.data.session.RemoteEndPoint
+      }, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+            "Content-Type": "application/json",
+          }
+      });
+      setModalData(result.data);
+    };
+
+    if(!modalData) {
+      fetchData();
+    }
+
+    setModalVisible(true);
+  }
+
+  function hideModal() {
+    setModalVisible(false);
+  }
   
   return (
     <Card className="stat-card" style={cardStyle}>
+      <IpInfoModal
+        show={modalVisible}
+        onHide={hideModal}
+        ipAddress={props.data.session.RemoteEndPoint}
+        geodata={modalData}/>
     <div style={cardBgStyle} className="rounded-top">
       <Row className="h-100">
         <Col className="d-none d-lg-block stat-card-banner">
@@ -99,6 +134,13 @@ function sessionCard(props) {
                     <Row className="ellipse">
                         <Col className="px-0 col-auto">{props.data.session.NowPlayingItem.SubtitleStream}</Col>
                     </Row>  
+                    <Row className="ellipse">
+                        <Col className="px-0 col-auto">
+                          <Card.Text>
+                            IP Address: <Link onClick={showModal}>{props.data.session.RemoteEndPoint}</Link>
+                          </Card.Text>
+                        </Col>
+                    </Row>
                   </Col>
 
 
@@ -223,4 +265,4 @@ function sessionCard(props) {
   );
 }
 
-export default sessionCard;
+export default SessionCard;

src/setupProxy.js

@@ -64,6 +64,13 @@ module.exports = function(app) {
       changeOrigin: true,
     })
   );
+  app.use(
+    '/utils',
+    createProxyMiddleware({
+      target: `http://127.0.0.1:${process.env.PORT || 3003}`,
+      changeOrigin: true
+    })
+  );
 
   
   console.log(`Proxy middleware applied`);