homework/js/Project/project/src/App.js

// import React, { useEffect, useState } from 'react'
// import { Router, Route, Redirect, withRouter, Switch } from 'react-router-dom';
// import { Provider, useSelector } from 'react-redux';
// import { store } from './components/redux/index';
// import createHistory from "history/createBrowserHistory";

// import './App.css';
// // import logo from './logo.svg';

// // импорт страниц
// import { CUser } from './components/user';
// import { CFeed } from './components/feed';
// import { CComments } from './components/post';
// import { CreatePost } from './components/create_post';
// import AuthReg from './components/auth_reg';
// // import Header from './components/structure/header';
// import { CHeader } from './components/structure/header';
// import Footer from './components/structure/footer';
// import Search from './components/search';
// import Page404 from './components/404/page404';

// // url проекта
// export const url = 'http://hipstagram.node.ed.asmer.org.ua/'


// const history = createHistory()


// // Приватный роутинг - удалить, если не буду использовать

// {
//     // фейковый авторизатор
//     const fakeAuth = {
//         isAuthenticated: false,
//         authenticate(cb) {
//             this.isAuthenticated = true
//             setTimeout(cb, 100)
//         },
//         signout(cb) {
//             this.isAuthenticated = false
//             setTimeout(cb, 100)
//         }
//     }



//     // кнопка разлогина, которая рисуется, если залогинен
//     const AuthButton = withRouter(({ history }) => (
//         fakeAuth.isAuthenticated && (
//             <p>
//                 Welcome! <button onClick={() => {
//                     fakeAuth.signout(() => history.push('/'))
//                 }}>Sign out</button>
//             </p>
//         )
//     ))

//     const PrivateRoute = ({ component: Component, ...rest }) => (
//         <Route {...rest} render={(props) => (
//             typeof localStorage.authToken === 'string'
//                 ? <Component {...props} />
//                 : <Redirect to={{
//                     pathname: '/authorization',
//                     state: { from: props.location }
//                 }} />
//         )} />
//     )


// }

// // роутинг в зависимости от того.залогинен пользователь или нет
// const MainRoutes = () => {
//     const currentState = useSelector(state => state?.auth?.token)

//     return (
//         <main style={{ flexGrow: '1' }}>
//             {currentState
//                 ? <Switch>
//                     <Route path="/" component={CFeed} exact />
//                     <Route path="/post/:postId" component={CComments} />
//                     <Route path="/user/:userId" component={CUser} />
//                     <Route path="/createpost" component={CreatePost} />
//                     <Route path='/search' component={Search} />
//                     <Route path="*" component={Page404} />
//                 </Switch>
//                 : <Switch>
//                     <Route path="/" component={AuthReg} exact />
//                     <Route path="/registration" component={AuthReg} />
//                     <Route path="*" component={Page404} />
//                 </Switch>
//             }
//         </main>
//     )
// }


// export default function App() {
//     return (
//         <Provider store={store}>
//             <Router history={history}>
//                 <div className="wrapper">
//                     <CHeader />
//                     <MainRoutes />
//                     <Footer />
//                 </div>
//             </Router>
//         </Provider>

//     )
// }



import React, { createContext, useContext, useEffect, useState } from 'react'
import { Router, Route, Redirect, withRouter, Switch } from 'react-router-dom';
import { Provider, useSelector } from 'react-redux';
import { store } from './components/redux/index';
import createHistory from "history/createBrowserHistory";

import './App.css';
// import logo from './logo.svg';

// импорт страниц
import { CUser } from './components/user';
import { CFeed } from './components/feed';
import { CComments } from './components/post';
import { CreatePost } from './components/create_post';
import AuthReg from './components/auth_reg';
// import Header from './components/structure/header';
import { CHeader } from './components/structure/header';
import Footer from './components/structure/footer';
import Search from './components/search';
import Page404 from './components/404/page404';

// url проекта
export const url = 'http://hipstagram.node.ed.asmer.org.ua/'

const history = createHistory()


// общий контекст для модального окна
export const ModalForCountsContext = createContext()
export const UpdateProfile = createContext()


// Приватный роутинг - удалить, если не буду использовать

{
    // фейковый авторизатор
    const fakeAuth = {
        isAuthenticated: false,
        authenticate(cb) {
            this.isAuthenticated = true
            setTimeout(cb, 100)
        },
        signout(cb) {
            this.isAuthenticated = false
            setTimeout(cb, 100)
        }
    }



    // кнопка разлогина, которая рисуется, если залогинен
    const AuthButton = withRouter(({ history }) => (
        fakeAuth.isAuthenticated && (
            <p>
                Welcome! <button onClick={() => {
                    fakeAuth.signout(() => history.push('/'))
                }}>Sign out</button>
            </p>
        )
    ))

    const PrivateRoute = ({ component: Component, ...rest }) => (
        <Route {...rest} render={(props) => (
            typeof localStorage.authToken === 'string'
                ? <Component {...props} />
                : <Redirect to={{
                    pathname: '/authorization',
                    state: { from: props.location }
                }} />
        )} />
    )


}

// роутинг в зависимости от того.залогинен пользователь или нет
const MainRoutes = () => {
    const currentState = useSelector(state => state?.auth?.token)

    // функции управления открытием/закрытием модального окна
    const [modalName, setModalName] = useState('')
    const [modalArray, setModalArray] = useState([])
    const [openModal, setOpenModal] = useState(false);
    const handleOpenModal = (param) => {
        setOpenModal(true)
        param.arr && setModalArray([...param.arr]) // идет проверка на null, из-за баги на беке?
        setModalName(param.name)
    }
    const handleCloseModal = () => {
        setOpenModal(false)
        setModalArray([])
    }


    const aboutMe = useSelector(state => state?.promise?.AboutMe?.payload)
    const myFollowings = aboutMe?.following.map(item => {
        return { _id: item._id }
    })

    // функция управления моими данными для обновления профиля
    const [updateProfile, setUpdateProfile] = useState({ _id: aboutMe?._id, login: aboutMe?.login, nick: aboutMe?.nick, avatar: { _id: aboutMe?.avatar?._id }, following: myFollowings })
    // console.log('updateProfile: ', updateProfile)


    return (
        <main style={{ flexGrow: '1' }}>
            {currentState
                ? <Switch>
                    <UpdateProfile.Provider value={[updateProfile, setUpdateProfile]}>
                        <ModalForCountsContext.Provider value={[modalName, setModalName, modalArray, setModalArray, openModal, setOpenModal, handleOpenModal, handleCloseModal]}>
                            <Route path="/" component={CFeed} exact />
                            <Route path="/post/:postId" component={CComments} />
                            <Route path="/user/:userId" component={CUser} />
                        </ModalForCountsContext.Provider>
                        <Route path='/search' component={Search} />
                    </UpdateProfile.Provider>
                    <Route path="/createpost" component={CreatePost} />
                    <Route path="*" component={Page404} />
                </Switch>
                : <Switch>
                    <Route path="/" component={AuthReg} exact />
                    <Route path="/registration" component={AuthReg} />
                    <Route path="*" component={Page404} />
                </Switch>
            }
        </main>
    )
}


export default function App() {
    return (
        <Provider store={store}>
            <Router history={history}>
                <div className="wrapper">
                    <CHeader />
                    <MainRoutes />
                    <Footer />
                </div>
            </Router>
        </Provider>

    )
}