You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import React, { Fragment } from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import decode from 'jwt-decode';
import { store } from '../store';
import { setToken, setCurrentUser, addError } from '../store/actions';
import NavBar from './NavBar';
import RouteViews from './RouteViews';
import socketIO from 'socket.io-client';
import Home from '../components/HomeChat';
import ChatPage from '../components/ChatPage';
const socket = socketIO.connect('http://localhost:4000');
console.log("Socket: ", socket);
// The code checks if there is a JWT token stored in the local storage
if (localStorage.jwtToken) {
setToken(localStorage.jwtToken); // If a token exists, it sets the token in the Redux store using the setToken action creator.
try {
store.dispatch(setCurrentUser(decode(localStorage.jwtToken))); // if token is present, then it attempts to decode the token
} catch (err) {
store.dispatch(setCurrentUser({}));
// If decoding is successful, it dispatches the setCurrentUser action with the decoded user data to set the current user in the Redux store.
store.dispatch(addError(err));
// If decoding fails, it dispatches the setCurrentUser action with an empty object and adds an error to the Redux store using the addError action creator.
}
}
const App = () => (
<Provider store={store}>
<Router>
<Fragment>
<NavBar />
<RouteViews />
<Switch>
<Route path="/chat" element={<ChatPage socket={socket} />}></Route>
</Switch>
</Fragment>
</Router>
</Provider>
);
export default App;
This is my ChatPage.jsx
import React from 'react';
import ChatBar from '../components/ChatBar';
import ChatBody from '../components/ChatBody';
import ChatFooter from '../components/ChatFooter';
import { Redirect } from 'react-router-dom/cjs/react-router-dom.min';
const ChatPage = ({ socket, isAuthenticated }) => {
if (!isAuthenticated) return <Redirect to="/login" />;
console.log("CHATPAGE SOCKET===> ", socket)
return (
<div className="chat">
<ChatBar />
<div className="chat__main">
<ChatBody />
<ChatFooter socket={socket}/>
</div>
</div>
);
};
export default ChatPage;
here the socket is undefined when I do console.log
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
This is my App.jsx
This is my ChatPage.jsx
here the socket is
undefined
when I do console.logBeta Was this translation helpful? Give feedback.
All reactions