refactor changeUrlQueryString method, update comments

lib/utils/changeUrlQueryString.ts

@@ -1,11 +1,26 @@
+import { Url } from "next/dist/shared/lib/router/router";
 import { NextRouter } from "next/router";
 import { ParsedUrlQueryInput } from "querystring";
 
-export const changeUrlQueryString = (query: ParsedUrlQueryInput, router: NextRouter) => {
-  const { envId, ...restQuery } = query; // get rid of envId
-  const asPath = {
-    pathname: router.asPath.split('?')[0],
-    query: restQuery,
+/**
+ * Helper method for shallow routing.
+ * Modifies the input query to omit envId, then passes it as the "as" parameter of router.replace.
+ *
+ * @param query Parsed query parameters from the router.
+ * @param router Instance of NextRouter.
+ * @param asQuery URL to show in the address bar.
+ */
+export const changeUrlQueryString = (
+  query: ParsedUrlQueryInput,
+  router: NextRouter,
+  asQuery?: ParsedUrlQueryInput,
+) => {
+  // 
+  const asPath: Url = {
+    // ensures only base URL is used for each call (omits envId and all query params)
+    pathname: router.asPath.split("?")[0],
+    query: asQuery
   };
+
   router.replace({ query: query }, asPath, { scroll: false, shallow: true });
-}
+};

lib/utils/circularityUtils.ts

@@ -13,6 +13,8 @@ export type Stringified<T> = string & T
  * Stringifies the provided item as a JSON string while preserving the type information.
  * This allows for the serialized string to be treated as both a string and as an object
  * of type `T` during type checking.
+ * 
+ * Stringification allows passing circular data through getStaticProps.
  *
  * @template T The type of the item to be stringified.
  * @param item The item of generic type `T` to be stringified.

pages/[envId]/products/index.tsx

@@ -109,12 +109,12 @@ export const Products: FC<Props> = props => {
     if (pageNumber === 2) {
       changeUrlQueryString(Object.fromEntries(Object.entries(router.query).filter(([name]) => name !== "page")), router);
     } else {
-      changeUrlQueryString({ ...router.query, page: pageNumber - 1 }, router);
+      changeUrlQueryString({ ...router.query, page: pageNumber - 1 }, router, { page: pageNumber -1 });
     }
   }
 
   const onNextClick = () => {
-    changeUrlQueryString({ ...router.query, page: pageNumber + 1 }, router);
+    changeUrlQueryString({ ...router.query, page: pageNumber + 1 }, router, { page: pageNumber + 1 });
   }
 
   const renderFilterOption = (term: ITaxonomyTerms) => {
@@ -123,7 +123,7 @@ export const Products: FC<Props> = props => {
         ? [...categories, term.codename, ...term.terms.map((t) => t.codename)]
         : categories.filter((c) => c !== term.codename && !term.terms.map((t) => t.codename).includes(c));
 
-      changeUrlQueryString({ ...router.query, category: newCategories }, router);
+      changeUrlQueryString({ ...router.query, category: newCategories }, router, { category: newCategories });
     };
 
     return (