set search params without the whole layout reloading

components/layout/index.tsx

@@ -1,7 +1,6 @@
 import { Flex, useToast } from "@chakra-ui/react";
 import { t } from "@lingui/macro";
 import MyContainer from "components/common/MyContainer";
-import { AppProps } from "next/app";
 import { useState } from "react";
 import { SWRConfig } from "swr";
 import Banner from "./Banner";
@@ -11,7 +10,7 @@ import TopNav from "./TopNav";
 
 const DATE_KEYS = ["createdAt", "updatedAt"];
 
-const Layout = ({ Component, pageProps }: AppProps) => {
+const Layout = ({ children }: { children: React.ReactNode }) => {
   const [errors, setErrors] = useState(new Set<string>());
   const toast = useToast();
 
@@ -47,9 +46,7 @@ const Layout = ({ Component, pageProps }: AppProps) => {
       <IconNavBar />
       <Banner />
       <Flex flexDirection="column" minH="100vh" pt="1rem">
-        <MyContainer wide>
-          <Component {...pageProps} />
-        </MyContainer>
+        <MyContainer wide>{children}</MyContainer>
         <Footer />
       </Flex>
     </SWRConfig>

hooks/freeagents.ts

@@ -1,4 +1,5 @@
 import { Playstyle } from "@prisma/client";
+import { setSearchParams } from "lib/setSearchParams";
 import useUser from "lib/useUser";
 import { useRouter } from "next/router";
 import { GetAllFreeAgentPostsData } from "prisma/queries/getAllFreeAgentPosts";
@@ -23,10 +24,7 @@ export function useFreeAgents() {
     (oldState: UseFreeAgentsState, action: Action) => {
       switch (action.type) {
         case "SET_PLAYSTYLE":
-          router.replace({
-            pathname: "/freeagents",
-            query: { playstyle: action.playstyle },
-          });
+          setSearchParams("playstyle", action.playstyle);
 
           return { ...oldState, playstyle: action.playstyle };
         default:

lib/setSearchParams.ts

@@ -0,0 +1,18 @@
+export const setSearchParams = (key: string, value: string | undefined) => {
+  const url = new URL(window.location.href);
+  const params = new URLSearchParams(url.search);
+
+  if (!value) {
+    params.delete(key);
+  } else {
+    params.set(key, value); // encodeURIComponent(value)
+  }
+
+  history.replaceState(
+    {},
+    "",
+    `${window.location.pathname}${
+      Array.from(params.entries()).length ? "?" : ""
+    }${params.toString()}`
+  );
+};

pages/_app.tsx

@@ -144,7 +144,7 @@ const setDisplayedLanguage = () => {
   activateLocale(getUsersLanguage());
 };
 
-const MyApp = (props: AppProps) => {
+const MyApp = ({ Component, pageProps }: AppProps) => {
   useEffect(setDisplayedLanguage, []);
 
   return (
@@ -178,10 +178,12 @@ const MyApp = (props: AppProps) => {
         }}
       />
 
-      <NextAuthProvider session={props.pageProps.session}>
+      <NextAuthProvider session={pageProps.session}>
         <ChakraProvider theme={extendedTheme}>
           <I18nProvider i18n={i18n}>
-            <Layout {...props} />
+            <Layout>
+              <Component {...pageProps} />
+            </Layout>
           </I18nProvider>
         </ChakraProvider>
       </NextAuthProvider>

pages/freeagents.tsx

@@ -40,8 +40,6 @@ const FreeAgentsPage = () => {
   const { data, usersPost, playstyleCounts, state, dispatch } = useFreeAgents();
   const [modalIsOpen, setModalIsOpen] = useState(false);
 
-  console.log({ playstyleCounts });
-
   return (
     <MyContainer>
       {modalIsOpen && (