fix correct fetching rooms

src/entities/room/api/useAccessRooms.tsx

@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+import axios, { AxiosError } from 'axios';
+import type { IRoom } from './models';
+import { useAuth0 } from "@auth0/auth0-react";
+
+export const useAccessRooms = () => {
+    const [accessRooms, setAccessRooms] = useState<IRoom[]>([]);
+    const [accessLoading, setAccessLoading] = useState(false);
+    const [accessError, setAccessError] = useState('');
+    const { user } = useAuth0();
+
+    const API = String(import.meta.env.VITE_API);
+
+    async function getRooms() {
+        try {
+            setAccessError('');
+            setAccessLoading(true);
+            const response = await axios.get<IRoom[]>(`${API}/user_channels/available/${user?.email}`);
+            setAccessRooms(response.data as any);
+            setAccessLoading(false);
+        } catch (e: unknown) {
+            const error = e as AxiosError;
+            setAccessLoading(false);
+            setAccessError(error.message);
+        }
+    }
+
+    useEffect(() => {
+        getRooms();
+    }, []);
+
+    return { accessRooms, accessLoading, accessError }
+}

src/entities/room/api/useMyRooms.tsx

@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+import axios, { AxiosError } from 'axios';
+import type { IRoom } from './models';
+import { useAuth0 } from "@auth0/auth0-react";
+
+export const useMyRooms = () => {
+    const [myRooms, setMyRooms] = useState<IRoom[]>([]);
+    const [myLoading, setMyLoading] = useState(false);
+    const [myError, setMyError] = useState('');
+    const { user } = useAuth0();
+
+    const API = String(import.meta.env.VITE_API);
+
+    async function getRooms() {
+        try {
+            setMyError('');
+            setMyLoading(true);
+            const response = await axios.get<IRoom[]>(`${API}/user_channels/my/${user?.email}`);
+            setMyRooms(response.data as any);
+            setMyLoading(false);
+        } catch (e: unknown) {
+            const error = e as AxiosError;
+            setMyLoading(false);
+            setMyError(error.message);
+        }
+    }
+
+    useEffect(() => {
+        getRooms();
+    }, []);
+
+    return { myRooms, myLoading, myError }
+}

src/pages/Lobby/Lobby.tsx

@@ -2,14 +2,12 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import navbarState from './store/navbarState';
 import roomsFormState from './store/roomsFormState';
