Add serch params for sorting

src/hooks/sort-list/useSortList.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import _orderBy from "lodash/orderBy";
 
 type TSortDir = "asc" | "desc";
@@ -8,13 +8,40 @@ export function useSortList(
   name: string,
   direction: TSortDir = "desc"
 ) {
-  const [currentName, setCurrentName] = useState(name);
-  const [currentDerection, setCurrentDirection] = useState(direction);
+  const searchParams = new URLSearchParams(window.location.search);
+
+  const [currentName, setCurrentName] = useState(
+    searchParams.get("sort") || name
+  );
+  const [currentDerection, setCurrentDirection] = useState(
+    (searchParams.get("order") as TSortDir) || direction
+  );
+
   const handleSort = (name: string, dir: TSortDir) => {
+    const url = new URL(window.location.href);
+
+    url.searchParams.set("sort", name);
+    url.searchParams.set("order", dir);
+
+    window.history.pushState(null, "", url);
     setCurrentName(name);
     setCurrentDirection(dir);
   };
 
+  useEffect(() => {
+    const handleUrlChange = () => {
+      const searchParams = new URLSearchParams(window.location.search);
+      setCurrentName(searchParams.get("sort") || name);
+      setCurrentDirection((searchParams.get("order") as TSortDir) || direction);
+    };
+
+    window.addEventListener("popstate", handleUrlChange);
+
+    return () => {
+      window.removeEventListener("popstate", handleUrlChange);
+    };
+  }, []);
+
   const sortedList = _orderBy(list, [currentName], [currentDerection]);
 
   return {