create an enum for query params, change search to q

Author: barrymun

src/components/SearchInput.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 
 import { useAppContext } from "@contexts/AppContext";
+import { QueryParams } from "@utils/enums";
 
 import { SearchIcon } from "./Icons";
 
@@ -28,7 +29,7 @@ const SearchInput = () => {
   const clearSearch = useCallback(() => {
     setInputVal("");
     setSearchText("");
-    searchParams.delete("search");
+    searchParams.delete(QueryParams.SEARCH);
     setSearchParams(searchParams);
   }, [searchParams, setSearchParams, setSearchText]);
 
@@ -63,10 +64,10 @@ const SearchInput = () => {
 
       setSearchText(formattedVal);
       if (!formattedVal) {
-        searchParams.delete("search");
+        searchParams.delete(QueryParams.SEARCH);
         setSearchParams(searchParams);
       } else {
-        searchParams.set("search", formattedVal);
+        searchParams.set(QueryParams.SEARCH, formattedVal);
         setSearchParams(searchParams);
       }
     },
@@ -89,9 +90,9 @@ const SearchInput = () => {
    * Set the input value and search text to the search query from the URL
    */
   useEffect(() => {
-    const search = searchParams.get("search") || "";
-    setInputVal(search);
-    setSearchText(search);
+    const searchQuery = searchParams.get(QueryParams.SEARCH) || "";
+    setInputVal(searchQuery);
+    setSearchText(searchQuery);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

src/components/SnippetList.tsx

@@ -5,6 +5,7 @@ import { useSearchParams } from "react-router-dom";
 import { useAppContext } from "@contexts/AppContext";
 import { useSnippets } from "@hooks/useSnippets";
 import { SnippetType } from "@types";
+import { QueryParams } from "@utils/enums";
 import { slugify } from "@utils/slugify";
 
 import { LeftAngleArrowIcon } from "./Icons";
@@ -22,22 +23,22 @@ const SnippetList = () => {
   const handleOpenModal = (selected: SnippetType) => () => {
     setIsModalOpen(true);
     setSnippet(selected);
-    searchParams.set("snippet", slugify(selected.title));
+    searchParams.set(QueryParams.SNIPPET, slugify(selected.title));
     setSearchParams(searchParams);
   };
 
   const handleCloseModal = () => {
     setIsModalOpen(false);
     setSnippet(null);
-    searchParams.delete("snippet");
+    searchParams.delete(QueryParams.SNIPPET);
     setSearchParams(searchParams);
   };
 
   /**
    * open the relevant modal if the snippet is in the search params
    */
   useEffect(() => {
-    const snippetSlug = searchParams.get("snippet");
+    const snippetSlug = searchParams.get(QueryParams.SNIPPET);
     if (!snippetSlug) {
       return;
     }

src/utils/enums.ts

@@ -0,0 +1,4 @@
+export enum QueryParams {
+  SEARCH = "q",
+  SNIPPET = "snippet",
+}