добавлена логика для редиректа на стриминг

src/components/mainPart/contentContainer.tsx

@@ -1,4 +1,5 @@
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useState } from "react";
+import { ContextWs } from "../../ContextWs";
 import { ContextLang } from "../ContextLang";
 import { PinkButton } from "./pinkButton";
 
@@ -19,8 +20,33 @@ type TProps = {
     accessCode?: string,
 }
 
+type WsData = {
+    message: string
+    id: string
+    content?: boolean
+    port?: string
+  }
+
 export const ContentContainer:React.FC<TProps> = React.memo((props) => {
+    const [accessCode, setAccessCode] = useState('------');
     let {lang} = useContext(ContextLang);
+    const {wsEvent} = useContext(ContextWs);
+
+    useEffect(() => {
+        if(!wsEvent) {
+            return;
+        }        
+        let data: WsData;
+        try {
+            data = JSON.parse(wsEvent.data) as WsData;
+        } catch {
+            return;
+        }
+        // console.log(data)
+        if(data?.message === 'SESS_CREATION') {
+            setAccessCode(data.id)
+        }
+    }, [wsEvent])
     
     return <div className="main-part-text-container">
         {
@@ -34,7 +60,7 @@ export const ContentContainer:React.FC<TProps> = React.memo((props) => {
         </span>
         {
             props.accessCode &&
-            <span className="main-part-text-access-code">{props.accessCode}</span>
+            <span className="main-part-text-access-code">{accessCode}</span>
         }
         <PinkButton
             onClick={props.onClickButton}

src/components/mainPart/mainPart.tsx

@@ -11,6 +11,12 @@ import { TimeSelector } from "./timeSelector/timeSelector";
 import { Form } from "./form/form";
 import { LangDict } from "../langDict";
 import { ContextLang } from "../ContextLang";
+import { ContextWs } from "../../ContextWs";
+
+type TProps = {
+    createSess: () => void,
+    connectSess: () => void
+}
 
 type FormData = {
     phone: string
@@ -18,10 +24,8 @@ type FormData = {
     firstName: string
 }
 
-export const MainPart: React.FC = React.memo(() => {
-    // const [currentLang, setCurrentLang] = useState<'ru' | 'en'>('ru');
+export const MainPart: React.FC<TProps> = React.memo((props) => {    
     const {lang, setLang} = useContext(ContextLang);
-    // const [changeContent, setChangeContent] = useState(0);
     const changeContent = useRef(0);
     const [showBackground, setShowBackground] = useState<boolean>(false);
     const [planContent, setPlaneContent] = useState<JSX.Element>();
@@ -34,10 +38,7 @@ export const MainPart: React.FC = React.memo(() => {
         />
     const [currentContent, setCurrentContent] = useState<JSX.Element>(defaultCurrentContent);  
     const lastRender = currentContent;
-
-    useEffect(() => {
-        // setChangeContent(changeContent + 1);
-    }, [currentContent]);    
+    const {ws, wsEvent} = useContext(ContextWs);
 
     useEffect(() => {
         console.log(lang)
@@ -45,11 +46,7 @@ export const MainPart: React.FC = React.memo(() => {
         setCurrentContent(lastRender)
         
     }, [lang])
-
-    useEffect(() => {
-        console.log('change')
-    }, [changeContent])
-
+    
     function changeLang(lang: 'ru' | 'en') {
         setLang(lang);
         document.querySelector('html').lang = lang;
@@ -80,6 +77,7 @@ export const MainPart: React.FC = React.memo(() => {
     } 
 
     function onClickCreateNewDemo() {
+        props.createSess();
         changeContentFunc();
         setCurrentContent(
             <ContentContainer 
@@ -106,7 +104,8 @@ export const MainPart: React.FC = React.memo(() => {
     }
 
     function onClickConnect() {
-
+        props.connectSess()
+        // ws.send('{ "message" : "NEW_SESS" }');
     }
 
     function onSelectDay(date: {ru: string, en: string}) {