added protected for routes, catching errors

src/App.tsx

@@ -1,6 +1,6 @@
 import "./App.css";
 import { useEffect, useState } from "react";
-import { Route, Switch, useHistory } from "react-router-dom";
+import { Redirect, Route, Switch, useHistory } from "react-router-dom";
 
 import { Header } from "./components/header/header";
 import { Demos } from "./components/demos/demos";
@@ -25,13 +25,16 @@ const App: React.FC<any> = () => {
   const history = useHistory();
   const { handleCurrentCard } = cardSlice.actions;
   const { handleChangeLanguage } = languageSlice.actions;
-  const { cards } = useAppSelector((state) => state.cardReducer);
+  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");
@@ -50,7 +53,7 @@ const App: React.FC<any> = () => {
         <div className="main">
           <h3 className="demos__tittle">{t("demo-title")}</h3>
           <div className="demo__container">
-            {cards.map((i: any) => (
+            {cards.map((i: ICards) => (
               <Demos
                 onClick={() => handleCards(i)}
                 key={i._id}
@@ -61,20 +64,23 @@ const App: React.FC<any> = () => {
         </div>
       </Route>
       <Route path="/connect-page">
-        <div className="background">
-          <div className="blur">
-            <Header></Header>
-            <div className="content__container">
-              <Main visible={visible} setVisible={setVisible}></Main>
+        {currentCard ?
+          (<div className="background">
+            <div className="blur">
+              <Header></Header>
+              <div className="content__container">
+                <Main visible={visible} setVisible={setVisible}></Main>
+              </div>
             </div>
           </div>
-        </div>
+          ) : <Redirect to='/' />}
       </Route>
       <Route exact path="/stream/:id">
-        <PlayerComponent
+        {data ? (<PlayerComponent
           dispatch={dispatch}
           closeStream={closeStream}
         ></PlayerComponent>
+        ) : <Redirect to='/' />}
       </Route>
     </Switch>
   );

src/components/Main/Main.tsx

@@ -1,5 +1,5 @@
 import "./main.css";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 
 import { PopupConnect } from "../popupConnect/popupConnect";
@@ -10,6 +10,7 @@ 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>("");
@@ -19,6 +20,9 @@ export const Main: React.FC<any> = ({ visible, setVisible }) => {
     (state) => state.cardReducer
   );
 
+
+
+
   return (
     <AnimatePresence mode="wait">
       {popup1 && (
@@ -31,7 +35,7 @@ export const Main: React.FC<any> = ({ visible, setVisible }) => {
         >
           <PopupConnect
             isLoading={isLoading}
-            logo={currentCard?.image.logo}
+            logo={currentCard.image.logo}
             onConnect={() => dispatch(createSession(currentCard.title))}
             visible={visible}
             setVisible={setVisible}
@@ -50,7 +54,7 @@ export const Main: React.FC<any> = ({ visible, setVisible }) => {
             value={value}
             setValue={setValue}
             isLoading={isLoading}
-            logo={currentCard?.image.logo}
+            logo={currentCard.image.logo}
             onConnect={() => dispatch(connectSession(value))}
             visible={visible}
             setVisible={setVisible}

src/components/ProtectedComponent/ProtectedComponent.tsx

@@ -1,10 +1,10 @@
 import { Route, Redirect } from "react-router-dom";
 
-export const ProtectedComponent:React.FC<any> = ({component:Component, ...props}) => {
+export const ProtectedComponent: React.FC<any> = ({ children, ...props }) => {
   console.log(props)
-    return (
-        <Route>
-        {() => (props.connected ? <Component {...props} /> : <Redirect to="/" />)}
-      </Route>
-      )
+  return (
+    <Route>
+      {() => (props.currentCard ? children : <Redirect to="/" />)}
+    </Route>
+  )
 }

src/components/demos/demos.tsx

@@ -1,8 +1,6 @@
 import "./demos.css";
 import "../../styles/styles.css";
-import building1 from "./building1.png";
 import iconButton from "./iconButton.svg";
-import { Link } from "react-router-dom";
 import { useAppSelector } from "../../hooks/redux";
 
 export const Demos: React.FC<any> = ({ item, onClick }) => {

src/components/playerComponent/playerComponent.tsx

@@ -1,9 +1,8 @@
 import "./playerStyles.css";
-import { useParams, useLocation } from "react-router-dom";
-import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import React, { } from "react";
 import { Sidebar } from "../sidebar/sidebar";
 import { useAppSelector } from "../../hooks/redux";
-import { connectSession } from "../../store/reducers/ActionCreator";
 
 type link = {
   id: string;
@@ -15,13 +14,6 @@ export const PlayerComponent: React.FC<any> = ({ closeStream, dispatch }) => {
 
   const { data } = useAppSelector((state) => state.sessionReducer);
 
-  useEffect(() => {
-    if (!data) {
-      dispatch(connectSession(id));
-    }
-    console.log(data, 'data')
-  }, []);
-
 
 
   return (

src/components/popupConnect/popupConnect.tsx

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

src/store/reducers/ActionCreator.ts

@@ -1,6 +1,5 @@
 import { createAsyncThunk } from "@reduxjs/toolkit";
 import MainApi from "../../utils/api";
-
 const api = new MainApi("https://a1.coord.graff.tech");
 
 
@@ -23,7 +22,7 @@ export const createSession = createAsyncThunk(
       const response = await api.createSession(title);
       return response;
     } catch (e) {
-      return thunkApi.rejectWithValue("Произошла ошибка");
+      return thunkApi.rejectWithValue(e);
     }
   }
 );
@@ -35,7 +34,8 @@ export const connectSession = createAsyncThunk(
       const response = await api.connectSession(code);
       return response;
     } catch (e) {
-      return thunkApi.rejectWithValue("Произошла ошибка");
+      console.log(e)
+      return thunkApi.rejectWithValue('Error');
     }
   }
 );

src/store/reducers/cardSlice.ts

@@ -33,7 +33,7 @@ export const cardSlice = createSlice({
     [fetchCards.pending.type]: (state) => {
       state.isLoading = true;
     },
-    [fetchCards.pending.type]: (state, action: PayloadAction<any>) => {
+    [fetchCards.rejected.type]: (state, action: PayloadAction<any>) => {
       state.isLoading = false;
       state.error = action.payload;
     },

src/store/store.ts

@@ -3,6 +3,7 @@ import cardReducer from "./reducers/cardSlice";
 import sessionReducer from "./reducers/sessionSlice";
 import languageReducer from "./reducers/languageSlice";
 
+
 const rootReducer = combineReducers({
   cardReducer,
   sessionReducer,