initial socket io for messages

package.json

@@ -27,6 +27,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-shimmer-effects": "^1.0.3",
+    "socket.io-client": "^4.7.5",
     "zod": "^3.23.8"
   },
   "devDependencies": {

src/components/UserMenu.tsx

@@ -10,7 +10,9 @@ export default function UserMenu({
   const { logout } = useKindeAuth();
   return (
     <FloatWrapper ref={menuRef}>
-      <MenuItem variant="primary">Messages</MenuItem>
+      <MenuItem to="/messages" variant="primary">
+        Messages
+      </MenuItem>
       <MenuItem variant="primary">Notifications</MenuItem>
       <MenuItem to="/profile/bookings" variant="primary">
         Bookings

src/pages/Messages.tsx

@@ -0,0 +1,77 @@
+import { Row } from '@/components';
+import { Button } from '@/components/Button';
+import { socket } from '@/socket';
+import { SendIcon } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+
+export const Messages: React.FC = () => {
+  const [inputText, setInputText] = useState('');
+  const [isConnected, setIsConnected] = useState(socket.connected);
+  const [messages, setmessages] = useState<string[]>([]);
+
+  useEffect(() => {
+    function onConnect() {
+      setIsConnected(true);
+    }
+
+    function onDisconnect() {
+      setIsConnected(false);
+    }
+
+    function onMessageEvent(value: string) {
+      setmessages((previous) => [...previous, value]);
+    }
+
+    socket.on('connect', onConnect);
+    socket.on('disconnect', onDisconnect);
+    socket.on('message', onMessageEvent);
+
+    return () => {
+      socket.off('connect', onConnect);
+      socket.off('disconnect', onDisconnect);
+      socket.off('message', onMessageEvent);
+    };
+  }, []);
+
+  return (
+    <div>
+      <h1>Messages</h1>
+      <div>
+        <p>Is connected: {isConnected ? 'Yes' : 'No'}</p>
+        <p>Number of events: {messages.length}</p>
+      </div>
+
+      {messages.map((event) => (
+        <p key={event}>{event}</p>
+      ))}
+
+      <Row style={{ gap: '.6rem' }}>
+        <input
+          style={{
+            border: '1px solid #ccc',
+            borderRadius: '6px',
+            fontSize: '16px',
+            padding: '6px',
+          }}
+          onChange={(e) => setInputText(e.target.value)}
+          type="text"
+          value={inputText}
+        />
+        <Button
+          onClick={() => {
+            socket.emit('message', inputText);
+            setmessages((previous) => [...previous, inputText]);
+            setInputText('');
+          }}
+          color={'primary'}
+          round={'xs'}
+        >
+          <SendIcon size={16} />
+          Send
+        </Button>
+      </Row>
+    </div>
+  );
+};
+
+export default Messages;

src/routeTree.gen.ts

@@ -13,6 +13,7 @@ import { createFileRoute } from '@tanstack/react-router'
 // Import Routes
 
 import { Route as rootRoute } from './routes/__root'
+import { Route as MessagesImport } from './routes/messages'
 import { Route as IndexImport } from './routes/index'
 import { Route as RoomsRoomIdImport } from './routes/rooms/$roomId'
 
@@ -40,6 +41,11 @@ const LoginLazyRoute = LoginLazyImport.update({
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/login.lazy').then((d) => d.Route))
 
+const MessagesRoute = MessagesImport.update({
+  path: '/messages',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const IndexRoute = IndexImport.update({
   path: '/',
   getParentRoute: () => rootRoute,
@@ -93,6 +99,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexImport
       parentRoute: typeof rootRoute
     }
+    '/messages': {
+      id: '/messages'
+      path: '/messages'
+      fullPath: '/messages'
+      preLoaderRoute: typeof MessagesImport
+      parentRoute: typeof rootRoute
+    }
     '/login': {
       id: '/login'
       path: '/login'
@@ -156,6 +169,7 @@ declare module '@tanstack/react-router' {
 
 export const routeTree = rootRoute.addChildren({
   IndexRoute,
+  MessagesRoute,
   LoginLazyRoute,
   WishlistsLazyRoute,
   RoomsRoomIdRoute,
@@ -175,6 +189,7 @@ export const routeTree = rootRoute.addChildren({
       "filePath": "__root.tsx",
       "children": [
         "/",
+        "/messages",
         "/login",
         "/wishlists",
         "/rooms/$roomId",
@@ -188,6 +203,9 @@ export const routeTree = rootRoute.addChildren({
     "/": {
       "filePath": "index.tsx"
     },
+    "/messages": {
+      "filePath": "messages.tsx"
+    },
     "/login": {
       "filePath": "login.lazy.tsx"
     },

src/routes/messages.tsx

@@ -0,0 +1,6 @@
+import Messages from '@/pages/Messages';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/messages')({
+  component: () => <Messages />,
+});

src/socket.ts

@@ -0,0 +1,6 @@
+import { 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);