From cb83705ed26ed8fdbc42f55721f3d7781b1f1445 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 15 Aug 2023 15:20:03 +0600 Subject: [PATCH 01/17] fix edit delete rooms add link for videosdk --- .env.development | 3 ++- .env.production | 3 ++- src/entities/room/api/models.ts | 2 +- src/entities/room/ui/JoinButton.tsx | 8 +++--- src/entities/room/ui/RoomCard.tsx | 2 +- src/entities/user/api/addUser.ts | 6 ++--- src/entities/user/api/models.ts | 2 +- src/features/createRoom/model/index.ts | 27 +------------------ src/features/editRoom/model/delete.ts | 10 ++++--- src/features/editRoom/model/index.ts | 14 +++++++--- src/features/editRoom/ui/EditRoomForm.tsx | 13 ++++++--- src/pages/Lobby/Lobby.tsx | 2 +- .../Lobby/store/{user.ts => userState.ts} | 4 +-- 13 files changed, 43 insertions(+), 53 deletions(-) rename src/pages/Lobby/store/{user.ts => userState.ts} (82%) diff --git a/.env.development b/.env.development index f5c14d6..4330e9d 100644 --- a/.env.development +++ b/.env.development @@ -1,4 +1,5 @@ VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com" VITE_AUTH0_CLIENT_ID="BOU97TMrp85ftAnrXSLTiYYiuifp9jfz" VITE_API='https://network-class-server.ru' -VITE_WS_API='wss://network-class-server.ru' \ No newline at end of file +VITE_WS_API='wss://network-class-server.ru' +VITE_VIDEOSDK_HREF='' \ No newline at end of file diff --git a/.env.production b/.env.production index 5a6a593..f31acec 100644 --- a/.env.production +++ b/.env.production @@ -1,4 +1,5 @@ VITE_AUTH0_DOMAIN="dev-txpc5harm481cb6o.us.auth0.com" VITE_AUTH0_CLIENT_ID="fOB3CWsgCnNLI5q7OMWe9DfWaAXOme2o" VITE_API='https://network-class-server.ru' -VITE_WS_API='wss://network-class-server.ru' \ No newline at end of file +VITE_WS_API='wss://network-class-server.ru' +VITE_VIDEOSDK_HREF='' \ No newline at end of file diff --git a/src/entities/room/api/models.ts b/src/entities/room/api/models.ts index 8e11f79..e084f3c 100644 --- a/src/entities/room/api/models.ts +++ b/src/entities/room/api/models.ts @@ -7,4 +7,4 @@ export interface IRoom { isActive: boolean, owner_email: string, owner_fullname: string -} \ No newline at end of file +} diff --git a/src/entities/room/ui/JoinButton.tsx b/src/entities/room/ui/JoinButton.tsx index cf8d91f..9a255a9 100644 --- a/src/entities/room/ui/JoinButton.tsx +++ b/src/entities/room/ui/JoinButton.tsx @@ -3,7 +3,7 @@ import styled from "styled-components"; const Path = styled.path``; -const Button = styled.button` +const Button = styled.a` font-family: var(--font); font-size: 18px; font-style: normal; @@ -30,15 +30,13 @@ const Button = styled.button` `; interface Props { - href: number, + href: string, } const JoinButton: React.FC = ({ href }) => { return ( - ) -} + + Выйти + + + ); +}; diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx new file mode 100644 index 0000000..1f63a56 --- /dev/null +++ b/src/pages/Profile/Profile.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import { styled } from "styled-components"; +import Header from "../../widgets/layout/Header"; +import UserCard from "../../entities/user/ui/UserCard"; +import Statistics from "../../widgets/Statistics/Statistics"; + +const Container = styled.div``; + +const Title = styled.div` + color: #000; + font-family: var(--font); + font-size: 28px; + font-weight: 500; + margin: 84px 0 34px 123px; +`; + +const ProfileCard = styled.div` + margin: 0 121px 73px 123px; +`; + +const Profile: React.FC = () => { + return ( + +
+ Мой профиль + + + + + + ); +}; + +export default Profile; diff --git a/src/shared/ui/Select.tsx b/src/shared/ui/Select.tsx index 92b52c5..ea72e30 100644 --- a/src/shared/ui/Select.tsx +++ b/src/shared/ui/Select.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import styled from 'styled-components'; +import React from "react"; +import styled from "styled-components"; const Container = styled.div` position: absolute; @@ -8,29 +8,35 @@ const Container = styled.div` z-index: 1; padding: 20px 16px 16px; - border-radius: 10px ; + border-radius: 10px; background: var(--white); box-shadow: 5px 5px 10px 0px var(--grey_5); - transition: all .3s ease; -` + transition: all 0.3s ease; -const Content = styled.div` + &:hover { + cursor: default; + } +`; -` +const Content = styled.div``; interface Props { - children?: React.ReactNode, - active: boolean, + children?: React.ReactNode; + active: boolean; } const Select: React.FC = ({ children, active }) => { return ( - - - {children} - + + {children} - ) -} + ); +}; -export default Select \ No newline at end of file +export default Select; diff --git a/src/shared/ui/cardButton/CardButton.tsx b/src/shared/ui/cardButton/CardButton.tsx new file mode 100644 index 0000000..4cc95ef --- /dev/null +++ b/src/shared/ui/cardButton/CardButton.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import styled from "styled-components"; + +const Button = styled.button` + display: flex; + padding: 10px; + justify-content: center; + align-items: center; + border-radius: 8px; + border: 1px solid var(--blue, #175ef1); + background: var(--white, #fff); + color: var(--blue, #175ef1); + font-size: 18px; + font-weight: 400; + line-height: normal; + transition: all 0.3s ease; + + &:hover { + color: var(--white); + background: var(--blue, #175ef1); + } +`; + +interface Props { + children?: string; +} + +const CardButton: React.FC = ({ children }) => { + return ; +}; + +export default CardButton; diff --git a/src/widgets/FunctionsList/functionsObject.tsx b/src/widgets/FunctionsList/functionsObject.tsx index b0d60b9..1dec2e8 100644 --- a/src/widgets/FunctionsList/functionsObject.tsx +++ b/src/widgets/FunctionsList/functionsObject.tsx @@ -29,7 +29,7 @@ const functions: IFunction[] = [ iconActive: settingsActive, title: "Настройки", description: "Редактировать свой профиль и классы", - link: "/", + link: "/profile", }, ]; diff --git a/src/widgets/ProfilePanel/ProfilePanel.tsx b/src/widgets/ProfilePanel/ProfilePanel.tsx index e971b8a..85f304e 100644 --- a/src/widgets/ProfilePanel/ProfilePanel.tsx +++ b/src/widgets/ProfilePanel/ProfilePanel.tsx @@ -1,13 +1,12 @@ -import React, { useState } from 'react'; -import styled from 'styled-components'; -import Select from '../../shared/ui/Select'; -import { LogoutButton } from '../../features/logout'; +import React, { useState } from "react"; +import styled from "styled-components"; +import Select from "../../shared/ui/Select"; +import { LogoutButton } from "../../features/logout"; import avatarIcon from "../../../public/icons/avatar.svg"; import selectIcon from "../../../public/icons/select.svg"; -import settingsIcon from "../../../public/icons/setting-mini.svg"; -import logoutIcon from "../../../public/icons/logout.svg"; import { useAuth0 } from "@auth0/auth0-react"; -import Paragraph from '../../shared/ui/Paragraph'; +import Paragraph from "../../shared/ui/Paragraph"; +import { EnterProfileButton } from "../../features/EnterProfile"; const Container = styled.div` position: relative; @@ -17,7 +16,7 @@ const Container = styled.div` align-items: center; gap: 15px; - &:hover{ + &:hover { cursor: pointer; } `; @@ -26,7 +25,7 @@ const Avatar = styled.img` width: 44px; height: 44px; border-radius: 10px; -` +`; const Text = styled.div` display: flex; @@ -43,7 +42,7 @@ const Text = styled.div` background: linear-gradient(90deg, transparent 0, #fff 100%); content: ""; } -` +`; const Button = styled.button` display: flex; @@ -51,53 +50,56 @@ const Button = styled.button` align-items: center; width: 34px; height: 34px; -` +`; -const SelectLink = styled.a` - display: flex; - gap: 8px; - align-items: center; +const SelectLink = styled.div` color: inherit; + + &:hover { + cursor: pointer; + } `; const Divider = styled.div` margin: 10px 0; - width: 192px; + width: 100%; height: 0.5px; background: var(--grey_5); `; const ProfilePanel: React.FC = () => { - const [selectActive, setSelectActive] = useState(false); - const { user, isAuthenticated } = useAuth0(); - - function changeSelectVisibility() { - setSelectActive(!selectActive); - } + const [selectActive, setSelectActive] = useState(false); + const { user, isAuthenticated } = useAuth0(); + + function changeSelectVisibility() { + setSelectActive(!selectActive); + } return ( - - - - {isAuthenticated ? {user?.name} : Loading...} - - + + + + {isAuthenticated ? ( + {user?.name} + ) : ( + Loading... + )} + + - - - ) + + + ); }; export default ProfilePanel; diff --git a/src/widgets/Statistics/Statistics.tsx b/src/widgets/Statistics/Statistics.tsx new file mode 100644 index 0000000..8eb6c5e --- /dev/null +++ b/src/widgets/Statistics/Statistics.tsx @@ -0,0 +1,66 @@ +import React from "react"; +import styled from "styled-components"; + +const Container = styled.div` + display: grid; + grid-template-columns: repeat(3, max-content); + justify-content: space-between; + gap: 30px; + margin: 0 136px 0 144px; + color: #000; + font-family: var(--font); + line-height: normal; +`; + +const StatisticsBlock = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 10px; +`; + +const StatisticsTitle = styled.div` + font-size: 22px; + font-weight: 500; +`; + +const StatisticsText = styled.div` + font-size: 20px; + font-weight: 300; +`; + +const Statistics: React.FC = () => { + return ( + + + Дата регистрации + 08.08.2023 + + + Дата последней онлайн-встречи + 09.08.2023 + + + Частота проведения встреч + 2.8 встреч в месяц + + + Всего участников + 1784 + + + Всего моих классов + 15 + + + + Всего онлайн участников в моих классах + + 12 + + + ); +}; + +export default Statistics; From b88329ff4e6cdb6c824139f6290f526d3edb1796 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 16 Aug 2023 02:24:39 +0600 Subject: [PATCH 06/17] fix bugs in lobby --- src/app/App.tsx | 4 -- src/pages/Lobby/Lobby.tsx | 15 ++++-- src/pages/Lobby/LobbyAccess.tsx | 19 ------- src/pages/Lobby/LobbyMy.tsx | 31 ----------- src/pages/Lobby/store/navbarState.ts | 36 +++++++++++++ src/widgets/FunctionsList/functionsObject.tsx | 5 +- src/widgets/layout/Navbar.tsx | 52 ++++++++++--------- 7 files changed, 78 insertions(+), 84 deletions(-) delete mode 100644 src/pages/Lobby/LobbyAccess.tsx delete mode 100644 src/pages/Lobby/LobbyMy.tsx create mode 100644 src/pages/Lobby/store/navbarState.ts diff --git a/src/app/App.tsx b/src/app/App.tsx index 21ebc50..f0983dc 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -4,8 +4,6 @@ import "./index.css"; import Join from "../pages/Join/Join"; 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 CallPageUI from "../pages/CallPageCustomUI/CallPage"; @@ -29,8 +27,6 @@ const App: React.FC = () => { } /> } /> - } /> - } /> } /> } /> } /> diff --git a/src/pages/Lobby/Lobby.tsx b/src/pages/Lobby/Lobby.tsx index 8fee7f9..1e3b49a 100644 --- a/src/pages/Lobby/Lobby.tsx +++ b/src/pages/Lobby/Lobby.tsx @@ -1,21 +1,26 @@ import React from 'react'; +import { observer } from 'mobx-react-lite'; +import navbarState from './store/navbarState'; +import roomsFormState from './store/roomsFormState'; import { useRoomsList } from '../../entities/room/api/useRoomsList'; import Header from '../../widgets/layout/Header'; import Navbar from '../../widgets/layout/Navbar'; +import { CreateRoomForm } from '../../features/createRoom'; import RoomsList from '../../widgets/RoomsList'; -import user from './store/userState'; -const Lobby: React.FC = () => { +const Lobby: React.FC = observer(() => { const { rooms, loading, error } = useRoomsList(); - console.log(user.state); + + const roomsFormStateLS = localStorage.getItem("trigger"); return ( <>
- + + {roomsFormState.state || roomsFormStateLS === 'create' && navbarState.state === 'my' ? : null} ) -} +}) export default Lobby; diff --git a/src/pages/Lobby/LobbyAccess.tsx b/src/pages/Lobby/LobbyAccess.tsx deleted file mode 100644 index f7b9593..0000000 --- a/src/pages/Lobby/LobbyAccess.tsx +++ /dev/null @@ -1,19 +0,0 @@ -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; diff --git a/src/pages/Lobby/LobbyMy.tsx b/src/pages/Lobby/LobbyMy.tsx deleted file mode 100644 index bb74a69..0000000 --- a/src/pages/Lobby/LobbyMy.tsx +++ /dev/null @@ -1,31 +0,0 @@ -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"; -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, loading, error } = useRoomsList(); - - useEffect(() => { - if (localStorage.getItem("trigger") === "create") { - roomsFormState.openCreateForm(); - localStorage.removeItem("trigger"); - } - }, []); - - return ( - <> -
- - {roomsFormState.state === "create" ? : <>} - - - ); -}); - -export default LobbyMy; diff --git a/src/pages/Lobby/store/navbarState.ts b/src/pages/Lobby/store/navbarState.ts new file mode 100644 index 0000000..64a9a13 --- /dev/null +++ b/src/pages/Lobby/store/navbarState.ts @@ -0,0 +1,36 @@ +import { makeAutoObservable } from "mobx"; + +const roomsFormStateLS = localStorage.getItem("trigger"); + +function defaultState() { + if (roomsFormStateLS === 'create') { + return 'my'; + } + + if (roomsFormStateLS === 'all') { + return 'all'; + } +} + +console.log(defaultState()); + +class NavbarState { + state = defaultState(); + constructor() { + makeAutoObservable(this) + } + + openAll() { + this.state = 'all'; + } + + openAccess() { + this.state = 'access'; + } + + openMy() { + this.state = 'my'; + } +} + +export default new NavbarState(); \ No newline at end of file diff --git a/src/widgets/FunctionsList/functionsObject.tsx b/src/widgets/FunctionsList/functionsObject.tsx index b0d60b9..82f58f7 100644 --- a/src/widgets/FunctionsList/functionsObject.tsx +++ b/src/widgets/FunctionsList/functionsObject.tsx @@ -12,7 +12,7 @@ const functions: IFunction[] = [ iconActive: createClassActive, title: "Новый класс", description: "Создать свой класс и провести занятие онлайн", - link: "/lobby/my", + link: "/lobby", onClick: () => { localStorage.setItem("trigger", "create"); }, @@ -23,6 +23,9 @@ const functions: IFunction[] = [ title: "Поиск", description: "Найти класс и получить новые знания", link: "/lobby", + onClick: () => { + localStorage.setItem("trigger", "all"); + }, }, { icon: settings, diff --git a/src/widgets/layout/Navbar.tsx b/src/widgets/layout/Navbar.tsx index 8c87428..2b30891 100644 --- a/src/widgets/layout/Navbar.tsx +++ b/src/widgets/layout/Navbar.tsx @@ -1,10 +1,12 @@ // import React from 'react'; import styled from 'styled-components'; +import { observer } from 'mobx-react-lite'; import { AddRoomButton } from '../../features/AddRoom.tsx/index.ts'; import { SearchInput } from '../../features/Search/index.ts'; import roomsFormState from '../../pages/Lobby/store/roomsFormState.ts'; import roomsState from '../../pages/Lobby/store/roomsState.ts'; import editIcon from '../../../public/icons/edit.svg'; +import navbarState from '../../pages/Lobby/store/navbarState.ts'; const Container = styled.div` display: flex; @@ -21,7 +23,7 @@ const Left = styled.div` justify-content: space-between; ` -const Link = styled.a` +const Link = styled.button` font-family: var(--font); font-size: 20px; font-style: normal; @@ -53,41 +55,43 @@ const EditButton = styled.button` box-shadow: 0px 3px 6px 0px #E5EAF8; ` -interface Props { - activeLink: string, - allLength?: number, - accessLength?: number, - myLength?: number, -} +const Navbar: React.FC = observer(() => { -const Navbar: React.FC = ({ activeLink, /*allLength, accessLength, myLength*/ }) => { + function openAll() { + navbarState.openAll(); + } + + function openAccess() { + navbarState.openAccess(); + } + + function openMy() { + navbarState.openMy(); + } function addRoom() { - const currentUrl = window.location.href; - if (currentUrl !== "http://localhost:5173/lobby/my") { - window.location.href = '/lobby/my'; - roomsFormState.openCreateForm(); - } roomsFormState.openCreateForm(); } function editRooms() { - if (roomsState.state === '') { - roomsState.openEditForm(); - return 0; - } - if (roomsState.state === 'edit') { - roomsState.closeEditForm(); - return 0; + if (navbarState.state === 'my') { + if (roomsState.state === '') { + roomsState.openEditForm(); + return 0; + } + if (roomsState.state === 'edit') { + roomsState.closeEditForm(); + return 0; + } } } return ( - Все классы({121}) - Доступные({5}) - Мои({2}) + Все классы + Доступные + Мои @@ -98,6 +102,6 @@ const Navbar: React.FC = ({ activeLink, /*allLength, accessLength, myLeng ) -} +}) export default Navbar; \ No newline at end of file From 3f90d80a80f7c81966067f0812fc23e098379810 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 16 Aug 2023 03:20:54 +0600 Subject: [PATCH 07/17] fix roomcard layout --- src/entities/room/ui/RoomCard.tsx | 12 ++++++------ src/widgets/RoomsList.tsx | 11 +++++------ 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/src/entities/room/ui/RoomCard.tsx b/src/entities/room/ui/RoomCard.tsx index 5f82231..16c51cb 100644 --- a/src/entities/room/ui/RoomCard.tsx +++ b/src/entities/room/ui/RoomCard.tsx @@ -13,7 +13,6 @@ const Container = styled.div` display: flex; width: calc(100% - 20px); padding: 24px; - justify-content: space-between; align-items: center; border-radius: 10px; @@ -24,13 +23,13 @@ const Container = styled.div` const Info = styled.div` display: flex; - width: 329px; - justify-content: space-between; + width: 392px; + gap: 24px; align-items: center; `; const Title = styled.h3` - width: 259px; + width: 100%; font-family: var(--font); font-size: 20px; font-style: normal; @@ -41,7 +40,7 @@ const Title = styled.h3` `; const Teacher = styled.h4` - min-width: 251px; + min-width: 360px; font-family: var(--font); font-size: 18px; font-style: normal; @@ -56,6 +55,7 @@ const Access = styled.div` width: 229px; justify-content: space-between; align-items: center; + margin-left: 129px; `; let Path = styled.path``; @@ -100,7 +100,7 @@ const RoomCard: React.FC = ({ room }) => { ) : ( недоступен )} - + ; +const CardButton: React.FC = ({ children, onClick }) => { + return ; }; export default CardButton; diff --git a/src/widgets/layout/ProfileFormLayout.tsx b/src/widgets/layout/ProfileFormLayout.tsx new file mode 100644 index 0000000..3086275 --- /dev/null +++ b/src/widgets/layout/ProfileFormLayout.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import styled from "styled-components"; + +const Container = styled.div` + position: relative; + width: 100%; + padding: 20px; + border-radius: 10px; + background: var(--white); + box-shadow: 0px 0px 4px 0px #e5eaf8; + font-family: var(--font); + color: #000; + display: flex; + justify-content: space-between; + align-items: center; +`; + +interface Props { + children?: React.ReactNode; +} + +const ProfileFormLayout: React.FC = ({ children }) => { + return {children}; +}; + +export default ProfileFormLayout; From 88a5e6a729b405db698028a1eae870f7f36c2e9d Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 17 Aug 2023 19:06:14 +0600 Subject: [PATCH 10/17] fix header layout --- src/pages/Join/Join.tsx | 6 ++++-- src/pages/Join/styles.module.css | 7 +++++++ src/widgets/layout/Header.tsx | 4 +++- 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/pages/Join/Join.tsx b/src/pages/Join/Join.tsx index 91d57dd..0d23159 100644 --- a/src/pages/Join/Join.tsx +++ b/src/pages/Join/Join.tsx @@ -16,8 +16,10 @@ const Join: React.FC = () => {
- Логотип -
Сетевой учебный класс
+
+ Логотип +
Сетевой учебный класс
+
diff --git a/src/pages/Join/styles.module.css b/src/pages/Join/styles.module.css index 2fd1f50..200d2fb 100644 --- a/src/pages/Join/styles.module.css +++ b/src/pages/Join/styles.module.css @@ -19,10 +19,17 @@ width: 100%; display: flex; align-items: center; + justify-content: space-between; margin-bottom: 100px; position: relative; } +.logo { + display: flex; + align-items: center; + gap: 24px; +} + .header > img { margin-right: 24px; } diff --git a/src/widgets/layout/Header.tsx b/src/widgets/layout/Header.tsx index 243c5cd..1bcf9b1 100644 --- a/src/widgets/layout/Header.tsx +++ b/src/widgets/layout/Header.tsx @@ -14,7 +14,9 @@ const Container = styled.div` background-color: var(--white); `; -const Left = styled.div``; +const Left = styled.div` + +`; const Logo = styled.a` text-align: center; From 8eb248d30afb2c47e9a3d64e3c63b64133b122d7 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 17 Aug 2023 19:28:41 +0600 Subject: [PATCH 11/17] fix opening create form --- src/entities/room/ui/RoomCard.tsx | 2 +- src/shared/ui/Tooltip.tsx | 6 ++++-- src/widgets/FunctionsList/functionsObject.tsx | 2 +- src/widgets/RoomsList.tsx | 2 -- src/widgets/layout/Navbar.tsx | 9 ++++++++- 5 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/entities/room/ui/RoomCard.tsx b/src/entities/room/ui/RoomCard.tsx index 16c51cb..bc7919a 100644 --- a/src/entities/room/ui/RoomCard.tsx +++ b/src/entities/room/ui/RoomCard.tsx @@ -102,7 +102,7 @@ const RoomCard: React.FC = ({ room }) => { )} - +