Refactor frontend: extract utility functions from App.jsx (#13097)

fniessink · web-flow · commit 2e911445695c · 2026-05-02T23:52:16.000+02:00
diff --git a/components/frontend/src/App.jsx b/components/frontend/src/App.jsx
@@ -8,26 +8,21 @@ import { Component } from "react"
 
 import { login } from "./api/auth"
 import { getDataModel } from "./api/datamodel"
-import { nrMeasurementsApi } from "./api/measurement"
+import { createNrMeasurementsEventSource } from "./api/measurement"
 import { getReport, getReportsOverview } from "./api/report"
 import { AppUI } from "./AppUI"
-import { registeredURLSearchParams } from "./hooks/url_search_query"
+import { registeredURLSearchParams, toSearchString } from "./hooks/url_search_query"
 import { showURLAvailabilityMessages } from "./messages"
+import { clearStoredSession, loadStoredSession, storeSession } from "./session_storage"
 import { theme } from "./theme"
-import { isValidISODate, toISODateStringInCurrentTZ } from "./utils"
+import { endOfDayFromISODateString, reportUuidFromPath, toISODateStringInCurrentTZ } from "./utils"
 import { SnackbarAlerts } from "./widgets/SnackbarAlerts"
 
 class App extends Component {
     constructor(props) {
         super(props)
-        const pathname = history.location.pathname
-        const reportUuid = decodeURI(pathname.slice(1, pathname.length))
-        const reportDateISOString = registeredURLSearchParams().get("report_date") || ""
-        let reportDate = null
-        if (isValidISODate(reportDateISOString)) {
-            reportDate = new Date(reportDateISOString)
-            reportDate.setHours(23, 59, 59)
-        }
+        const reportUuid = reportUuidFromPath(history.location.pathname)
+        const reportDate = endOfDayFromISODateString(registeredURLSearchParams().get("report_date") || "")
         this.state = {
             dataModel: {},
             lastUpdate: new Date(),
@@ -47,8 +42,7 @@ class App extends Component {
 
     onHistory({ location, action }) {
         if (action === Action.Pop) {
-            const pathname = location.pathname
-            const reportUuid = pathname.slice(1, pathname.length)
+            const reportUuid = reportUuidFromPath(location.pathname)
             this.setState({ reportUuid: reportUuid, loading: true }, () => this.reload())
         }
     }
@@ -153,8 +147,7 @@ class App extends Component {
             parsed.delete("report_date")
             date = null
         }
-        const search = parsed.toString().replaceAll("%2C", ",") // No need to encode commas
-        history.replace({ search: search.length > 0 ? "?" + search : "" })
+        history.replace({ search: toSearchString(parsed) })
         this.setState({ reportDate: date, loading: true }, () => this.reload())
     }
 
@@ -171,40 +164,38 @@ class App extends Component {
     }
 
     historyPush(target) {
-        const search = registeredURLSearchParams().toString().replaceAll("%2C", ",") // No need to encode commas
-        history.push(target + (search.length > 0 ? "?" + search : ""))
+        history.push(target + toSearchString(registeredURLSearchParams()))
     }
 
     connectToNrMeasurementsEventSource() {
-        this.source = new EventSource(nrMeasurementsApi)
-        this.source.addEventListener("init", (message) => {
-            const newNrMeasurements = Number(message.data)
-            if (this.state.nrMeasurementsStreamConnected) {
-                this.setState({ nrMeasurements: newNrMeasurements })
-            } else {
+        this.source = createNrMeasurementsEventSource({
+            onInit: (newNrMeasurements) => {
+                if (this.state.nrMeasurementsStreamConnected) {
+                    this.setState({ nrMeasurements: newNrMeasurements })
+                } else {
+                    this.showMessage({
+                        severity: "success",
+                        title: "Connected to server",
+                        description: "Successfully reconnected to server",
+                    })
+                    this.setState({ nrMeasurements: newNrMeasurements, nrMeasurementsStreamConnected: true }, () =>
+                        this.reload(),
+                    )
+                }
+            },
+            onDelta: (newNrMeasurements) => {
+                if (newNrMeasurements !== this.state.nrMeasurements) {
+                    this.setState({ nrMeasurements: newNrMeasurements }, () => this.reload())
+                }
+            },
+            onError: () => {
                 this.showMessage({
-                    severity: "success",
-                    title: "Connected to server",
-                    description: "Successfully reconnected to server",
+                    severity: "error",
+                    title: "Server unreachable",
+                    description: "Trying to reconnect to server...",
                 })
-                this.setState({ nrMeasurements: newNrMeasurements, nrMeasurementsStreamConnected: true }, () =>
-                    this.reload(),
-                )
-            }
-        })
-        this.source.addEventListener("delta", (message) => {
-            const newNrMeasurements = Number(message.data)
-            if (newNrMeasurements !== this.state.nrMeasurements) {
-                this.setState({ nrMeasurements: newNrMeasurements }, () => this.reload())
-            }
-        })
-        this.source.addEventListener("error", () => {
-            this.showMessage({
-                severity: "error",
-                title: "Server unreachable",
-                description: "Trying to reconnect to server...",
-            })
-            this.setState({ nrMeasurementsStreamConnected: false })
+                this.setState({ nrMeasurementsStreamConnected: false })
+            },
         })
     }
 
@@ -228,47 +219,32 @@ class App extends Component {
     }
 
     initUserSession() {
-        // Check if there is a session expiration datetime in the local storage. If so, restore the session as long as
-        // it has not expired. Otherwise, nothing needs to be done.
-        const sessionExpirationDateTimeISOString = localStorage.getItem("session_expiration_datetime")
-        if (sessionExpirationDateTimeISOString) {
-            const sessionExpirationDateTime = new Date(sessionExpirationDateTimeISOString)
-            if (sessionExpirationDateTime < new Date()) {
-                // The session expired while the user was away. Reset it and notify the user of the expired session.
-                this.onUserSessionExpiration()
-            } else {
-                // Session is still active, restore it from local storage.
-                this.setUserSession(
-                    localStorage.getItem("user"),
-                    localStorage.getItem("email"),
-                    sessionExpirationDateTime,
-                )
-            }
-        } else {
+        const stored = loadStoredSession()
+        if (!stored) {
             this.showMessage({
                 severity: "info",
                 title: "Not logged in",
                 description: "Editing is not possible until you are logged in",
             })
+        } else if (stored.sessionExpirationDateTime < new Date()) {
+            this.onUserSessionExpiration()
+        } else {
+            this.setUserSession(stored.user, stored.email, stored.sessionExpirationDateTime)
         }
     }
 
     setUserSession(username, email, sessionExpirationDateTime) {
         if (username) {
             const emailAddress = email?.includes("@") ? email : null
             this.setState({ user: username, email: emailAddress })
-            localStorage.setItem("user", username)
-            localStorage.setItem("email", emailAddress)
-            localStorage.setItem("session_expiration_datetime", sessionExpirationDateTime.toISOString())
+            storeSession(username, emailAddress, sessionExpirationDateTime)
             this.sessionExpirationTimeoutId = setTimeout(
                 () => this.onUserSessionExpiration(),
                 sessionExpirationDateTime - Date.now(),
             )
         } else {
             this.setState({ user: null, email: null })
-            localStorage.removeItem("user")
-            localStorage.removeItem("email")
-            localStorage.removeItem("session_expiration_datetime")
+            clearStoredSession()
             clearTimeout(this.sessionExpirationTimeoutId)
         }
     }
diff --git a/components/frontend/src/api/measurement.js b/components/frontend/src/api/measurement.js
@@ -11,3 +11,11 @@ export function getMeasurements(minDate, maxDate) {
     const sep = api.includes("?") ? "&" : "?"
     return fetchServerApi("get", api + `${sep}min_report_date=${minDate.toISOString()}`)
 }
+
+export function createNrMeasurementsEventSource({ onInit, onDelta, onError }) {
+    const source = new EventSource(nrMeasurementsApi)
+    source.addEventListener("init", (message) => onInit(Number(message.data)))
+    source.addEventListener("delta", (message) => onDelta(Number(message.data)))
+    source.addEventListener("error", () => onError())
+    return source
+}
diff --git a/components/frontend/src/api/measurement.test.js b/components/frontend/src/api/measurement.test.js
@@ -1,6 +1,6 @@
 import { vi } from "vitest"
 
-import { getMeasurements } from "./measurement"
+import { createNrMeasurementsEventSource, getMeasurements } from "./measurement"
 
 const expectedFetchOptions = {
     credentials: "include",
@@ -33,3 +33,57 @@ it("fetches the measurements without dates", async () => {
         expectedFetchOptions,
     )
 })
+
+describe("createNrMeasurementsEventSource", () => {
+    let listeners
+    let receivedUrl
+    let closed
+
+    beforeEach(() => {
+        listeners = {}
+        closed = false
+        global.EventSource = function (url) {
+            receivedUrl = url
+            return {
+                addEventListener: (event, listener) => {
+                    listeners[event] = listener
+                },
+                close: () => {
+                    closed = true
+                },
+            }
+        }
+    })
+
+    it("connects to the nr_measurements endpoint", () => {
+        createNrMeasurementsEventSource({ onInit: vi.fn(), onDelta: vi.fn(), onError: vi.fn() })
+        expect(receivedUrl).toBe("/api/internal/nr_measurements")
+    })
+
+    it("returns the underlying EventSource so the caller can close it", () => {
+        const source = createNrMeasurementsEventSource({ onInit: vi.fn(), onDelta: vi.fn(), onError: vi.fn() })
+        source.close()
+        expect(closed).toBe(true)
+    })
+
+    it("invokes onInit with the parsed message data", () => {
+        const onInit = vi.fn()
+        createNrMeasurementsEventSource({ onInit, onDelta: vi.fn(), onError: vi.fn() })
+        listeners["init"]({ data: "42" })
+        expect(onInit).toHaveBeenCalledWith(42)
+    })
+
+    it("invokes onDelta with the parsed message data", () => {
+        const onDelta = vi.fn()
+        createNrMeasurementsEventSource({ onInit: vi.fn(), onDelta, onError: vi.fn() })
+        listeners["delta"]({ data: "43" })
+        expect(onDelta).toHaveBeenCalledWith(43)
+    })
+
+    it("invokes onError without arguments", () => {
+        const onError = vi.fn()
+        createNrMeasurementsEventSource({ onInit: vi.fn(), onDelta: vi.fn(), onError })
+        listeners["error"]()
+        expect(onError).toHaveBeenCalledWith()
+    })
+})
diff --git a/components/frontend/src/hooks/url_search_query.js b/components/frontend/src/hooks/url_search_query.js
@@ -15,6 +15,11 @@ export function registeredURLSearchParams() {
     return parsed
 }
 
+export function toSearchString(params) {
+    const search = params.toString().replaceAll("%2C", ",") // No need to encode commas
+    return search.length > 0 ? "?" + search : ""
+}
+
 function equals(value1, value2) {
     return JSON.stringify(value1) === JSON.stringify(value2)
 }
@@ -30,8 +35,7 @@ function setURLSearchQuery(key, newValue, defaultValue, setValue) {
     } else {
         parsed.set(key, newValue)
     }
-    const search = parsed.toString().replaceAll("%2C", ",") // No need to encode commas
-    history.replace({ search: search.length > 0 ? "?" + search : "" })
+    history.replace({ search: toSearchString(parsed) })
     setValue(newValue)
 }
 
diff --git a/components/frontend/src/hooks/url_search_query.test.js b/components/frontend/src/hooks/url_search_query.test.js
@@ -3,6 +3,7 @@ import history from "history/browser"
 
 import {
     registeredURLSearchParams,
+    toSearchString,
     useArrayURLSearchQuery,
     useBooleanURLSearchQuery,
     useIntegerMappingURLSearchQuery,
@@ -249,3 +250,15 @@ it("returns whether the mapping includes or excludes a key", () => {
     expect(result.current.includes("other key")).toBeFalsy()
     expect(result.current.excludes("other key")).toBeTruthy()
 })
+
+it("returns an empty search string for empty params", () => {
+    expect(toSearchString(new URLSearchParams())).toBe("")
+})
+
+it("returns a search string with leading question mark for non-empty params", () => {
+    expect(toSearchString(new URLSearchParams({ a: "1" }))).toBe("?a=1")
+})
+
+it("does not encode commas in search param values", () => {
+    expect(toSearchString(new URLSearchParams({ tags: "x,y,z" }))).toBe("?tags=x,y,z")
+})
diff --git a/components/frontend/src/session_storage.js b/components/frontend/src/session_storage.js
@@ -0,0 +1,27 @@
+const USER_KEY = "user"
+const EMAIL_KEY = "email"
+const SESSION_EXPIRATION_KEY = "session_expiration_datetime"
+
+export function loadStoredSession() {
+    const expirationISOString = localStorage.getItem(SESSION_EXPIRATION_KEY)
+    if (!expirationISOString) {
+        return null
+    }
+    return {
+        user: localStorage.getItem(USER_KEY),
+        email: localStorage.getItem(EMAIL_KEY),
+        sessionExpirationDateTime: new Date(expirationISOString),
+    }
+}
+
+export function storeSession(user, email, sessionExpirationDateTime) {
+    localStorage.setItem(USER_KEY, user)
+    localStorage.setItem(EMAIL_KEY, email)
+    localStorage.setItem(SESSION_EXPIRATION_KEY, sessionExpirationDateTime.toISOString())
+}
+
+export function clearStoredSession() {
+    localStorage.removeItem(USER_KEY)
+    localStorage.removeItem(EMAIL_KEY)
+    localStorage.removeItem(SESSION_EXPIRATION_KEY)
+}
diff --git a/components/frontend/src/session_storage.test.js b/components/frontend/src/session_storage.test.js
@@ -0,0 +1,42 @@
+import { clearStoredSession, loadStoredSession, storeSession } from "./session_storage"
+
+beforeEach(() => localStorage.clear())
+
+it("returns null when no session is stored", () => {
+    expect(loadStoredSession()).toBeNull()
+})
+
+it("returns null when the expiration datetime is not stored", () => {
+    localStorage.setItem("user", "admin")
+    localStorage.setItem("email", "admin@example.org")
+    expect(loadStoredSession()).toBeNull()
+})
+
+it("loads a stored session", () => {
+    const expiry = new Date("2099-01-01T12:00:00Z")
+    localStorage.setItem("user", "admin")
+    localStorage.setItem("email", "admin@example.org")
+    localStorage.setItem("session_expiration_datetime", expiry.toISOString())
+    const session = loadStoredSession()
+    expect(session.user).toBe("admin")
+    expect(session.email).toBe("admin@example.org")
+    expect(session.sessionExpirationDateTime).toEqual(expiry)
+})
+
+it("stores a session", () => {
+    const expiry = new Date("2099-01-01T12:00:00Z")
+    storeSession("admin", "admin@example.org", expiry)
+    expect(localStorage.getItem("user")).toBe("admin")
+    expect(localStorage.getItem("email")).toBe("admin@example.org")
+    expect(localStorage.getItem("session_expiration_datetime")).toBe(expiry.toISOString())
+})
+
+it("clears a stored session", () => {
+    localStorage.setItem("user", "admin")
+    localStorage.setItem("email", "admin@example.org")
+    localStorage.setItem("session_expiration_datetime", new Date().toISOString())
+    clearStoredSession()
+    expect(localStorage.getItem("user")).toBeNull()
+    expect(localStorage.getItem("email")).toBeNull()
+    expect(localStorage.getItem("session_expiration_datetime")).toBeNull()
+})
diff --git a/components/frontend/src/utils.jsx b/components/frontend/src/utils.jsx
@@ -420,6 +420,10 @@ export function days(timeInMs) {
     return Math.round(timeInMs / MILLISECONDS_PER_DAY)
 }
 
+export function reportUuidFromPath(pathname) {
+    return decodeURI(pathname.slice(1))
+}
+
 export function isValidISODate(string) {
     if (/^\d{4}-\d{2}-\d{2}$/.test(string)) {
         const millisecondsSinceEpoch = Date.parse(string)
@@ -428,6 +432,15 @@ export function isValidISODate(string) {
     return false
 }
 
+export function endOfDayFromISODateString(isoString) {
+    if (!isValidISODate(isoString)) {
+        return null
+    }
+    const date = new Date(isoString)
+    date.setHours(23, 59, 59)
+    return date
+}
+
 export function toISODateStringInCurrentTZ(date) {
     // Return an ISO date string without changing the timezone to UTC as Date.toISOString does
     return `${String(date.getFullYear())}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`
diff --git a/components/frontend/src/utils.test.jsx b/components/frontend/src/utils.test.jsx

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,11 @@ export function registeredURLSearchParams() {`
`15`	`15`	`return parsed`
`16`	`16`	`}`
`17`	`17`
	`18`	`+export function toSearchString(params) {`
	`19`	`+ const search = params.toString().replaceAll("%2C", ",") // No need to encode commas`
	`20`	`+ return search.length > 0 ? "?" + search : ""`
	`21`	`+}`
	`22`	`+`
`18`	`23`	`function equals(value1, value2) {`
`19`	`24`	`return JSON.stringify(value1) === JSON.stringify(value2)`
`20`	`25`	`}`
`@@ -30,8 +35,7 @@ function setURLSearchQuery(key, newValue, defaultValue, setValue) {`
`30`	`35`	`} else {`
`31`	`36`	`parsed.set(key, newValue)`
`32`	`37`	`}`
`33`		`- const search = parsed.toString().replaceAll("%2C", ",") // No need to encode commas`
`34`		`- history.replace({ search: search.length > 0 ? "?" + search : "" })`
	`38`	`+ history.replace({ search: toSearchString(parsed) })`
`35`	`39`	`setValue(newValue)`
`36`	`40`	`}`
`37`	`41`