Add Routing

src/App.js

@@ -3,9 +3,11 @@ import './App.scss';
 import {Provider, connect}   from 'react-redux';
 import thunk from 'redux-thunk';
 import {createStore, combineReducers, applyMiddleware} from 'redux';
-import Navibar from './Components/NaviBar';
+import {Navibar} from './Components/NaviBar';
 import Footer from './Components/Footer';
 import { createBrowserHistory } from "history";
+import { Redirect } from 'react-router-dom';
+import { actionAuthLogout } from './actions';
 
 import store from './reducers';
 import ConnectLog from './pages/Login';
@@ -25,20 +27,21 @@ import {Login} from "./pages/Login";
 import {Instruction} from "./pages/Instriction";
 import {Advertisment} from "./pages/Advertisment";
 import {useDropzone} from 'react-dropzone'
+import RoleRoute from './Components/PrivateRoute';
+import ConnectNav from './Components/NaviBar';
 
 
-// const ConnectLogout = connect(state => ({children: 'logout'}),{onClick: actionAuthLogout})('button')
-
 function App() {
   return (
     <>
       <Provider store={store}>
       <Router history = {createBrowserHistory()}>
-          <Navibar />
+          <ConnectNav />
           <Switch>
-            <Route exact path='/' component={TypeAd}/>
-            <Route exact path='/:id' component={TypeAdOne} />
+            <RoleRoute exact path='/' roles ={["user"]} component = {TypeAd} />
+            <RoleRoute path='/home/:id' roles={['user']}component={TypeAdOne} />
             <Route path='/login' component={ConnectLog}/>
+            {/* <RoleRoute roles={['unknown']} path='/login' component={ConnectLog}/> */}
             <Route path='/sign' component={ConnectSign}/>
             <Route path='/instruction' component={Instruction} />
             <Route path='/advertisment' component={Advertisment} />
@@ -50,4 +53,5 @@ function App() {
   );
 }
 
+
 export default App;

src/App.scss

@@ -1,8 +1,9 @@
 @import "~bootstrap/scss/bootstrap";
-body {
+html,body {
     width: 100%;
     max-width: 100%;
     overflow-x: hidden;
+    height: 100%;
 }
 
 .Navbar {
@@ -94,9 +95,12 @@ body {
     border : 1px solid white;
     background-color: whitesmoke;
     padding: 10px;
+    overflow-x: hidden;
     img {
-        max-width: 250px;
+        max-width: 200px;
+        min-width: 200px;
         padding-left: 0px;
+        border: 0;
     }
 
     a {
@@ -110,6 +114,13 @@ body {
     }
 }
 
+.adone {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
 
 footer {
     background: #002f34;

src/Components/AdOne.js

@@ -2,7 +2,7 @@ import React from "react";
 
 export const AdOne=({_id, price, title,description,images}) => {
     return (
-        <div className="aaa">
+        <div>
             <img src = {`http://marketplace.asmer.fs.a-level.com.ua/${images ? images[0]?.url : ''}`} />
             <p>{title}</p>
             <p>{description}</p>

src/Components/CAdFeed.js

@@ -11,7 +11,7 @@ export const AdFeed=({_id, price, owner,title,description,images}) => {
                 <img src = {`http://marketplace.asmer.fs.a-level.com.ua/${images ? images[0]?.url : ''}`} />
             </div> 
             <div className="col-6" info>   
-                <Link to={ `/${_id}`}>{title}</Link>
+                <Link to={ `/home/${_id}`}>{title}</Link>
                 <p>{description}</p>
             </div>
             <div className="col price">   

src/Components/Footer.js

@@ -1,7 +1,7 @@
 import React from "react";
 import {Link} from "react-router-dom";
 
-const Footer = () => <footer className="page-footer  fixed-bottom">
+const Footer = () => <footer className="page-footer fixed-bottom">
     <div className="container text-center ">
         <div className="row">
             <div className="col-md-6 mt-md-0 mt-3">

src/Components/NaviBar.js

@@ -2,8 +2,14 @@ import logo from '../logoOlx.png';
 import React from "react";
 import { Navbar, Nav, NavDropdown, Container } from 'react-bootstrap';
 import {Link} from "react-router-dom";
+import {actionAuthLogout} from '../actions/index'
+import { connect } from 'react-redux';
+import { useState } from 'react';
+// import Button from '@restart/ui/esm/Button';
+import CButtonLogout from './Logout';
 
-export default function Navibar({}){
+export function Navibar({isLogin}){
+  // let [isLogout, setIsLogout] = useState(false)
     return(
     <>
         <Navbar className='Navbar'>
@@ -12,15 +18,20 @@ export default function Navibar({}){
               <Navbar.Toggle aria-controls="basic-navbar-nav" />
               <Navbar.Collapse id="basic-navbar-nav">
                 <Nav>
-                  <Nav.Link><Link to="/login">Войти</Link></Nav.Link>
-                  <Nav.Link><Link to="/sign">Зарегистрироваться</Link></Nav.Link>
-                  {/* <NavDropdown title="Dropdown" id="basic-nav-dropdown">
-                    <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
-                    <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
-                    <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
-                    <NavDropdown.Divider />
-                    <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
-                  </NavDropdown> */}
+                  {isLogin ? (
+                    <>
+                      <CButtonLogout />
+                    </>
+                  ):(
+                      <>
+                        <Nav.Link><Link to="/login">Войти</Link></Nav.Link>
+                        <Nav.Link><Link to="/sign">Зарегистрироваться</Link></Nav.Link>
+                      </> 
+                    )}
+                  {/* <Nav.Link><Link to="/login">Войти</Link></Nav.Link>
+                  <Nav.Link><Link to="/sign">Зарегистрироваться</Link></Nav.Link> */}
+
+                  {/* {isLogout && <Logout onClick={() =>{onLogout();setIsLogout(false)}} />} */}
                 </Nav>
               </Navbar.Collapse>
             </Container>
@@ -28,3 +39,5 @@ export default function Navibar({}){
     </>
     )
   }
+const ConnectNav = connect(state => ({isLogin: state.authReducer.payload}),null)(Navibar)
+export default ConnectNav

src/pages/AdOne.js

@@ -9,8 +9,8 @@ export const Ad = ({getData3,data3, match:{params:{id}}}) => {
 
     if(data3){
         return (
-            <div>
-                {(ad) =><AdOne key={ad._id} price = {ad.price} title = {ad.title} description={ad.description}  images={ad.images} /> }
+            <div className="adone">
+                <AdOne key={data3._id} price = {data3.price} title = {data3.title} description={data3.description}  images={data3.images} />
             </div>
         )
     }

src/pages/Home.js

@@ -8,10 +8,10 @@ import {useHistory} from 'react-router-dom';
 
 export const Home = ({getData,data2}) => {
     useEffect(()=>getData(),[])
-    let history = useHistory()
-    if(!localStorage.authToken) {
-        history.push("/login") 
-    }
+    // let history = useHistory()
+    // if(!localStorage.authToken) {
+    //     history.push("/login") 
+    // }
     if(data2){
         return (
             <div>

src/pages/Login.js

@@ -58,5 +58,6 @@ const loginCallback = () => {
   )
 }
 
+
 const ConnectLog = connect(state => ({loggedIn: state.authReducer.login}), {onLogin: actionFullLogin})(LoginForm)
 export default ConnectLog

src/pages/Sign.js

@@ -75,7 +75,7 @@ const Sign = ({onSign,loggedIn}) => {
                 {show && (!login || password.length<3 || password2.length<3) && <MinPass/>}
                 {show2 && (!password.match(/\d/)) && <NumberCheckPass />}
                 {show3 && (password !== password2) && <ConfirmPass />}
-                {loggedIn && <Redirect push to='/login'/>}
+                {loggedIn && <Redirect push to='/'/>}
       </div>
 
     )