useSocketStore (socket.tsx)

React context store managing socket state and actions for real-time UI updates.

import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
import { io, Socket } from 'socket.io-client';
import { apiUrl } from "../apiConfig";

const SERVER_ENDPOINT = apiUrl;

interface SocketState {
  socket: Socket | null;
  id: string;
  setId: (id: string) => void;
};

class SocketStore implements Partial<SocketState> {
  socket = null;
  id = '';
};

const socketStore = new SocketStore();
const socketStoreContext = createContext<SocketState>(socketStore as SocketState);

export const useSocketStore = () => useContext(socketStoreContext);

export const SocketProvider = ({ children }: { children: JSX.Element }) => {
  const [socket, setSocket] = useState<Socket | null>(socketStore.socket);
  const [id, setActiveId] = useState<string>(socketStore.id);

 

... (truncated -- full source via MCP)