From 967ce013bfbbb73f83551f0cc16a2b7661bc5bc2 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 8 Jan 2021 15:26:08 +0200
Subject: [PATCH] set search params without the whole layout reloading

---
 components/layout/index.tsx |  7 ++-----
 hooks/freeagents.ts         |  6 ++----
 lib/setSearchParams.ts      | 18 ++++++++++++++++++
 pages/_app.tsx              |  8 +++++---
 pages/freeagents.tsx        |  2 --
 5 files changed, 27 insertions(+), 14 deletions(-)
 create mode 100644 lib/setSearchParams.ts

diff --git a/components/layout/index.tsx b/components/layout/index.tsx
index 72face22d..d26e1d117 100644
--- a/components/layout/index.tsx
+++ b/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>
diff --git a/hooks/freeagents.ts b/hooks/freeagents.ts
index a6b194dfe..4a7faaee6 100644
--- a/hooks/freeagents.ts
+++ b/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:
diff --git a/lib/setSearchParams.ts b/lib/setSearchParams.ts
new file mode 100644
index 000000000..85c635b48
--- /dev/null
+++ b/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()}`
+  );
+};
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 73dc96798..b734058b5 100644
--- a/pages/_app.tsx
+++ b/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>
diff --git a/pages/freeagents.tsx b/pages/freeagents.tsx
index f2fa84a98..7732b49c4 100644
--- a/pages/freeagents.tsx
+++ b/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 && (