Refactor socket handling across components to support dual socket connections, enhancing data fetching capabilities and improving overall communication.

src/pages/Home.js

@@ -151,7 +151,7 @@ const Home = () => {
   const [rootCategories, setRootCategories] = useState(() =>
     initializeCategories()
   );
-  const socket = useContext(SocketContext);
+  const {socket} = useContext(SocketContext);
 
   useEffect(() => {
     // Only fetch from socket if we don't already have categories and we're in browser

src/pages/ProfilePage.js

@@ -225,8 +225,8 @@ const ProfilePage = (props) => {
 
 // Wrap with socket context
 const ProfilePageWithSocket = (props) => {
-  const socket = useContext(SocketContext);
-  return <ProfilePage {...props} socket={socket} />;
+  const {socket,socketB} = useContext(SocketContext);
+  return <ProfilePage {...props} socket={socket} socketB={socketB} />;
 };
 
 export default ProfilePageWithSocket; 

src/pages/Sitemap.js

@@ -36,7 +36,8 @@ const collectAllCategories = (categoryNode, categories = [], level = 0) => {
 const Sitemap = () => {
   const [categories, setCategories] = useState([]);
   const [loading, setLoading] = useState(true);
-  const socket = useContext(SocketContext);
+  const {socket} = useContext(SocketContext);
+
 
   const sitemapLinks = [
     { title: 'Startseite', url: '/' },