push/pull activeServerStore state to/from url

app/components/RecoilRootWrapper.tsx

@@ -1,11 +1,32 @@
 'use client';
-
 import { RecoilRoot } from 'recoil';
+import dynamic from 'next/dynamic';
+const RecoilURLSyncJSON = dynamic(
+	() => import('recoil-sync').then((m) => m.RecoilURLSyncJSON),
+	{ ssr: false }
+	// This is magic. I get this error when I try to use RecoilURLSyncJSON directly. The functionality still works tho.
+	// Error:
+	//  ⨯ node_modules/transit-js/transit.js (24:22) @ self
+	//  ⨯ ReferenceError: self is not defined
+	//  at __webpack_require__ (/home/lov432/vscode/cs2-dashboard/.next/server/webpack-runtime.js:33:42)
+	//  at __webpack_require__ (/home/lov432/vscode/cs2-dashboard/.next/server/webpack-runtime.js:33:42)
+	//  at eval (./app/components/RecoilRootWrapper.tsx:9:69)
+	//  at (ssr)/./app/components/RecoilRootWrapper.tsx (/home/lov432/vscode/cs2-dashboard/.next/server/app/page.js:453:1)
+	//  at __webpack_require__ (/home/lov432/vscode/cs2-dashboard/.next/server/webpack-runtime.js:33:42)
+	// null
+	// error
+);
 
 export default function RecoilRootWrapper({
 	children
 }: {
 	children: React.ReactNode;
 }) {
-	return <RecoilRoot>{children}</RecoilRoot>;
+	return (
+		<RecoilRoot>
+			<RecoilURLSyncJSON location={{ part: 'queryParams' }}>
+				{children}
+			</RecoilURLSyncJSON>
+		</RecoilRoot>
+	);
 }

app/components/ServerInfoPanel.Server.tsx

@@ -6,9 +6,14 @@ import { getPlayers } from '../lib/get-playes';
 import { getServerInfo } from '../lib/get-server-info';
 import { getServersConfig } from '../lib/configParse';
 
-export default async function ServerInfoPanel() {
-	const allPlayers = await getPlayers();
-	const serverInfo = await getServerInfo();
+export default async function ServerInfoPanel({
+	searchParams
+}: {
+	searchParams: { [key: string]: string | string[] | undefined };
+}) {
+	const serverIndex = Number(searchParams['activeServerStore']) || 0;
+	const allPlayers = await getPlayers(serverIndex);
+	const serverInfo = await getServerInfo(serverIndex);
 	const config = getServersConfig();
 	if ('err' in config) {
 		console.log(config.err);

app/lib/get-playes.tsx

@@ -21,7 +21,7 @@ for (let i = 0; i < servers.length; i++) {
 	});
 }
 
-export async function getPlayers(selectedServer = 0, forceUpdate = false) {
+export async function getPlayers(selectedServer: number, forceUpdate = false) {
 	if (
 		Date.now() - serversCache[selectedServer].lastReqTime < 5000 &&
 		!forceUpdate

app/lib/get-server-info.tsx

@@ -29,7 +29,7 @@ for (let i = 0; i < servers.length; i++) {
 	});
 }
 
-export async function getServerInfo(serverIndex = 0, forceUpadate = false) {
+export async function getServerInfo(serverIndex: number, forceUpadate = false) {
 	if (
 		Date.now() - serversCache[serverIndex].lastReqTime < 5000 &&
 		!forceUpadate

app/page.tsx

@@ -4,13 +4,17 @@ import RecoilRootWrapper from './components/RecoilRootWrapper';
 import Loading from './components/Loading';
 export const dynamic = 'force-dynamic';
 
-export default function Home() {
+export default function Home({
+	searchParams
+}: {
+	searchParams: { [key: string]: string | string[] | undefined };
+}) {
 	return (
 		<>
 			<div className="relative flex min-h-screen w-full flex-row flex-wrap justify-evenly">
 				<RecoilRootWrapper>
 					<Loading />
-					<ServerInfoPanel />
+					<ServerInfoPanel searchParams={searchParams} />
 					<CommandsBox />
 				</RecoilRootWrapper>
 			</div>

app/store/active-server-store.ts

@@ -1,8 +1,9 @@
 import { atom } from 'recoil';
+import { syncEffect } from 'recoil-sync';
+import { number } from '@recoiljs/refine';
 
-type activeServerIndexStore = number;
-
-export const activeServerStore = atom({
+export const activeServerStore = atom<number>({
 	key: 'activeServerStore',
-	default: 0 as activeServerIndexStore
+	effects: [syncEffect({ refine: number() })],
+	default: 0
 });

package.json

@@ -12,12 +12,14 @@
 	"dependencies": {
 		"@fabricio-191/valve-server-query": "^4.1.9",
 		"@maxmind/geoip2-node": "^5.0.0",
+		"@recoiljs/refine": "^0.1.1",
 		"mysql2": "^3.7.0",
 		"next": "14.0.3",
 		"patch-package": "^8.0.0",
 		"react": "^18",
 		"react-dom": "^18",
 		"recoil": "^0.7.7",
+		"recoil-sync": "^0.2.0",
 		"relevancy": "0.2.0",
 		"toml": "^3.0.0"
 	},