Merge pull request #44 from Student-Labs-2023/develop

Develop
Student-Labs-2023 · Aug 24, 2023 · 9947edd · 9947edd
2 parents 33bb759 + d4381eb
commit 9947edd
Show file tree

Hide file tree

Showing 6 changed files with 155 additions and 47 deletions.
diff --git a/src/entities/room/api/useAccessRooms.tsx b/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 }
+}
diff --git a/src/entities/room/api/useMyRooms.tsx b/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 }
+}
diff --git a/src/features/Search/ui/SearchInput.tsx b/src/features/Search/ui/SearchInput.tsx
@@ -2,6 +2,8 @@ import React, { useRef } from 'react';
 import styled from 'styled-components';
 import searchIcon from '../../../../public/icons/search.svg';
 import socket from '../../../pages/Lobby/store/socket';
+import navbarState from '../../../pages/Lobby/store/navbarState';
+import { useAuth0 } from "@auth0/auth0-react";
 
 const Container = styled.div`
     display: flex;
@@ -27,10 +29,17 @@ const Input = styled.input`
 
 export const SearchInput: React.FC = () => {
   const dataRef = useRef<HTMLInputElement>(null);
+  const { user } = useAuth0();
   const st = socket.state;
 
   function inputData(data: any) {
-    st.send(data);
+    const message = {
+      filter: navbarState.state,
+      search_string: data,
+      user_email: user?.email
+    }
+    console.log(message);
+    st.send(JSON.stringify(message));
     st.close(1, "closed");
   }
 

diff --git a/src/pages/Lobby/Lobby.tsx b/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 />
     </>
   )
 })

diff --git a/src/widgets/RoomsList.tsx b/src/widgets/RoomsList.tsx
@@ -1,5 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } 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,29 +56,30 @@ 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;
 
-    useEffect(() => {
-      st.onopen = function() {
-        st.send('connected');
-      };
-    }, []);
+    // useEffect(() => {
+    //   st.onopen = function() {
+    //     st.send('connected');
+    //   };
+    // }, []);
 
     st.onmessage = function(event) {
         const response = event.data;
         setSearchedRooms(JSON.parse(response as any));
         console.log(searchedRooms);
     };
 
+    useEffect(() => {
+        setSearchedRooms([]);
+    }, [navbarState.state])
+
   return (
     <Container>
         <Header>
@@ -83,42 +88,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}/>
+                    )}
+                </> 
+                :
+                <>
+                    {loading && <p>loading...</p>}
+                    {error && <ErrorListMessage>{error}</ErrorListMessage>}
+                    {rooms.length > 0 ?
+                        <>
+                            {rooms.map(room => 
+                                <RoomCard room={room} key={room.id}/>    
+                            )}
+                        </> :
+                        <ZeroListMessage>У Вас пока нет созданных классов</ZeroListMessage>
+                    }
+                </>
+            } </> :
+        navbarState.state === 'access' ? <>
+            {searchedRooms.length > 0 ?
                 <>
-                    {error ? <ErrorListMessage>{error}</ErrorListMessage> :
+                    {searchedRooms.map((room: IRoom) => 
+                        <RoomCard room={room} key={room.id}/>
+                    )}
+                </> 
+                :
+                <>
+                    {accessLoading && <p>loading...</p>}
+                    {accessError && <ErrorListMessage>{accessError}</ErrorListMessage>}
+                    {accessRooms.length > 0 ?
                         <>
-                        {rooms.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>
   )

diff --git a/src/widgets/layout/Navbar.tsx b/src/widgets/layout/Navbar.tsx
@@ -70,6 +70,7 @@ const Navbar: React.FC = observer(() => {
     }
 
     function addRoom() {
+        navbarState.openMy();
         if (roomsFormState.state === '' && navbarState.state === 'my') {
             roomsFormState.openCreateForm();
             return 0;
@@ -81,6 +82,7 @@ const Navbar: React.FC = observer(() => {
     }
 
     function editRooms() {
+        navbarState.openMy();
         if (navbarState.state === 'my') {
             if (roomsState.state === '') {
                 roomsState.openEditForm();