fix: Ensure proper URL generation on the settings pages by handling t…

…he pathname in hostnames correctly Previously, when a path was included in the hostname, the port portion of the URL would be incorrectly appended at the end, resulting in URLs like "http(s)://hostname/pathname:port". This fix ensures that URLs are generated correctly.
jorenn92 · Mar 25, 2024 · f8a80a7 · f8a80a7
1 parent ee7fd70
commit f8a80a7
Show file tree

Hide file tree

Showing 4 changed files with 247 additions and 67 deletions.
diff --git a/ui/src/components/Settings/Overseerr/index.tsx b/ui/src/components/Settings/Overseerr/index.tsx
@@ -1,11 +1,22 @@
 import { SaveIcon } from '@heroicons/react/solid'
-import { useContext, useEffect, useRef, useState } from 'react'
+import {
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import SettingsContext from '../../../contexts/settings-context'
 import { PostApiHandler } from '../../../utils/ApiHandler'
 import Alert from '../../Common/Alert'
 import Button from '../../Common/Button'
 import DocsButton from '../../Common/DocsButton'
 import TestButton from '../../Common/TestButton'
+import {
+  addPortToUrl,
+  getPortFromUrl,
+  handleSettingsInputChange,
+  removePortFromUrl,
+} from '../../../utils/SettingsUtils'
 
 const OverseerrSettings = () => {
   const settingsCtx = useContext(SettingsContext)
@@ -26,36 +37,51 @@ const OverseerrSettings = () => {
   }, [])
 
   useEffect(() => {
-    const url = settingsCtx.settings.overseerr_url?.split(':')
-    if (url) setHostname(`${url[0]}:${url[1]}`)
-  }, [settingsCtx])
+    // hostname
+    setHostname(removePortFromUrl(settingsCtx.settings.overseerr_url))
+    // @ts-ignore
+    hostnameRef.current = {
+      value: removePortFromUrl(settingsCtx.settings.overseerr_url),
+    }
 
-  useEffect(() => {
-    const url = settingsCtx.settings.overseerr_url
-      ?.split('')
-      .reverse()
-      .join('')
-      .split(':')[0]
-      .split('')
-      .reverse()
-      .join('')
-    if (url) setPort(`${url}`)
+    // port
+    setPort(getPortFromUrl(settingsCtx.settings.overseerr_url))
+    // @ts-ignore
+    portRef.current = {
+      value: getPortFromUrl(settingsCtx.settings.overseerr_url),
+    }
   }, [settingsCtx])
 
   const submit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
+
+    // if port not specified, but hostname is. Derive the port
+    if (!portRef.current?.value && hostnameRef.current?.value) {
+      const derivedPort = hostnameRef.current.value.includes('http://')
+        ? 80
+        : hostnameRef.current.value.includes('https://')
+          ? 443
+          : 80
+
+      if (derivedPort) {
+        setPort(derivedPort.toString())
+        // @ts-ignore
+        portRef.current = { value: derivedPort.toString() }
+      }
+    }
+
     if (
       hostnameRef.current?.value &&
       apiKeyRef.current?.value &&
       portRef.current?.value
     ) {
-      const hostnameVal = hostnameRef.current.value.includes('http')
-        ? hostnameRef.current.value
-        : hostnameRef.current.value.includes('https')
+      const hostnameVal = hostnameRef.current.value.includes('http://')
         ? hostnameRef.current.value
-        : 'http://' + hostnameRef.current.value
+        : hostnameRef.current.value.includes('https://')
+          ? hostnameRef.current.value
+          : 'http://' + hostnameRef.current.value
       const payload = {
-        overseerr_url: `${hostnameVal}:${portRef.current.value}`,
+        overseerr_url: addPortToUrl(hostnameVal, +portRef.current.value),
         overseerr_api_key: apiKeyRef.current.value,
       }
       const resp: { code: 0 | 1; message: string } = await PostApiHandler(
@@ -122,6 +148,10 @@ const OverseerrSettings = () => {
                   type="text"
                   defaultValue={hostname}
                   ref={hostnameRef}
+                  value={hostnameRef.current?.value}
+                  onChange={(e) =>
+                    handleSettingsInputChange(e, hostnameRef, setHostname)
+                  }
                 ></input>
               </div>
             </div>
@@ -138,7 +168,9 @@ const OverseerrSettings = () => {
                   id="port"
                   type="number"
                   ref={portRef}
+                  value={portRef.current?.value}
                   defaultValue={port}
+                  onChange={(e) => handleSettingsInputChange(e, portRef, setPort)}
                 ></input>
               </div>
             </div>

diff --git a/ui/src/components/Settings/Radarr/index.tsx b/ui/src/components/Settings/Radarr/index.tsx
@@ -6,6 +6,13 @@ import Alert from '../../Common/Alert'
 import Button from '../../Common/Button'
 import DocsButton from '../../Common/DocsButton'
 import TestButton from '../../Common/TestButton'
+import {
+  addPortToUrl,
+  getArrBaseUrl,
+  getHostname,
+  getPortFromUrl,
+  handleSettingsInputChange,
+} from '../../../utils/SettingsUtils'
 
 const RadarrSettings = () => {
   const settingsCtx = useContext(SettingsContext)
@@ -27,8 +34,41 @@ const RadarrSettings = () => {
     document.title = 'Maintainerr - Settings - Radarr'
   }, [])
 
+  useEffect(() => {
+    setHostname(getHostname(settingsCtx.settings.radarr_url))
+    setBaseUrl(getArrBaseUrl(settingsCtx.settings.radarr_url))
+    setPort(getPortFromUrl(settingsCtx.settings.radarr_url))
+
+    // @ts-ignore
+    hostnameRef.current = {
+      value: getHostname(settingsCtx.settings.radarr_url),
+    }
+    // @ts-ignore
+    baseUrlRef.current = {
+      value: getArrBaseUrl(settingsCtx.settings.radarr_url),
+    }
+    // @ts-ignore
+    portRef.current = { value: getPortFromUrl(settingsCtx.settings.radarr_url) }
+  }, [settingsCtx])
+
   const submit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
+
+    // if port not specified, but hostname is. Derive the port
+    if (!portRef.current?.value && hostnameRef.current?.value) {
+      const derivedPort = hostnameRef.current.value.includes('http://')
+        ? 80
+        : hostnameRef.current.value.includes('https://')
+          ? 443
+          : 80
+
+      if (derivedPort) {
+        setPort(derivedPort.toString())
+        // @ts-ignore
+        portRef.current = { value: derivedPort.toString() }
+      }
+    }
+
     if (
       hostnameRef.current?.value &&
       portRef.current?.value &&
@@ -37,10 +77,16 @@ const RadarrSettings = () => {
       const hostnameVal = hostnameRef.current.value.includes('http')
         ? hostnameRef.current.value
         : hostnameRef.current.value.includes('https')
-        ? hostnameRef.current.value
-        : 'http://' + hostnameRef.current.value
+          ? hostnameRef.current.value
+          : 'http://' + hostnameRef.current.value
+
+      let radarr_url = `${addPortToUrl(hostnameVal, +portRef.current.value)}`
+      radarr_url = radarr_url.endsWith('/')
+        ? radarr_url.slice(0, -1)
+        : radarr_url
+
       const payload = {
-        radarr_url: `${hostnameVal}:${portRef.current.value}${
+        radarr_url: `${radarr_url}${
           baseUrlRef.current?.value ? `/${baseUrlRef.current?.value}` : ''
         }`,
         radarr_api_key: apiKeyRef.current.value,
@@ -65,27 +111,6 @@ const RadarrSettings = () => {
     }
   }
 
-  useEffect(() => {
-    const url = settingsCtx.settings.radarr_url?.split(':')
-    if (url) setHostname(`${url[0]}:${url[1]}`)
-  }, [settingsCtx])
-
-  useEffect(() => {
-    const url = settingsCtx.settings.radarr_url
-      ?.split('')
-      .reverse()
-      .join('')
-      .split(':')[0]
-      .split('')
-      .reverse()
-      .join('')
-
-    const splitted = url?.split('/')
-
-    if (splitted?.length > 0) setPort(`${splitted[0]}`)
-    if (splitted?.length > 1) setBaseUrl(`${splitted[1]}`)
-  }, [settingsCtx])
-
   const appTest = (result: { status: boolean; version: string }) => {
     setTestbanner({ status: result.status, version: result.version })
   }
@@ -131,6 +156,10 @@ const RadarrSettings = () => {
                   type="text"
                   ref={hostnameRef}
                   defaultValue={hostname}
+                  value={hostnameRef.current?.value}
+                  onChange={(e) =>
+                    handleSettingsInputChange(e, hostnameRef, setHostname)
+                  }
                 ></input>
               </div>
             </div>
@@ -148,6 +177,10 @@ const RadarrSettings = () => {
                   type="number"
                   ref={portRef}
                   defaultValue={port}
+                  value={portRef.current?.value}
+                  onChange={(e) =>
+                    handleSettingsInputChange(e, portRef, setPort)
+                  }
                 ></input>
               </div>
             </div>
@@ -165,6 +198,10 @@ const RadarrSettings = () => {
                   type="text"
                   ref={baseUrlRef}
                   defaultValue={baseURl}
+                  value={baseUrlRef.current?.value}
+                  onChange={(e) =>
+                    handleSettingsInputChange(e, baseUrlRef, setBaseUrl)
+                  }
                 ></input>
               </div>
             </div>

diff --git a/ui/src/components/Settings/Sonarr/index.tsx b/ui/src/components/Settings/Sonarr/index.tsx
@@ -6,6 +6,13 @@ import Alert from '../../Common/Alert'
 import Button from '../../Common/Button'
 import DocsButton from '../../Common/DocsButton'
 import TestButton from '../../Common/TestButton'
+import {
+  getHostname,
+  getArrBaseUrl,
+  getPortFromUrl,
+  addPortToUrl,
+  handleSettingsInputChange,
+} from '../../../utils/SettingsUtils'
 
 const SonarrSettings = () => {
   const settingsCtx = useContext(SettingsContext)
@@ -27,8 +34,41 @@ const SonarrSettings = () => {
     document.title = 'Maintainerr - Settings - Sonarr'
   }, [])
 
+  useEffect(() => {
+    setHostname(getHostname(settingsCtx.settings.sonarr_url))
+    setBaseUrl(getArrBaseUrl(settingsCtx.settings.sonarr_url))
+    setPort(getPortFromUrl(settingsCtx.settings.sonarr_url))
+
+    // @ts-ignore
+    hostnameRef.current = {
+      value: getHostname(settingsCtx.settings.sonarr_url),
+    }
+    // @ts-ignore
+    baseUrlRef.current = {
+      value: getArrBaseUrl(settingsCtx.settings.sonarr_url),
+    }
+    // @ts-ignore
+    portRef.current = { value: getPortFromUrl(settingsCtx.settings.sonarr_url) }
+  }, [settingsCtx])
+
   const submit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
+
+    // if port not specified, but hostname is. Derive the port
+    if (!portRef.current?.value && hostnameRef.current?.value) {
+      const derivedPort = hostnameRef.current.value.includes('http://')
+        ? 80
+        : hostnameRef.current.value.includes('https://')
+          ? 443
+          : 80
+
+      if (derivedPort) {
+        setPort(derivedPort.toString())
+        // @ts-ignore
+        portRef.current = { value: derivedPort.toString() }
+      }
+    }
+
     if (
       hostnameRef.current?.value &&
       portRef.current?.value &&
@@ -37,10 +77,14 @@ const SonarrSettings = () => {
       const hostnameVal = hostnameRef.current.value.includes('http')
         ? hostnameRef.current.value
         : hostnameRef.current.value.includes('https')
-        ? hostnameRef.current.value
-        : 'http://' + hostnameRef.current.value
+          ? hostnameRef.current.value
+          : 'http://' + hostnameRef.current.value
+
+      let url = `${addPortToUrl(hostnameVal, +portRef.current.value)}`
+      url = url.endsWith('/') ? url.slice(0, -1) : url
+
       const payload = {
-        sonarr_url: `${hostnameVal}:${portRef.current.value}${
+        sonarr_url: `${url}${
           baseUrlRef.current?.value ? `/${baseUrlRef.current?.value}` : ''
         }`,
         sonarr_api_key: apiKeyRef.current.value,
@@ -65,27 +109,6 @@ const SonarrSettings = () => {
     }
   }
 
-  useEffect(() => {
-    const url = settingsCtx.settings.sonarr_url?.split(':')
-    if (url) setHostname(`${url[0]}:${url[1]}`)
-  }, [settingsCtx])
-
-  useEffect(() => {
-    const url = settingsCtx.settings.sonarr_url
-      ?.split('')
-      .reverse()
-      .join('')
-      .split(':')[0]
-      .split('')
-      .reverse()
-      .join('')
-
-    const splitted = url?.split('/')
-
-    if (splitted?.length > 0) setPort(`${splitted[0]}`)
-    if (splitted?.length > 1) setBaseUrl(`${splitted[1]}`)
-  }, [settingsCtx])
-
   const appTest = (result: { status: boolean; version: string }) => {
     setTestbanner({ status: result.status, version: result.version })
   }
@@ -131,6 +154,10 @@ const SonarrSettings = () => {
                   type="text"
                   ref={hostnameRef}
                   defaultValue={hostname}
+                  value={hostnameRef.current?.value}
+                  onChange={(e) =>
+                    handleSettingsInputChange(e, hostnameRef, setHostname)
+                  }
                 ></input>
               </div>
             </div>
@@ -148,6 +175,10 @@ const SonarrSettings = () => {
                   type="number"
                   ref={portRef}
                   defaultValue={port}
+                  value={portRef.current?.value}
+                  onChange={(e) =>
+                    handleSettingsInputChange(e, portRef, setPort)
+                  }
                 ></input>
               </div>
             </div>
@@ -165,6 +196,10 @@ const SonarrSettings = () => {
                   type="text"
                   ref={baseUrlRef}
                   defaultValue={baseURl}
+                  value={baseUrlRef.current?.value}
+                  onChange={(e) =>
+                    handleSettingsInputChange(e, baseUrlRef, setBaseUrl)
+                  }
                 ></input>
               </div>
             </div>