utils file

Author: tyrelchambers

src/components/ChangelogFilters/ChangelogFilters.tsx

@@ -1,7 +1,8 @@
 import styles from "./styles.module.css"
-import { useState, useEffect, useCallback } from "react"
+import { useState, useEffect } from "react"
 import type { ChangelogItem } from "~/components/ChangelogSnippet/types"
 import { matchesFilters } from "~/utils/changelogFilters"
+import { parseURLParams, updateFilterURL, toggleItemInArray } from "~/utils/changelogFilterUtils"
 import { DesktopFilters } from "./DesktopFilters"
 import { MobileFilters } from "./MobileFilters"
 
@@ -21,58 +22,20 @@ export const ChangelogFilters = ({ products, networks, types, items }: Changelog
 
   // Read URL parameters on mount
   useEffect(() => {
-    if (typeof window === "undefined") return
-
-    const params = new URLSearchParams(window.location.search)
-    const productParam = params.get("product")
-    const networkParam = params.get("network")
-    const typeParam = params.get("type")
-    const searchParam = params.get("*")
+    const urlParams = parseURLParams()
 
-    if (productParam) {
-      setSelectedProducts(productParam.split(","))
-    }
-    if (networkParam) {
-      setSelectedNetworks(networkParam.split(","))
-    }
-    if (typeParam) {
-      setSelectedTypes(typeParam.split(","))
-    }
-    if (searchParam) {
-      setSearchTerm(searchParam)
-      setSearchExpanded(true)
-    }
+    setSelectedProducts(urlParams.products)
+    setSelectedNetworks(urlParams.networks)
+    setSelectedTypes(urlParams.types)
+    setSearchTerm(urlParams.searchTerm)
+    setSearchExpanded(urlParams.searchExpanded)
   }, [])
 
 
-  // Update URL whenever filters change
-  const updateURL = useCallback((products: string[], networks: string[], types: string[], search: string) => {
-    if (typeof window === "undefined") return
-
-    const params = new URLSearchParams()
-
-    if (search) {
-      params.set("*", search)
-    } else {
-      if (products.length > 0) {
-        params.set("product", products.join(","))
-      }
-      if (networks.length > 0) {
-        params.set("network", networks.join(","))
-      }
-      if (types.length > 0) {
-        params.set("type", types.join(","))
-      }
-    }
-
-    const newURL = params.toString() ? `?${params.toString()}` : window.location.pathname
-    window.history.replaceState({}, "", newURL)
-  }, [])
-
   // Update URL when filters change
   useEffect(() => {
-    updateURL(selectedProducts, selectedNetworks, selectedTypes, searchTerm)
-  }, [selectedProducts, selectedNetworks, selectedTypes, searchTerm, updateURL])
+    updateFilterURL(selectedProducts, selectedNetworks, selectedTypes, searchTerm)
+  }, [selectedProducts, selectedNetworks, selectedTypes, searchTerm])
 
   // Filter items and update the display
   useEffect(() => {
@@ -186,13 +149,13 @@ export const ChangelogFilters = ({ products, networks, types, items }: Changelog
   const toggleSelection = (type: "product" | "network" | "type", value: string) => {
     switch (type) {
       case "product":
-        setSelectedProducts((prev) => (prev.includes(value) ? prev.filter((p) => p !== value) : [...prev, value]))
+        setSelectedProducts((prev) => toggleItemInArray(prev, value))
         break
       case "network":
-        setSelectedNetworks((prev) => (prev.includes(value) ? prev.filter((n) => n !== value) : [...prev, value]))
+        setSelectedNetworks((prev) => toggleItemInArray(prev, value))
         break
       case "type":
-        setSelectedTypes((prev) => (prev.includes(value) ? prev.filter((t) => t !== value) : [...prev, value]))
+        setSelectedTypes((prev) => toggleItemInArray(prev, value))
         break
     }
   }

src/utils/changelogFilterUtils.ts

@@ -0,0 +1,85 @@
+/**
+ * Utility functions for changelog filter management
+ */
+
+/**
+ * Parse URL parameters to extract filter state
+ */
+export function parseURLParams(): {
+  products: string[]
+  networks: string[]
+  types: string[]
+  searchTerm: string
+  searchExpanded: boolean
+} {
+  if (typeof window === "undefined") {
+    return {
+      products: [],
+      networks: [],
+      types: [],
+      searchTerm: "",
+      searchExpanded: false,
+    }
+  }
+
+  const params = new URLSearchParams(window.location.search)
+  const productParam = params.get("product")
+  const networkParam = params.get("network")
+  const typeParam = params.get("type")
+  const searchParam = params.get("*")
+
+  return {
+    products: productParam ? productParam.split(",") : [],
+    networks: networkParam ? networkParam.split(",") : [],
+    types: typeParam ? typeParam.split(",") : [],
+    searchTerm: searchParam || "",
+    searchExpanded: !!searchParam,
+  }
+}
+
+/**
+ * Build URL search parameters from filter state
+ */
+export function buildFilterURL(
+  products: string[],
+  networks: string[],
+  types: string[],
+  searchTerm: string
+): URLSearchParams {
+  const params = new URLSearchParams()
+
+  if (searchTerm) {
+    params.set("*", searchTerm)
+  } else {
+    if (products.length > 0) {
+      params.set("product", products.join(","))
+    }
+    if (networks.length > 0) {
+      params.set("network", networks.join(","))
+    }
+    if (types.length > 0) {
+      params.set("type", types.join(","))
+    }
+  }
+
+  return params
+}
+
+/**
+ * Update browser URL with filter parameters
+ */
+export function updateFilterURL(products: string[], networks: string[], types: string[], searchTerm: string): void {
+  if (typeof window === "undefined") return
+
+  const params = buildFilterURL(products, networks, types, searchTerm)
+  const newURL = params.toString() ? `?${params.toString()}` : window.location.pathname
+
+  window.history.replaceState({}, "", newURL)
+}
+
+/**
+ * Toggle an item in an array (add if not present, remove if present)
+ */
+export function toggleItemInArray<T>(array: T[], item: T): T[] {
+  return array.includes(item) ? array.filter((i) => i !== item) : [...array, item]
+}