update

src/App.tsx

@@ -26,15 +26,12 @@ const App: React.FC<any> = () => {
   const { handleCurrentCard } = cardSlice.actions;
   const { handleChangeLanguage } = languageSlice.actions;
   const { cards, currentCard } = useAppSelector((state) => state.cardReducer);
-  const { data } = useAppSelector((state) => state.sessionReducer)
-
 
   useEffect(() => {
     dispatch(fetchCards());
     dispatch(handleChangeLanguage(cookies.get("i18next")));
   }, []);
 
-
   const handleCards = (card: ICards) => {
     dispatch(handleCurrentCard(card));
     history.push("/connect-page");
@@ -64,8 +61,8 @@ const App: React.FC<any> = () => {
         </div>
       </Route>
       <Route path="/connect-page">
-        {currentCard ?
-          (<div className="background">
+        {currentCard ? (
+          <div className="background">
             <div className="blur">
               <Header></Header>
               <div className="content__container">
@@ -73,14 +70,14 @@ const App: React.FC<any> = () => {
               </div>
             </div>
           </div>
-          ) : <Redirect to='/' />}
+        ) : (
+          <Redirect to="/" />
+        )}
       </Route>
       <Route exact path="/stream/:id">
-        {data ? (<PlayerComponent
-          dispatch={dispatch}
+        <PlayerComponent
           closeStream={closeStream}
         ></PlayerComponent>
-        ) : <Redirect to='/' />}
       </Route>
     </Switch>
   );

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>
         )}
 

src/store/reducers/ActionCreator.ts

@@ -1,6 +1,6 @@
 import { createAsyncThunk } from "@reduxjs/toolkit";
 import MainApi from "../../utils/api";
-const api = new MainApi("https://a1.coord.graff.tech");
+const api = new MainApi("https://a1.test.coord.graff.tech");
 
 
 export const fetchCards = createAsyncThunk(
@@ -28,7 +28,7 @@ export const createSession = createAsyncThunk(
 );
 
 export const connectSession = createAsyncThunk(
-  "session/Create",
+  "session/Connect",
   async (code: string, thunkApi) => {
     try {
       const response = await api.connectSession(code);

src/store/reducers/sessionSlice.ts

@@ -3,15 +3,25 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { createSession, connectSession } from "./ActionCreator";
 
 export interface sessionState {
-  data: IData | null;
   isLoading: boolean;
   error: any;
+  url: string;
+  id: string;
+}
+
+interface ConnectSessionResponseInterface {
+  websocket_url: string;
+}
+
+interface CreateSessionResponseInterface {
+  session_id: string;
 }
 
 const initialState: sessionState = {
-  data: null,
   isLoading: false,
   error: "",
+  url: '',
+  id: ''
 };
 
 export const sessionSlice = createSlice({
@@ -19,10 +29,9 @@ export const sessionSlice = createSlice({
   initialState,
   reducers: {},
   extraReducers: {
-    [createSession.fulfilled.type]: (state, action: PayloadAction<IData>) => {
+    [createSession.fulfilled.type]: (state, action: PayloadAction<CreateSessionResponseInterface>) => {
       state.isLoading = false;
-      state.data = action.payload;
-      localStorage.setItem('data', JSON.stringify(initialState.data))
+      state.id = action.payload.session_id;
     },
     [createSession.rejected.type]: (state, action: PayloadAction<any>) => {
       state.isLoading = false;
@@ -31,16 +40,18 @@ export const sessionSlice = createSlice({
     [createSession.pending.type]: (state) => {
       state.isLoading = true;
     },
-    [connectSession.fulfilled.type]: (state, action: PayloadAction<IData>) => {
+    [connectSession.fulfilled.type]: (state, action: PayloadAction<ConnectSessionResponseInterface>) => {
       state.isLoading = false;
-      state.data = action.payload;
+      const url = action.payload.websocket_url.replace('wss://', 'https://')
+      state.url = url
     },
     [connectSession.rejected.type]: (state, action: PayloadAction<any>) => {
       state.isLoading = false;
       state.error = action.payload;
     },
-    [connectSession.pending.type]: (state) => {
+    [connectSession.pending.type]: (state, action) => {
       state.isLoading = true;
+
     },
   },
 });

src/styles/styles.css

@@ -154,7 +154,7 @@
   border: 1px solid #ffffff;
 }
 
-.main-block__button:hover > div > img {
+.main-block__button:hover>div>img {
   transition: opacity ease-out 0.2s;
   opacity: 1;
 }
@@ -287,6 +287,12 @@
   transition: 0.3s ease;
 }
 
+.button:disabled {
+  cursor: default;
+  background: #595959;
+  transition: 0.3s ease;
+}
+
 .button:disabled {
   background-color: #404040;
   transition: 0.3 ease;
@@ -294,13 +300,13 @@
 
 .button__disabled:hover {
   background: #595959;
-  transition:  0.3 ease;
+  transition: 0.3 ease;
 
 }
 
 .button__disabled {
   background-color: #404040;
-  transition:  0.3 ease;
+  transition: 0.3 ease;
 }
 
 .line {
@@ -506,4 +512,4 @@
     line-height: 140%;
     font-size: 4.5vw;
   }
-}
+}

src/utils/api.ts

@@ -20,20 +20,23 @@ export default class MainApi {
     return this._checkStatus(promise);
   }
 
-  createSession(name: any) {
-    const promise = fetch(
-      `${this._url}/session/create?` + new URLSearchParams({ title: name }),
-      {
-        method: "GET",
-      }
-    );
+  createSession(name: string) {
+    const promise = fetch(`${this._url}/session/create`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        title: name,
+      }),
+    });
     return this._checkStatus(promise);
   }
 
   connectSession(code: any) {
     const promise = fetch(
       `${this._url}/session/connect?` +
-        new URLSearchParams({ connection_code: code }),
+        new URLSearchParams({ session_id: code }),
       {
         method: "GET",
       }