added nuqs for type safe url seachx param state management

package.json

@@ -24,6 +24,7 @@
     "dayjs": "^1.11.11",
     "framer-motion": "^11.2.11",
     "lucide-react": "^0.400.0",
+    "nuqs": "^2.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-shimmer-effects": "^1.0.3",

src/main.tsx

@@ -1,5 +1,6 @@
 import { QueryClient } from '@tanstack/react-query';
 import { createRouter } from '@tanstack/react-router';
+import { NuqsAdapter } from 'nuqs/adapters/react';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
@@ -33,6 +34,8 @@ export type IRouter = typeof router;
 
 ReactDOM.createRoot(document.getElementById('app')!).render(
   <React.StrictMode>
-    <App router={router} />
+    <NuqsAdapter>
+      <App router={router} />
+    </NuqsAdapter>
   </React.StrictMode>,
 );

src/pages/Messages.tsx

@@ -1,16 +1,18 @@
 import { Row } from '@/components';
 import { Button } from '@/components/Button';
-import { socket } from '@/socket';
+import { getSocket } from '@/socket';
 import { useKindeAuth } from '@kinde-oss/kinde-auth-react';
 import { PowerIcon, PowerOffIcon, SendIcon } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 type IMessage = { message: string; user: string };
 export const Messages: React.FC = () => {
+  const socket = useMemo(() => getSocket(), []);
   const { user } = useKindeAuth();
   const [inputText, setInputText] = useState('');
   const [isConnected, setIsConnected] = useState(socket.connected);
   const [messages, setmessages] = useState<IMessage[]>([]);
+
   useEffect(() => {
     function onConnect() {
       setIsConnected(true);
@@ -32,6 +34,7 @@ export const Messages: React.FC = () => {
       socket.off('connect', onConnect);
       socket.off('disconnect', onDisconnect);
       socket.off('message', onMessageEvent);
+      socket.close();
     };
   }, []);
 

src/pages/Room/Reserve.tsx

@@ -7,14 +7,18 @@ import { useMutation } from '@tanstack/react-query';
 import { useLocation } from '@tanstack/react-router';
 import dayjs from 'dayjs';
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import React, { useState } from 'react';
+import { useQueryState } from 'nuqs';
+import React, { useEffect, useState } from 'react';
 
 import { styled } from '../../stitches.config';
 
 type IProps = {
   room: IRoom;
 };
 const Reserve: React.FC<IProps> = ({ room }) => {
+  const [fromDate, setFromDate] = useQueryState('checkIn');
+  const [toDate, setToDate] = useQueryState('checkOut');
+
   const { isAuthenticated, login } = useKindeAuth();
   const { pathname } = useLocation();
   const { roomsApi } = useApi();
@@ -25,10 +29,16 @@ const Reserve: React.FC<IProps> = ({ room }) => {
   });
   const [showGuestDetails, setShowGuestDetails] = useState(false);
   const [reserveDates, setReserveDates] = useState({
-    checkIn: new Date().toISOString().split('T')[0],
-    checkOut: dayjs().add(1, 'days').toISOString().split('T')[0],
+    checkIn: fromDate ?? dayjs().format('YYYY-MM-DD'),
+    checkOut: toDate ?? dayjs().add(1, 'day').format('YYYY-MM-DD'),
   });
 
+  useEffect(() => {
+    setFromDate(reserveDates.checkIn);
+    setToDate(reserveDates.checkOut);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [reserveDates]);
+
   const [guestDetails, setGuestDetails] = useState({
     adults: 1,
     children: 0,

src/socket.ts

@@ -1,6 +1,13 @@
-import { io } from 'socket.io-client';
+import { Socket, io } from 'socket.io-client';
 
 // "undefined" means the URL will be computed from the `window.location` object
 const URL = import.meta.env.VITE_BASE_URL as string;
 
-export const socket = io(URL);
+let socket: Socket;
+
+export const getSocket = () => {
+  if (!socket) {
+    io(URL, { autoConnect: false });
+  }
+  return socket;
+};