From d3e0f4aeb10718a569563c531cc00511dcd77c29 Mon Sep 17 00:00:00 2001
From: BodySites <100404530+BodySites@users.noreply.github.com>
Date: Fri, 11 Aug 2023 20:16:29 +0600
Subject: [PATCH 1/4] connected store of chat and participants and added chat
 layout

---
 public/icons/participants-gray.svg            |   7 +
 src/pages/CallPageCustomUI/CallPage.tsx       |   5 +-
 src/pages/CallPageCustomUI/store/chat.ts      |  19 ---
 .../CallPageCustomUI/store/participants.ts    |  19 ---
 .../CallPageCustomUI/store/sidebarState.ts    |  28 ++++
 src/widgets/UserGrid/UserGrid.tsx             |   8 +-
 src/widgets/layout/Sidebar/Sidebar.tsx        | 121 ++++++++++--------
 src/widgets/layout/Sidebar/styles.module.css  |   7 +-
 8 files changed, 109 insertions(+), 105 deletions(-)
 create mode 100644 public/icons/participants-gray.svg
 delete mode 100644 src/pages/CallPageCustomUI/store/chat.ts
 delete mode 100644 src/pages/CallPageCustomUI/store/participants.ts
 create mode 100644 src/pages/CallPageCustomUI/store/sidebarState.ts

diff --git a/public/icons/participants-gray.svg b/public/icons/participants-gray.svg
new file mode 100644
index 0000000..57102d3
--- /dev/null
+++ b/public/icons/participants-gray.svg
@@ -0,0 +1,7 @@
+<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 18C13.2091 18 15 16.2091 15 14C15 11.7909 13.2091 10 11 10C8.79086 10 7 11.7909 7 14C7 16.2091 8.79086 18 11 18Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 23C6 20.2 8.2 18 11 18C13.8 18 16 20.2 16 23" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23 23C25.2091 23 27 21.2091 27 19C27 16.7909 25.2091 15 23 15C20.7909 15 19 16.7909 19 19C19 21.2091 20.7909 23 23 23Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 28C18 25.2 20.2 23 23 23C25.8 23 28 25.2 28 28" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20 12C21.6569 12 23 10.6569 23 9C23 7.34315 21.6569 6 20 6C18.3431 6 17 7.34315 17 9C17 10.6569 18.3431 12 20 12Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/pages/CallPageCustomUI/CallPage.tsx b/src/pages/CallPageCustomUI/CallPage.tsx
index 9552744..89f2f30 100644
--- a/src/pages/CallPageCustomUI/CallPage.tsx
+++ b/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" }
         }
