From e3cff6a9b0fec639ef530594c114fbe52c3f19d3 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 22 Aug 2023 14:15:14 +0600 Subject: [PATCH 1/3] fix correct fetching rooms --- src/entities/room/api/useAccessRooms.tsx | 33 ++++++++ src/entities/room/api/useMyRooms.tsx | 33 ++++++++ src/pages/Lobby/Lobby.tsx | 4 +- src/widgets/RoomsList.tsx | 103 +++++++++++++++-------- 4 files changed, 133 insertions(+), 40 deletions(-) create mode 100644 src/entities/room/api/useAccessRooms.tsx create mode 100644 src/entities/room/api/useMyRooms.tsx 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/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..799071e 100644 --- a/src/widgets/RoomsList.tsx +++ b/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 = 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 = observer(({ rooms, loading, error }) => { Статус Доступ
- {searchedRooms.length > 0 ? - <> - {searchedRooms.map((room: IRoom) => - - )} - - : - <> - {loading ?

loading...

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

loading...

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

loading...

} + {accessError && {accessError}} + {accessRooms.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 } ) From 0acd073abd72177c6530941f6b65d20d5230e1e3 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 24 Aug 2023 19:30:23 +0600 Subject: [PATCH 2/3] fix search --- src/features/Search/ui/SearchInput.tsx | 11 ++++++++++- src/widgets/RoomsList.tsx | 16 ++++++++++------ src/widgets/layout/Navbar.tsx | 4 ++++ 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/features/Search/ui/SearchInput.tsx b/src/features/Search/ui/SearchInput.tsx index 178cb9e..016a724 100644 --- 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(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/widgets/RoomsList.tsx b/src/widgets/RoomsList.tsx index 799071e..fc20a22 100644 --- a/src/widgets/RoomsList.tsx +++ b/src/widgets/RoomsList.tsx @@ -1,4 +1,4 @@ -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'; @@ -64,11 +64,11 @@ const RoomsList: React.FC = observer(() => { 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; @@ -76,6 +76,10 @@ const RoomsList: React.FC = observer(() => { console.log(searchedRooms); }; + useEffect(() => { + setSearchedRooms([]); + }, [navbarState.state]) + return (
diff --git a/src/widgets/layout/Navbar.tsx b/src/widgets/layout/Navbar.tsx index c7d9036..4ce7e97 100644 --- a/src/widgets/layout/Navbar.tsx +++ b/src/widgets/layout/Navbar.tsx @@ -7,6 +7,8 @@ import roomsFormState from '../../pages/Lobby/store/roomsFormState.ts'; import roomsState from '../../pages/Lobby/store/roomsState.ts'; import editIcon from '../../../public/icons/edit.svg'; import navbarState from '../../pages/Lobby/store/navbarState.ts'; +import socket from '../../pages/Lobby/store/socket.ts'; +import { useAuth0 } from "@auth0/auth0-react"; const Container = styled.div` display: flex; @@ -70,6 +72,7 @@ const Navbar: React.FC = observer(() => { } function addRoom() { + navbarState.openMy(); if (roomsFormState.state === '' && navbarState.state === 'my') { roomsFormState.openCreateForm(); return 0; @@ -81,6 +84,7 @@ const Navbar: React.FC = observer(() => { } function editRooms() { + navbarState.openMy(); if (navbarState.state === 'my') { if (roomsState.state === '') { roomsState.openEditForm(); From d4381ebdb3f3ac8118eae956054997c75b494e6d Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 24 Aug 2023 19:32:07 +0600 Subject: [PATCH 3/3] fix errors --- src/widgets/layout/Navbar.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/widgets/layout/Navbar.tsx b/src/widgets/layout/Navbar.tsx index 4ce7e97..a41784e 100644 --- a/src/widgets/layout/Navbar.tsx +++ b/src/widgets/layout/Navbar.tsx @@ -7,8 +7,6 @@ import roomsFormState from '../../pages/Lobby/store/roomsFormState.ts'; import roomsState from '../../pages/Lobby/store/roomsState.ts'; import editIcon from '../../../public/icons/edit.svg'; import navbarState from '../../pages/Lobby/store/navbarState.ts'; -import socket from '../../pages/Lobby/store/socket.ts'; -import { useAuth0 } from "@auth0/auth0-react"; const Container = styled.div` display: flex;