Refactor socket context usage in CategoryBox, SearchBar, and Home components for improved clarity and consistency in data fetching.

src/components/CategoryBox.js

@@ -22,7 +22,7 @@ const CategoryBox = ({
   const [imageUrl, setImageUrl] = useState(null);
   const [imageError, setImageError] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const {socket} = useContext(SocketContext);
+  const context = useContext(SocketContext);
 
   useEffect(() => {
     let objectUrl = null;
@@ -61,10 +61,10 @@ const CategoryBox = ({
     }
 
     // If socket is available and connected, fetch the image
-    if (socket && socket.connected && id && !isLoading) {
+    if (context && context.socket && context.socket.connected && id && !isLoading) {
       setIsLoading(true);
       
-      socket.emit('getCategoryPic', { categoryId: id }, (response) => {
+      context.socket.emit('getCategoryPic', { categoryId: id }, (response) => {
         setIsLoading(false);
         
         if (response.success) {
@@ -119,7 +119,7 @@ const CategoryBox = ({
         URL.revokeObjectURL(objectUrl);
       }
     };
-  }, [socket, socket?.connected, id, isLoading]);
+  }, [context, context?.socket?.connected, id, isLoading]);
 
   return (
     <Paper

src/components/header/SearchBar.js

@@ -15,7 +15,7 @@ import SocketContext from "../../contexts/SocketContext.js";
 const SearchBar = () => {
   const navigate = useNavigate();
   const location = useLocation();
-  const {socket} = React.useContext(SocketContext);
+  const context = React.useContext(SocketContext);
   const searchParams = new URLSearchParams(location.search);
 
   // State management
@@ -58,7 +58,7 @@ const SearchBar = () => {
   // @note Autocomplete function using getSearchProducts Socket.io API - returns objects with name and seoName
   const fetchAutocomplete = React.useCallback(
     (query) => {
-      if (!socket || !query || query.length < 2) {
+      if (!context || !context.socket || !context.socket.connected || !query || query.length < 2) {
         setSuggestions([]);
         setShowSuggestions(false);
         setLoadingSuggestions(false);
@@ -67,7 +67,7 @@ const SearchBar = () => {
 
       setLoadingSuggestions(true);
 
-      socket.emit(
+      context.socket.emit(
         "getSearchProducts",
         {
           query: query.trim(),
@@ -90,7 +90,7 @@ const SearchBar = () => {
         }
       );
     },
-    [socket]
+    [context]
   );
 
   const handleSearchChange = (e) => {

src/pages/Home.js

@@ -151,16 +151,16 @@ const Home = () => {
   const [rootCategories, setRootCategories] = useState(() =>
     initializeCategories()
   );
-  const {socket} = useContext(SocketContext);
+  const context = useContext(SocketContext);
 
   useEffect(() => {
     // Only fetch from socket if we don't already have categories and we're in browser
     if (
       rootCategories.length === 0 &&
-      socket &&
+      context && context.socket && context.socket.connected &&
       typeof window !== "undefined"
     ) {
-      socket.emit("categoryList", { categoryId: 209 }, (response) => {
+      context.socket.emit("categoryList", { categoryId: 209 }, (response) => {
         if (response && response.categoryTree) {
           // Store in cache
           try {
@@ -176,7 +176,7 @@ const Home = () => {
         }
       });
     }
-  }, [socket, rootCategories.length]);
+  }, [context, context?.socket?.connected, rootCategories.length]);
 
   // Filter categories (excluding specific IDs)
   const filteredCategories = rootCategories.filter(