added protected for routes, catching errors

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