Develop

README.md

@@ -1,2 +1,42 @@
-"#create repo network-class-frontend" 
-"#review_code" 
+# Запуск проекта
+
+git clone -b main https://github.com/Student-Labs-2023/network-class-frontend
+
+cd network-class-frontend
+
+npm install
+
+npm run dev
+
+Приложение состоит из микрофронтендов, 
+для корректной требуется после запуска кода из этого репозитория
+
+перейти по ссылке для клонирования и запуска проекта, который отвечает
+за работу видеозвонков
+
+P.S инструкция для запуска также находится по сслыке
+
+https://github.com/Student-Labs-2023/network-class-videosdk-client
+
+# Аккаунты для тестирования
+Владелец канала "Кабинет 304"
+
+email:
+[email protected]
+Password:
+Qwe123___
+
+Участник канала "Кабинет 304"
+
+email:
+[email protected]
+Password:
+Qwe123___
+
+примечание:
+[email protected], [email protected]  могут искать, подключаться, создавать, редактировать(созданые), удалять каналы
+
+примечания к комнате 304
+[email protected], [email protected] могут менять свое имя в канале
+
+[email protected] мождет менять настройки класса

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@auth0/auth0-react": "^2.1.1",
@@ -37,6 +38,7 @@
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
+    "husky": "^8.0.3",
     "jsdom": "^22.1.0",
     "typescript": "^5.0.2",
     "vite": "^4.3.9",

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/features/Function/ui/FunctionBlock.tsx

@@ -56,6 +56,8 @@ export const FunctionBlock: React.FC<Props> = ({ func }) => {
       : setCurrentIcon(func.icon);
   }
 
+  console.log(func.link);
+
   return (
     <Link
       href={func.link}

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");
   }
 

src/main.tsx

@@ -13,6 +13,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
         authorizationParams={{
           redirect_uri: window.location.origin,
         }}
+        cacheLocation="localstorage"
       >
         <App />
       </Auth0Provider>

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 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>
   )