update

src/components/Main/Main.tsx

@@ -1,5 +1,5 @@
 import "./main.css";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 
 import { PopupConnect } from "../popupConnect/popupConnect";
@@ -8,18 +8,27 @@ import { popupAnimation } from "../../utils/animationProps";
 import { useAppDispatch, useAppSelector } from "../../hooks/redux";
 import {
   createSession,
-  connectSession,
 } from "../../store/reducers/ActionCreator";
-import { useHistory } from "react-router";
 
 export const Main: React.FC<any> = ({ visible, setVisible }) => {
   const [value, setValue] = useState<string>("");
   const dispatch = useAppDispatch();
   const { popup1, popup2 } = visible;
-  const { currentCard, isLoading } = useAppSelector(
+  const { currentCard } = useAppSelector(
     (state) => state.cardReducer
   );
 
+  const { isLoading } = useAppSelector((state) => state.sessionReducer)
+
+  useEffect(() => {
+    return () => {
+      setVisible({
+        popup1: true,
+        popup2: false,
+      })
+    }
+  }, [])
+
 
 
 
@@ -52,9 +61,7 @@ export const Main: React.FC<any> = ({ visible, setVisible }) => {
           <PopupConnectEx
             value={value}
             setValue={setValue}
-            isLoading={isLoading}
             logo={currentCard.image.logo}
-            onConnect={() => dispatch(connectSession(value))}
             visible={visible}
             setVisible={setVisible}
           ></PopupConnectEx>

src/components/PopupShare/PopupShare.tsx

@@ -2,11 +2,14 @@ import './sharePopup.css'
 import { useState, useEffect } from 'react'
 import { TSidebarPopup } from '../../utils/types'
 import { useTranslation } from 'react-i18next'
+import { useAppSelector } from '../../hooks/redux'
+
+export const PopupShare: React.FC<any> = ({ setClose }) => {
+
+    const { id } = useAppSelector((state) => state.sessionReducer);
 
-export const PopupShare: React.FC<any> = ({ setClose, data }) => {
     const [copy, setCopy] = useState(false)
 
-    console.log(data)
 
     function copyLink() {
         navigator.clipboard.writeText(window.location.href)
@@ -20,7 +23,7 @@ export const PopupShare: React.FC<any> = ({ setClose, data }) => {
 
     useEffect(() => () => setCopy(false), []);
 
-    const {t} = useTranslation();
+    const { t } = useTranslation();
 
 
     return (
@@ -31,7 +34,7 @@ export const PopupShare: React.FC<any> = ({ setClose, data }) => {
             </div>
             <div className='share-popup-data-container'>
                 <span className='share-popup-data-title'>{t('popup-control-code')}</span>
-                <input className='share-popup-data-input share-popup-data-input code' value={data.connection_code} readOnly></input>
+                <input className='share-popup-data-input share-popup-data-input code' value={id} readOnly></input>
             </div>
             <div className='border-line'></div>
             <div className='share-popup-data-container'>

src/components/playerComponent/playerComponent.tsx

@@ -1,33 +1,34 @@
 import "./playerStyles.css";
 import { useParams } from "react-router-dom";
-import React, { } from "react";
+import React, { useEffect } from "react";
 import { Sidebar } from "../sidebar/sidebar";
-import { useAppSelector } from "../../hooks/redux";
+import { connectSession } from "../../store/reducers/ActionCreator";
+import { useAppDispatch, useAppSelector } from "../../hooks/redux";
 
 type link = {
   id: string;
 };
 
-export const PlayerComponent: React.FC<any> = ({ closeStream, dispatch }) => {
+export const PlayerComponent: React.FC<any> = ({ closeStream }) => {
   const { id } = useParams<link>();
+  const dispatch = useAppDispatch();
 
+  useEffect(() => {
+    dispatch(connectSession(id));
+  }, []);
 
-  const { data } = useAppSelector((state) => state.sessionReducer);
-
+  const { url } = useAppSelector((state) => state.sessionReducer);
 
 
   return (
     <>
       <iframe
         title="stream"
-        src={data.link}
+        src={url}
         className={"player playerOn"}
-        security={''}
+        security={""}
       ></iframe>
-      <Sidebar
-        data={data}
-        closeStream={closeStream}
-      ></Sidebar>
+      <Sidebar closeStream={closeStream}></Sidebar>
     </>
   );
 };

src/components/popupConnect/popupConnect.tsx

@@ -14,9 +14,8 @@ export const PopupConnect: React.FC<any> = ({
   const handleConnect = () => {
     onConnect().then((res: any) => {
       if (!res.error) {
-        history.push(`/stream/${res.payload.connection_code}`);
+        history.push(`/stream/${res.payload.session_id}`);
       } else {
-        console.log(res)
         alert(res.payload);
       }
     });

src/components/popupConnectEx/popupConnectEx.tsx

@@ -5,24 +5,15 @@ import { useTranslation } from "react-i18next";
 
 export const PopupConnectEx: React.FC<any> = ({
   setVisible,
-  onConnect,
   logo,
   setValue,
   value,
-  isLoading,
 }) => {
   const history = useHistory();
   const { t } = useTranslation();
 
   const handleConnect = () => {
-    onConnect().then((res: any) => {
-      console.log(res);
-      if (!res.error) {
-        history.push(`/stream/${res.payload.connection_code}`);
-      } else {
-        alert(res.error.message);
-      }
-    });
+    history.push(`/stream/${value}`);
   };
 
   return (
@@ -37,10 +28,10 @@ export const PopupConnectEx: React.FC<any> = ({
         ></input>
         <button
           onClick={handleConnect}
-          disabled={!!!value || isLoading}
+          disabled={!!!value}
           type="submit"
           className={
-            !!value || isLoading ? "button" : "button button__disabled"
+            !!value ? "button" : "button button__disabled"
           }
         >
           {t("popup-connect-btn-continue")}

src/components/sidebar/sidebar.tsx

@@ -8,14 +8,8 @@ import { ControlPanel } from "../ControlPanel/ControlPanel";
 import { AnimatePresence, motion } from "framer-motion";
 import { sidebarVariants, popupAnimation } from "../../utils/animationProps";
 
-type link = {
-  id: string;
-};
-const userLocal = {
-  id: Math.floor(Math.random() * 100),
-};
 
-export const Sidebar: React.FC<any> = ({ closeStream, data }) => {
+export const Sidebar: React.FC<any> = ({ closeStream }) => {
   const [open, setOpen] = useState(true);
   const [popup, setPopup] = useState({
     popup1: false,
@@ -23,7 +17,6 @@ export const Sidebar: React.FC<any> = ({ closeStream, data }) => {
   });
 
   const [selected, setSelected] = useState(false);
-  const [icon, setIcon] = useState("");
 
   const [isMuted, setMuted] = useState(true);
 
@@ -100,7 +93,7 @@ export const Sidebar: React.FC<any> = ({ closeStream, data }) => {
             animate={"show"}
             exit={"hidden"}
           >
-            <PopupShare data={data} setClose={handleClosePopups}></PopupShare>
+            <PopupShare setClose={handleClosePopups}></PopupShare>
           </motion.div>
         )}