HW/final_project/src/App.js

import React, { useEffect } from 'react';
import './App.css';
import { Router, Switch, Route } from 'react-router-dom';
import { Provider, connect } from "react-redux";
import { socket } from './store';

import { LoginPage } from './pages/LoginPage';
import { RegisterPage } from './pages/RegisterPage';
import { ChatPage } from './pages/ChatPage';
import { OpenChatPage } from './pages/OpenChatPage';
import { ChatInfoPage } from './pages/ChatInfoPage'
import { CreateChatPage } from './pages/CreateChatPage';
import { Header } from './components/Header';
import { PublicHeader } from './components/PublicHeader'
import { PrivateHeader } from './components/PrivateHeader';
import { PageAboutMe } from './pages/AbouteMePage'
import { HomePage } from './pages/HomePage';

import { actionFullLogin, actionAuthLogin } from './store/actions/action-login-promise'
import { actionAuthLogout } from './store/actions/action-logout'
import { actionRegister } from './store/actions/action-register-promise'
import { actionCreateChat } from './store/actions/action-create-chat';
import { actionCreateMessage } from './store/actions/action-create-msg';
import { actionAboutMe } from './store/actions/action-aboutMe';
import { actionSearchUser } from './store/actions/action-search-user';

import store from './store'
import { history } from './history'

const HeaderSwitch = () => {

    return (
        <Switch>
            <Route path="/login" component={PublicHeader} exact />
            <Route path="/registration" component={PublicHeader} exact />
            <Route path="/chat" component={PrivateHeader} exact />
            <Route path="/chat/:id" component={PrivateHeader} exact />
            <Route path="/chat/:id/info" component={PrivateHeader} exact />
            <Route path="/create-chat" component={PrivateHeader} exact />
            <Route path="/about-me" component={PrivateHeader} exact />
            <Route path="/" component={PublicHeader} exact />
        </Switch>
    )
}

const MainSwitch = ({ token }) => {
    if (token) {
        console.log("сокет")
        socket.emit("jwt", token)
    }
    return (
        <>
            <Switch>
                <div className="App">
                    <Route path="/login" component={CLoginForm} exact />
                    <Route path="/registration" component={CRegisterForm} exact />
                    <Route path="/chat" component={CPageChat} exact />
                    <Route path="/chat/:id" component={COpenPageChat} exact />
                    <Route path="/chat/:id/info" component={CPageChatInfo} exact />
                    <Route path="/create-chat" component={CCreateChat} exact />
                    <Route path="/about-me" component={CPageAboutMe} exact />
                    <Route path="/" component={HomePage} exact />
                </div>
            </Switch>
        </>
    )
}


const CLoginForm = connect(null, { onLogin: actionFullLogin, outLogin: actionAuthLogout })(LoginPage);
const CRegisterForm = connect(null, { onRegister: actionRegister })(RegisterPage)
const CPageAboutMe = connect(state => ({ userName: state.promise.userData?.payload.login, avatar: state.promise.userData?.payload.avatar, chats: state.promise.userData?.payload.chats }), { getData: actionAboutMe })(PageAboutMe)
const CPageChat = connect(state => ({ chats: state.chat.userData?.payload.chats }), { getData: actionAboutMe })(ChatPage)
const COpenPageChat = connect(state => ({ chats: state.chat.userData?.payload.chats, onCreateMsg: actionCreateMessage }), { getData: actionAboutMe })(OpenChatPage)
const CPageChatInfo = connect(state => ({ chats: state.chat.userData?.payload.chats, us: state.promise.searchUs?.payload?._id, onSearchUser: actionSearchUser }), { getData: actionAboutMe })(ChatInfoPage)
const CCreateChat = connect(null, { onCreate: actionCreateChat })(CreateChatPage)
const CMainSwitch = connect((state) => ({ token: state.auth.token || null }))(
    MainSwitch
);


function App() {

    useEffect(() => {
        if (localStorage.authToken) {
            store.dispatch(actionAuthLogin(localStorage.authToken));

        }
    }, [])

    return (
        <Provider store={store}>
            <Router history={history}>

                <HeaderSwitch />
                <CMainSwitch />

            </Router>
        </Provider>
    );
}

export default App;