diff --git a/src/pages/CallPageCustomUI/store/chat.ts b/src/pages/CallPageCustomUI/store/chat.ts
deleted file mode 100644
index ad04c33..0000000
--- a/src/pages/CallPageCustomUI/store/chat.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-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/pages/CallPageCustomUI/store/participants.ts b/src/pages/CallPageCustomUI/store/participants.ts
deleted file mode 100644
index 1724fbd..0000000
--- a/src/pages/CallPageCustomUI/store/participants.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-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/pages/CallPageCustomUI/store/sidebarState.ts b/src/pages/CallPageCustomUI/store/sidebarState.ts
new file mode 100644
index 0000000..7738292
--- /dev/null
+++ b/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();
diff --git a/src/widgets/UserGrid/UserGrid.tsx b/src/widgets/UserGrid/UserGrid.tsx
index d7c24bc..fce7228 100644
--- a/src/widgets/UserGrid/UserGrid.tsx
+++ b/src/widgets/UserGrid/UserGrid.tsx
@@ -8,7 +8,7 @@ import React, {
 import styled from "styled-components";
 import right from "../../../public/icons/arrow-right.svg";
 import { UserBlock } from "../../features/UserBlock";
-import storeParticipants from "../../pages/CallPageCustomUI/store/participants";
+import store from "../../pages/CallPageCustomUI/store/sidebarState";
 import { observer } from "mobx-react-lite";
 import { IUser } from "../../shared/api/models";
 
@@ -87,16 +87,16 @@ const UserGrid: React.FC<Props> = observer(({ peopleList }) => {
   const list = useRef<HTMLDivElement>(null);
   const [numberPage, setNumberPage] = useState(1);
   const [listPages, setListPages] = useState<ReactElement<any, any>[]>([]);
-  let lengthPage = storeParticipants.isActive ? 6 : 15;
+  let lengthPage = store.isActive ? 6 : 15;
   let maxPage = Math.ceil(peopleList.length / lengthPage);
   let gridList = [];
 
   useEffect(() => {
-    lengthPage = storeParticipants.isActive ? 6 : 15;
+    lengthPage = store.isActive ? 6 : 15;
     maxPage = Math.ceil(peopleList.length / lengthPage);
     numberPage > maxPage ? moveLeft() : "";
     getStylesGrid();
-  }, [storeParticipants.isActive]);
+  }, [store.isActive]);
 
   const getCSSGridStyles = (numberOfItems: number): CSSProperties => {
     if (numberOfItems <= 1) {
diff --git a/src/widgets/layout/Sidebar/Sidebar.tsx b/src/widgets/layout/Sidebar/Sidebar.tsx
index 25e74a7..7e50465 100644
--- a/src/widgets/layout/Sidebar/Sidebar.tsx
+++ b/src/widgets/layout/Sidebar/Sidebar.tsx
@@ -1,10 +1,10 @@
 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 participiantsIcon from "../../../../public/icons/participants.svg";
+import participiantsChat from "../../../../public/icons/participants-gray.svg";
+import close from "../../../../public/icons/close-participiants.svg";
+import store from "../../../pages/CallPageCustomUI/store/sidebarState";
+import chatIcon 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";
@@ -53,14 +53,12 @@ interface Props {
 }
 
 const Sidebar: React.FC<Props> = observer(({ peopleList }) => {
-  const [active, setActive] = useState(false);
   const [displaySwitch, setDisplaySwitch] = useState(false);
 
   function changeActive() {
-    active
-      ? storeParticipants.closeParticipants()
-      : storeParticipants.openParticipants();
-    setActive(!active);
+    store.isActive
+      ? (store.closeSidebar(), store.selectParticipants())
+      : store.openSidebar();
   }
 
   function rightDisplay() {
@@ -71,64 +69,77 @@ const Sidebar: React.FC<Props> = observer(({ peopleList }) => {
     setDisplaySwitch(false);
   }
 
-  function openChat() {
-    storeChat.openChat();
+  function changeSelected() {
+    store.selected === "chat" ? store.selectParticipants() : store.selectChat();
   }
 
   return (
     <>
       <OpenButton
-        style={active ? { display: "none" } : { display: "flex" }}
+        style={store.isActive ? { display: "none" } : { display: "flex" }}
         onClick={changeActive}
       >
-        <Image src={participiants} alt="" />
+        <Image src={participiantsIcon} alt="" />
       </OpenButton>
-      <Container style={active ? { display: "flex" } : { display: "none" }}>
+      <Container
+        style={store.isActive ? { display: "flex" } : { display: "none" }}
+      >
         <div className={styles.header}>
-          <div
-            className={styles.close}
-            style={active ? { display: "flex" } : { display: "none" }}
-            onClick={changeActive}
-          >
-            <img className={styles.closeImg} src={closeParts} alt="" />
+          <div className={styles.close} onClick={changeActive}>
+            <img className={styles.closeImg} src={close} alt="" />
+          </div>
+          <div className={styles.text}>
+            {store.selected === "chat"
+              ? "ЧАТ КЛАССА"
+              : `УЧАСТНИКИ (${peopleList.length})`}
           </div>
-          <div className={styles.text}>УЧАСТНИКИ (14)</div>
-          <img className={styles.chat} src={chat} alt="" onClick={openChat} />
+          <img
+            className={styles.selected}
+            src={store.selected === "chat" ? participiantsChat : chatIcon}
+            alt=""
+            onClick={changeSelected}
+          />
         </div>
-        <div className={styles.joinedHead}>
-          <div className={styles.countJoined}>Подключены (12)</div>
-          <div className={styles.switchPanel}>
-            <div
-              className={
-                displaySwitch
-                  ? styles.switch
-                  : styles.switch + " " + styles.active
-              }
-              onClick={leftDisplay}
-            >
-              <img src={oneSwitch} alt="" />
+        {store.selected === "chat" ? (
+          <div></div>
+        ) : (
+          <>
+            <div className={styles.joinedHead}>
+              <div className={styles.countJoined}>Подключены (12)</div>
+              <div className={styles.switchPanel}>
+                <div
+                  className={
+                    displaySwitch
+                      ? styles.switch
+                      : styles.switch + " " + styles.active
+                  }
+                  onClick={leftDisplay}
+                >
+                  <img src={oneSwitch} alt="" />
+                </div>
+                <div
+                  className={
+                    displaySwitch
+                      ? styles.switch + " " + styles.active
+                      : styles.switch
+                  }
+                  onClick={rightDisplay}
+                >
+                  <img src={twoSwitch} alt="" />
+                </div>
+              </div>
             </div>
-            <div
-              className={
-                displaySwitch
-                  ? styles.switch + " " + styles.active
-                  : styles.switch
-              }
-              onClick={rightDisplay}
-            >
-              <img src={twoSwitch} alt="" />
+            <div className={styles.list}>
+              <ParticipantsList peopleList={peopleList} isActive={true} />
             </div>
-          </div>
-        </div>
-        <div className={styles.list}>
-          <ParticipantsList peopleList={peopleList} isActive={true} />
-        </div>
-        <div className={styles.joinedHead}>
-          <div className={styles.countJoined}>Не подключены (2)</div>
-        </div>
-        <div className={styles.list} style={{ maxHeight: "172px" }}>
-          <ParticipantsList peopleList={peopleList} isActive={false} />
-        </div>
+            <div className={styles.joinedHead}>
+              <div className={styles.countJoined}>Не подключены (4)</div>
+            </div>
+            <div className={styles.list} style={{ maxHeight: "172px" }}>
+              <ParticipantsList peopleList={peopleList} isActive={false} />
+            </div>
+          </>
+        )}
       </Container>
     </>
   );
diff --git a/src/widgets/layout/Sidebar/styles.module.css b/src/widgets/layout/Sidebar/styles.module.css
index 79b03ed..1ed3121 100644
--- a/src/widgets/layout/Sidebar/styles.module.css
+++ b/src/widgets/layout/Sidebar/styles.module.css
@@ -30,12 +30,7 @@
   }
 }
 
-.chat {
-  width: 23.916px;
-  height: 21.742px;
-}
-
-.chat:hover {
+.selected:hover {
   cursor: pointer;
 }
 

From d322643effca91b8c1fdcafaade175c1e2d6cc0c Mon Sep 17 00:00:00 2001
From: BodySites <100404530+BodySites@users.noreply.github.com>
Date: Fri, 11 Aug 2023 22:06:39 +0600
Subject: [PATCH 2/4] take out switchPanel to the shared and add it to header
 of Callpage

---
 public/icons/view-1.svg                       | 13 +++++
 public/icons/view-2.svg                       | 10 ++++
 .../Participant/ui/ParticipantCard.tsx        |  6 ++-
 src/shared/ui/switchDisplay/SwitchPanel.tsx   | 47 +++++++++++++++++
 src/shared/ui/switchDisplay/styles.module.css | 27 ++++++++++
 src/widgets/CallInfo.tsx                      | 27 +++++++++-
 .../ParticipantsList/ParticipantsList.tsx     |  8 ++-
 src/widgets/layout/Sidebar/Sidebar.tsx        | 50 ++++++++-----------
 src/widgets/layout/Sidebar/styles.module.css  | 32 ------------
 9 files changed, 155 insertions(+), 65 deletions(-)
 create mode 100644 public/icons/view-1.svg
 create mode 100644 public/icons/view-2.svg
 create mode 100644 src/shared/ui/switchDisplay/SwitchPanel.tsx
 create mode 100644 src/shared/ui/switchDisplay/styles.module.css

diff --git a/public/icons/view-1.svg b/public/icons/view-1.svg
new file mode 100644
index 0000000..785e65e
--- /dev/null
+++ b/public/icons/view-1.svg
@@ -0,0 +1,13 @@
+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1600_4035)">
+<path d="M7.22222 9.5H2.77778C1.8 9.5 1 8.7 1 7.72222V3.27778C1 2.3 1.8 1.5 2.77778 1.5H7.22222C8.2 1.5 9 2.3 9 3.27778V7.72222C9 8.7 8.2 9.5 7.22222 9.5Z" stroke="#5F6A77" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.2222 9.5H14.7778C13.8 9.5 13 8.7 13 7.72222V3.27778C13 2.3 13.8 1.5 14.7778 1.5H19.2222C20.2 1.5 21 2.3 21 3.27778V7.72222C21 8.7 20.2 9.5 19.2222 9.5Z" stroke="#5F6A77" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.2222 21.5H14.7778C13.8 21.5 13 20.7 13 19.7222V15.2778C13 14.3 13.8 13.5 14.7778 13.5H19.2222C20.2 13.5 21 14.3 21 15.2778V19.7222C21 20.7 20.2 21.5 19.2222 21.5Z" stroke="#5F6A77" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.22222 21.5H2.77778C1.8 21.5 1 20.7 1 19.7222V15.2778C1 14.3 1.8 13.5 2.77778 13.5H7.22222C8.2 13.5 9 14.3 9 15.2778V19.7222C9 20.7 8.2 21.5 7.22222 21.5Z" stroke="#5F6A77" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1600_4035">
+<rect width="22" height="22" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/icons/view-2.svg b/public/icons/view-2.svg
new file mode 100644
index 0000000..cc63cb1
--- /dev/null
+++ b/public/icons/view-2.svg
@@ -0,0 +1,10 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_713_2066)">
+<path d="M16.5556 21H5.44444C3 21 1 19 1 16.5556V5.44444C1 3 3 1 5.44444 1H16.5556C19 1 21 3 21 5.44444V16.5556C21 19 19 21 16.5556 21Z" stroke="#5F6A77" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_713_2066">
+<rect width="22" height="22" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/features/Participant/ui/ParticipantCard.tsx b/src/features/Participant/ui/ParticipantCard.tsx
index 1df47f9..3fe5f3f 100644
--- a/src/features/Participant/ui/ParticipantCard.tsx
+++ b/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" }} />
diff --git a/src/shared/ui/switchDisplay/SwitchPanel.tsx b/src/shared/ui/switchDisplay/SwitchPanel.tsx
new file mode 100644
index 0000000..806e200
--- /dev/null
+++ b/src/shared/ui/switchDisplay/SwitchPanel.tsx
@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+
+interface Props {
+  oneSwitch: string;
+  twoSwitch: string;
+  style: Object;
+  state: boolean;
+  onClick: (stateSwitch: boolean) => void;
+}
+
+const SwitchPanel: React.FC<Props> = (props) => {
+  const [displaySwitch, setDisplaySwitch] = useState(props.state);
+
+  function clickRight() {
+    props.onClick(true);
+    setDisplaySwitch(true);
+  }
+
+  function clickLeft() {
+    props.onClick(false);
+    setDisplaySwitch(false);
+  }
+
+  return (
+    <div className={styles.switchPanel} style={props.style}>
+      <div
+        className={
+          displaySwitch ? styles.switch : styles.switch + " " + styles.active
+        }
+        onClick={clickLeft}
+      >
+        <img src={props.oneSwitch} alt="" />
+      </div>
+      <div
+        className={
+          displaySwitch ? styles.switch + " " + styles.active : styles.switch
+        }
+        onClick={clickRight}
+      >
+        <img src={props.twoSwitch} alt="" />
+      </div>
+    </div>
+  );
+};
+
+export default SwitchPanel;
diff --git a/src/shared/ui/switchDisplay/styles.module.css b/src/shared/ui/switchDisplay/styles.module.css
new file mode 100644
index 0000000..6f3ecce
--- /dev/null
+++ b/src/shared/ui/switchDisplay/styles.module.css
@@ -0,0 +1,27 @@
+.switchPanel {
+  display: flex;
+  padding: 3px;
+  align-items: center;
+  background: var(--white, #fff);
+  box-shadow: 0px 0px 2px 0px #c5ccd5;
+}
+
+.switch {
+  display: flex;
+  flex: 1 1;
+  aspect-ratio: 1 / 1;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  opacity: 0.5;
+}
+
+.switch:hover {
+  cursor: pointer;
+}
+
+.switch.active {
+  background: var(--grey-6, #f9fafe);
+  box-shadow: 0px 0px 2px 0px #c5ccd5;
+  opacity: 1;
+}
diff --git a/src/widgets/CallInfo.tsx b/src/widgets/CallInfo.tsx
index 9447026..60f3b60 100644
--- a/src/widgets/CallInfo.tsx
+++ b/src/widgets/CallInfo.tsx
@@ -1,6 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import { CopyLink } from "../features/Copy";
+import SwitchPanel from "../shared/ui/switchDisplay/SwitchPanel";
+import oneSwitch from "../../public/icons/view-1.svg";
+import twoSwitch from "../../public/icons/view-2.svg";
+import sidebarState from "../pages/CallPageCustomUI/store/sidebarState";
 
 const Container = styled.div`
   display: flex;
@@ -35,14 +39,33 @@ const Paragraph = styled.p`
   line-height: normal;
 `;
 
+const styleSwitch = {
+  width: "84px",
+  height: "48px",
+  borderRadius: "35px",
+};
+
 const CallInfo: React.FC = () => {
+  const [displaySwitch, setDisplaySwitch] = useState(false);
+
+  function changeDisplay(state: boolean) {
+    setDisplaySwitch(state);
+  }
+
   return (
-    <Container>
+    <Container style={sidebarState.isActive ? {} : { paddingRight: "35px" }}>
       <Info>
         <Title>Информатика 4 класс</Title>
         <CopyLink />
         <Paragraph>18 участников|01:12:45 </Paragraph>
       </Info>
+      <SwitchPanel
+        oneSwitch={oneSwitch}
+        twoSwitch={twoSwitch}
+        style={styleSwitch}
+        onClick={changeDisplay}
+        state={displaySwitch}
+      />
     </Container>
   );
 };
diff --git a/src/widgets/ParticipantsList/ParticipantsList.tsx b/src/widgets/ParticipantsList/ParticipantsList.tsx
index 56057d7..a32f71f 100644
--- a/src/widgets/ParticipantsList/ParticipantsList.tsx
+++ b/src/widgets/ParticipantsList/ParticipantsList.tsx
@@ -15,9 +15,14 @@ const Container = styled.div`
 interface Props {
   isActive: boolean;
   peopleList: IUser[];
+  displaySwitch?: boolean;
 }
 
-const ParticipantsList: React.FC<Props> = ({ isActive, peopleList }) => {
+const ParticipantsList: React.FC<Props> = ({
+  isActive,
+  peopleList,
+  displaySwitch = false,
+}) => {
   return (
     <Container style={isActive ? { opacity: "1" } : { opacity: "0.5" }}>
       {peopleList.map((people, index) => (
@@ -26,6 +31,7 @@ const ParticipantsList: React.FC<Props> = ({ isActive, peopleList }) => {
           name={people.name}
           isActive={isActive}
           key={index}
+          displaySwitch={displaySwitch}
         />
       ))}
     </Container>
diff --git a/src/widgets/layout/Sidebar/Sidebar.tsx b/src/widgets/layout/Sidebar/Sidebar.tsx
index 7e50465..1951bca 100644
--- a/src/widgets/layout/Sidebar/Sidebar.tsx
+++ b/src/widgets/layout/Sidebar/Sidebar.tsx
@@ -11,6 +11,7 @@ import { observer } from "mobx-react-lite";
 import styles from "./styles.module.css";
 import { IUser } from "../../../shared/api/models";
 import ParticipantsList from "../../ParticipantsList/ParticipantsList";
+import SwitchPanel from "../../../shared/ui/switchDisplay/SwitchPanel";
 
 const OpenButton = styled.div`
   position: absolute;
@@ -48,6 +49,12 @@ const Container = styled.div`
   background: rgba(255, 255, 255, 0.95);
 `;
 
+const styleSwitch = {
+  width: "66px",
+  height: "34px",
+  borderRadius: "18px",
+};
+
 interface Props {
   peopleList: IUser[];
 }
@@ -61,12 +68,8 @@ const Sidebar: React.FC<Props> = observer(({ peopleList }) => {
       : store.openSidebar();
   }
 
-  function rightDisplay() {
-    setDisplaySwitch(true);
-  }
-
-  function leftDisplay() {
-    setDisplaySwitch(false);
+  function changeDisplay(state: boolean) {
+    setDisplaySwitch(state);
   }
 
   function changeSelected() {
@@ -106,31 +109,20 @@ const Sidebar: React.FC<Props> = observer(({ peopleList }) => {
           <>
             <div className={styles.joinedHead}>
               <div className={styles.countJoined}>Подключены (12)</div>
-              <div className={styles.switchPanel}>
-                <div
-                  className={
-                    displaySwitch
-                      ? styles.switch
-                      : styles.switch + " " + styles.active
-                  }
-                  onClick={leftDisplay}
-                >
-                  <img src={oneSwitch} alt="" />
-                </div>
-                <div
-                  className={
-                    displaySwitch
-                      ? styles.switch + " " + styles.active
-                      : styles.switch
-                  }
-                  onClick={rightDisplay}
-                >
-                  <img src={twoSwitch} alt="" />
-                </div>
-              </div>
+              <SwitchPanel
+                oneSwitch={oneSwitch}
+                twoSwitch={twoSwitch}
+                style={styleSwitch}
+                state={displaySwitch}
+                onClick={changeDisplay}
+              />
             </div>
             <div className={styles.list}>
-              <ParticipantsList peopleList={peopleList} isActive={true} />
+              <ParticipantsList
+                peopleList={peopleList}
+                isActive={true}
+                displaySwitch={displaySwitch}
+              />
             </div>
             <div className={styles.joinedHead}>
               <div className={styles.countJoined}>Не подключены (4)</div>
diff --git a/src/widgets/layout/Sidebar/styles.module.css b/src/widgets/layout/Sidebar/styles.module.css
index 1ed3121..4b61c9c 100644
--- a/src/widgets/layout/Sidebar/styles.module.css
+++ b/src/widgets/layout/Sidebar/styles.module.css
@@ -49,38 +49,6 @@
   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;

From cb83705ed26ed8fdbc42f55721f3d7781b1f1445 Mon Sep 17 00:00:00 2001
From: unknown <emilnovikov392@gmail.com>
Date: Tue, 15 Aug 2023 15:20:03 +0600
Subject: [PATCH 3/4] 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<Props> = ({ href }) => {
   return (
     <Button
-      onClick={() => {
-        location.href = `/joinlesson/${href}`;
-      }}
+      href={`${href}`}
     >
       <p>Подключиться</p>
       <svg
diff --git a/src/entities/room/ui/RoomCard.tsx b/src/entities/room/ui/RoomCard.tsx
index c7ea4c0..e26637c 100644
--- a/src/entities/room/ui/RoomCard.tsx
+++ b/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
diff --git a/src/entities/user/api/addUser.ts b/src/entities/user/api/addUser.ts
index 4f7dd54..a863819 100644
--- a/src/entities/user/api/addUser.ts
+++ b/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));
     })
 }
diff --git a/src/entities/user/api/models.ts b/src/entities/user/api/models.ts
index 1c85082..05a720b 100644
--- a/src/entities/user/api/models.ts
+++ b/src/entities/user/api/models.ts
@@ -1,5 +1,5 @@
 export interface IUser {
     full_name: string,
     photo_url: string,
-    enail: string
+    email: string
 }
\ No newline at end of file
diff --git a/src/features/createRoom/model/index.ts b/src/features/createRoom/model/index.ts
index 865e782..fbca02c 100644
--- a/src/features/createRoom/model/index.ts
+++ b/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,
diff --git a/src/features/editRoom/model/delete.ts b/src/features/editRoom/model/delete.ts
index b4bf2d0..4da660c 100644
--- a/src/features/editRoom/model/delete.ts
+++ b/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 => {
diff --git a/src/features/editRoom/model/index.ts b/src/features/editRoom/model/index.ts
index 4085771..b391514 100644
--- a/src/features/editRoom/model/index.ts
+++ b/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',
diff --git a/src/features/editRoom/ui/EditRoomForm.tsx b/src/features/editRoom/ui/EditRoomForm.tsx
index eb6ca5b..8cd08fb 100644
--- a/src/features/editRoom/ui/EditRoomForm.tsx
+++ b/src/features/editRoom/ui/EditRoomForm.tsx
@@ -2,6 +2,9 @@ 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 { AddUserThunk } from '../../../entities/user/api/addUser';
+import userState from '../../../pages/Lobby/store/userState';
 import styled from 'styled-components';
 import LobbyFormLayout from '../../../widgets/layout/LobbyFormLayout';
 import Input from '../../../shared/ui/Input';
@@ -9,6 +12,7 @@ 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 +64,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 +99,4 @@ export const EditRoomForm: React.FC<Props> = ({ room }) => {
         </Form>
     </LobbyFormLayout>
   )
-}
+})
diff --git a/src/pages/Lobby/Lobby.tsx b/src/pages/Lobby/Lobby.tsx
index 10602ed..8fee7f9 100644
--- a/src/pages/Lobby/Lobby.tsx
+++ b/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();
diff --git a/src/pages/Lobby/store/user.ts b/src/pages/Lobby/store/userState.ts
similarity index 82%
rename from src/pages/Lobby/store/user.ts
rename to src/pages/Lobby/store/userState.ts
index 9f724c4..03b4dd4 100644
--- a/src/pages/Lobby/store/user.ts
+++ b/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();

From a7e1a5031c9a01c903b8ea65d4ce8a8d3937d954 Mon Sep 17 00:00:00 2001
From: unknown <emilnovikov392@gmail.com>
Date: Tue, 15 Aug 2023 15:23:37 +0600
Subject: [PATCH 4/4] fix errors

---
 src/features/editRoom/ui/EditRoomForm.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/features/editRoom/ui/EditRoomForm.tsx b/src/features/editRoom/ui/EditRoomForm.tsx
index 8cd08fb..2b99fc9 100644
--- a/src/features/editRoom/ui/EditRoomForm.tsx
+++ b/src/features/editRoom/ui/EditRoomForm.tsx
@@ -3,8 +3,6 @@ import { IRoom } from '../../../entities/room/api/models';
 import { EditThunk } from '../model';
 import { DeleteThunk } from '../model/delete';
 import { observer } from 'mobx-react-lite';
-import { AddUserThunk } from '../../../entities/user/api/addUser';
-import userState from '../../../pages/Lobby/store/userState';
 import styled from 'styled-components';
 import LobbyFormLayout from '../../../widgets/layout/LobbyFormLayout';
 import Input from '../../../shared/ui/Input';