diff --git a/README.md b/README.md index aeb88aa..0c5491e 100644 --- a/README.md +++ b/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: +test-owner@gmail.com +Password: +Qwe123___ + +Участник канала "Кабинет 304" + +email: +test-student@gmail.com +Password: +Qwe123___ + +примечание: +test-student@gmail.com, test-owner@gmail.com могут искать, подключаться, создавать, редактировать(созданые), удалять каналы + +примечания к комнате 304 +test-student@gmail.com, test-owner@gmail.com могут менять свое имя в канале + +test-owner@gmail.com мождет менять настройки класса \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index c152833..1663d01 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,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", @@ -5407,6 +5408,21 @@ "node": ">=10.17.0" } }, + "node_modules/husky": { + "version": "8.0.3", + "resolved": "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz", + "integrity": "sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==", + "dev": true, + "bin": { + "husky": "lib/bin.js" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/typicode" + } + }, "node_modules/iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", diff --git a/package.json b/package.json index 376102c..9549d4b 100644 --- a/package.json +++ b/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", diff --git a/src/entities/room/api/useAccessRooms.tsx b/src/entities/room/api/useAccessRooms.tsx new file mode 100644 index 0000000..838d474 --- /dev/null +++ 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([]); + 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(`${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 new file mode 100644 index 0000000..9db1a16 --- /dev/null +++ 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([]); + 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(`${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/Function/ui/FunctionBlock.tsx b/src/features/Function/ui/FunctionBlock.tsx index c795b7b..2f0de96 100644 --- a/src/features/Function/ui/FunctionBlock.tsx +++ b/src/features/Function/ui/FunctionBlock.tsx @@ -56,6 +56,8 @@ export const FunctionBlock: React.FC = ({ func }) => { : setCurrentIcon(func.icon); } + console.log(func.link); + return ( { const dataRef = useRef(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/main.tsx b/src/main.tsx index e69bf1f..bc106ba 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -13,6 +13,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( authorizationParams={{ redirect_uri: window.location.origin, }} + cacheLocation="localstorage" > diff --git a/src/pages/Lobby/Lobby.tsx b/src/pages/Lobby/Lobby.tsx index 1e3b49a..2ace995 100644 --- 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(() => {
{roomsFormState.state || roomsFormStateLS === 'create' && navbarState.state === 'my' ? : null} - + ) }) diff --git a/src/widgets/RoomsList.tsx b/src/widgets/RoomsList.tsx index 30a0582..fc20a22 100644 --- 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,22 +56,19 @@ const Head = styled.h3` color: var(--grey_2); ` -interface Props { - rooms: IRoom[], - loading?: boolean, - error?: string, -} - -const RoomsList: React.FC = 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; @@ -75,6 +76,10 @@ const RoomsList: React.FC = observer(({ rooms, loading, error }) => { console.log(searchedRooms); }; + useEffect(() => { + setSearchedRooms([]); + }, [navbarState.state]) + return (
@@ -83,42 +88,70 @@ const RoomsList: React.FC = observer(({ rooms, loading, error }) => { Статус Доступ
- {searchedRooms.length > 0 ? - <> - {searchedRooms.map((room: IRoom) => - - )} - - : - <> - {loading ?

loading...

: + {navbarState.state === 'all' ? <> + {searchedRooms.length > 0 ? + <> + {searchedRooms.map((room: IRoom) => + + )} + + : + <> + {loading &&

loading...

} + {error && {error}} + {rooms.length > 0 ? + <> + {rooms.map(room => + + )} + : + У Вас пока нет созданных классов + } + + } : + navbarState.state === 'access' ? <> + {searchedRooms.length > 0 ? <> - {error ? {error} : + {searchedRooms.map((room: IRoom) => + + )} + + : + <> + {accessLoading &&

loading...

} + {accessError && {accessError}} + {accessRooms.length > 0 ? <> - {rooms.length > 0 ? + {accessRooms.map(room => + + )} + : + У Вас пока нет созданных классов + } + + } : + navbarState.state === 'my' ? <> + {searchedRooms.length > 0 ? <> + {searchedRooms.map((room: IRoom) => + + )} : + <> + {myLoading &&

loading...

} + {myError && {myError}} + {myRooms.length > 0 ? <> - {roomsState.state === 'edit' ? - <> - {rooms.map(room => - - )} - - : - <> - {rooms.map(room => - - )} - - } - - : + {roomsState.state === 'edit' ? <> + {myRooms.map(room => + + )} : <> + {myRooms.map(room => + + )} + } : У Вас пока нет созданных классов } - - } - } - + } : null }
) diff --git a/src/widgets/layout/Navbar.tsx b/src/widgets/layout/Navbar.tsx index c7d9036..a41784e 100644 --- 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();