-import { useRoomsList } from '../../entities/room/api/useRoomsList';
 import Header from '../../widgets/layout/Header';
 import Navbar from '../../widgets/layout/Navbar';
 import { CreateRoomForm } from '../../features/createRoom';
 import RoomsList from '../../widgets/RoomsList';
 
 const Lobby: React.FC = observer(() => {
-  const { rooms, loading, error } = useRoomsList();
 
   const roomsFormStateLS = localStorage.getItem("trigger");
 
@@ -18,7 +16,7 @@ const Lobby: React.FC = observer(() => {
       <Header/>
       <Navbar/>
       {roomsFormState.state || roomsFormStateLS === 'create' && navbarState.state === 'my' ? <CreateRoomForm/> : null}
-      <RoomsList rooms={rooms} loading={loading} error={error}/>
+      <RoomsList />
     </>
   )
 })

src/widgets/RoomsList.tsx

@@ -1,5 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { IRoom } from '../entities/room/api/models';
+import { useRoomsList } from '../entities/room/api/useRoomsList';
+import { useMyRooms } from '../entities/room/api/useMyRooms';
+import { useAccessRooms } from '../entities/room/api/useAccessRooms';
+import navbarState from '../pages/Lobby/store/navbarState';
 import socket from '../pages/Lobby/store/socket';
 import styled from 'styled-components';
 import { observer } from 'mobx-react-lite';
@@ -52,14 +56,11 @@ const Head = styled.h3`
     color: var(--grey_2);
 `
 
-interface Props {
-    rooms: IRoom[],
-    loading?: boolean,
-    error?: string,
-}
-
-const RoomsList: React.FC<Props> = observer(({ rooms, loading, error }) => {
+const RoomsList: React.FC = observer(() => {
     const [searchedRooms, setSearchedRooms] = useState([]);
+    const { rooms, loading, error } = useRoomsList();
+    const { myRooms, myLoading, myError } = useMyRooms();
+    const { accessRooms, accessLoading, accessError } = useAccessRooms();
 
     const st = socket.state;
 
@@ -83,42 +84,70 @@ const RoomsList: React.FC<Props> = observer(({ rooms, loading, error }) => {
             <Head style={{ marginLeft: 234 }}>Статус</Head>
             <Head style={{ marginLeft: 110 }}>Доступ</Head>
         </Header>
-        {searchedRooms.length > 0 ?
-        <>
-            {searchedRooms.map((room: IRoom) => 
-                <RoomCard room={room} key={room.id}/>
-            )}
-        </> 
-        :
-        <>
-            {loading ? <p>loading...</p> :
+        {navbarState.state === 'all' ? <>
+            {searchedRooms.length > 0 ?
+                <>
+                    {searchedRooms.map((room: IRoom) => 
+                        <RoomCard room={room} key={room.id}/>
+                    )}
+                </> 
+                :
                 <>
-                    {error ? <ErrorListMessage>{error}</ErrorListMessage> :
+                    {loading && <p>loading...</p>}
+                    {error && <ErrorListMessage>{error}</ErrorListMessage>}
+                    {rooms.length > 0 ?
                         <>
-                        {rooms.length > 0 ?
+                            {rooms.map(room => 
+                                <RoomCard room={room} key={room.id}/>    
+                            )}
+                        </> :
+                        <ZeroListMessage>У Вас пока нет созданных классов</ZeroListMessage>
+                    }
+                </>
+            } </> :
+        navbarState.state === 'access' ? <>
+            {searchedRooms.length > 0 ?
+                <>
+                    {searchedRooms.map((room: IRoom) => 
+                        <RoomCard room={room} key={room.id}/>
+                    )}
+                </> 
+                :
+                <>
+                    {accessLoading && <p>loading...</p>}
+                    {accessError && <ErrorListMessage>{accessError}</ErrorListMessage>}
+                    {accessRooms.length > 0 ?
+                        <>
+                            {accessRooms.map(room => 
+                                <RoomCard room={room} key={room.id}/>    
+                            )}
+                        </> :
+                        <ZeroListMessage>У Вас пока нет созданных классов</ZeroListMessage>
+                    }
+                </>
+            } </> :
+        navbarState.state === 'my' ? <>
+            {searchedRooms.length > 0 ? <>
+                {searchedRooms.map((room: IRoom) => 
+                    <RoomCard room={room} key={room.id}/>
+                )} </> :
+                <>
+                    {myLoading && <p>loading...</p>}
+                    {myError && <ErrorListMessage>{myError}</ErrorListMessage>}
+                        {myRooms.length > 0 ?
                             <>
-                                {roomsState.state === 'edit' ?
-                                    <>
-                                        {rooms.map(room => 
-                                            <EditRoomForm room={room} key={room.id}/>   
-                                        )}
-                                    </>
-                                    :
-                                    <>
-                                        {rooms.map(room => 
-                                            <RoomCard room={room} key={room.id}/>    
-                                        )}
-                                    </>
-                                }
-                            </> 
-                            :
+                                {roomsState.state === 'edit' ? <>
+                                    {myRooms.map(room => 
+                                        <EditRoomForm room={room} key={room.id}/>   
+                                    )} </> : <>
+                                    {myRooms.map(room => 
+                                        <RoomCard room={room} key={room.id}/>    
+                                    )} </>
+                                } </> :
                             <ZeroListMessage>У Вас пока нет созданных классов</ZeroListMessage>
                         }
-                        </>
-                    }
                 </>
-            }
-        </>
+            } </> : null
         }
     </Container>
   )