import './App.css';
import Header from "./components/Header";
import NavBar from "./components/NavBar";
import Profile from "./components/Profile";
import {BrowserRouter, Routes, Route} from "react-router-dom";
import Dialogs from "./components/Dialogs";
import {ConnectPosts, Post} from "./components/Posts";
import Login, {ConnectLoginForm} from "./components/LoginForm";
import {Provider, connect, useDispatch, useSelector} from "react-redux";
import store from "./reducers/reducers";
import {ConnectPostDraw} from "./components/PostsDraw";
import {AppBar, Container} from "@mui/material";


const App = (props) => {
    return (
        <Provider store={store}>
            <BrowserRouter>
                <div className='app-wrapper'>
                    <AppBar>
                        <Header />
                    </AppBar>

                    <NavBar />

                        <div className='app-wrapper-content'>
                            <Routes>
                                <Route path="/profile" element={<Profile/>}/>
                                <Route path="/dialogs" element={<Dialogs/>}/>
                                <Route path="/posts" element={<ConnectPosts />}/>
                            </Routes>
                        </div>

                </div>
            </BrowserRouter>
        </Provider>
    )
}

export default App;

