Implementasjon av sessionStorage for ThreatActor

frontend/src/hooks/useSessionStorage.ts

@@ -0,0 +1,45 @@
+import { useState, useEffect } from "react";
+
+/**
+ * Henter en lagret verdi fra sessionStorage.
+ * Returnerer initialValue dersom verdien ikke finnes eller ikke kan leses.
+ *
+ * @param key - Nøkkelen som identifiserer verdien i sessionStorage.
+ * @param initialValue - Standardverdien dersom ingen lagret verdi finnes.
+ * @returns Den lagrede verdien eller initialValue.
+ */
+
+function getSavedValue<T>(key: string, initialValue: T): T {
+    try {
+        const saved = sessionStorage.getItem(key);
+
+        if (saved === null) return initialValue;
+
+        return JSON.parse(saved) as T;
+    } catch {
+        return initialValue;
+    }
+}
+
+/**
+ * Custom React-hook som synkroniserer state med sessionStorage.
+ * Henter en tidligere lagret verdi ved initialisering og lagrer
+ * automatisk nye verdier når state oppdateres.
+ *
+ * @param key - Nøkkelen som brukes i sessionStorage.
+ * @param initialValue - Startverdien dersom ingen lagret verdi finnes.
+ * @returns Et state-par [value, setValue], tilsvarende useState.
+ */
+export function useSessionStorage<T>(key: string, initialValue: T) {
+    const [value, setValue] = useState<T>(() => getSavedValue(key, initialValue));
+
+    useEffect(() => {
+        try {
+            sessionStorage.setItem(key, JSON.stringify(value));
+        } catch {
+            // Fortsett uten lagring.
+        }
+    }, [key, value]);
+
+    return [value, setValue] as const;
+}

frontend/src/pages/ThreatActors/ThreatActors.tsx

@@ -8,19 +8,18 @@ import { GET_ALL_THREAT_ACTOR_GRID, GET_THREAT_ACTOR_FILTER_OPTIONS } from "../.
 import { useState } from "react";
 import ThreatActorActiveFilters from "../../components/threatactor/ThreatActorMain/ThreatActorFilter/ThreatActorActiveFilters";
 import FeedbackCard from "../../components/feedback/FeedbackCard";
-
+import { useSessionStorage } from "../../hooks/useSessionStorage";
 
 
 function ThreatActor(){
     const pageSize = 9;
-    const [page, setPage] = useState(1);
+    const [page, setPage] = useSessionStorage("threat-actors:page", 1);;
     // Search
-    const [searchInput, setSearchInput] = useState("");
-    const [search, setSearch] = useState("");
+    const [search, setSearch] = useSessionStorage("threat-actors:search", "");
+    const [searchInput, setSearchInput] = useState(search);
     // Filters
-    const [draftFilters, setDraftFilters] = useState<ThreatActorFilterValues>({ ...DEFAULT_FILTERS });
-    const [activeFilters, setActiveFilters] = useState<ThreatActorFilterValues>({ ...DEFAULT_FILTERS });
-
+    const [activeFilters, setActiveFilters] = useSessionStorage<ThreatActorFilterValues>("threat-actors:filters", { ...DEFAULT_FILTERS });
+    const [draftFilters, setDraftFilters] =  useState<ThreatActorFilterValues>(() => ({ ...activeFilters }));
 
     /**
      * Aktiverer valgte filtre.
@@ -130,7 +129,7 @@ function ThreatActor(){
                 onApply={handleApplyFilters}
             />
         )}
-        
+
         <ThreatActorActiveFilters
             search={search}
             filters={activeFilters}
@@ -155,7 +154,7 @@ function ThreatActor(){
             <FeedbackCard
                 variant="empty"
                 title="No matching threat actors"
-                message="Try changing your search or removing some filters."
+                message=""
             />
         ) : (
             <ThreatActorGrid