Develop

.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'
+VITE_WS_API='wss://network-class-server.ru'
+VITE_VIDEOSDK_HREF=''

.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'
+VITE_WS_API='wss://network-class-server.ru'
+VITE_VIDEOSDK_HREF=''

src/entities/room/api/models.ts

@@ -7,4 +7,4 @@ export interface IRoom {
     isActive: boolean,
     owner_email: string,
     owner_fullname: string
-}
+}

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<Props> = ({ href }) => {
   return (
     <Button
-      onClick={() => {
-        location.href = `/joinlesson/${href}`;
-      }}
+      href={`${href}`}
     >
       <p>Подключиться</p>
       <svg

src/entities/room/ui/RoomCard.tsx

@@ -101,7 +101,7 @@ const RoomCard: React.FC<Props> = ({ room }) => {
         <img src={callDisabled} alt="недоступен" />
       )}
       <Access style={room.owner_fullname === user?.name ? {width: "249px"} : {}} >
-        <JoinButton href={room.id} />
+        <JoinButton href={`http://localhost:3000/react-rtc-demo/${room.id}/${user?.email}`} />
         <Tooltip active={tooltipActive}>
           <Button onClick={copyLink}>
             <svg

src/entities/user/api/addUser.ts

@@ -1,10 +1,10 @@
-import user from "../../../pages/Lobby/store/user";
+import userState from "../../../pages/Lobby/store/userState";
 
 export const AddUserThunk = (fullname: any, photo_url: string, email: any) => {
     const API = String(import.meta.env.VITE_API);
 
     const newUser = {
-        fullname: fullname,
+        full_name: fullname,
         photo_url: photo_url,
         email: email
     }
@@ -20,6 +20,6 @@ export const AddUserThunk = (fullname: any, photo_url: string, email: any) => {
     .then(response => {
         response = JSON.parse(response);
         console.log(response);
-        user.addUser(JSON.parse(response));
+        userState.addUser(JSON.parse(response));
     })
 }

src/entities/user/api/models.ts

@@ -1,5 +1,5 @@
 export interface IUser {
     full_name: string,
     photo_url: string,
-    enail: string
+    email: string
 }

src/features/Participant/ui/ParticipantCard.tsx

@@ -51,14 +51,18 @@ interface Props {
   avatar: string;
   name: string;
   isActive: boolean;
+  displaySwitch?: boolean;
 }
 
 export const ParticipantCard: React.FC<Props> = ({
   avatar,
   name,
   isActive,
+  displaySwitch = false,
 }) => {
-  return (
+  return displaySwitch ? (
+    <div></div>
+  ) : (
     <Container>
       <UserInfo>
         <img src={avatar} alt="" style={{ width: "44px", height: "44px" }} />

src/features/createRoom/model/index.ts

@@ -1,35 +1,10 @@
 import { IUser } from "../../../shared/api/models";
-import user from "../../../pages/Lobby/store/user";
-
-export const AddUserThunk = (fullname: any, photo_url: string, email: any) => {
-    const API = String(import.meta.env.VITE_API);
-
-    const newUser = {
-        full_name: fullname,
-        photo_url: photo_url,
-        email: email
-    }
-
-    fetch(`${API}/users`, {
-      method : 'POST',
-      headers: {
-        'Content-type': 'application/json',
-      },
-      body : JSON.stringify(newUser),
-    })
-    .then(response => response.text())
-    .then(response => {
-        response = JSON.parse(response);
-        console.log(response);
-        user.addUser(JSON.parse(response));
-    })
-}
+import { AddUserThunk } from "../../../entities/user/api/addUser";
 
 export const CreateThunk = (event: any, title: string, isPublic: boolean, user: IUser) => {
     event.preventDefault();
     AddUserThunk(user?.name, 'test', user?.email);
     const API = String(import.meta.env.VITE_API);
-    console.log(user?.email);
 
     const newRoom = {
         title: title,

src/features/editRoom/model/delete.ts

@@ -1,12 +1,16 @@
-export const DeleteThunk= (id: number) => {
+export const DeleteThunk= (id: number, email: any) => {
     const API = String(import.meta.env.VITE_API);
 
-    fetch(`${API}/channels/`, {
+    const info = {
+      user_email: String(email)
+    }
+
+    fetch(`${API}/channels/${id}`, {
       method : 'DELETE',
       headers: {
         'Content-type': 'application/json',
       },
-      body : JSON.stringify({id}),
+      body : JSON.stringify(info),
     })
     .then(response => response.text())
     .then(response => {

src/features/editRoom/model/index.ts

@@ -1,13 +1,19 @@
-export const EditThunk= (event: any, id: number, title: string, isPublic: boolean) => {
+import { IRoom } from '../../../entities/room/api/models';
+
+export const EditThunk= (event: any, room: IRoom, title: string, isPublic: boolean, email: any) => {
     event.preventDefault();
     const API = String(import.meta.env.VITE_API);
 
     const editedRoom = {
-      name: title,
-      public: isPublic,
+      user_email: email,
+      title: title, //change
+      photo_url: room.photo_url,
+      url: room.url,
+      isPublic: isPublic, //change
+      isActive: room.isActive
     }
 
-    fetch(`${API}/channels/${id}`, {
+    fetch(`${API}/channels/${room.id}`, {
       method : 'PUT',
       headers: {
         'Content-type': 'application/json',

src/features/editRoom/ui/EditRoomForm.tsx

@@ -2,13 +2,15 @@ import React, { useState } from 'react';
 import { IRoom } from '../../../entities/room/api/models';
 import { EditThunk } from '../model';
 import { DeleteThunk } from '../model/delete';
+import { observer } from 'mobx-react-lite';
 import styled from 'styled-components';
 import LobbyFormLayout from '../../../widgets/layout/LobbyFormLayout';
 import Input from '../../../shared/ui/Input';
 import SwitchToggle from '../../../shared/ui/switchToggle/SwitchToggle';
 import FormButton from '../../../shared/ui/formButton/FormButton';
 import avatar from '../../../../public/icons/avatar.svg';
 import deleteIcon from '../../../../public/icons/delete.svg';
+import { useAuth0 } from "@auth0/auth0-react";
 
 const Form = styled.form`
     display: flex;
@@ -60,16 +62,17 @@ interface Props {
     room: IRoom,
 }
 
-export const EditRoomForm: React.FC<Props> = ({ room }) => {
+export const EditRoomForm: React.FC<Props> = observer(({ room }) => {
+    const { user } = useAuth0();
     const [title, setTitle] = useState(room.title);
     const [isPublic, setIsPublic] = useState(room.isPublic);
 
     function editRoom(event: any) {
-        EditThunk(event, room.id, title, isPublic);
+        EditThunk(event, room, title, isPublic, user?.email);
     }
 
     function deleteRoom() {
-        DeleteThunk(room.id);
+        DeleteThunk(room.id, user?.email);
     }
 
   return (
@@ -94,4 +97,4 @@ export const EditRoomForm: React.FC<Props> = ({ room }) => {
         </Form>
     </LobbyFormLayout>
   )
-}
+})

src/pages/CallPageCustomUI/CallPage.tsx

@@ -6,7 +6,7 @@ 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 storeSidebar from "./store/sidebarState";
 import { observer } from "mobx-react-lite";
 
 const Container = styled.div`
@@ -27,6 +27,7 @@ const Content = styled.div`
   height: 100vh;
   margin: 0 auto;
   position: relative;
+  transition: all 0.3s ease-out;
 `;
 
 const peopleList: IUser[] = [
@@ -181,7 +182,7 @@ const CallPage: React.FC = observer(() => {
     <Container>
       <Content
         style={
-          storeParticipants.isActive
+          storeSidebar.isActive
             ? { width: "calc(100vw - 373px)" }
             : { width: "100vw" }
         }

src/pages/CallPageCustomUI/store/sidebarState.ts

@@ -0,0 +1,28 @@
+import { makeAutoObservable } from "mobx";
+
+class SidebarState {
+  isActive = false;
+  selected = "participants";
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  openSidebar() {
+    this.isActive = true;
+  }
+
+  closeSidebar() {
+    this.isActive = false;
+  }
+
+  selectParticipants() {
+    this.selected = "participants";
+  }
+
+  selectChat() {
+    this.selected = "chat";
+  }
+}
+
+export default new SidebarState();

src/pages/Lobby/Lobby.tsx

@@ -3,7 +3,7 @@ import { useRoomsList } from '../../entities/room/api/useRoomsList';
 import Header from '../../widgets/layout/Header';
 import Navbar from '../../widgets/layout/Navbar';
 import RoomsList from '../../widgets/RoomsList';
-import user from './store/user';
+import user from './store/userState';
 
 const Lobby: React.FC = () => {
   const { rooms, loading, error } = useRoomsList();

src/pages/Lobby/store/user.ts → src/pages/Lobby/store/userState.ts

@@ -1,7 +1,7 @@
 import { makeAutoObservable } from "mobx";
 import { IUser } from "../../../entities/user/api/models";
 
-class User {
+class UserState {
 state = {};
     constructor() {
         makeAutoObservable(this)
@@ -12,4 +12,4 @@ state = {};
     }
 }
 
-export default new User();
+export default new UserState();