From 13aa8ba312b454459e42bde7ffeb22d2c4c833c3 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 14 Jul 2023 22:41:11 +0600 Subject: [PATCH 01/47] push branch --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 5fe1749..aeb88aa 100644 --- a/README.md +++ b/README.md @@ -1 +1,2 @@ "#create repo network-class-frontend" +"#review_code" From 34e82b626ed4f8ce19b475098be2ede43150e1e9 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 25 Jul 2023 15:51:14 +0600 Subject: [PATCH 02/47] add pages bg --- src/app/index.css | 4 ++++ src/pages/Join/styles.module.css | 1 + src/pages/Lobby/Lobby.tsx | 2 +- src/widgets/layout/Header.tsx | 1 + src/widgets/layout/Navbar.tsx | 3 ++- 5 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/app/index.css b/src/app/index.css index ead7881..5ac4e34 100644 --- a/src/app/index.css +++ b/src/app/index.css @@ -45,6 +45,10 @@ body { -webkit-text-size-adjust: 100%; } +body { + background-color: #F9FAFE; +} + input, button, textarea { diff --git a/src/pages/Join/styles.module.css b/src/pages/Join/styles.module.css index 25c6743..2fd1f50 100644 --- a/src/pages/Join/styles.module.css +++ b/src/pages/Join/styles.module.css @@ -3,6 +3,7 @@ display: flex; justify-content: space-between; flex-wrap: nowrap; + background-color: var(--white); } .leftSide { diff --git a/src/pages/Lobby/Lobby.tsx b/src/pages/Lobby/Lobby.tsx index 8a098a5..e79142e 100644 --- a/src/pages/Lobby/Lobby.tsx +++ b/src/pages/Lobby/Lobby.tsx @@ -95,4 +95,4 @@ const Lobby: React.FC = () => { ) } -export default Lobby \ No newline at end of file +export default Lobby; diff --git a/src/widgets/layout/Header.tsx b/src/widgets/layout/Header.tsx index b23447a..243c5cd 100644 --- a/src/widgets/layout/Header.tsx +++ b/src/widgets/layout/Header.tsx @@ -11,6 +11,7 @@ const Container = styled.div` align-items: center; margin: 0 auto; padding: 0 92px 0 80px; + background-color: var(--white); `; const Left = styled.div``; diff --git a/src/widgets/layout/Navbar.tsx b/src/widgets/layout/Navbar.tsx index ffa568b..d1d659c 100644 --- a/src/widgets/layout/Navbar.tsx +++ b/src/widgets/layout/Navbar.tsx @@ -10,8 +10,9 @@ const Container = styled.div` display: flex; width: 1224px; justify-content: space-between; - margin: 66px auto 25px; + margin: 0 auto 25px; border-bottom: 0.5px var(--grey_4) solid; + padding-top: 66px; ` const Left = styled.div` From 4cfafc19e24b96f7f834f079c5f6c43ad2fc8c71 Mon Sep 17 00:00:00 2001 From: BodySites <100404530+BodySites@users.noreply.github.com> Date: Tue, 25 Jul 2023 17:48:35 +0600 Subject: [PATCH 03/47] fix: changing the click area on the profile in the header --- .gitignore | 1 + src/widgets/ProfilePanel/ProfilePanel.tsx | 8 ++++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 3b57bfb..4400f71 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,7 @@ lerna-debug.log* node_modules .env.development +.env.production dist dist-ssr *.local diff --git a/src/widgets/ProfilePanel/ProfilePanel.tsx b/src/widgets/ProfilePanel/ProfilePanel.tsx index 6e4e9dc..e971b8a 100644 --- a/src/widgets/ProfilePanel/ProfilePanel.tsx +++ b/src/widgets/ProfilePanel/ProfilePanel.tsx @@ -16,6 +16,10 @@ const Container = styled.div` height: 44px; align-items: center; gap: 15px; + + &:hover{ + cursor: pointer; + } `; const Avatar = styled.img` @@ -72,12 +76,12 @@ const ProfilePanel: React.FC = () => { } return ( - + {isAuthenticated ? {user?.name} : Loading...} - From 283fcdb29a49d190123e557a905643f3eeb91501 Mon Sep 17 00:00:00 2001 From: BodySites <100404530+BodySites@users.noreply.github.com> Date: Tue, 25 Jul 2023 18:32:12 +0600 Subject: [PATCH 04/47] 'New class' button now opens the class creation form --- src/features/Function/ui/FunctionBlock.tsx | 7 +- src/pages/Lobby/LobbyMy.tsx | 141 +++++++++--------- src/shared/api/models.ts | 15 +- src/widgets/FunctionsList/functionsObject.tsx | 3 + 4 files changed, 90 insertions(+), 76 deletions(-) diff --git a/src/features/Function/ui/FunctionBlock.tsx b/src/features/Function/ui/FunctionBlock.tsx index da18880..c795b7b 100644 --- a/src/features/Function/ui/FunctionBlock.tsx +++ b/src/features/Function/ui/FunctionBlock.tsx @@ -57,7 +57,12 @@ export const FunctionBlock: React.FC = ({ func }) => { } return ( - + {func.title} {func.description} diff --git a/src/pages/Lobby/LobbyMy.tsx b/src/pages/Lobby/LobbyMy.tsx index f9e13a2..9b45b73 100644 --- a/src/pages/Lobby/LobbyMy.tsx +++ b/src/pages/Lobby/LobbyMy.tsx @@ -1,91 +1,91 @@ -import React from 'react'; -import type { IRoom } from '../../shared/api/models'; -import Header from '../../widgets/layout/Header'; -import Navbar from '../../widgets/layout/Navbar'; -import { CreateRoomForm } from '../../features/createRoom/index.ts'; -import RoomsList from '../../widgets/RoomsList'; -import { observer } from 'mobx-react-lite'; -import roomsFormState from './store/roomsFormState.ts'; +import React, { useEffect } from "react"; +import type { IRoom } from "../../shared/api/models"; +import Header from "../../widgets/layout/Header"; +import Navbar from "../../widgets/layout/Navbar"; +import { CreateRoomForm } from "../../features/createRoom/index.ts"; +import RoomsList from "../../widgets/RoomsList"; +import { observer } from "mobx-react-lite"; +import roomsFormState from "./store/roomsFormState.ts"; import { useAuth0 } from "@auth0/auth0-react"; const LobbyMy: React.FC = observer(() => { const rooms: IRoom[] = [ { - id: 1, - title: 'Информатика 5 класс', - owner: 'Иванов Иван Иванович', - isActive: true, + id: 1, + title: "Информатика 5 класс", + owner: "Иванов Иван Иванович", + isActive: true, }, { - id: 2, - title: 'Математика 7 класс', - owner: 'Морозов Антон Дмитри...', - isActive: true, + id: 2, + title: "Математика 7 класс", + owner: "Морозов Антон Дмитри...", + isActive: true, }, { - id: 3, - title: 'Английский и язык 7 кла... ', - owner: 'Иванова Мария Ивановна', - isActive: false, + id: 3, + title: "Английский и язык 7 кла... ", + owner: "Иванова Мария Ивановна", + isActive: false, }, { - id: 4, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, + id: 4, + title: "Математика 8 класс", + owner: "Иванова Мария Ивановна", + isActive: false, }, { - id: 5, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, + id: 5, + title: "Математика 8 класс", + owner: "Иванова Мария Ивановна", + isActive: false, }, { - id: 6, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, + id: 6, + title: "Математика 8 класс", + owner: "Иванова Мария Ивановна", + isActive: false, }, { - id: 7, - title: 'Информатика 5 класс', - owner: 'Иванов Иван Иванович', + id: 7, + title: "Информатика 5 класс", + owner: "Иванов Иван Иванович", isActive: true, }, { - id: 8, - title: 'Математика 7 класс', - owner: 'Морозов Антон Дмитри...', - isActive: true, + id: 8, + title: "Математика 7 класс", + owner: "Морозов Антон Дмитри...", + isActive: true, }, { - id: 9, - title: 'Английский и язык 7 кла... ', - owner: 'Иванова Мария Ивановна', - isActive: false, + id: 9, + title: "Английский и язык 7 кла... ", + owner: "Иванова Мария Ивановна", + isActive: false, }, { - id: 10, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, + id: 10, + title: "Математика 8 класс", + owner: "Иванова Мария Ивановна", + isActive: false, }, { - id: 11, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, + id: 11, + title: "Математика 8 класс", + owner: "Иванова Мария Ивановна", + isActive: false, }, { - id: 12, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, + id: 12, + title: "Математика 8 класс", + owner: "Иванова Мария Ивановна", + isActive: false, }, { id: 13, - title: 'Математика 8 класс', - owner: 'emilnovikov392@gmail.com', + title: "Математика 8 класс", + owner: "emilnovikov392@gmail.com", isActive: false, }, ]; @@ -95,24 +95,29 @@ const LobbyMy: React.FC = observer(() => { function filterRooms() { if (isAuthenticated) { const myRooms: IRoom[] = rooms.filter((room) => { - return room.owner == user?.name + return room.owner == user?.name; }); - return myRooms + return myRooms; } } const myRooms: any = filterRooms(); - + + useEffect(() => { + if (localStorage.getItem("trigger") === "create") { + roomsFormState.openCreateForm(); + localStorage.removeItem("trigger"); + } + }, []); + return ( <> -
- - {roomsFormState.state === 'create' ? : - <> - } - {myRooms ? : <>Loading...} +
+ + {roomsFormState.state === "create" ? : <>} + {myRooms ? : <>Loading...} - ) -}) + ); +}); export default LobbyMy; diff --git a/src/shared/api/models.ts b/src/shared/api/models.ts index 6314b37..4e030de 100644 --- a/src/shared/api/models.ts +++ b/src/shared/api/models.ts @@ -11,14 +11,15 @@ export interface IFunction { title: string; description: string; link: string; + onClick?: () => void; } export interface IUser { - email: string, - email_verified: boolean, - name: string, - nickname: string, - picture: string, - sub: string, - updated_at: string, + email: string; + email_verified: boolean; + name: string; + nickname: string; + picture: string; + sub: string; + updated_at: string; } diff --git a/src/widgets/FunctionsList/functionsObject.tsx b/src/widgets/FunctionsList/functionsObject.tsx index bc5602f..b0d60b9 100644 --- a/src/widgets/FunctionsList/functionsObject.tsx +++ b/src/widgets/FunctionsList/functionsObject.tsx @@ -13,6 +13,9 @@ const functions: IFunction[] = [ title: "Новый класс", description: "Создать свой класс и провести занятие онлайн", link: "/lobby/my", + onClick: () => { + localStorage.setItem("trigger", "create"); + }, }, { icon: search, From ee9f36b0cfdd92bf450258bc3163d52cbd566e13 Mon Sep 17 00:00:00 2001 From: BodySites <100404530+BodySites@users.noreply.github.com> Date: Thu, 27 Jul 2023 22:42:22 +0600 Subject: [PATCH 05/47] fix bug with copyLink, add Lodash, add list of devices in JoinCall and fix layout, add features with microphone and camera --- package-lock.json | 12 ++ package.json | 2 + public/icons/copy-active.svg | 4 + src/app/App.tsx | 2 +- src/entities/room/ui/RoomCard.tsx | 4 +- src/features/Copy/ui/CopyLink.tsx | 2 +- .../DeviceSetting/ui/SelectDevice.tsx | 26 +++- .../DeviceSetting/ui/SwitchDevice.tsx | 18 ++- src/pages/CallPage.tsx | 10 -- src/pages/JoinCall/JoinCall.tsx | 77 ++++++++++-- src/pages/JoinCall/styles.module.css | 2 +- src/widgets/CheckDevices/CheckDevices.tsx | 117 ++++++++++++++++-- 12 files changed, 231 insertions(+), 45 deletions(-) create mode 100644 public/icons/copy-active.svg delete mode 100644 src/pages/CallPage.tsx diff --git a/package-lock.json b/package-lock.json index 560ce22..1b882d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,11 +10,13 @@ "dependencies": { "@auth0/auth0-react": "^2.1.1", "@jitsi/react-sdk": "^1.3.0", + "@types/lodash": "^4.14.196", "@types/react-webcam": "^3.0.0", "axios": "^1.4.0", "dotenv": "^16.3.1", "jest": "^29.5.0", "lib-jitsi-meet": "^1.0.6", + "lodash": "^4.17.21", "mobx": "^6.9.0", "mobx-react-lite": "^3.4.3", "react": "^18.2.0", @@ -3335,6 +3337,11 @@ "integrity": "sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==", "dev": true }, + "node_modules/@types/lodash": { + "version": "4.14.196", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.196.tgz", + "integrity": "sha512-22y3o88f4a94mKljsZcanlNWPzO0uBsBdzLAngf2tp533LzZcQzb6+eZPJ+vCTt+bqF2XnvT9gejTLsAcJAJyQ==" + }, "node_modules/@types/node": { "version": "20.3.3", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.3.3.tgz", @@ -7290,6 +7297,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", diff --git a/package.json b/package.json index e1936cf..50524cb 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,13 @@ "dependencies": { "@auth0/auth0-react": "^2.1.1", "@jitsi/react-sdk": "^1.3.0", + "@types/lodash": "^4.14.196", "@types/react-webcam": "^3.0.0", "axios": "^1.4.0", "dotenv": "^16.3.1", "jest": "^29.5.0", "lib-jitsi-meet": "^1.0.6", + "lodash": "^4.17.21", "mobx": "^6.9.0", "mobx-react-lite": "^3.4.3", "react": "^18.2.0", diff --git a/public/icons/copy-active.svg b/public/icons/copy-active.svg new file mode 100644 index 0000000..700e780 --- /dev/null +++ b/public/icons/copy-active.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/App.tsx b/src/app/App.tsx index 4041cfd..e2afe91 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -7,7 +7,7 @@ import Lobby from "../pages/Lobby/Lobby"; import LobbyAccess from "../pages/Lobby/LobbyAccess"; import LobbyMy from "../pages/Lobby/LobbyMy"; import JoinCall from "../pages/JoinCall/JoinCall"; -import CallPage from '../pages/CallPage/CallPage'; +import CallPage from "../pages/CallPage/CallPage"; import Loader from "../shared/ui/loader/Loader"; import { useAuth0 } from "@auth0/auth0-react"; diff --git a/src/entities/room/ui/RoomCard.tsx b/src/entities/room/ui/RoomCard.tsx index 7b1ea99..6fc2720 100644 --- a/src/entities/room/ui/RoomCard.tsx +++ b/src/entities/room/ui/RoomCard.tsx @@ -63,7 +63,7 @@ let Path = styled.path``; let Button = styled.button` transition: all 0.3s ease; - &:hover ${Path} { + &:hover path { stroke: var(--blue); } `; @@ -109,7 +109,7 @@ const RoomCard: React.FC = ({ room }) => { недоступен )} - + + {room.owner === user?.name ? ( + <> + + + + ) : ( + <> + )} - {room.owner === user?.name ? ( - <> - - - - ) : ( - <> - )} ); }; diff --git a/src/features/Call/ui/Call.tsx b/src/features/Call/ui/Call.tsx index 03f46b0..9c58856 100644 --- a/src/features/Call/ui/Call.tsx +++ b/src/features/Call/ui/Call.tsx @@ -22,7 +22,7 @@ export const Call: React.FC = () => { prejoinPageEnabled: false // If false: Auto join }} interfaceConfigOverwrite={{ - DISABLE_JOIN_LEAVE_NOTIFICATIONS: true + DISABLE_JOIN_LEAVE_NOTIFICATIONS: false }} getIFrameRef={(iframeRef) => { iframeRef.style.height = "100vh"; diff --git a/src/features/MicrophoneController/index.ts b/src/features/MicrophoneController/index.ts new file mode 100644 index 0000000..f37aae5 --- /dev/null +++ b/src/features/MicrophoneController/index.ts @@ -0,0 +1 @@ +export { MicrophoneController } from './ui/MicrophoneController'; \ No newline at end of file diff --git a/src/features/MicrophoneController/ui/MicrophoneController.tsx b/src/features/MicrophoneController/ui/MicrophoneController.tsx new file mode 100644 index 0000000..89bd119 --- /dev/null +++ b/src/features/MicrophoneController/ui/MicrophoneController.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +export const MicrophoneController: React.FC = () => { + return ( +
MicrophoneController
+ ) +} diff --git a/src/pages/CallPage/CallPage.tsx b/src/pages/CallPage/CallPage.tsx index 63ea1fd..ba5ff9c 100644 --- a/src/pages/CallPage/CallPage.tsx +++ b/src/pages/CallPage/CallPage.tsx @@ -1,10 +1,19 @@ import React from 'react'; import { Call } from '../../features/Call'; +import ControllersWrapper from '../../widgets/layout/ControllersWrapper'; +import { MicrophoneController } from '../../features/MicrophoneController'; const CallPage: React.FC = () => { return (
+ +
+ +
+
+
+
) } diff --git a/src/widgets/layout/ControllersWrapper.tsx b/src/widgets/layout/ControllersWrapper.tsx new file mode 100644 index 0000000..ce1c674 --- /dev/null +++ b/src/widgets/layout/ControllersWrapper.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import styled from 'styled-components'; + +const Container = styled.div` + width: 100%; + padding: 20px 0; + background-color: var(--bg); +` + +const Content = styled.div` + width: 100%; + max-width: 1440px; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; +` + +interface Props { + children?: React.ReactNode, +} + +const ControllersWrapper: React.FC = ({ children }) => { + return ( + + + {children} + + + ) +} + +export default ControllersWrapper \ No newline at end of file From e9f5a974f87e40b13764e37fcb861d26d2e7c600 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 29 Jul 2023 19:05:07 +0600 Subject: [PATCH 09/47] layout features microphone controller --- .../ui/MicrophoneController.tsx | 40 ++++++++++++++++++- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/src/features/MicrophoneController/ui/MicrophoneController.tsx b/src/features/MicrophoneController/ui/MicrophoneController.tsx index 89bd119..ec2dc68 100644 --- a/src/features/MicrophoneController/ui/MicrophoneController.tsx +++ b/src/features/MicrophoneController/ui/MicrophoneController.tsx @@ -1,7 +1,43 @@ -import React from 'react'; +import React, { useState } from 'react'; +import styled from 'styled-components'; + +const Controller = styled.button` + display: flex; + width: 46px; + height: 46px; + justify-content: center; + align-items: center; + border-radius: 8px; + background: var(--white); + box-shadow: 0px 0px 2px 0px #C5CCD5; +` export const MicrophoneController: React.FC = () => { + const [active, setActive] = useState(true); + + function changeActive() { + setActive(!active); + } + return ( -
MicrophoneController
+ + {active ? + + + + + + + : + + + + + + + + + } + ) } From c3cbed350ceb8089174bff9868a0eb3a3e721e20 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 29 Jul 2023 21:31:06 +0600 Subject: [PATCH 10/47] layout features leave call button --- src/features/LeaveCall/index.ts | 1 + src/features/LeaveCall/ui/LeaveCall.tsx | 25 +++++++++++++++++++++++++ src/pages/CallPage/CallPage.tsx | 3 ++- 3 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 src/features/LeaveCall/index.ts create mode 100644 src/features/LeaveCall/ui/LeaveCall.tsx diff --git a/src/features/LeaveCall/index.ts b/src/features/LeaveCall/index.ts new file mode 100644 index 0000000..bc32f43 --- /dev/null +++ b/src/features/LeaveCall/index.ts @@ -0,0 +1 @@ +export { LeaveCall } from './ui/LeaveCall'; \ No newline at end of file diff --git a/src/features/LeaveCall/ui/LeaveCall.tsx b/src/features/LeaveCall/ui/LeaveCall.tsx new file mode 100644 index 0000000..c13ae78 --- /dev/null +++ b/src/features/LeaveCall/ui/LeaveCall.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import styled from 'styled-components'; + +const Button = styled.button` + display: flex; + width: 46px; + height: 46px; + justify-content: center; + align-items: center; + border-radius: 8px; + background-color: var(--red); + box-shadow: 0px 0px 2px 0px #C5CCD5; +` + +export const LeaveCall: React.FC = () => { + return ( + + ) +} diff --git a/src/pages/CallPage/CallPage.tsx b/src/pages/CallPage/CallPage.tsx index ba5ff9c..217b21a 100644 --- a/src/pages/CallPage/CallPage.tsx +++ b/src/pages/CallPage/CallPage.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Call } from '../../features/Call'; import ControllersWrapper from '../../widgets/layout/ControllersWrapper'; import { MicrophoneController } from '../../features/MicrophoneController'; +import { LeaveCall } from '../../features/LeaveCall'; const CallPage: React.FC = () => { return ( @@ -12,7 +13,7 @@ const CallPage: React.FC = () => {
-
+ ) From c8638316a681500a6bcbcb62da3b0fe926cab225 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 29 Jul 2023 21:39:03 +0600 Subject: [PATCH 11/47] add controller layout --- src/features/LeaveCall/ui/LeaveCall.tsx | 17 ++--------- .../ui/MicrophoneController.tsx | 17 ++--------- src/widgets/layout/ControllerLayout.tsx | 28 +++++++++++++++++++ 3 files changed, 34 insertions(+), 28 deletions(-) create mode 100644 src/widgets/layout/ControllerLayout.tsx diff --git a/src/features/LeaveCall/ui/LeaveCall.tsx b/src/features/LeaveCall/ui/LeaveCall.tsx index c13ae78..2e22edd 100644 --- a/src/features/LeaveCall/ui/LeaveCall.tsx +++ b/src/features/LeaveCall/ui/LeaveCall.tsx @@ -1,25 +1,14 @@ import React from 'react'; -import styled from 'styled-components'; - -const Button = styled.button` - display: flex; - width: 46px; - height: 46px; - justify-content: center; - align-items: center; - border-radius: 8px; - background-color: var(--red); - box-shadow: 0px 0px 2px 0px #C5CCD5; -` +import ControllerLayout from '../../../widgets/layout/ControllerLayout'; export const LeaveCall: React.FC = () => { return ( - + ) } diff --git a/src/features/MicrophoneController/ui/MicrophoneController.tsx b/src/features/MicrophoneController/ui/MicrophoneController.tsx index ec2dc68..3ed9626 100644 --- a/src/features/MicrophoneController/ui/MicrophoneController.tsx +++ b/src/features/MicrophoneController/ui/MicrophoneController.tsx @@ -1,16 +1,5 @@ import React, { useState } from 'react'; -import styled from 'styled-components'; - -const Controller = styled.button` - display: flex; - width: 46px; - height: 46px; - justify-content: center; - align-items: center; - border-radius: 8px; - background: var(--white); - box-shadow: 0px 0px 2px 0px #C5CCD5; -` +import ControllerLayout from '../../../widgets/layout/ControllerLayout'; export const MicrophoneController: React.FC = () => { const [active, setActive] = useState(true); @@ -20,7 +9,7 @@ export const MicrophoneController: React.FC = () => { } return ( - + {active ? @@ -38,6 +27,6 @@ export const MicrophoneController: React.FC = () => { } - + ) } diff --git a/src/widgets/layout/ControllerLayout.tsx b/src/widgets/layout/ControllerLayout.tsx new file mode 100644 index 0000000..6acb30e --- /dev/null +++ b/src/widgets/layout/ControllerLayout.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import styled from 'styled-components'; + +const Button = styled.button` + display: flex; + width: 46px; + height: 46px; + justify-content: center; + align-items: center; + border-radius: 8px; + background-color: var(--white); + box-shadow: 0px 0px 2px 0px #C5CCD5; +` + +interface Props { + children?: React.ReactNode, + onClick?: () => void, + bg?: string, +} + + +const ControllerLayout: React.FC = ({ children, onClick, bg }) => { + return ( + + ) +} + +export default ControllerLayout; From fd06c905f8c6eb350224e732736667540687b677 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 29 Jul 2023 22:27:57 +0600 Subject: [PATCH 12/47] layout feature camera controller --- src/features/CameraController/index.ts | 1 + .../CameraController/ui/CameraController.tsx | 28 +++++++++++++++++++ src/pages/CallPage/CallPage.tsx | 21 ++++++++++++-- 3 files changed, 47 insertions(+), 3 deletions(-) create mode 100644 src/features/CameraController/index.ts create mode 100644 src/features/CameraController/ui/CameraController.tsx diff --git a/src/features/CameraController/index.ts b/src/features/CameraController/index.ts new file mode 100644 index 0000000..b3ac8db --- /dev/null +++ b/src/features/CameraController/index.ts @@ -0,0 +1 @@ +export { CameraController } from './ui/CameraController'; \ No newline at end of file diff --git a/src/features/CameraController/ui/CameraController.tsx b/src/features/CameraController/ui/CameraController.tsx new file mode 100644 index 0000000..a79547f --- /dev/null +++ b/src/features/CameraController/ui/CameraController.tsx @@ -0,0 +1,28 @@ +import React, { useState } from 'react'; +import ControllerLayout from '../../../widgets/layout/ControllerLayout'; + +export const CameraController: React.FC = () => { + const [active, setActive] = useState(true); + + function changeActive() { + setActive(!active); + } + + return ( + + {active ? + + + + + : + + + + + + + } + + ) +} diff --git a/src/pages/CallPage/CallPage.tsx b/src/pages/CallPage/CallPage.tsx index 217b21a..501d4cf 100644 --- a/src/pages/CallPage/CallPage.tsx +++ b/src/pages/CallPage/CallPage.tsx @@ -1,18 +1,33 @@ import React from 'react'; +import styled from 'styled-components'; import { Call } from '../../features/Call'; import ControllersWrapper from '../../widgets/layout/ControllersWrapper'; import { MicrophoneController } from '../../features/MicrophoneController'; +import { CameraController } from '../../features/CameraController'; import { LeaveCall } from '../../features/LeaveCall'; +const Left = styled.div` + display: flex; + gap: 20px; + justify-content: space-between; +` + +const Center = styled.div` + display: flex; + gap: 20px; + justify-content: space-between; +` + const CallPage: React.FC = () => { return (
-
+ -
-
+ + +
From 075b36a68b3695c54c49453194722e758fb31ef1 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 29 Jul 2023 23:26:18 +0600 Subject: [PATCH 13/47] layout feature record controller --- src/features/RecordController/index.ts | 1 + .../RecordController/ui/RecordController.tsx | 26 +++++++++++++++++++ src/pages/CallPage/CallPage.tsx | 5 +++- 3 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 src/features/RecordController/index.ts create mode 100644 src/features/RecordController/ui/RecordController.tsx diff --git a/src/features/RecordController/index.ts b/src/features/RecordController/index.ts new file mode 100644 index 0000000..6be8f55 --- /dev/null +++ b/src/features/RecordController/index.ts @@ -0,0 +1 @@ +export { RecordController } from './ui/RecordController'; \ No newline at end of file diff --git a/src/features/RecordController/ui/RecordController.tsx b/src/features/RecordController/ui/RecordController.tsx new file mode 100644 index 0000000..49ed569 --- /dev/null +++ b/src/features/RecordController/ui/RecordController.tsx @@ -0,0 +1,26 @@ +import React, { useState } from 'react'; +import ControllerLayout from '../../../widgets/layout/ControllerLayout'; + +export const RecordController: React.FC = () => { + const [active, setActive] = useState(false); + + function changeActive() { + setActive(!active); + } + + return ( + + {active ? + + + + + : + + + + + } + + ) +} diff --git a/src/pages/CallPage/CallPage.tsx b/src/pages/CallPage/CallPage.tsx index 501d4cf..5260138 100644 --- a/src/pages/CallPage/CallPage.tsx +++ b/src/pages/CallPage/CallPage.tsx @@ -4,6 +4,7 @@ import { Call } from '../../features/Call'; import ControllersWrapper from '../../widgets/layout/ControllersWrapper'; import { MicrophoneController } from '../../features/MicrophoneController'; import { CameraController } from '../../features/CameraController'; +import { RecordController } from '../../features/RecordController'; import { LeaveCall } from '../../features/LeaveCall'; const Left = styled.div` @@ -27,7 +28,9 @@ const CallPage: React.FC = () => { -
+
+ +
From 0bfb71284564c8ff509eeddcbf141b433779d691 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 29 Jul 2023 23:29:43 +0600 Subject: [PATCH 14/47] layout feature hand controller --- src/features/HandController/index.ts | 0 .../HandController/ui/HandController.tsx | 30 +++++++++++++++++++ src/pages/CallPage/CallPage.tsx | 4 +++ 3 files changed, 34 insertions(+) create mode 100644 src/features/HandController/index.ts create mode 100644 src/features/HandController/ui/HandController.tsx diff --git a/src/features/HandController/index.ts b/src/features/HandController/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/features/HandController/ui/HandController.tsx b/src/features/HandController/ui/HandController.tsx new file mode 100644 index 0000000..9d7eebb --- /dev/null +++ b/src/features/HandController/ui/HandController.tsx @@ -0,0 +1,30 @@ +import React, { useState } from 'react'; +import ControllerLayout from '../../../widgets/layout/ControllerLayout'; + +export const HandController: React.FC = () => { + const [active, setActive] = useState(false); + + function changeActive() { + setActive(!active); + } + + return ( + + {active ? + + + + + + + : + + + + + + + } + + ) +} diff --git a/src/pages/CallPage/CallPage.tsx b/src/pages/CallPage/CallPage.tsx index 5260138..15cbc67 100644 --- a/src/pages/CallPage/CallPage.tsx +++ b/src/pages/CallPage/CallPage.tsx @@ -6,6 +6,7 @@ import { MicrophoneController } from '../../features/MicrophoneController'; import { CameraController } from '../../features/CameraController'; import { RecordController } from '../../features/RecordController'; import { LeaveCall } from '../../features/LeaveCall'; +import { HandController } from '../../features/HandController/ui/HandController'; const Left = styled.div` display: flex; @@ -29,7 +30,10 @@ const CallPage: React.FC = () => {
+ + <> + <>
From a2045f3a9b8c7b384d3336a0364ee887bc0e48ec Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 30 Jul 2023 01:50:33 +0600 Subject: [PATCH 15/47] layout feature screen controller --- src/features/ScreenController/index.ts | 1 + .../ScreenController/ui/ScreenController.tsx | 30 +++++++++++++++++++ src/pages/CallPage/CallPage.tsx | 3 +- 3 files changed, 33 insertions(+), 1 deletion(-) create mode 100644 src/features/ScreenController/index.ts create mode 100644 src/features/ScreenController/ui/ScreenController.tsx diff --git a/src/features/ScreenController/index.ts b/src/features/ScreenController/index.ts new file mode 100644 index 0000000..6be23cf --- /dev/null +++ b/src/features/ScreenController/index.ts @@ -0,0 +1 @@ +export { ScreenController } from './ui/ScreenController'; \ No newline at end of file diff --git a/src/features/ScreenController/ui/ScreenController.tsx b/src/features/ScreenController/ui/ScreenController.tsx new file mode 100644 index 0000000..4e3c990 --- /dev/null +++ b/src/features/ScreenController/ui/ScreenController.tsx @@ -0,0 +1,30 @@ +import React, { useState } from 'react'; +import ControllerLayout from '../../../widgets/layout/ControllerLayout'; + +export const ScreenController: React.FC = () => { + const [active, setActive] = useState(false); + + function changeActive() { + setActive(!active); + } + + return ( + + {active ? + + + + + + + : + + + + + + + } + + ) +} diff --git a/src/pages/CallPage/CallPage.tsx b/src/pages/CallPage/CallPage.tsx index 15cbc67..c288111 100644 --- a/src/pages/CallPage/CallPage.tsx +++ b/src/pages/CallPage/CallPage.tsx @@ -7,6 +7,7 @@ import { CameraController } from '../../features/CameraController'; import { RecordController } from '../../features/RecordController'; import { LeaveCall } from '../../features/LeaveCall'; import { HandController } from '../../features/HandController/ui/HandController'; +import { ScreenController } from '../../features/ScreenController'; const Left = styled.div` display: flex; @@ -31,7 +32,7 @@ const CallPage: React.FC = () => {
- <> + <>
From 48d8044af4a88d02b7f8c347d8fbffe09c62ecf8 Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 30 Jul 2023 01:55:58 +0600 Subject: [PATCH 16/47] layout feature menu controller --- src/features/ControllersMenu/index.ts | 1 + src/features/ControllersMenu/ui/MenuController.tsx | 14 ++++++++++++++ src/pages/CallPage/CallPage.tsx | 5 +++-- 3 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 src/features/ControllersMenu/index.ts create mode 100644 src/features/ControllersMenu/ui/MenuController.tsx diff --git a/src/features/ControllersMenu/index.ts b/src/features/ControllersMenu/index.ts new file mode 100644 index 0000000..d14d9b9 --- /dev/null +++ b/src/features/ControllersMenu/index.ts @@ -0,0 +1 @@ +export { MenuController } from './ui/MenuController'; \ No newline at end of file diff --git a/src/features/ControllersMenu/ui/MenuController.tsx b/src/features/ControllersMenu/ui/MenuController.tsx new file mode 100644 index 0000000..9460c94 --- /dev/null +++ b/src/features/ControllersMenu/ui/MenuController.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import ControllerLayout from '../../../widgets/layout/ControllerLayout'; + +export const MenuController: React.FC = () => { + return ( + + + + + + + + ) +} diff --git a/src/pages/CallPage/CallPage.tsx b/src/pages/CallPage/CallPage.tsx index c288111..73bf72f 100644 --- a/src/pages/CallPage/CallPage.tsx +++ b/src/pages/CallPage/CallPage.tsx @@ -5,9 +5,10 @@ import ControllersWrapper from '../../widgets/layout/ControllersWrapper'; import { MicrophoneController } from '../../features/MicrophoneController'; import { CameraController } from '../../features/CameraController'; import { RecordController } from '../../features/RecordController'; -import { LeaveCall } from '../../features/LeaveCall'; import { HandController } from '../../features/HandController/ui/HandController'; import { ScreenController } from '../../features/ScreenController'; +import { MenuController } from '../../features/ControllersMenu'; +import { LeaveCall } from '../../features/LeaveCall'; const Left = styled.div` display: flex; @@ -34,7 +35,7 @@ const CallPage: React.FC = () => { - <> + From f105db131c0ed354cb3dd780bc999b5439e3ca48 Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 30 Jul 2023 01:59:20 +0600 Subject: [PATCH 17/47] layout widget call controllers --- src/pages/CallPage/CallPage.tsx | 36 ++-------------------------- src/widgets/CallControllers.tsx | 42 +++++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 34 deletions(-) create mode 100644 src/widgets/CallControllers.tsx diff --git a/src/pages/CallPage/CallPage.tsx b/src/pages/CallPage/CallPage.tsx index 73bf72f..abe2254 100644 --- a/src/pages/CallPage/CallPage.tsx +++ b/src/pages/CallPage/CallPage.tsx @@ -1,44 +1,12 @@ import React from 'react'; -import styled from 'styled-components'; import { Call } from '../../features/Call'; -import ControllersWrapper from '../../widgets/layout/ControllersWrapper'; -import { MicrophoneController } from '../../features/MicrophoneController'; -import { CameraController } from '../../features/CameraController'; -import { RecordController } from '../../features/RecordController'; -import { HandController } from '../../features/HandController/ui/HandController'; -import { ScreenController } from '../../features/ScreenController'; -import { MenuController } from '../../features/ControllersMenu'; -import { LeaveCall } from '../../features/LeaveCall'; - -const Left = styled.div` - display: flex; - gap: 20px; - justify-content: space-between; -` - -const Center = styled.div` - display: flex; - gap: 20px; - justify-content: space-between; -` +import CallControllers from '../../widgets/CallControllers'; const CallPage: React.FC = () => { return (
- - - - - -
- - - - -
- - +
) } diff --git a/src/widgets/CallControllers.tsx b/src/widgets/CallControllers.tsx new file mode 100644 index 0000000..d7c4a1f --- /dev/null +++ b/src/widgets/CallControllers.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import styled from 'styled-components'; +import ControllersWrapper from './layout/ControllersWrapper'; +import { MicrophoneController } from '../features/MicrophoneController'; +import { CameraController } from '../features/CameraController'; +import { RecordController } from '../features/RecordController'; +import { HandController } from '../features/HandController/ui/HandController'; +import { ScreenController } from '../features/ScreenController'; +import { MenuController } from '../features/ControllersMenu'; +import { LeaveCall } from '../features/LeaveCall'; + +const Left = styled.div` + display: flex; + gap: 20px; + justify-content: space-between; +` + +const Center = styled.div` + display: flex; + gap: 20px; + justify-content: space-between; +` + +const CallControllers: React.FC = () => { + return ( + + + + + +
+ + + + +
+ + + ) +} + +export default CallControllers \ No newline at end of file From 39855aa7599d2c1437d4bb6fa6b9a7c3dedb67a0 Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 30 Jul 2023 15:02:35 +0600 Subject: [PATCH 18/47] add api to dotenv --- .env.development | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.env.development b/.env.development index 5ffbff6..af204ff 100644 --- a/.env.development +++ b/.env.development @@ -1,2 +1,3 @@ VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com" -VITE_AUTH0_CLIENT_ID="BOU97TMrp85ftAnrXSLTiYYiuifp9jfz" \ No newline at end of file +VITE_AUTH0_CLIENT_ID="BOU97TMrp85ftAnrXSLTiYYiuifp9jfz" +API="http://127.0.0.1:5000" \ No newline at end of file From f49d342561dfe14f4a9832463ad46b882fd4824d Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 30 Jul 2023 15:23:30 +0600 Subject: [PATCH 19/47] layout lobby forms --- src/features/createRoom/ui/CreateRoomForm.tsx | 35 ++++++++++------ src/features/editRoom/ui/EditRoomForm.tsx | 41 +++++++++++-------- src/widgets/layout/LobbyFormLayout.tsx | 3 -- 3 files changed, 47 insertions(+), 32 deletions(-) diff --git a/src/features/createRoom/ui/CreateRoomForm.tsx b/src/features/createRoom/ui/CreateRoomForm.tsx index 77010da..7e7102b 100644 --- a/src/features/createRoom/ui/CreateRoomForm.tsx +++ b/src/features/createRoom/ui/CreateRoomForm.tsx @@ -6,6 +6,13 @@ import SwitchToggle from '../../../shared/ui/switchToggle/SwitchToggle'; import FormButton from '../../../shared/ui/formButton/FormButton'; import addImageIcon from '../../../../public/icons/gallery-add.svg'; +const Form = styled.form` + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; +` + const Info = styled.div` display: flex; gap: 24px; @@ -40,19 +47,21 @@ const Text = styled.p` export const CreateRoomForm: React.FC = () => { return ( - - - установить аватар - - - -
- - - Ваш класс будет виден всем пользователям приложения - -
- Создать +
+ + + установить аватар + + + +
+ + + Ваш класс будет виден всем пользователям приложения + +
+ Создать +
) } \ No newline at end of file diff --git a/src/features/editRoom/ui/EditRoomForm.tsx b/src/features/editRoom/ui/EditRoomForm.tsx index 6f13c41..eb29068 100644 --- a/src/features/editRoom/ui/EditRoomForm.tsx +++ b/src/features/editRoom/ui/EditRoomForm.tsx @@ -7,6 +7,13 @@ import FormButton from '../../../shared/ui/formButton/FormButton'; import avatar from '../../../../public/icons/avatar.svg'; import deleteIcon from '../../../../public/icons/delete.svg'; +const Form = styled.form` + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; +` + const Info = styled.div` display: flex; gap: 24px; @@ -49,22 +56,24 @@ const Buttons = styled.div` export const EditRoomForm: React.FC = () => { return ( - - - аватар - - - -
- - - Ваш класс будет виден всем пользователям приложения - -
- - Сохранить - - +
+ + + аватар + + + +
+ + + Ваш класс будет виден всем пользователям приложения + +
+ + Сохранить + + +
) } diff --git a/src/widgets/layout/LobbyFormLayout.tsx b/src/widgets/layout/LobbyFormLayout.tsx index cc22c59..b0df905 100644 --- a/src/widgets/layout/LobbyFormLayout.tsx +++ b/src/widgets/layout/LobbyFormLayout.tsx @@ -3,11 +3,8 @@ import styled from 'styled-components'; const Container = styled.form` position: relative; - display: flex; width: calc(100% - 20px); max-width: 1196px; - justify-content: space-between; - align-items: center; padding: 24px; border-radius: 10px; background: var(--white); From 3d50c3f820f0d0c5c5b9dcbae6bb4a248ed08593 Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 30 Jul 2023 15:43:15 +0600 Subject: [PATCH 20/47] intergate create func and fix api --- .env.development | 2 +- src/features/createRoom/model/create.ts | 5 +++++ src/features/createRoom/ui/CreateRoomForm.tsx | 3 ++- src/widgets/layout/LobbyFormLayout.tsx | 2 +- 4 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 src/features/createRoom/model/create.ts diff --git a/.env.development b/.env.development index af204ff..5298fed 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,3 @@ VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com" VITE_AUTH0_CLIENT_ID="BOU97TMrp85ftAnrXSLTiYYiuifp9jfz" -API="http://127.0.0.1:5000" \ No newline at end of file +VITE_API="http://127.0.0.1:5000" \ No newline at end of file diff --git a/src/features/createRoom/model/create.ts b/src/features/createRoom/model/create.ts new file mode 100644 index 0000000..a43a2d8 --- /dev/null +++ b/src/features/createRoom/model/create.ts @@ -0,0 +1,5 @@ +export const Create = (event: React.SyntheticEvent): void => { + event.preventDefault(); + const API = import.meta.env.VITE_API; + console.log(API); +} diff --git a/src/features/createRoom/ui/CreateRoomForm.tsx b/src/features/createRoom/ui/CreateRoomForm.tsx index 7e7102b..5aa1da9 100644 --- a/src/features/createRoom/ui/CreateRoomForm.tsx +++ b/src/features/createRoom/ui/CreateRoomForm.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { Create } from '../model/create'; import styled from 'styled-components'; import LobbyFormLayout from '../../../widgets/layout/LobbyFormLayout'; import Input from '../../../shared/ui/Input'; @@ -47,7 +48,7 @@ const Text = styled.p` export const CreateRoomForm: React.FC = () => { return ( -
+ установить аватар diff --git a/src/widgets/layout/LobbyFormLayout.tsx b/src/widgets/layout/LobbyFormLayout.tsx index b0df905..32fc969 100644 --- a/src/widgets/layout/LobbyFormLayout.tsx +++ b/src/widgets/layout/LobbyFormLayout.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; -const Container = styled.form` +const Container = styled.div` position: relative; width: calc(100% - 20px); max-width: 1196px; From 38c10eab7390f851bdbe29c8316fa0e96487696a Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 31 Jul 2023 02:40:45 +0600 Subject: [PATCH 21/47] add creating room feature --- .env.development | 2 +- src/features/createRoom/model/create.ts | 5 ---- src/features/createRoom/model/index.ts | 23 +++++++++++++++++++ src/features/createRoom/ui/CreateRoomForm.tsx | 19 +++++++++++---- src/shared/api/models.ts | 5 +++- src/shared/ui/Input.tsx | 7 +++--- src/shared/ui/switchToggle/SwitchToggle.tsx | 23 +++++++++---------- 7 files changed, 57 insertions(+), 27 deletions(-) delete mode 100644 src/features/createRoom/model/create.ts create mode 100644 src/features/createRoom/model/index.ts diff --git a/.env.development b/.env.development index 5298fed..9143122 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,3 @@ VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com" VITE_AUTH0_CLIENT_ID="BOU97TMrp85ftAnrXSLTiYYiuifp9jfz" -VITE_API="http://127.0.0.1:5000" \ No newline at end of file +VITE_API='http://194.67.74.187:5000' \ No newline at end of file diff --git a/src/features/createRoom/model/create.ts b/src/features/createRoom/model/create.ts deleted file mode 100644 index a43a2d8..0000000 --- a/src/features/createRoom/model/create.ts +++ /dev/null @@ -1,5 +0,0 @@ -export const Create = (event: React.SyntheticEvent): void => { - event.preventDefault(); - const API = import.meta.env.VITE_API; - console.log(API); -} diff --git a/src/features/createRoom/model/index.ts b/src/features/createRoom/model/index.ts new file mode 100644 index 0000000..c13b37c --- /dev/null +++ b/src/features/createRoom/model/index.ts @@ -0,0 +1,23 @@ +export const CreateThunk= (event: any, title: string, isPublic: boolean) => { + event.preventDefault(); + const API = String(import.meta.env.VITE_API); + + const newRoom = { + name: title, + public: isPublic, + owner_id: 1 + } + + fetch(`${API}/channels`, { + method : 'POST', + headers: { + 'Content-type': 'application/json', + }, + body : JSON.stringify(newRoom), + }) + .then(response => response.text()) + .then(response => { + response = JSON.parse(response); + console.log(response); + }) +} diff --git a/src/features/createRoom/ui/CreateRoomForm.tsx b/src/features/createRoom/ui/CreateRoomForm.tsx index 5aa1da9..5d65e0d 100644 --- a/src/features/createRoom/ui/CreateRoomForm.tsx +++ b/src/features/createRoom/ui/CreateRoomForm.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import { Create } from '../model/create'; +import React, { useState } from 'react'; +import { CreateThunk } from '../model'; import styled from 'styled-components'; import LobbyFormLayout from '../../../widgets/layout/LobbyFormLayout'; import Input from '../../../shared/ui/Input'; @@ -46,17 +46,26 @@ const Text = styled.p` ` export const CreateRoomForm: React.FC = () => { + const [title, setTitle] = useState(''); + const [isPublic, setIsPublic] = useState(true); + + function create(event: any) { + CreateThunk(event, title, isPublic); + } + + + return ( - + установить аватар - + setTitle(e.target.value)}/>
- + setIsPublic(!isPublic)}/> Ваш класс будет виден всем пользователям приложения diff --git a/src/shared/api/models.ts b/src/shared/api/models.ts index 4e030de..f470fc4 100644 --- a/src/shared/api/models.ts +++ b/src/shared/api/models.ts @@ -1,8 +1,11 @@ export interface IRoom { id: number; title: string; + public: boolean; owner: string; - isActive: boolean; + isPublic: boolean; + url: string, + photo_url: string, } export interface IFunction { diff --git a/src/shared/ui/Input.tsx b/src/shared/ui/Input.tsx index f27a368..6048d5c 100644 --- a/src/shared/ui/Input.tsx +++ b/src/shared/ui/Input.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { ChangeEventHandler } from 'react'; import styled from 'styled-components'; const InputStyled = styled.input` @@ -14,11 +14,12 @@ interface Props { placeholder?: string, type?: string, value?: string, + onChange?: ChangeEventHandler, } -const Input: React.FC = ({ placeholder, type, value }) => { +const Input: React.FC = ({ placeholder, type, value, onChange }) => { return ( - + ) } diff --git a/src/shared/ui/switchToggle/SwitchToggle.tsx b/src/shared/ui/switchToggle/SwitchToggle.tsx index 651e825..3249eb4 100644 --- a/src/shared/ui/switchToggle/SwitchToggle.tsx +++ b/src/shared/ui/switchToggle/SwitchToggle.tsx @@ -1,26 +1,25 @@ -import React, { useState } from 'react'; +import React from 'react'; import styles from './styles.module.css'; import openIcon from '../../../../public/icons/open.svg'; import closeIcon from '../../../../public/icons/close.svg'; -const SwitchToggle: React.FC = () => { - const [toggleValue, setToggleValue] = useState(true); +interface Props { + value?: boolean, + onClick?: () => void, +} - function changeToggleValue() { - setToggleValue(!toggleValue); - console.log(toggleValue); - } +const SwitchToggle: React.FC = ({ value, onClick }) => { return ( - ) } From afe99c1ca90dbcd3e4ccd839a34eb2509a2b5abe Mon Sep 17 00:00:00 2001 From: BodySites <100404530+BodySites@users.noreply.github.com> Date: Tue, 1 Aug 2023 15:16:31 +0600 Subject: [PATCH 22/47] change layout of Back button, add highlight when the microphone is activated --- public/icons/arrow-left-active.svg | 4 + public/icons/arrow-left.svg | 4 + ...-angle-programming-file-bracket-active.svg | 5 - ...t--code-angle-programming-file-bracket.svg | 5 - public/icons/micro.svg | 15 ++ src/features/Back/ui/BackButton.tsx | 8 +- src/pages/JoinCall/JoinCall.tsx | 26 +++- src/widgets/CheckDevices/CheckDevices.tsx | 138 ++++++++++-------- 8 files changed, 127 insertions(+), 78 deletions(-) create mode 100644 public/icons/arrow-left-active.svg create mode 100644 public/icons/arrow-left.svg delete mode 100644 public/icons/bracket--code-angle-programming-file-bracket-active.svg delete mode 100644 public/icons/bracket--code-angle-programming-file-bracket.svg create mode 100644 public/icons/micro.svg diff --git a/public/icons/arrow-left-active.svg b/public/icons/arrow-left-active.svg new file mode 100644 index 0000000..4c6ab5d --- /dev/null +++ b/public/icons/arrow-left-active.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icons/arrow-left.svg b/public/icons/arrow-left.svg new file mode 100644 index 0000000..ef95feb --- /dev/null +++ b/public/icons/arrow-left.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icons/bracket--code-angle-programming-file-bracket-active.svg b/public/icons/bracket--code-angle-programming-file-bracket-active.svg deleted file mode 100644 index fd646a9..0000000 --- a/public/icons/bracket--code-angle-programming-file-bracket-active.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/public/icons/bracket--code-angle-programming-file-bracket.svg b/public/icons/bracket--code-angle-programming-file-bracket.svg deleted file mode 100644 index 224c016..0000000 --- a/public/icons/bracket--code-angle-programming-file-bracket.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/public/icons/micro.svg b/public/icons/micro.svg new file mode 100644 index 0000000..7d264f1 --- /dev/null +++ b/public/icons/micro.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/features/Back/ui/BackButton.tsx b/src/features/Back/ui/BackButton.tsx index 7193046..99ed38a 100644 --- a/src/features/Back/ui/BackButton.tsx +++ b/src/features/Back/ui/BackButton.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import styled from "styled-components"; -import back from "../../../../public/icons/bracket--code-angle-programming-file-bracket.svg"; -import backActive from "../../../../public/icons/bracket--code-angle-programming-file-bracket-active.svg"; +import back from "../../../../public/icons/arrow-left.svg"; +import backActive from "../../../../public/icons/arrow-left-active.svg"; import { useNavigate } from "react-router-dom"; const Container = styled.a` @@ -21,8 +21,8 @@ const Container = styled.a` `; const Icon = styled.img` - width: 20px; - height: 20px; + width: 26px; + height: 26px; `; const Text = styled.div` diff --git a/src/pages/JoinCall/JoinCall.tsx b/src/pages/JoinCall/JoinCall.tsx index 14657bf..58e7b81 100644 --- a/src/pages/JoinCall/JoinCall.tsx +++ b/src/pages/JoinCall/JoinCall.tsx @@ -5,6 +5,7 @@ import { styled } from "styled-components"; import { BackButton } from "../../features/Back"; import CheckDevices from "../../widgets/CheckDevices/CheckDevices"; import avatar from "../../../public/icons/avatar.svg"; +import audio from "../../../public/icons/micro.svg"; import styles from "./styles.module.css"; import { CopyLink } from "../../features/Copy"; import EnterButton from "../../shared/ui/EnterButton"; @@ -51,6 +52,7 @@ const JoinCall: React.FC = () => { const [stateEnter, setStateEnter] = useState("Занятие началось"); const [devices, setDevices] = useState(devicesObj); const [isLoading, setLoading] = useState(true); + const [speak, setSpeak] = useState(false); console.log(setStateEnter); @@ -101,6 +103,10 @@ const JoinCall: React.FC = () => { location.href = `/lesson/${id}`; } + function onSpeak(speaking: boolean) { + speaking ? setSpeak(true) : setSpeak(false); + } + return (
@@ -108,8 +114,24 @@ const JoinCall: React.FC = () => {
-
- +
+ +
{isLoading ? ( diff --git a/src/widgets/CheckDevices/CheckDevices.tsx b/src/widgets/CheckDevices/CheckDevices.tsx index 7f09bfc..2ddbe81 100644 --- a/src/widgets/CheckDevices/CheckDevices.tsx +++ b/src/widgets/CheckDevices/CheckDevices.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import Webcam from "react-webcam"; import cameraOn from "../../../public/icons/videocamera-on.svg"; import cameraOff from "../../../public/icons/videocamera-off.svg"; @@ -32,14 +32,88 @@ const SwitchBlock = styled.div` let micro: string | null = localStorage.getItem("microphone"); let cam: string | null = localStorage.getItem("camera"); +let audioStream: MediaStream; +let volumeInterval: NodeJS.Timer | undefined; +let analyser: AnalyserNode; -const CheckDevices: React.FC = () => { +const CheckDevices: React.FC<{ onSpeak: Function }> = ({ onSpeak }) => { const webcam = useRef(null); const [microphone, setMicrophone] = useState( micro ? JSON.parse(micro) : true ); const [camera, setCamera] = useState(cam ? JSON.parse(cam) : true); + useEffect(() => { + getAudio(); + volumeInterval = setInterval(handleAudioData, 10); + return () => { + clearInterval(volumeInterval); + volumeInterval = undefined; + }; + }, []); + + useEffect(() => { + if (!volumeInterval && microphone) + volumeInterval = setInterval(handleAudioData, 10); + if (volumeInterval && !microphone) { + handleAudioData(); + clearInterval(volumeInterval); + volumeInterval = undefined; + } + }, [microphone]); + + const getAudio = async () => { + try { + audioStream = await navigator.mediaDevices.getUserMedia({ + audio: { + echoCancellation: true, + }, + }); + if (audioStream) { + const audioContext = new AudioContext(); + const audioSource = audioContext.createMediaStreamSource(audioStream); + analyser = audioContext.createAnalyser(); + + analyser.fftSize = 512; + analyser.minDecibels = -127; + analyser.maxDecibels = 0; + analyser.smoothingTimeConstant = 0.4; + + audioSource.connect(analyser); + } + } catch (error) { + console.error(error); + } + }; + + const handleAudioData = () => { + if (audioStream) { + const threshold = 0.4; + const audioLevel = getAudioLevel(); + + if (audioLevel <= threshold && microphone) { + onSpeak(true); + } else { + onSpeak(false); + } + } + }; + + const getAudioLevel = () => { + const bufferLength = analyser.frequencyBinCount; + const volumes = new Uint8Array(bufferLength); + analyser.getByteFrequencyData(volumes); + let volumeSum = 0; + for (let i = 0; i < bufferLength; i++) { + const value = (volumes[i] - 128) / 128; + volumeSum += Math.abs(value); + } + const averageVolume = volumeSum / volumes.length; + const audioLevel = (averageVolume * 100) / 127; + + return audioLevel; + }; + function changeMicro() { localStorage.setItem("microphone", `${!microphone}`); setMicrophone(!microphone); @@ -91,63 +165,3 @@ const CheckDevices: React.FC = () => { }; export default CheckDevices; - -// const containerRef = useRef(null); // Реф для контейнера - -// useEffect(() => { -// const getMicrophoneAccess = async () => { -// try { -// const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); -// } catch (error) { -// console.error(error); -// } -// }; -// getMicrophoneAccess(); -// }, []); - -// useEffect(() => { -// const handleAudioData = () => { -// if (isActive) { -// const threshold = 100; // Граничное значение громкости -// const audioLevel = getAudioLevel(); // Функция, которая получает уровень громкости аудио - -// if (audioLevel >= threshold) { -// containerRef.current.style.border = '5px solid red'; // Пример стилизации рамки при достижении граничного значения громкости -// } else { -// containerRef.current.style.border = 'none'; // Убираем рамку, когда громкость ниже граничного значения -// } -// } else { -// containerRef.current.style.border = 'none'; // Убираем рамку, если микрофон неактивен -// } -// }; - -// handleAudioData(); -// }, [isActive]); - -// const toggleMicrophone = () => { -// setIsActive((prevState) => !prevState); -// }; - -// const getAudioLevel = () => { -// const audioContext = new (window.AudioContext || window.webkitAudioContext)(); -// const analyser = audioContext.createAnalyser(); -// const microphone = audioContext.createMediaStreamSource(stream); // Подставьте вашу переменную с медиапотоком - -// microphone.connect(analyser); - -// analyser.fftSize = 256; -// const bufferLength = analyser.frequencyBinCount; -// const dataArray = new Uint8Array(bufferLength); - -// analyser.getByteTimeDomainData(dataArray); - -// let sum = 0; -// for (let i = 0; i < bufferLength; i++) { -// const value = (dataArray[i] - 128) / 128; // Приведение значения к диапазону от -1 до 1 -// sum += Math.abs(value); -// } - -// const audioLevel = sum / bufferLength; - -// return audioLevel; -// }; From 984bf786b4fa2161993e07e2473482f69a7fda97 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 1 Aug 2023 19:30:45 +0600 Subject: [PATCH 23/47] add room slist --- src/entities/room/api/models.ts | 9 ++++++ src/entities/room/api/useRoomsList.tsx | 31 +++++++++++++++++++ src/entities/room/ui/RoomCard.tsx | 27 ++--------------- src/shared/ui/ErrorListMessage.tsx | 24 +++++++++++++++ src/shared/ui/ZeroListMessage.tsx | 25 ++++++++++++++++ src/widgets/RoomsList.tsx | 41 ++++++++++++++++---------- 6 files changed, 117 insertions(+), 40 deletions(-) create mode 100644 src/entities/room/api/models.ts create mode 100644 src/entities/room/api/useRoomsList.tsx create mode 100644 src/shared/ui/ErrorListMessage.tsx create mode 100644 src/shared/ui/ZeroListMessage.tsx diff --git a/src/entities/room/api/models.ts b/src/entities/room/api/models.ts new file mode 100644 index 0000000..81916cd --- /dev/null +++ b/src/entities/room/api/models.ts @@ -0,0 +1,9 @@ +export interface IRoom { + id: number, + title: string, + url: string, + isPublic: boolean, + owner: string, + photo_url: string, + isActive: boolean +} \ No newline at end of file diff --git a/src/entities/room/api/useRoomsList.tsx b/src/entities/room/api/useRoomsList.tsx new file mode 100644 index 0000000..48d6075 --- /dev/null +++ b/src/entities/room/api/useRoomsList.tsx @@ -0,0 +1,31 @@ +import { useState, useEffect } from 'react'; +import axios, { AxiosError } from 'axios'; +import type { IRoom } from './models'; + +export const useRoomsList = () => { + const [rooms, setRooms] = useState([]); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(''); + + const API = String(import.meta.env.VITE_API); + + async function getRooms() { + try { + setError(''); + setLoading(true); + const response = await axios.get(`${API}/channels`); + setRooms(response.data as any); + setLoading(false); + } catch (e: unknown) { + const error = e as AxiosError; + setLoading(false); + setError(error.message); + } + } + + useEffect(() => { + getRooms(); + }, []); + + return { rooms, loading, error } +} diff --git a/src/entities/room/ui/RoomCard.tsx b/src/entities/room/ui/RoomCard.tsx index 6fc2720..ce39fc3 100644 --- a/src/entities/room/ui/RoomCard.tsx +++ b/src/entities/room/ui/RoomCard.tsx @@ -1,14 +1,11 @@ import React, { useState } from "react"; -import type { IRoom } from "../../../shared/api/models"; +import type { IRoom } from "../api/models"; import styled from "styled-components"; import JoinButton from "./JoinButton"; import Tooltip from "../../../shared/ui/Tooltip"; import avatar from "../../../../public/icons/avatar.svg"; import callActive from "../../../../public/icons/call-active.svg"; import callDisabled from "../../../../public/icons/call-disabled.svg"; -import { useAuth0 } from "@auth0/auth0-react"; -import menuIcon from "../../../../public/icons/points.svg"; -import Select from "../../../shared/ui/Select"; const Container = styled.div` position: relative; @@ -74,8 +71,6 @@ interface Props { const RoomCard: React.FC = ({ room }) => { const [tooltipActive, setTooltipActive] = useState(false); - const { user } = useAuth0(); - const [selectActive, setSelectActive] = useState(false); function copyLink() { setTooltipActive(true); @@ -90,12 +85,6 @@ const RoomCard: React.FC = ({ room }) => { }, 1500); } - function changeSelect() { - setSelectActive(!selectActive); - } - - function openEditForm() {} - return ( @@ -103,7 +92,7 @@ const RoomCard: React.FC = ({ room }) => { {room.title} {room.owner} - {room.isActive === true ? ( + {room.isPublic === true ? ( доступен ) : ( недоступен @@ -149,18 +138,6 @@ const RoomCard: React.FC = ({ room }) => { - {room.owner === user?.name ? ( - <> - - - - ) : ( - <> - )} ); }; diff --git a/src/shared/ui/ErrorListMessage.tsx b/src/shared/ui/ErrorListMessage.tsx new file mode 100644 index 0000000..6c970f8 --- /dev/null +++ b/src/shared/ui/ErrorListMessage.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import styled from 'styled-components'; + +const Paragraph = styled.p` + text-align: center; + font-family: var(--font); + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: normal; + color: var(--red); + margin-top: 94px; +` + +interface Props { + children?: React.ReactNode, +} +const ErrorListMessage: React.FC = ({ children }) => { + return ( + {children} + ) +} + +export default ErrorListMessage \ No newline at end of file diff --git a/src/shared/ui/ZeroListMessage.tsx b/src/shared/ui/ZeroListMessage.tsx new file mode 100644 index 0000000..d6d4984 --- /dev/null +++ b/src/shared/ui/ZeroListMessage.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import styled from 'styled-components'; + +const Paragraph = styled.p` + text-align: center; + font-family: var(--font); + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: normal; + color: var(--blue); + margin-top: 94px; +` + +interface Props { + children?: React.ReactNode, +} + +const ZeroListMessage: React.FC = ({ children }) => { + return ( + {children} + ) +} + +export default ZeroListMessage; \ No newline at end of file diff --git a/src/widgets/RoomsList.tsx b/src/widgets/RoomsList.tsx index ec74b3e..5427375 100644 --- a/src/widgets/RoomsList.tsx +++ b/src/widgets/RoomsList.tsx @@ -1,10 +1,12 @@ import React from 'react'; -import type { IRoom } from '../shared/api/models'; import styled from 'styled-components'; import { observer } from 'mobx-react-lite'; import roomsState from '../pages/Lobby/store/roomsState'; import RoomCard from '../entities/room/ui/RoomCard'; import { EditRoomForm } from '../features/editRoom'; +import { useRoomsList } from '../entities/room/api/useRoomsList'; +import ErrorListMessage from '../shared/ui/ErrorListMessage'; +import ZeroListMessage from '../shared/ui/ZeroListMessage'; const Container = styled.div` width: 100%; @@ -50,11 +52,9 @@ const Head = styled.h3` color: var(--grey_2); ` -interface Props { - rooms: IRoom[] -} +const RoomsList: React.FC = observer(() => { -const RoomsList: React.FC = observer(({ rooms }) => { + const { rooms, loading, error } = useRoomsList(); return ( @@ -64,17 +64,28 @@ const RoomsList: React.FC = observer(({ rooms }) => { Статус Доступ
- {roomsState.state === 'edit' ? + {loading &&

loading...

} + {error ? {error} : <> - {rooms.map(room => - - )} - - : - <> - {rooms.map(room => - - )} + {rooms.length > 0 ? + <> + {roomsState.state === 'edit' ? + <> + {rooms.map(room => + + )} + + : + <> + {rooms.map(room => + + )} + + } + + : + У Вас пока нет созданных классов + } } From 35104317cec1377c962e48922b2cc20fa825660b Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 2 Aug 2023 01:28:43 +0600 Subject: [PATCH 24/47] add chat state --- src/app/App.tsx | 2 ++ src/pages/CallPage/CallPage.tsx | 6 ++---- src/pages/CallPageCustomUI/CallPage.tsx | 27 ++++++++++++++++++++++++ src/pages/CallPageCustomUI/store/chat.ts | 19 +++++++++++++++++ src/widgets/CallInfo.tsx | 22 +++++++++++++++++++ 5 files changed, 72 insertions(+), 4 deletions(-) create mode 100644 src/pages/CallPageCustomUI/CallPage.tsx create mode 100644 src/pages/CallPageCustomUI/store/chat.ts create mode 100644 src/widgets/CallInfo.tsx diff --git a/src/app/App.tsx b/src/app/App.tsx index e2afe91..ba79fa1 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -8,6 +8,7 @@ import LobbyAccess from "../pages/Lobby/LobbyAccess"; import LobbyMy from "../pages/Lobby/LobbyMy"; import JoinCall from "../pages/JoinCall/JoinCall"; import CallPage from "../pages/CallPage/CallPage"; +import CallPageUI from "../pages/CallPageCustomUI/CallPage"; import Loader from "../shared/ui/loader/Loader"; import { useAuth0 } from "@auth0/auth0-react"; @@ -32,6 +33,7 @@ const App: React.FC = () => { } /> } /> } /> + } /> )} diff --git a/src/pages/CallPage/CallPage.tsx b/src/pages/CallPage/CallPage.tsx index abe2254..e5d4bad 100644 --- a/src/pages/CallPage/CallPage.tsx +++ b/src/pages/CallPage/CallPage.tsx @@ -1,13 +1,11 @@ import React from 'react'; import { Call } from '../../features/Call'; -import CallControllers from '../../widgets/CallControllers'; const CallPage: React.FC = () => { return ( -
+ <> - -
+ ) } diff --git a/src/pages/CallPageCustomUI/CallPage.tsx b/src/pages/CallPageCustomUI/CallPage.tsx new file mode 100644 index 0000000..58e92ae --- /dev/null +++ b/src/pages/CallPageCustomUI/CallPage.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import styled from 'styled-components'; +import CallInfo from '../../widgets/CallInfo'; +import CallControllers from '../../widgets/CallControllers'; + +const Container = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + max-width: 1440px; + height: 100vh; + margin: 0 auto; +` + +//calc((100% - 1440px) / 2) + +const CallPAge: React.FC = () => { + return ( + + + + + ) +} + +export default CallPAge \ No newline at end of file diff --git a/src/pages/CallPageCustomUI/store/chat.ts b/src/pages/CallPageCustomUI/store/chat.ts new file mode 100644 index 0000000..ad04c33 --- /dev/null +++ b/src/pages/CallPageCustomUI/store/chat.ts @@ -0,0 +1,19 @@ +import { makeAutoObservable } from "mobx"; + +class Chat { + isActive = false; + + constructor() { + makeAutoObservable(this); + } + + openChat() { + this.isActive = true; + } + + closeChat() { + this.isActive = false; + } +} + +export default new Chat; diff --git a/src/widgets/CallInfo.tsx b/src/widgets/CallInfo.tsx new file mode 100644 index 0000000..e5d2cd4 --- /dev/null +++ b/src/widgets/CallInfo.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import styled from 'styled-components'; + +const Container = styled.div` + display: flex; + width: 100%; + height: 57px; + justify-content: space-between; + align-items: center; + margin-top: 16px; + border: 1px #000 solid; +` + +const CallInfo: React.FC = () => { + return ( + + Call Info + + ) +} + +export default CallInfo; From 6e14768e24b90344ec7ad66a425d9ebb0706ee2a Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 2 Aug 2023 02:15:13 +0600 Subject: [PATCH 25/47] end work session --- src/pages/Lobby/store/roomsFormState.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Lobby/store/roomsFormState.ts b/src/pages/Lobby/store/roomsFormState.ts index bc1fadd..3a81acb 100644 --- a/src/pages/Lobby/store/roomsFormState.ts +++ b/src/pages/Lobby/store/roomsFormState.ts @@ -15,4 +15,4 @@ class FormState { } } -export default new FormState(); \ No newline at end of file +export default new FormState(); From eed9771f97988c53c4f631ab96c2448c8e02930b Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 2 Aug 2023 03:54:24 +0600 Subject: [PATCH 26/47] layout lesson info --- src/app/index.css | 1 + src/widgets/CallInfo.tsx | 33 +++++++++++++++++++++++++++++++-- 2 files changed, 32 insertions(+), 2 deletions(-) diff --git a/src/app/index.css b/src/app/index.css index fb3a3b5..4fc75bd 100644 --- a/src/app/index.css +++ b/src/app/index.css @@ -92,6 +92,7 @@ h3, h4, h5, h6 { + margin: 0; font-size: inherit; font-weight: 400; } diff --git a/src/widgets/CallInfo.tsx b/src/widgets/CallInfo.tsx index e5d2cd4..37e2d74 100644 --- a/src/widgets/CallInfo.tsx +++ b/src/widgets/CallInfo.tsx @@ -1,5 +1,6 @@ import React from 'react'; import styled from 'styled-components'; +import { CopyLink } from '../features/Copy'; const Container = styled.div` display: flex; @@ -8,13 +9,41 @@ const Container = styled.div` justify-content: space-between; align-items: center; margin-top: 16px; - border: 1px #000 solid; +` + +const Info = styled.div` + display: grid; + width: 295px; + grid-template-columns: 255px 18px; + gap: 0 14px; + align-items: center; +` + +const Title = styled.h1` + font-family: var(--font); + font-size: 24px; + font-style: normal; + font-weight: 400; + line-height: normal; +` + +const Paragraph = styled.p` + font-family: var(--font); + font-size: 14px; + font-style: normal; + font-weight: 300; + line-height: normal; ` const CallInfo: React.FC = () => { return ( - Call Info + + Информатика 4 класс + + 18 участников|01:12:45 + + ) } From c456ea240b8f96149e4221a0b2e680ad10ea3aea Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 2 Aug 2023 17:37:10 +0600 Subject: [PATCH 27/47] load code from callinfo --- src/widgets/CallInfo.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/widgets/CallInfo.tsx b/src/widgets/CallInfo.tsx index 37e2d74..1c3fae7 100644 --- a/src/widgets/CallInfo.tsx +++ b/src/widgets/CallInfo.tsx @@ -43,7 +43,6 @@ const CallInfo: React.FC = () => { 18 участников|01:12:45 - ) } From c5ff5a98dbcef078d7429b53681b1c2138b4501f Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 2 Aug 2023 17:39:31 +0600 Subject: [PATCH 28/47] fix information stack in rooms list --- src/widgets/RoomsList.tsx | 39 +++++++++++++++++++++------------------ 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/src/widgets/RoomsList.tsx b/src/widgets/RoomsList.tsx index 5427375..d173aa5 100644 --- a/src/widgets/RoomsList.tsx +++ b/src/widgets/RoomsList.tsx @@ -64,28 +64,31 @@ const RoomsList: React.FC = observer(() => { Статус Доступ
- {loading &&

loading...

} - {error ? {error} : + {loading ?

loading...

: <> - {rooms.length > 0 ? - <> - {roomsState.state === 'edit' ? + {error ? {error} : + <> + {rooms.length > 0 ? <> - {rooms.map(room => - - )} - + {roomsState.state === 'edit' ? + <> + {rooms.map(room => + + )} + + : + <> + {rooms.map(room => + + )} + + } + : - <> - {rooms.map(room => - - )} - + У Вас пока нет созданных классов } - - : - У Вас пока нет созданных классов - } + + } } From b4a3665d1b176a5918671766b12d013906f922b1 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 2 Aug 2023 17:41:10 +0600 Subject: [PATCH 29/47] change dev api url --- .env.development | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.env.development b/.env.development index 9143122..e11d134 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,3 @@ VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com" VITE_AUTH0_CLIENT_ID="BOU97TMrp85ftAnrXSLTiYYiuifp9jfz" -VITE_API='http://194.67.74.187:5000' \ No newline at end of file +VITE_API='https://194.67.74.187:8000/' \ No newline at end of file From 856d887b85969810459092f26a61ab9d46aa7c84 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 2 Aug 2023 17:41:35 +0600 Subject: [PATCH 30/47] add prod api url --- .env.production | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.env.production b/.env.production index 40d164d..eed94b2 100644 --- a/.env.production +++ b/.env.production @@ -1,2 +1,3 @@ VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com" -VITE_AUTH0_CLIENT_ID="fOB3CWsgCnNLI5q7OMWe9DfWaAXOme2o" \ No newline at end of file +VITE_AUTH0_CLIENT_ID="fOB3CWsgCnNLI5q7OMWe9DfWaAXOme2o" +VITE_API='https://194.67.74.187:8000/' \ No newline at end of file From f02571065e0d6204ba62333c56045e41b92839ef Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Aug 2023 03:52:27 +0600 Subject: [PATCH 31/47] create searching rooms in lobby --- .env.development | 2 +- .env.production | 2 +- src/features/Search/ui/SearchInput.tsx | 16 ++++-- src/pages/Lobby/store/socket.ts | 10 ++++ src/widgets/RoomsList.tsx | 78 +++++++++++++++++--------- 5 files changed, 76 insertions(+), 32 deletions(-) create mode 100644 src/pages/Lobby/store/socket.ts diff --git a/.env.development b/.env.development index e11d134..c4160eb 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,3 @@ VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com" VITE_AUTH0_CLIENT_ID="BOU97TMrp85ftAnrXSLTiYYiuifp9jfz" -VITE_API='https://194.67.74.187:8000/' \ No newline at end of file +VITE_API='http://194.67.74.187:8000' \ No newline at end of file diff --git a/.env.production b/.env.production index eed94b2..0ee425f 100644 --- a/.env.production +++ b/.env.production @@ -1,3 +1,3 @@ VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com" VITE_AUTH0_CLIENT_ID="fOB3CWsgCnNLI5q7OMWe9DfWaAXOme2o" -VITE_API='https://194.67.74.187:8000/' \ No newline at end of file +VITE_API='http://194.67.74.187:8000' \ No newline at end of file diff --git a/src/features/Search/ui/SearchInput.tsx b/src/features/Search/ui/SearchInput.tsx index e47c361..3ca1eb8 100644 --- a/src/features/Search/ui/SearchInput.tsx +++ b/src/features/Search/ui/SearchInput.tsx @@ -1,6 +1,7 @@ -import React from 'react'; +import React, { useRef } from 'react'; import styled from 'styled-components'; import searchIcon from '../../../../public/icons/search.svg'; +import socket from '../../../pages/Lobby/store/socket'; const Container = styled.div` display: flex; @@ -17,7 +18,7 @@ const Container = styled.div` const Input = styled.input` color: var(--grey-3); - font-family: Noto Sans; + font-family: var(--font); font-size: 20px; font-style: normal; font-weight: 400; @@ -25,11 +26,18 @@ const Input = styled.input` ` export const SearchInput: React.FC = () => { + const dataRef = useRef(); + const st = socket.state; + + function inputData(data: any) { + st.send(data); + st.close(1, "closed"); + } return ( - поиск - + поиск + inputData(dataRef.current?.value)}/> ) } diff --git a/src/pages/Lobby/store/socket.ts b/src/pages/Lobby/store/socket.ts new file mode 100644 index 0000000..dd44e44 --- /dev/null +++ b/src/pages/Lobby/store/socket.ts @@ -0,0 +1,10 @@ +import { makeAutoObservable } from "mobx"; + +class Socket { + state = new WebSocket('ws://194.67.74.187:8000/channel_search/ws/'); + constructor() { + makeAutoObservable(this) + } +} + +export default new Socket(); \ No newline at end of file diff --git a/src/widgets/RoomsList.tsx b/src/widgets/RoomsList.tsx index d173aa5..c5e9b84 100644 --- a/src/widgets/RoomsList.tsx +++ b/src/widgets/RoomsList.tsx @@ -1,4 +1,6 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; +import { IRoom } from '../entities/room/api/models'; +import socket from '../pages/Lobby/store/socket'; import styled from 'styled-components'; import { observer } from 'mobx-react-lite'; import roomsState from '../pages/Lobby/store/roomsState'; @@ -53,9 +55,23 @@ const Head = styled.h3` ` const RoomsList: React.FC = observer(() => { - + const [searchedRooms, setSearchedRooms] = useState([]); const { rooms, loading, error } = useRoomsList(); + const st = socket.state; + + useEffect(() => { + st.onopen = function() { + st.send('connected'); + }; + }, []); + + st.onmessage = function(event) { + const response = event.data; + setSearchedRooms(JSON.parse(response as any)); + console.log(searchedRooms); + }; + return (
@@ -64,32 +80,42 @@ const RoomsList: React.FC = observer(() => { Статус Доступ
- {loading ?

loading...

: - <> - {error ? {error} : - <> - {rooms.length > 0 ? + {searchedRooms.length > 0 ? + <> + {searchedRooms.map((room: IRoom) => + + )} + + : + <> + {loading ?

loading...

: + <> + {error ? {error} : <> - {roomsState.state === 'edit' ? - <> - {rooms.map(room => - - )} - - : - <> - {rooms.map(room => - - )} - - } - - : - У Вас пока нет созданных классов + {rooms.length > 0 ? + <> + {roomsState.state === 'edit' ? + <> + {rooms.map(room => + + )} + + : + <> + {rooms.map(room => + + )} + + } + + : + У Вас пока нет созданных классов + } + } - - } - + + } + } ) From 11ecb954e6227323f85244007b47c041c6841651 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Aug 2023 15:32:46 +0600 Subject: [PATCH 32/47] fix swithing ispublic in editroomform --- src/features/editRoom/ui/EditRoomForm.tsx | 13 ++++++++++--- src/widgets/RoomsList.tsx | 2 +- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/features/editRoom/ui/EditRoomForm.tsx b/src/features/editRoom/ui/EditRoomForm.tsx index eb29068..b38aa71 100644 --- a/src/features/editRoom/ui/EditRoomForm.tsx +++ b/src/features/editRoom/ui/EditRoomForm.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +import React, { useState } from 'react'; +import { IRoom } from '../../../entities/room/api/models'; import styled from 'styled-components'; import LobbyFormLayout from '../../../widgets/layout/LobbyFormLayout'; import Input from '../../../shared/ui/Input'; @@ -53,7 +54,13 @@ const Buttons = styled.div` align-items: center; ` -export const EditRoomForm: React.FC = () => { +interface Props { + room: IRoom, +} + +export const EditRoomForm: React.FC = ({ room }) => { + const [isPublic, setIsPublic] = useState(room.isPublic); + return ( @@ -64,7 +71,7 @@ export const EditRoomForm: React.FC = () => {
- + setIsPublic(!isPublic)}/> Ваш класс будет виден всем пользователям приложения diff --git a/src/widgets/RoomsList.tsx b/src/widgets/RoomsList.tsx index c5e9b84..1b35073 100644 --- a/src/widgets/RoomsList.tsx +++ b/src/widgets/RoomsList.tsx @@ -97,7 +97,7 @@ const RoomsList: React.FC = observer(() => { {roomsState.state === 'edit' ? <> {rooms.map(room => - + )} : From dcbb8e10d910f4799d8f7ed49d4f8291464d0531 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Aug 2023 16:02:57 +0600 Subject: [PATCH 33/47] fix create room form --- src/entities/room/ui/RoomCard.tsx | 2 +- src/features/createRoom/model/index.ts | 14 +++++++---- src/features/createRoom/ui/CreateRoomForm.tsx | 8 ++++--- src/features/editRoom/model/index.ts | 23 +++++++++++++++++++ 4 files changed, 39 insertions(+), 8 deletions(-) create mode 100644 src/features/editRoom/model/index.ts diff --git a/src/entities/room/ui/RoomCard.tsx b/src/entities/room/ui/RoomCard.tsx index ce39fc3..817a888 100644 --- a/src/entities/room/ui/RoomCard.tsx +++ b/src/entities/room/ui/RoomCard.tsx @@ -92,7 +92,7 @@ const RoomCard: React.FC = ({ room }) => { {room.title} {room.owner} - {room.isPublic === true ? ( + {room.isActive === true ? ( доступен ) : ( недоступен diff --git a/src/features/createRoom/model/index.ts b/src/features/createRoom/model/index.ts index c13b37c..a6df797 100644 --- a/src/features/createRoom/model/index.ts +++ b/src/features/createRoom/model/index.ts @@ -1,11 +1,17 @@ -export const CreateThunk= (event: any, title: string, isPublic: boolean) => { +import { IUser } from "../../../shared/api/models"; + +export const CreateThunk= (event: any, title: string, isPublic: boolean, user: IUser) => { event.preventDefault(); const API = String(import.meta.env.VITE_API); const newRoom = { - name: title, - public: isPublic, - owner_id: 1 + title: title, + url: 'https://network-class.pages.dev/joinlesson/1', + photo_url: '', + isActive: false, + owner: user?.name || user?.email, + isPublic: isPublic, + owner_email: user?.email } fetch(`${API}/channels`, { diff --git a/src/features/createRoom/ui/CreateRoomForm.tsx b/src/features/createRoom/ui/CreateRoomForm.tsx index 5d65e0d..9a000ab 100644 --- a/src/features/createRoom/ui/CreateRoomForm.tsx +++ b/src/features/createRoom/ui/CreateRoomForm.tsx @@ -1,4 +1,6 @@ import React, { useState } from 'react'; +import { IUser } from '../../../shared/api/models'; +import { useAuth0 } from "@auth0/auth0-react"; import { CreateThunk } from '../model'; import styled from 'styled-components'; import LobbyFormLayout from '../../../widgets/layout/LobbyFormLayout'; @@ -49,12 +51,12 @@ export const CreateRoomForm: React.FC = () => { const [title, setTitle] = useState(''); const [isPublic, setIsPublic] = useState(true); + const { user } = useAuth0(); + function create(event: any) { - CreateThunk(event, title, isPublic); + CreateThunk(event, title, isPublic, user as IUser); } - - return ( diff --git a/src/features/editRoom/model/index.ts b/src/features/editRoom/model/index.ts new file mode 100644 index 0000000..bb13b2e --- /dev/null +++ b/src/features/editRoom/model/index.ts @@ -0,0 +1,23 @@ +export const EditThunk= (event: any, title: string, isPublic: boolean) => { + event.preventDefault(); + const API = String(import.meta.env.VITE_API); + + const newRoom = { + name: title, + public: isPublic, + owner_id: 1 + } + + fetch(`${API}/channels`, { + method : 'POST', + headers: { + 'Content-type': 'application/json', + }, + body : JSON.stringify(newRoom), + }) + .then(response => response.text()) + .then(response => { + response = JSON.parse(response); + console.log(response); + }) +} \ No newline at end of file From 54d5fcfe0e381a7fdc9cbf48b5026acc549a8e40 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Aug 2023 16:05:02 +0600 Subject: [PATCH 34/47] fix roomcard layout --- src/entities/room/ui/RoomCard.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/entities/room/ui/RoomCard.tsx b/src/entities/room/ui/RoomCard.tsx index 817a888..8f011c8 100644 --- a/src/entities/room/ui/RoomCard.tsx +++ b/src/entities/room/ui/RoomCard.tsx @@ -40,6 +40,7 @@ const Title = styled.h3` `; const Teacher = styled.h4` + min-width: 251px; font-family: var(--font); font-size: 18px; font-style: normal; From 912353ecccd831cc9569ccfc1ee5775d60c1c696 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Aug 2023 20:30:51 +0600 Subject: [PATCH 35/47] create delete thunk --- src/features/Search/ui/SearchInput.tsx | 2 +- src/features/editRoom/model/delete.ts | 15 +++++++++++++++ src/features/editRoom/model/index.ts | 11 +++++------ src/features/editRoom/ui/EditRoomForm.tsx | 17 ++++++++++++++--- 4 files changed, 35 insertions(+), 10 deletions(-) create mode 100644 src/features/editRoom/model/delete.ts diff --git a/src/features/Search/ui/SearchInput.tsx b/src/features/Search/ui/SearchInput.tsx index 3ca1eb8..ae78344 100644 --- a/src/features/Search/ui/SearchInput.tsx +++ b/src/features/Search/ui/SearchInput.tsx @@ -37,7 +37,7 @@ export const SearchInput: React.FC = () => { return ( поиск - inputData(dataRef.current?.value)}/> + inputData(dataRef.current?.value)}/> ) } diff --git a/src/features/editRoom/model/delete.ts b/src/features/editRoom/model/delete.ts new file mode 100644 index 0000000..d804822 --- /dev/null +++ b/src/features/editRoom/model/delete.ts @@ -0,0 +1,15 @@ +export const DeleteThunk= (id: number) => { + const API = String(import.meta.env.VITE_API); + + fetch(`${API}/channels/${id}`, { + method : 'DELETE', + headers: { + 'Content-type': 'application/json', + }, + }) + .then(response => response.text()) + .then(response => { + response = JSON.parse(response); + console.log(response); + }) +} \ No newline at end of file diff --git a/src/features/editRoom/model/index.ts b/src/features/editRoom/model/index.ts index bb13b2e..f4db6f9 100644 --- a/src/features/editRoom/model/index.ts +++ b/src/features/editRoom/model/index.ts @@ -1,19 +1,18 @@ -export const EditThunk= (event: any, title: string, isPublic: boolean) => { +export const EditThunk= (event: any, id: number, title: string, isPublic: boolean) => { event.preventDefault(); const API = String(import.meta.env.VITE_API); - const newRoom = { + const editedRoom = { name: title, public: isPublic, - owner_id: 1 } - fetch(`${API}/channels`, { - method : 'POST', + fetch(`${API}/channels/${id}`, { + method : 'PUT', headers: { 'Content-type': 'application/json', }, - body : JSON.stringify(newRoom), + body : JSON.stringify(editedRoom), }) .then(response => response.text()) .then(response => { diff --git a/src/features/editRoom/ui/EditRoomForm.tsx b/src/features/editRoom/ui/EditRoomForm.tsx index b38aa71..eb6ca5b 100644 --- a/src/features/editRoom/ui/EditRoomForm.tsx +++ b/src/features/editRoom/ui/EditRoomForm.tsx @@ -1,5 +1,7 @@ import React, { useState } from 'react'; import { IRoom } from '../../../entities/room/api/models'; +import { EditThunk } from '../model'; +import { DeleteThunk } from '../model/delete'; import styled from 'styled-components'; import LobbyFormLayout from '../../../widgets/layout/LobbyFormLayout'; import Input from '../../../shared/ui/Input'; @@ -59,16 +61,25 @@ interface Props { } export const EditRoomForm: React.FC = ({ room }) => { + const [title, setTitle] = useState(room.title); const [isPublic, setIsPublic] = useState(room.isPublic); + function editRoom(event: any) { + EditThunk(event, room.id, title, isPublic); + } + + function deleteRoom() { + DeleteThunk(room.id); + } + return ( - + аватар - + setTitle(e.target.value)} />
setIsPublic(!isPublic)}/> @@ -78,7 +89,7 @@ export const EditRoomForm: React.FC = ({ room }) => {
Сохранить - + From 3e491f4baac431336c82ec022a33c5dc525465cc Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Aug 2023 20:39:27 +0600 Subject: [PATCH 36/47] fix errors in roomcard --- src/entities/room/ui/RoomCard.tsx | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/src/entities/room/ui/RoomCard.tsx b/src/entities/room/ui/RoomCard.tsx index aeeef6f..9124404 100644 --- a/src/entities/room/ui/RoomCard.tsx +++ b/src/entities/room/ui/RoomCard.tsx @@ -1,5 +1,6 @@ import React, { useState } from "react"; import type { IRoom } from "../api/models"; +import { useAuth0 } from "@auth0/auth0-react"; import styled from "styled-components"; import JoinButton from "./JoinButton"; import Tooltip from "../../../shared/ui/Tooltip"; @@ -72,6 +73,7 @@ interface Props { const RoomCard: React.FC = ({ room }) => { const [tooltipActive, setTooltipActive] = useState(false); + const { user } = useAuth0(); function copyLink() { setTooltipActive(true); @@ -138,18 +140,6 @@ const RoomCard: React.FC = ({ room }) => { - {room.owner === user?.name ? ( - <> - - - - ) : ( - <> - )} ); From d250396eb55276f5e782c10f676128c401813baf Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Aug 2023 20:43:57 +0600 Subject: [PATCH 37/47] fix errors in search input --- src/features/Search/ui/SearchInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/Search/ui/SearchInput.tsx b/src/features/Search/ui/SearchInput.tsx index ae78344..178cb9e 100644 --- a/src/features/Search/ui/SearchInput.tsx +++ b/src/features/Search/ui/SearchInput.tsx @@ -26,7 +26,7 @@ const Input = styled.input` ` export const SearchInput: React.FC = () => { - const dataRef = useRef(); + const dataRef = useRef(null); const st = socket.state; function inputData(data: any) { From ba850a2f72d13182b70023aba4dd6773da7c6cf8 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Aug 2023 20:46:05 +0600 Subject: [PATCH 38/47] fix errors in lobby --- src/pages/Lobby/Lobby.tsx | 83 +-------------------------------------- 1 file changed, 1 insertion(+), 82 deletions(-) diff --git a/src/pages/Lobby/Lobby.tsx b/src/pages/Lobby/Lobby.tsx index e79142e..3649f2b 100644 --- a/src/pages/Lobby/Lobby.tsx +++ b/src/pages/Lobby/Lobby.tsx @@ -1,96 +1,15 @@ import React from 'react'; -import type { IRoom } from '../../shared/api/models'; import Header from '../../widgets/layout/Header'; import Navbar from '../../widgets/layout/Navbar'; import RoomsList from '../../widgets/RoomsList'; const Lobby: React.FC = () => { - const rooms: IRoom[] = [ - { - id: 1, - title: 'Информатика 5 класс', - owner: 'Иванов Иван Иванович', - isActive: true, - }, - { - id: 2, - title: 'Математика 7 класс', - owner: 'Морозов Антон Дмитри...', - isActive: true, - }, - { - id: 3, - title: 'Английский и язык 7 кла... ', - owner: 'Иванова Мария Ивановна', - isActive: false, - }, - { - id: 4, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, - }, - { - id: 5, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, - }, - { - id: 6, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, - }, - { - id: 7, - title: 'Информатика 5 класс', - owner: 'Иванов Иван Иванович', - isActive: true, - }, - { - id: 8, - title: 'Математика 7 класс', - owner: 'Морозов Антон Дмитри...', - isActive: true, - }, - { - id: 9, - title: 'Английский и язык 7 кла... ', - owner: 'Иванова Мария Ивановна', - isActive: false, - }, - { - id: 10, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, - }, - { - id: 11, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, - }, - { - id: 12, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, - }, - { - id: 13, - title: 'Математика 8 класс', - owner: 'emilnovikov392@gmail.com', - isActive: false, - }, - ]; return ( <>
- + ) } From a4a6f8c71027e0889c7906ec112a30177042e876 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 3 Aug 2023 20:49:36 +0600 Subject: [PATCH 39/47] fix errors lobbyaccess & lobbymy --- src/pages/Lobby/LobbyAccess.tsx | 86 +-------------------------- src/pages/Lobby/LobbyMy.tsx | 100 +------------------------------- 2 files changed, 5 insertions(+), 181 deletions(-) diff --git a/src/pages/Lobby/LobbyAccess.tsx b/src/pages/Lobby/LobbyAccess.tsx index 8d8b24f..c94f8f1 100644 --- a/src/pages/Lobby/LobbyAccess.tsx +++ b/src/pages/Lobby/LobbyAccess.tsx @@ -1,96 +1,14 @@ import React from 'react'; -import type { IRoom } from '../../shared/api/models'; import Header from '../../widgets/layout/Header'; import Navbar from '../../widgets/layout/Navbar'; import RoomsList from '../../widgets/RoomsList'; -const LobbyAccess: React.FC = () => { - const rooms: IRoom[] = [ - { - id: 1, - title: 'Информатика 5 класс', - owner: 'Иванов Иван Иванович', - isActive: true, - }, - { - id: 2, - title: 'Математика 7 класс', - owner: 'Морозов Антон Дмитри...', - isActive: true, - }, - { - id: 3, - title: 'Английский и язык 7 кла... ', - owner: 'Иванова Мария Ивановна', - isActive: false, - }, - { - id: 4, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, - }, - { - id: 5, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, - }, - { - id: 6, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, - }, - { - id: 7, - title: 'Информатика 5 класс', - owner: 'Иванов Иван Иванович', - isActive: true, - }, - { - id: 8, - title: 'Математика 7 класс', - owner: 'Морозов Антон Дмитри...', - isActive: true, - }, - { - id: 9, - title: 'Английский и язык 7 кла... ', - owner: 'Иванова Мария Ивановна', - isActive: false, - }, - { - id: 10, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, - }, - { - id: 11, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, - }, - { - id: 12, - title: 'Математика 8 класс', - owner: 'Иванова Мария Ивановна', - isActive: false, - }, - { - id: 13, - title: 'Математика 8 класс', - owner: 'emilnovikov392@gmail.com', - isActive: false, - }, - ]; - +const LobbyAccess: React.FC = () => { return ( <>
- + ) } diff --git a/src/pages/Lobby/LobbyMy.tsx b/src/pages/Lobby/LobbyMy.tsx index 9b45b73..ab8fd8f 100644 --- a/src/pages/Lobby/LobbyMy.tsx +++ b/src/pages/Lobby/LobbyMy.tsx @@ -1,107 +1,13 @@ import React, { useEffect } from "react"; -import type { IRoom } from "../../shared/api/models"; import Header from "../../widgets/layout/Header"; import Navbar from "../../widgets/layout/Navbar"; import { CreateRoomForm } from "../../features/createRoom/index.ts"; import RoomsList from "../../widgets/RoomsList"; import { observer } from "mobx-react-lite"; import roomsFormState from "./store/roomsFormState.ts"; -import { useAuth0 } from "@auth0/auth0-react"; +// import { useAuth0 } from "@auth0/auth0-react"; const LobbyMy: React.FC = observer(() => { - const rooms: IRoom[] = [ - { - id: 1, - title: "Информатика 5 класс", - owner: "Иванов Иван Иванович", - isActive: true, - }, - { - id: 2, - title: "Математика 7 класс", - owner: "Морозов Антон Дмитри...", - isActive: true, - }, - { - id: 3, - title: "Английский и язык 7 кла... ", - owner: "Иванова Мария Ивановна", - isActive: false, - }, - { - id: 4, - title: "Математика 8 класс", - owner: "Иванова Мария Ивановна", - isActive: false, - }, - { - id: 5, - title: "Математика 8 класс", - owner: "Иванова Мария Ивановна", - isActive: false, - }, - { - id: 6, - title: "Математика 8 класс", - owner: "Иванова Мария Ивановна", - isActive: false, - }, - { - id: 7, - title: "Информатика 5 класс", - owner: "Иванов Иван Иванович", - isActive: true, - }, - { - id: 8, - title: "Математика 7 класс", - owner: "Морозов Антон Дмитри...", - isActive: true, - }, - { - id: 9, - title: "Английский и язык 7 кла... ", - owner: "Иванова Мария Ивановна", - isActive: false, - }, - { - id: 10, - title: "Математика 8 класс", - owner: "Иванова Мария Ивановна", - isActive: false, - }, - { - id: 11, - title: "Математика 8 класс", - owner: "Иванова Мария Ивановна", - isActive: false, - }, - { - id: 12, - title: "Математика 8 класс", - owner: "Иванова Мария Ивановна", - isActive: false, - }, - { - id: 13, - title: "Математика 8 класс", - owner: "emilnovikov392@gmail.com", - isActive: false, - }, - ]; - - const { user, isAuthenticated } = useAuth0(); - - function filterRooms() { - if (isAuthenticated) { - const myRooms: IRoom[] = rooms.filter((room) => { - return room.owner == user?.name; - }); - return myRooms; - } - } - - const myRooms: any = filterRooms(); useEffect(() => { if (localStorage.getItem("trigger") === "create") { @@ -113,9 +19,9 @@ const LobbyMy: React.FC = observer(() => { return ( <>
- + {roomsFormState.state === "create" ? : <>} - {myRooms ? : <>Loading...} + ); }); From f8941e070d315139536a75b3777f71ca5b43cc90 Mon Sep 17 00:00:00 2001 From: BodySites <100404530+BodySites@users.noreply.github.com> Date: Thu, 3 Aug 2023 23:10:58 +0600 Subject: [PATCH 40/47] add grid layout of peoples, fix layout in CallPage --- public/icons/arrow-right.svg | 4 + public/icons/microphone-mini.svg | 6 + public/icons/monitor-mini.svg | 7 + src/features/UserBlock/index.ts | 1 + src/features/UserBlock/ui/UserBlock.tsx | 80 +++++++ src/pages/CallPageCustomUI/CallPage.tsx | 37 +-- src/widgets/CallInfo.tsx | 36 +-- src/widgets/UserGrid/UserGrid.tsx | 264 ++++++++++++++++++++++ src/widgets/layout/ControllersWrapper.tsx | 39 ++-- 9 files changed, 419 insertions(+), 55 deletions(-) create mode 100644 public/icons/arrow-right.svg create mode 100644 public/icons/microphone-mini.svg create mode 100644 public/icons/monitor-mini.svg create mode 100644 src/features/UserBlock/index.ts create mode 100644 src/features/UserBlock/ui/UserBlock.tsx create mode 100644 src/widgets/UserGrid/UserGrid.tsx diff --git a/public/icons/arrow-right.svg b/public/icons/arrow-right.svg new file mode 100644 index 0000000..2df3ac5 --- /dev/null +++ b/public/icons/arrow-right.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icons/microphone-mini.svg b/public/icons/microphone-mini.svg new file mode 100644 index 0000000..b20457e --- /dev/null +++ b/public/icons/microphone-mini.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icons/monitor-mini.svg b/public/icons/monitor-mini.svg new file mode 100644 index 0000000..8ed1e20 --- /dev/null +++ b/public/icons/monitor-mini.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/features/UserBlock/index.ts b/src/features/UserBlock/index.ts new file mode 100644 index 0000000..f01bc73 --- /dev/null +++ b/src/features/UserBlock/index.ts @@ -0,0 +1 @@ +export { UserBlock } from "./ui/UserBlock"; diff --git a/src/features/UserBlock/ui/UserBlock.tsx b/src/features/UserBlock/ui/UserBlock.tsx new file mode 100644 index 0000000..0533569 --- /dev/null +++ b/src/features/UserBlock/ui/UserBlock.tsx @@ -0,0 +1,80 @@ +import React from "react"; +import styled from "styled-components"; +import defaultAvatar from "../../../../public/icons/avatar.svg"; +import micro from "../../../../public/icons/microphone-mini.svg"; +import monitor from "../../../../public/icons/monitor-mini.svg"; + +const Container = styled.div` + border-radius: 8px; + min-width: 276px; + min-height: 170px; + position: relative; +`; + +const Info = styled.div` + display: flex; + height: 28px; + max-width: 100%; + padding: 0px 6px; + align-items: center; + gap: 4px; + border-radius: 0px 20px 20px 0px; + background: rgba(95, 106, 119, 0.6); + position: absolute; + left: 0; + bottom: 5px; +`; + +const Text = styled.div` + font-family: var(--font); + font-size: 14px; + font-weight: 400; + overflow: hidden; + white-space: nowrap; + background: linear-gradient( + 90deg, + var(--white) 0, + var(--white) 95%, + transparent 100% + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + color: transparent; + padding-right: 5px; +`; + +const Image = styled.img` + display: flex; + width: 28px; + height: 28px; + justify-content: center; + align-items: center; +`; + +interface Props { + avatar?: string; + name: string; +} + +export const UserBlock: React.FC = ({ avatar, name }) => { + return ( + + + {name} + + + + + ); +}; diff --git a/src/pages/CallPageCustomUI/CallPage.tsx b/src/pages/CallPageCustomUI/CallPage.tsx index 58e92ae..dd6d911 100644 --- a/src/pages/CallPageCustomUI/CallPage.tsx +++ b/src/pages/CallPageCustomUI/CallPage.tsx @@ -1,27 +1,30 @@ -import React from 'react'; -import styled from 'styled-components'; -import CallInfo from '../../widgets/CallInfo'; -import CallControllers from '../../widgets/CallControllers'; +import React from "react"; +import styled from "styled-components"; +import CallInfo from "../../widgets/CallInfo"; +import CallControllers from "../../widgets/CallControllers"; +import UserGrid from "../../widgets/UserGrid/UserGrid"; const Container = styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; - width: 100%; - max-width: 1440px; - height: 100vh; - margin: 0 auto; -` + display: flex; + flex-direction: column; + justify-content: space-between; + width: 100%; + max-width: 1440px; + height: 100vh; + margin: 0 auto; + background: var(--white); +`; //calc((100% - 1440px) / 2) const CallPAge: React.FC = () => { return ( - - + + + - ) -} + ); +}; -export default CallPAge \ No newline at end of file +export default CallPAge; diff --git a/src/widgets/CallInfo.tsx b/src/widgets/CallInfo.tsx index 1c3fae7..9447026 100644 --- a/src/widgets/CallInfo.tsx +++ b/src/widgets/CallInfo.tsx @@ -1,23 +1,23 @@ -import React from 'react'; -import styled from 'styled-components'; -import { CopyLink } from '../features/Copy'; +import React from "react"; +import styled from "styled-components"; +import { CopyLink } from "../features/Copy"; const Container = styled.div` - display: flex; - width: 100%; - height: 57px; - justify-content: space-between; - align-items: center; - margin-top: 16px; -` + display: flex; + width: 100%; + height: 57px; + justify-content: space-between; + align-items: center; + margin-top: 16px; + margin-bottom: 15px; +`; const Info = styled.div` display: grid; - width: 295px; - grid-template-columns: 255px 18px; + grid-template-columns: repeat(2, max-content); gap: 0 14px; align-items: center; -` +`; const Title = styled.h1` font-family: var(--font); @@ -25,7 +25,7 @@ const Title = styled.h1` font-style: normal; font-weight: 400; line-height: normal; -` +`; const Paragraph = styled.p` font-family: var(--font); @@ -33,18 +33,18 @@ const Paragraph = styled.p` font-style: normal; font-weight: 300; line-height: normal; -` +`; const CallInfo: React.FC = () => { return ( Информатика 4 класс - + 18 участников|01:12:45 - ) -} + ); +}; export default CallInfo; diff --git a/src/widgets/UserGrid/UserGrid.tsx b/src/widgets/UserGrid/UserGrid.tsx new file mode 100644 index 0000000..33c6334 --- /dev/null +++ b/src/widgets/UserGrid/UserGrid.tsx @@ -0,0 +1,264 @@ +import React, { useRef, useState } from "react"; +import styled from "styled-components"; +import right from "../../../public/icons/arrow-right.svg"; +import { IUser } from "../../shared/api/models"; +import avatar from "../../../public/icons/avatar.svg"; +import { UserBlock } from "../../features/UserBlock"; + +const Container = styled.div` + flex: 1 1; + width: 100%; + overflow-x: hidden; + &::-webkit-scrollbar { + width: 0; + } + margin-bottom: 13px; +`; + +const List = styled.div` + position: relative; + display: grid; + min-width: 100%; + height: 100%; + left: 0; + grid-template-rows: repeat(3, minmax(170px, 1fr)); + grid-template-columns: minmax(276px, 0.2fr); + grid-auto-columns: minmax(276px, 0.2fr); + grid-auto-flow: column; + gap: 12px; + transition: all 0.4s ease-out; +`; + +const ShowMoreButton = styled.button` + display: flex; + justify-content: center; + align-items: center; + width: 38px; + height: 38px; + background: var(--white, #fff); + box-shadow: 0px 0px 2px 0px #c5ccd5; + border-radius: 50%; + position: absolute; + top: 50%; + transform: translate(0, -50%); + z-index: 1000; + + &:hover { + cursor: pointer; + box-shadow: 0px 0px 2px 0px #c5ccd5, + -2px -2px 4px 0px rgba(0, 0, 0, 0.1) inset; + } + + &:disabled { + cursor: default; + box-shadow: 0px 0px 2px 0px #989da3; + opacity: 0.5; + } +`; + +const peopleList: IUser[] = [ + { + email: "jjj", + email_verified: true, + name: "Пышненко Дмитрий Алексеевич", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, +]; + +const UserGrid: React.FC = () => { + const list = useRef(null); + const [listPage, setListPage] = useState(1); + const lengthPage = 15; + const maxPage: number = Math.ceil(peopleList.length / lengthPage); + + function moveRight() { + if (!checkDisabled("right")) { + list.current ? (list.current.style.left = `-${listPage * 100}%`) : ""; + setListPage(listPage + 1); + } + } + + function moveLeft() { + if (!checkDisabled("left")) { + list.current + ? (list.current.style.left = `-${(listPage - 2) * 100}%`) + : ""; + setListPage(listPage - 1); + } + } + + function checkDisabled(button: string): boolean { + switch (button) { + case "left": + return listPage > 1 ? false : true; + case "right": + return listPage < maxPage ? false : true; + default: + return false; + } + } + + return ( + + + + + + {peopleList.map((people) => ( + + ))} + + + + + + ); +}; + +export default UserGrid; diff --git a/src/widgets/layout/ControllersWrapper.tsx b/src/widgets/layout/ControllersWrapper.tsx index ce1c674..ffc0b0b 100644 --- a/src/widgets/layout/ControllersWrapper.tsx +++ b/src/widgets/layout/ControllersWrapper.tsx @@ -1,33 +1,32 @@ -import React from 'react'; -import styled from 'styled-components'; +import React from "react"; +import styled from "styled-components"; const Container = styled.div` - width: 100%; - padding: 20px 0; - background-color: var(--bg); -` + width: 100%; + padding: 20px 0; + background-color: var(--bg); + border-top: 0.5px solid var(--grey-5, #d5dee8); +`; const Content = styled.div` - width: 100%; - max-width: 1440px; - display: flex; - justify-content: space-between; - align-items: center; - margin: 0 auto; -` + width: 100%; + max-width: 1440px; + display: flex; + justify-content: space-between; + align-items: center; + margin: 0 auto; +`; interface Props { - children?: React.ReactNode, + children?: React.ReactNode; } const ControllersWrapper: React.FC = ({ children }) => { return ( - - {children} - + {children} - ) -} + ); +}; -export default ControllersWrapper \ No newline at end of file +export default ControllersWrapper; From 08641d95670af7b450ad114d848023fdcd16e92a Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 4 Aug 2023 00:18:15 +0600 Subject: [PATCH 41/47] fix delete error --- src/features/editRoom/model/delete.ts | 3 ++- src/features/editRoom/model/index.ts | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/features/editRoom/model/delete.ts b/src/features/editRoom/model/delete.ts index d804822..b4bf2d0 100644 --- a/src/features/editRoom/model/delete.ts +++ b/src/features/editRoom/model/delete.ts @@ -1,11 +1,12 @@ export const DeleteThunk= (id: number) => { const API = String(import.meta.env.VITE_API); - fetch(`${API}/channels/${id}`, { + fetch(`${API}/channels/`, { method : 'DELETE', headers: { 'Content-type': 'application/json', }, + body : JSON.stringify({id}), }) .then(response => response.text()) .then(response => { diff --git a/src/features/editRoom/model/index.ts b/src/features/editRoom/model/index.ts index f4db6f9..4085771 100644 --- a/src/features/editRoom/model/index.ts +++ b/src/features/editRoom/model/index.ts @@ -3,8 +3,8 @@ export const EditThunk= (event: any, id: number, title: string, isPublic: boolea const API = String(import.meta.env.VITE_API); const editedRoom = { - name: title, - public: isPublic, + name: title, + public: isPublic, } fetch(`${API}/channels/${id}`, { From 6293260bbc7e3740f8ace9f72f05ff3428b19475 Mon Sep 17 00:00:00 2001 From: BodySites <100404530+BodySites@users.noreply.github.com> Date: Sun, 6 Aug 2023 15:39:02 +0600 Subject: [PATCH 42/47] split grid into pages of 15 elements and change its layout --- src/features/UserBlock/ui/UserBlock.tsx | 4 +- src/widgets/UserGrid/UserGrid.tsx | 78 ++++++++++++++++++------- 2 files changed, 59 insertions(+), 23 deletions(-) diff --git a/src/features/UserBlock/ui/UserBlock.tsx b/src/features/UserBlock/ui/UserBlock.tsx index 0533569..5ba7480 100644 --- a/src/features/UserBlock/ui/UserBlock.tsx +++ b/src/features/UserBlock/ui/UserBlock.tsx @@ -6,8 +6,8 @@ import monitor from "../../../../public/icons/monitor-mini.svg"; const Container = styled.div` border-radius: 8px; - min-width: 276px; - min-height: 170px; + min-width: 278.4px; + min-height: 169px; position: relative; `; diff --git a/src/widgets/UserGrid/UserGrid.tsx b/src/widgets/UserGrid/UserGrid.tsx index 33c6334..ae00611 100644 --- a/src/widgets/UserGrid/UserGrid.tsx +++ b/src/widgets/UserGrid/UserGrid.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from "react"; +import React, { CSSProperties, useRef, useState } from "react"; import styled from "styled-components"; import right from "../../../public/icons/arrow-right.svg"; import { IUser } from "../../shared/api/models"; @@ -17,16 +17,19 @@ const Container = styled.div` const List = styled.div` position: relative; - display: grid; min-width: 100%; height: 100%; left: 0; - grid-template-rows: repeat(3, minmax(170px, 1fr)); - grid-template-columns: minmax(276px, 0.2fr); - grid-auto-columns: minmax(276px, 0.2fr); - grid-auto-flow: column; + display: flex; + flex-wrap: nowrap; + transition: left 0.4s ease-out; +`; + +const ListPage = styled.div` + flex: 1 0 1440px; + display: grid; + height: 100%; gap: 12px; - transition: all 0.4s ease-out; `; const ShowMoreButton = styled.button` @@ -205,32 +208,69 @@ const peopleList: IUser[] = [ const UserGrid: React.FC = () => { const list = useRef(null); - const [listPage, setListPage] = useState(1); + const refPage = useRef(null); + const [numberPage, setNumberPage] = useState(1); const lengthPage = 15; const maxPage: number = Math.ceil(peopleList.length / lengthPage); + const listPages = []; + + const getCSSGridStyles = (numberOfItems: number): CSSProperties => { + if (numberOfItems <= 1) { + return { gridTemplate: "1fr / 1fr" }; + } else if (numberOfItems <= 2) { + return { gridTemplate: "1fr / repeat(2, 1fr)" }; + } else if (numberOfItems <= 6) { + return { gridTemplate: "repeat(2, 1fr) / repeat(3, 1fr)" }; + } else if (numberOfItems <= 8) { + return { gridTemplate: "repeat(2, 1fr) / repeat(4, 1fr)" }; + } else if (numberOfItems <= 12) { + return { gridTemplate: "repeat(3, 1fr) / repeat(4, 1fr)" }; + } else { + return { gridTemplate: "repeat(3, 1fr) / repeat(5, 1fr)" }; + } + }; + + for (let i = 0; i < maxPage; i++) { + const listPage = peopleList + .slice(i * lengthPage, (i + 1) * lengthPage) + .map((people, index) => ( + + )); + listPages.push( + + {listPage} + + ); + } function moveRight() { if (!checkDisabled("right")) { - list.current ? (list.current.style.left = `-${listPage * 100}%`) : ""; - setListPage(listPage + 1); + list.current && refPage.current + ? (list.current.style.left = `-${ + numberPage * refPage.current?.offsetWidth + }px`) + : ""; + setNumberPage(numberPage + 1); } } function moveLeft() { if (!checkDisabled("left")) { - list.current - ? (list.current.style.left = `-${(listPage - 2) * 100}%`) + list.current && refPage.current + ? (list.current.style.left = `-${ + (numberPage - 2) * refPage.current?.offsetWidth + }px`) : ""; - setListPage(listPage - 1); + setNumberPage(numberPage - 1); } } function checkDisabled(button: string): boolean { switch (button) { case "left": - return listPage > 1 ? false : true; + return numberPage > 1 ? false : true; case "right": - return listPage < maxPage ? false : true; + return numberPage < maxPage ? false : true; default: return false; } @@ -245,13 +285,9 @@ const UserGrid: React.FC = () => { > - - {peopleList.map((people) => ( - - ))} - + {listPages} From 0c4da620316e7f18c55d0a58c0835809891334ad Mon Sep 17 00:00:00 2001 From: BodySites <100404530+BodySites@users.noreply.github.com> Date: Sun, 6 Aug 2023 20:21:19 +0600 Subject: [PATCH 43/47] remove fixed width and fix layout of the CallPage --- src/pages/CallPageCustomUI/CallPage.tsx | 3 ++- src/widgets/UserGrid/UserGrid.tsx | 15 ++++++++------- src/widgets/layout/ControllersWrapper.tsx | 7 ++++--- 3 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/pages/CallPageCustomUI/CallPage.tsx b/src/pages/CallPageCustomUI/CallPage.tsx index dd6d911..eaf7e12 100644 --- a/src/pages/CallPageCustomUI/CallPage.tsx +++ b/src/pages/CallPageCustomUI/CallPage.tsx @@ -9,7 +9,8 @@ const Container = styled.div` flex-direction: column; justify-content: space-between; width: 100%; - max-width: 1440px; + /* max-width: 1440px; */ + padding: 0 48px; height: 100vh; margin: 0 auto; background: var(--white); diff --git a/src/widgets/UserGrid/UserGrid.tsx b/src/widgets/UserGrid/UserGrid.tsx index ae00611..6d93da6 100644 --- a/src/widgets/UserGrid/UserGrid.tsx +++ b/src/widgets/UserGrid/UserGrid.tsx @@ -26,7 +26,12 @@ const List = styled.div` `; const ListPage = styled.div` - flex: 1 0 1440px; + flex: 0 0; + min-width: 100%; + overflow-x: auto; + &::-webkit-scrollbar { + /* width: 0; */ + } display: grid; height: 100%; gap: 12px; @@ -246,9 +251,7 @@ const UserGrid: React.FC = () => { function moveRight() { if (!checkDisabled("right")) { list.current && refPage.current - ? (list.current.style.left = `-${ - numberPage * refPage.current?.offsetWidth - }px`) + ? (list.current.style.left = `-${numberPage * 100}%`) : ""; setNumberPage(numberPage + 1); } @@ -257,9 +260,7 @@ const UserGrid: React.FC = () => { function moveLeft() { if (!checkDisabled("left")) { list.current && refPage.current - ? (list.current.style.left = `-${ - (numberPage - 2) * refPage.current?.offsetWidth - }px`) + ? (list.current.style.left = `-${(numberPage - 2) * 100}%`) : ""; setNumberPage(numberPage - 1); } diff --git a/src/widgets/layout/ControllersWrapper.tsx b/src/widgets/layout/ControllersWrapper.tsx index ffc0b0b..681db5f 100644 --- a/src/widgets/layout/ControllersWrapper.tsx +++ b/src/widgets/layout/ControllersWrapper.tsx @@ -2,15 +2,16 @@ import React from "react"; import styled from "styled-components"; const Container = styled.div` - width: 100%; - padding: 20px 0; + width: calc(100% + 96px); + margin-left: -48px; + padding: 20px 48px; background-color: var(--bg); border-top: 0.5px solid var(--grey-5, #d5dee8); `; const Content = styled.div` width: 100%; - max-width: 1440px; + /* max-width: 1440px; */ display: flex; justify-content: space-between; align-items: center; From fb9a88c06dbe719a7cb78650dd653fa9bb594c47 Mon Sep 17 00:00:00 2001 From: BodySites <100404530+BodySites@users.noreply.github.com> Date: Sun, 6 Aug 2023 20:32:19 +0600 Subject: [PATCH 44/47] change scrollbar in the CallPage --- src/widgets/UserGrid/UserGrid.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/widgets/UserGrid/UserGrid.tsx b/src/widgets/UserGrid/UserGrid.tsx index 6d93da6..96ccb3a 100644 --- a/src/widgets/UserGrid/UserGrid.tsx +++ b/src/widgets/UserGrid/UserGrid.tsx @@ -30,7 +30,15 @@ const ListPage = styled.div` min-width: 100%; overflow-x: auto; &::-webkit-scrollbar { - /* width: 0; */ + width: 5px; + height: 5px; + } + &::-webkit-scrollbar-track { + opacity: 0; + } + &::-webkit-scrollbar-thumb { + border-radius: 5px; + background: rgba(41, 45, 51, 0.3); } display: grid; height: 100%; From 8a73e5a4eada6ec566257f270b5524cda52d2501 Mon Sep 17 00:00:00 2001 From: BodySites <100404530+BodySites@users.noreply.github.com> Date: Thu, 10 Aug 2023 22:18:09 +0600 Subject: [PATCH 45/47] add adaptive for CallPage and its grid, add sidebar of participants --- public/icons/camera-mini-gray-off.svg | 6 + public/icons/camera-mini-gray-on.svg | 4 + public/icons/chat.svg | 5 + public/icons/close-participiants.svg | 5 + public/icons/hand-up-mini.svg | 6 + public/icons/microphone-mini-gray-off.svg | 8 + public/icons/microphone-mini-gray-on.svg | 6 + ...-mini.svg => microphone-mini-white-on.svg} | 0 public/icons/monitor-green-eye2.svg | 8 + public/icons/monitor-mini-gray-off.svg | 7 + ...or-mini.svg => monitor-mini-white-off.svg} | 0 public/icons/monitor-red-eye.svg | 8 + public/icons/one-switch.svg | 13 ++ public/icons/participants.svg | 7 + public/icons/two-switch.svg | 11 + src/features/Participant/index.ts | 1 + .../Participant/ui/ParticipantCard.tsx | 87 +++++++ src/features/UserBlock/ui/UserBlock.tsx | 4 +- src/pages/CallPageCustomUI/CallPage.tsx | 187 ++++++++++++++- .../CallPageCustomUI/store/participants.ts | 19 ++ .../ParticipantsList/ParticipantsList.tsx | 35 +++ src/widgets/UserGrid/UserGrid.tsx | 214 ++++-------------- src/widgets/layout/ControllersWrapper.tsx | 1 - src/widgets/layout/Sidebar.tsx | 9 - src/widgets/layout/Sidebar/Sidebar.tsx | 137 +++++++++++ src/widgets/layout/Sidebar/styles.module.css | 118 ++++++++++ 26 files changed, 713 insertions(+), 193 deletions(-) create mode 100644 public/icons/camera-mini-gray-off.svg create mode 100644 public/icons/camera-mini-gray-on.svg create mode 100644 public/icons/chat.svg create mode 100644 public/icons/close-participiants.svg create mode 100644 public/icons/hand-up-mini.svg create mode 100644 public/icons/microphone-mini-gray-off.svg create mode 100644 public/icons/microphone-mini-gray-on.svg rename public/icons/{microphone-mini.svg => microphone-mini-white-on.svg} (100%) create mode 100644 public/icons/monitor-green-eye2.svg create mode 100644 public/icons/monitor-mini-gray-off.svg rename public/icons/{monitor-mini.svg => monitor-mini-white-off.svg} (100%) create mode 100644 public/icons/monitor-red-eye.svg create mode 100644 public/icons/one-switch.svg create mode 100644 public/icons/participants.svg create mode 100644 public/icons/two-switch.svg create mode 100644 src/features/Participant/index.ts create mode 100644 src/features/Participant/ui/ParticipantCard.tsx create mode 100644 src/pages/CallPageCustomUI/store/participants.ts create mode 100644 src/widgets/ParticipantsList/ParticipantsList.tsx delete mode 100644 src/widgets/layout/Sidebar.tsx create mode 100644 src/widgets/layout/Sidebar/Sidebar.tsx create mode 100644 src/widgets/layout/Sidebar/styles.module.css diff --git a/public/icons/camera-mini-gray-off.svg b/public/icons/camera-mini-gray-off.svg new file mode 100644 index 0000000..2083511 --- /dev/null +++ b/public/icons/camera-mini-gray-off.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icons/camera-mini-gray-on.svg b/public/icons/camera-mini-gray-on.svg new file mode 100644 index 0000000..c6d465e --- /dev/null +++ b/public/icons/camera-mini-gray-on.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icons/chat.svg b/public/icons/chat.svg new file mode 100644 index 0000000..5a19776 --- /dev/null +++ b/public/icons/chat.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/icons/close-participiants.svg b/public/icons/close-participiants.svg new file mode 100644 index 0000000..5ca9527 --- /dev/null +++ b/public/icons/close-participiants.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/icons/hand-up-mini.svg b/public/icons/hand-up-mini.svg new file mode 100644 index 0000000..7a12e8f --- /dev/null +++ b/public/icons/hand-up-mini.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icons/microphone-mini-gray-off.svg b/public/icons/microphone-mini-gray-off.svg new file mode 100644 index 0000000..71d4b6c --- /dev/null +++ b/public/icons/microphone-mini-gray-off.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/icons/microphone-mini-gray-on.svg b/public/icons/microphone-mini-gray-on.svg new file mode 100644 index 0000000..7fb92b8 --- /dev/null +++ b/public/icons/microphone-mini-gray-on.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icons/microphone-mini.svg b/public/icons/microphone-mini-white-on.svg similarity index 100% rename from public/icons/microphone-mini.svg rename to public/icons/microphone-mini-white-on.svg diff --git a/public/icons/monitor-green-eye2.svg b/public/icons/monitor-green-eye2.svg new file mode 100644 index 0000000..5a5a3b4 --- /dev/null +++ b/public/icons/monitor-green-eye2.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/icons/monitor-mini-gray-off.svg b/public/icons/monitor-mini-gray-off.svg new file mode 100644 index 0000000..19d9593 --- /dev/null +++ b/public/icons/monitor-mini-gray-off.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/icons/monitor-mini.svg b/public/icons/monitor-mini-white-off.svg similarity index 100% rename from public/icons/monitor-mini.svg rename to public/icons/monitor-mini-white-off.svg diff --git a/public/icons/monitor-red-eye.svg b/public/icons/monitor-red-eye.svg new file mode 100644 index 0000000..e4fd9eb --- /dev/null +++ b/public/icons/monitor-red-eye.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/icons/one-switch.svg b/public/icons/one-switch.svg new file mode 100644 index 0000000..9bf844a --- /dev/null +++ b/public/icons/one-switch.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/icons/participants.svg b/public/icons/participants.svg new file mode 100644 index 0000000..80b6a48 --- /dev/null +++ b/public/icons/participants.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/icons/two-switch.svg b/public/icons/two-switch.svg new file mode 100644 index 0000000..5fd8d61 --- /dev/null +++ b/public/icons/two-switch.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/features/Participant/index.ts b/src/features/Participant/index.ts new file mode 100644 index 0000000..a621b1b --- /dev/null +++ b/src/features/Participant/index.ts @@ -0,0 +1 @@ +export { ParticipantCard } from "./ui/ParticipantCard"; diff --git a/src/features/Participant/ui/ParticipantCard.tsx b/src/features/Participant/ui/ParticipantCard.tsx new file mode 100644 index 0000000..1df47f9 --- /dev/null +++ b/src/features/Participant/ui/ParticipantCard.tsx @@ -0,0 +1,87 @@ +import React from "react"; +import styled from "styled-components"; +import handUp from "../../../../public/icons/hand-up-mini.svg"; +import microOn from "../../../../public/icons/microphone-mini-gray-on.svg"; +import cameraOn from "../../../../public/icons/camera-mini-gray-on.svg"; +import monitorOff from "../../../../public/icons/monitor-mini-gray-off.svg"; + +const Container = styled.div` + width: 100%; + height: 44px; + display: flex; + justify-content: space-between; + align-items: center; +`; + +const UserInfo = styled.div` + display: flex; + align-items: center; + gap: 8px; + max-width: 206px; + overflow: hidden; + position: relative; + &:after { + position: absolute; + top: 0; + right: 0; + height: 100%; + width: 10px; + background: linear-gradient(90deg, transparent 0, #fff 100%); + content: ""; + } +`; + +const Text = styled.div` + color: #000; + font-family: var(--font); + font-size: 14px; + font-weight: 400; + line-height: normal; +`; + +const ControllerInfo = styled.div` + display: flex; + width: 28px; + height: 28px; + justify-content: center; + align-items: center; +`; + +interface Props { + avatar: string; + name: string; + isActive: boolean; +} + +export const ParticipantCard: React.FC = ({ + avatar, + name, + isActive, +}) => { + return ( + + + + {name} + + {isActive ? ( +
+ + + + + + + + + + + + +
+ ) : ( + "" + )} + + ); +}; diff --git a/src/features/UserBlock/ui/UserBlock.tsx b/src/features/UserBlock/ui/UserBlock.tsx index 5ba7480..5984bd2 100644 --- a/src/features/UserBlock/ui/UserBlock.tsx +++ b/src/features/UserBlock/ui/UserBlock.tsx @@ -1,8 +1,8 @@ import React from "react"; import styled from "styled-components"; import defaultAvatar from "../../../../public/icons/avatar.svg"; -import micro from "../../../../public/icons/microphone-mini.svg"; -import monitor from "../../../../public/icons/monitor-mini.svg"; +import micro from "../../../../public/icons/microphone-mini-white-on.svg"; +import monitor from "../../../../public/icons/monitor-mini-white-off.svg"; const Container = styled.div` border-radius: 8px; diff --git a/src/pages/CallPageCustomUI/CallPage.tsx b/src/pages/CallPageCustomUI/CallPage.tsx index eaf7e12..9552744 100644 --- a/src/pages/CallPageCustomUI/CallPage.tsx +++ b/src/pages/CallPageCustomUI/CallPage.tsx @@ -3,29 +3,196 @@ import styled from "styled-components"; import CallInfo from "../../widgets/CallInfo"; import CallControllers from "../../widgets/CallControllers"; import UserGrid from "../../widgets/UserGrid/UserGrid"; +import { IUser } from "../../shared/api/models"; +import avatar from "../../../public/icons/avatar.svg"; +import Sidebar from "../../widgets/layout/Sidebar/Sidebar"; +import storeParticipants from "./store/participants"; +import { observer } from "mobx-react-lite"; const Container = styled.div` + width: 100%; + display: flex; + flex-wrap: nowrap; + align-items: stretch; + background: var(--white); + overflow: hidden; +`; + +const Content = styled.div` + flex: 0 1; display: flex; flex-direction: column; justify-content: space-between; - width: 100%; - /* max-width: 1440px; */ padding: 0 48px; height: 100vh; margin: 0 auto; - background: var(--white); + position: relative; `; -//calc((100% - 1440px) / 2) +const peopleList: IUser[] = [ + { + email: "jjj", + email_verified: true, + name: "Пышненко Дмитрий Алексеевич", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, + { + email: "jjj", + email_verified: true, + name: "Иванов Иван Иванович", + nickname: "jjj", + picture: `${avatar}`, + sub: "", + updated_at: "11.11.1999", + }, +]; -const CallPAge: React.FC = () => { +const CallPage: React.FC = observer(() => { return ( - - - + + + + + + ); -}; +}); -export default CallPAge; +export default CallPage; diff --git a/src/pages/CallPageCustomUI/store/participants.ts b/src/pages/CallPageCustomUI/store/participants.ts new file mode 100644 index 0000000..1724fbd --- /dev/null +++ b/src/pages/CallPageCustomUI/store/participants.ts @@ -0,0 +1,19 @@ +import { makeAutoObservable } from "mobx"; + +class Participants { + isActive = false; + + constructor() { + makeAutoObservable(this); + } + + openParticipants() { + this.isActive = true; + } + + closeParticipants() { + this.isActive = false; + } +} + +export default new Participants(); diff --git a/src/widgets/ParticipantsList/ParticipantsList.tsx b/src/widgets/ParticipantsList/ParticipantsList.tsx new file mode 100644 index 0000000..56057d7 --- /dev/null +++ b/src/widgets/ParticipantsList/ParticipantsList.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import styled from "styled-components"; +import { IUser } from "../../shared/api/models"; +import { ParticipantCard } from "../../features/Participant"; + +const Container = styled.div` + display: flex; + width: 100%; + flex-direction: column; + align-items: flex-start; + gap: 20px; + padding-top: 3px; +`; + +interface Props { + isActive: boolean; + peopleList: IUser[]; +} + +const ParticipantsList: React.FC = ({ isActive, peopleList }) => { + return ( + + {peopleList.map((people, index) => ( + + ))} + + ); +}; + +export default ParticipantsList; diff --git a/src/widgets/UserGrid/UserGrid.tsx b/src/widgets/UserGrid/UserGrid.tsx index 96ccb3a..7fe5eb2 100644 --- a/src/widgets/UserGrid/UserGrid.tsx +++ b/src/widgets/UserGrid/UserGrid.tsx @@ -1,13 +1,20 @@ -import React, { CSSProperties, useRef, useState } from "react"; +import React, { + CSSProperties, + ReactElement, + useEffect, + useRef, + useState, +} from "react"; import styled from "styled-components"; import right from "../../../public/icons/arrow-right.svg"; -import { IUser } from "../../shared/api/models"; -import avatar from "../../../public/icons/avatar.svg"; import { UserBlock } from "../../features/UserBlock"; +import storeParticipants from "../../pages/CallPageCustomUI/store/participants"; +import { observer } from "mobx-react-lite"; +import { IUser } from "../../shared/api/models"; const Container = styled.div` flex: 1 1; - width: 100%; + max-width: 100%; overflow-x: hidden; &::-webkit-scrollbar { width: 0; @@ -72,160 +79,23 @@ const ShowMoreButton = styled.button` } `; -const peopleList: IUser[] = [ - { - email: "jjj", - email_verified: true, - name: "Пышненко Дмитрий Алексеевич", - nickname: "jjj", - picture: `${avatar}`, - sub: "", - updated_at: "11.11.1999", - }, - { - email: "jjj", - email_verified: true, - name: "Иванов Иван Иванович", - nickname: "jjj", - picture: `${avatar}`, - sub: "", - updated_at: "11.11.1999", - }, - { - email: "jjj", - email_verified: true, - name: "Иванов Иван Иванович", - nickname: "jjj", - picture: `${avatar}`, - sub: "", - updated_at: "11.11.1999", - }, - { - email: "jjj", - email_verified: true, - name: "Иванов Иван Иванович", - nickname: "jjj", - picture: `${avatar}`, - sub: "", - updated_at: "11.11.1999", - }, - { - email: "jjj", - email_verified: true, - name: "Иванов Иван Иванович", - nickname: "jjj", - picture: `${avatar}`, - sub: "", - updated_at: "11.11.1999", - }, - { - email: "jjj", - email_verified: true, - name: "Иванов Иван Иванович", - nickname: "jjj", - picture: `${avatar}`, - sub: "", - updated_at: "11.11.1999", - }, - { - email: "jjj", - email_verified: true, - name: "Иванов Иван Иванович", - nickname: "jjj", - picture: `${avatar}`, - sub: "", - updated_at: "11.11.1999", - }, - { - email: "jjj", - email_verified: true, - name: "Иванов Иван Иванович", - nickname: "jjj", - picture: `${avatar}`, - sub: "", - updated_at: "11.11.1999", - }, - { - email: "jjj", - email_verified: true, - name: "Иванов Иван Иванович", - nickname: "jjj", - picture: `${avatar}`, - sub: "", - updated_at: "11.11.1999", - }, - { - email: "jjj", - email_verified: true, - name: "Иванов Иван Иванович", - nickname: "jjj", - picture: `${avatar}`, - sub: "", - updated_at: "11.11.1999", - }, - { - email: "jjj", - email_verified: true, - name: "Иванов Иван Иванович", - nickname: "jjj", - picture: `${avatar}`, - sub: "", - updated_at: "11.11.1999", - }, - { - email: "jjj", - email_verified: true, - name: "Иванов Иван Иванович", - nickname: "jjj", - picture: `${avatar}`, - sub: "", - updated_at: "11.11.1999", - }, - { - email: "jjj", - email_verified: true, - name: "Иванов Иван Иванович", - nickname: "jjj", - picture: `${avatar}`, - sub: "", - updated_at: "11.11.1999", - }, - { - email: "jjj", - email_verified: true, - name: "Иванов Иван Иванович", - nickname: "jjj", - picture: `${avatar}`, - sub: "", - updated_at: "11.11.1999", - }, - { - email: "jjj", - email_verified: true, - name: "Иванов Иван Иванович", - nickname: "jjj", - picture: `${avatar}`, - sub: "", - updated_at: "11.11.1999", - }, - { - email: "jjj", - email_verified: true, - name: "Иванов Иван Иванович", - nickname: "jjj", - picture: `${avatar}`, - sub: "", - updated_at: "11.11.1999", - }, -]; +interface Props { + peopleList: IUser[]; +} -const UserGrid: React.FC = () => { +const UserGrid: React.FC = observer(({ peopleList }) => { const list = useRef(null); - const refPage = useRef(null); const [numberPage, setNumberPage] = useState(1); - const lengthPage = 15; - const maxPage: number = Math.ceil(peopleList.length / lengthPage); - const listPages = []; + const [listPages, setListPages] = useState[]>([]); + let lengthPage = storeParticipants.isActive ? 6 : 15; + let maxPage = Math.ceil(peopleList.length / lengthPage); + let gridList = []; + + useEffect(() => { + lengthPage = storeParticipants.isActive ? 6 : 15; + maxPage = Math.ceil(peopleList.length / lengthPage); + getStylesGrid(); + }, [storeParticipants.isActive]); const getCSSGridStyles = (numberOfItems: number): CSSProperties => { if (numberOfItems <= 1) { @@ -243,31 +113,33 @@ const UserGrid: React.FC = () => { } }; - for (let i = 0; i < maxPage; i++) { - const listPage = peopleList - .slice(i * lengthPage, (i + 1) * lengthPage) - .map((people, index) => ( - - )); - listPages.push( - - {listPage} - - ); + function getStylesGrid() { + gridList = []; + for (let i = 0; i < maxPage; i++) { + const listPage = peopleList + .slice(i * lengthPage, (i + 1) * lengthPage) + .map((people, index) => ( + + )); + gridList.push( + + {listPage} + + ); + } + setListPages(gridList); } function moveRight() { if (!checkDisabled("right")) { - list.current && refPage.current - ? (list.current.style.left = `-${numberPage * 100}%`) - : ""; + list.current ? (list.current.style.left = `-${numberPage * 100}%`) : ""; setNumberPage(numberPage + 1); } } function moveLeft() { if (!checkDisabled("left")) { - list.current && refPage.current + list.current ? (list.current.style.left = `-${(numberPage - 2) * 100}%`) : ""; setNumberPage(numberPage - 1); @@ -304,6 +176,6 @@ const UserGrid: React.FC = () => { ); -}; +}); export default UserGrid; diff --git a/src/widgets/layout/ControllersWrapper.tsx b/src/widgets/layout/ControllersWrapper.tsx index 681db5f..3acae0e 100644 --- a/src/widgets/layout/ControllersWrapper.tsx +++ b/src/widgets/layout/ControllersWrapper.tsx @@ -11,7 +11,6 @@ const Container = styled.div` const Content = styled.div` width: 100%; - /* max-width: 1440px; */ display: flex; justify-content: space-between; align-items: center; diff --git a/src/widgets/layout/Sidebar.tsx b/src/widgets/layout/Sidebar.tsx deleted file mode 100644 index 9b28c0b..0000000 --- a/src/widgets/layout/Sidebar.tsx +++ /dev/null @@ -1,9 +0,0 @@ -// import React from 'react' - -const Sidebar = () => { - return ( -
Sidebar
- ) -} - -export default Sidebar \ No newline at end of file diff --git a/src/widgets/layout/Sidebar/Sidebar.tsx b/src/widgets/layout/Sidebar/Sidebar.tsx new file mode 100644 index 0000000..25e74a7 --- /dev/null +++ b/src/widgets/layout/Sidebar/Sidebar.tsx @@ -0,0 +1,137 @@ +import React, { useState } from "react"; +import styled from "styled-components"; +import participiants from "../../../../public/icons/participants.svg"; +import closeParts from "../../../../public/icons/close-participiants.svg"; +import storeParticipants from "../../../pages/CallPageCustomUI/store/participants"; +import storeChat from "../../../pages/CallPageCustomUI/store/chat"; +import chat from "../../../../public/icons/chat.svg"; +import oneSwitch from "../../../../public/icons/one-switch.svg"; +import twoSwitch from "../../../../public/icons/two-switch.svg"; +import { observer } from "mobx-react-lite"; +import styles from "./styles.module.css"; +import { IUser } from "../../../shared/api/models"; +import ParticipantsList from "../../ParticipantsList/ParticipantsList"; + +const OpenButton = styled.div` + position: absolute; + right: 0; + top: 21px; + display: flex; + width: 48px; + height: 48px; + justify-content: center; + align-items: center; + border-radius: 10px 0px 0px 10px; + background: var(--orange, #f90); + box-shadow: 0px 0px 2px 0px #c5ccd5; + + &:hover { + cursor: pointer; + background: linear-gradient(135deg, #f90 0%, rgba(255, 153, 0, 0.7) 100%); + } +`; + +const Image = styled.img` + width: 34px; + height: 34px; +`; + +const Container = styled.div` + flex: 0 0 373px; + display: none; + flex-direction: column; + padding-top: 30px; + align-items: center; + row-gap: 26px; + flex-wrap: nowrap; + border-left: 0.5px solid var(--grey-5, #d5dee8); + background: rgba(255, 255, 255, 0.95); +`; + +interface Props { + peopleList: IUser[]; +} + +const Sidebar: React.FC = observer(({ peopleList }) => { + const [active, setActive] = useState(false); + const [displaySwitch, setDisplaySwitch] = useState(false); + + function changeActive() { + active + ? storeParticipants.closeParticipants() + : storeParticipants.openParticipants(); + setActive(!active); + } + + function rightDisplay() { + setDisplaySwitch(true); + } + + function leftDisplay() { + setDisplaySwitch(false); + } + + function openChat() { + storeChat.openChat(); + } + + return ( + <> + + + + +
+
+ +
+
УЧАСТНИКИ (14)
+ +
+
+
Подключены (12)
+
+
+ +
+
+ +
+
+
+
+ +
+
+
Не подключены (2)
+
+
+ +
+ + + ); +}); + +export default Sidebar; diff --git a/src/widgets/layout/Sidebar/styles.module.css b/src/widgets/layout/Sidebar/styles.module.css new file mode 100644 index 0000000..49b2f3e --- /dev/null +++ b/src/widgets/layout/Sidebar/styles.module.css @@ -0,0 +1,118 @@ +.header { + display: flex; + width: 100%; + padding: 0px 14px; + justify-content: space-between; + align-items: center; +} + +.text { + color: #000; + font-family: var(--font); + font-size: 20px; + font-weight: 500; +} + +.closeImg { + width: 24px; + height: 18.6px; +} + +.close { + display: flex; + width: 34px; + height: 34px; + justify-content: center; + align-items: center; + + &:hover { + cursor: pointer; + } +} + +.chat { + width: 23.916px; + height: 21.742px; +} + +.chat:hover { + cursor: pointer; +} + +.joinedHead { + display: flex; + width: 100%; + padding: 0px 14px; + justify-content: space-between; + align-items: center; +} + +.countJoined { + color: black; + font-family: var(--font); + font-size: 16px; + font-weight: 600; +} + +.switchPanel { + display: flex; + width: 66px; + height: 34px; + padding: 0px 4px; + align-items: center; + gap: 6px; + border-radius: 18px; + background: var(--white, #fff); + box-shadow: 0px 0px 2px 0px #c5ccd5; +} + +.switch { + display: flex; + width: 28px; + height: 28px; + justify-content: center; + align-items: center; + border-radius: 18px; + opacity: 0.5; +} + +.switch:hover { + cursor: pointer; +} + +.switch.active { + background: var(--grey-6, #f9fafe); + box-shadow: 0px 0px 2px 0px #c5ccd5; + opacity: 1; +} + +.list { + overflow-y: auto; + align-self: flex-start; + width: 97%; + padding: 0px 14px; + flex: 1 0 0; + position: relative; + top: -3px; +} + +.list::after{ + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 20px; + background: linear-gradient(180deg, transparent 0, #fff 100%); +} + +.list::-webkit-scrollbar { + width: 5px; +} +.list::-webkit-scrollbar-track { + opacity: 0; +} +.list::-webkit-scrollbar-thumb { + border-radius: 5px; + background: rgba(41, 45, 51, 0.3); +} From da5e377ecaa10fe06d3069d39b163692b87d26ed Mon Sep 17 00:00:00 2001 From: BodySites <100404530+BodySites@users.noreply.github.com> Date: Thu, 10 Aug 2023 23:07:19 +0600 Subject: [PATCH 46/47] fix: when closing participants, an empty grid could appear --- src/widgets/UserGrid/UserGrid.tsx | 1 + src/widgets/layout/Sidebar/styles.module.css | 10 ---------- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/src/widgets/UserGrid/UserGrid.tsx b/src/widgets/UserGrid/UserGrid.tsx index 7fe5eb2..d7c24bc 100644 --- a/src/widgets/UserGrid/UserGrid.tsx +++ b/src/widgets/UserGrid/UserGrid.tsx @@ -94,6 +94,7 @@ const UserGrid: React.FC = observer(({ peopleList }) => { useEffect(() => { lengthPage = storeParticipants.isActive ? 6 : 15; maxPage = Math.ceil(peopleList.length / lengthPage); + numberPage > maxPage ? moveLeft() : ""; getStylesGrid(); }, [storeParticipants.isActive]); diff --git a/src/widgets/layout/Sidebar/styles.module.css b/src/widgets/layout/Sidebar/styles.module.css index 49b2f3e..79b03ed 100644 --- a/src/widgets/layout/Sidebar/styles.module.css +++ b/src/widgets/layout/Sidebar/styles.module.css @@ -96,16 +96,6 @@ top: -3px; } -.list::after{ - content: ""; - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 20px; - background: linear-gradient(180deg, transparent 0, #fff 100%); -} - .list::-webkit-scrollbar { width: 5px; } From 94ae101b6a1154a5ffec8d61300e7eafbc74ddd4 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 10 Aug 2023 23:29:04 +0600 Subject: [PATCH 47/47] add fetching my rooms --- .env.development | 3 ++- .env.production | 3 ++- src/pages/Lobby/Lobby.tsx | 4 +++- src/pages/Lobby/LobbyAccess.tsx | 7 +++++-- src/pages/Lobby/LobbyMy.tsx | 4 +++- src/pages/Lobby/store/socket.ts | 4 ++-- src/widgets/RoomsList.tsx | 12 ++++++++---- 7 files changed, 25 insertions(+), 12 deletions(-) diff --git a/.env.development b/.env.development index c4160eb..c252272 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,4 @@ VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com" VITE_AUTH0_CLIENT_ID="BOU97TMrp85ftAnrXSLTiYYiuifp9jfz" -VITE_API='http://194.67.74.187:8000' \ No newline at end of file +VITE_API='http://185.104.114.229:8000' +VITE_WS_API='ws://185.104.114.229:8000' \ No newline at end of file diff --git a/.env.production b/.env.production index 0ee425f..eb5339c 100644 --- a/.env.production +++ b/.env.production @@ -1,3 +1,4 @@ VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com" VITE_AUTH0_CLIENT_ID="fOB3CWsgCnNLI5q7OMWe9DfWaAXOme2o" -VITE_API='http://194.67.74.187:8000' \ No newline at end of file +VITE_API='http://185.104.114.229:8000' +VITE_WS_API='ws://185.104.114.229:8000' \ No newline at end of file diff --git a/src/pages/Lobby/Lobby.tsx b/src/pages/Lobby/Lobby.tsx index 3649f2b..0b86080 100644 --- a/src/pages/Lobby/Lobby.tsx +++ b/src/pages/Lobby/Lobby.tsx @@ -1,15 +1,17 @@ import React from 'react'; +import { useRoomsList } from '../../entities/room/api/useRoomsList'; import Header from '../../widgets/layout/Header'; import Navbar from '../../widgets/layout/Navbar'; import RoomsList from '../../widgets/RoomsList'; const Lobby: React.FC = () => { + const { rooms, loading, error } = useRoomsList(); return ( <>
- + ) } diff --git a/src/pages/Lobby/LobbyAccess.tsx b/src/pages/Lobby/LobbyAccess.tsx index c94f8f1..f7b9593 100644 --- a/src/pages/Lobby/LobbyAccess.tsx +++ b/src/pages/Lobby/LobbyAccess.tsx @@ -1,16 +1,19 @@ import React from 'react'; +import { useRoomsList } from '../../entities/room/api/useRoomsList'; import Header from '../../widgets/layout/Header'; import Navbar from '../../widgets/layout/Navbar'; import RoomsList from '../../widgets/RoomsList'; const LobbyAccess: React.FC = () => { + const { rooms, loading, error } = useRoomsList(); + return ( <>
- + ) } -export default LobbyAccess \ No newline at end of file +export default LobbyAccess; diff --git a/src/pages/Lobby/LobbyMy.tsx b/src/pages/Lobby/LobbyMy.tsx index ab8fd8f..bb74a69 100644 --- a/src/pages/Lobby/LobbyMy.tsx +++ b/src/pages/Lobby/LobbyMy.tsx @@ -1,4 +1,5 @@ import React, { useEffect } from "react"; +import { useRoomsList } from '../../entities/room/api/useRoomsList'; import Header from "../../widgets/layout/Header"; import Navbar from "../../widgets/layout/Navbar"; import { CreateRoomForm } from "../../features/createRoom/index.ts"; @@ -8,6 +9,7 @@ import roomsFormState from "./store/roomsFormState.ts"; // import { useAuth0 } from "@auth0/auth0-react"; const LobbyMy: React.FC = observer(() => { + const { rooms, loading, error } = useRoomsList(); useEffect(() => { if (localStorage.getItem("trigger") === "create") { @@ -21,7 +23,7 @@ const LobbyMy: React.FC = observer(() => {
{roomsFormState.state === "create" ? : <>} - + ); }); diff --git a/src/pages/Lobby/store/socket.ts b/src/pages/Lobby/store/socket.ts index dd44e44..936d2d3 100644 --- a/src/pages/Lobby/store/socket.ts +++ b/src/pages/Lobby/store/socket.ts @@ -1,10 +1,10 @@ import { makeAutoObservable } from "mobx"; class Socket { - state = new WebSocket('ws://194.67.74.187:8000/channel_search/ws/'); + state = new WebSocket(`${import.meta.env.VITE_WS_API}/channel_search/ws/`); constructor() { makeAutoObservable(this) } } -export default new Socket(); \ No newline at end of file +export default new Socket(); diff --git a/src/widgets/RoomsList.tsx b/src/widgets/RoomsList.tsx index 1b35073..c471b05 100644 --- a/src/widgets/RoomsList.tsx +++ b/src/widgets/RoomsList.tsx @@ -6,7 +6,6 @@ import { observer } from 'mobx-react-lite'; import roomsState from '../pages/Lobby/store/roomsState'; import RoomCard from '../entities/room/ui/RoomCard'; import { EditRoomForm } from '../features/editRoom'; -import { useRoomsList } from '../entities/room/api/useRoomsList'; import ErrorListMessage from '../shared/ui/ErrorListMessage'; import ZeroListMessage from '../shared/ui/ZeroListMessage'; @@ -54,9 +53,14 @@ const Head = styled.h3` color: var(--grey_2); ` -const RoomsList: React.FC = observer(() => { +interface Props { + rooms: IRoom[], + loading?: boolean, + error?: string, +} + +const RoomsList: React.FC = observer(({ rooms, loading, error }) => { const [searchedRooms, setSearchedRooms] = useState([]); - const { rooms, loading, error } = useRoomsList(); const st = socket.state; @@ -121,4 +125,4 @@ const RoomsList: React.FC = observer(() => { ) }) -export default RoomsList \ No newline at end of file +export default RoomsList;