diff --git a/src/App.tsx b/src/App.tsx index 2495ec0a34b50573029838c2607328603cec7508..75c23b356dc176087fb1e1406470926606725bd8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,10 @@ import { BrowserRouter } from 'react-router-dom' -import Layout from './components/Layout/Layout' -import Routes from './components/Routes/Routes' -import { UserContext } from './hooks/userContext' import { ToastContainer } from 'react-toastify' import 'react-toastify/dist/ReactToastify.css' +import Layout from './components/Layout/Layout' +import Router from './components/Routes/Router' import useFindUser from './hooks/useFindUser' +import { UserContext } from './hooks/userContext' function App() { const { user, setUser, isLoading } = useFindUser() @@ -13,7 +13,7 @@ function App() { <BrowserRouter> <UserContext.Provider value={{ user, setUser, isLoading }}> <Layout> - <Routes /> + <Router /> </Layout> </UserContext.Provider> <ToastContainer diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index 486a779d7bc4e0b731766cfd5503f58b7ee53174..014efe8afb038985ea38a6d9d19f6edb92c91450 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -1,11 +1,10 @@ import React, { useContext } from 'react' -import routes from '../../constants/routes.json' -import logo from '../../assets/icons/ecolyo-logo.svg' -import './menu.scss' import { NavLink } from 'react-router-dom' -import { UserContext } from '../../hooks/userContext' +import logo from '../../assets/icons/ecolyo-logo.svg' import { useAuth } from '../../hooks/useAuth' -import { Route } from '../../models/route.model' +import { UserContext } from '../../hooks/userContext' +import { routes } from '../Routes/Router' +import './menu.scss' const Menu: React.FC = () => { const { user } = useContext(UserContext) @@ -17,7 +16,7 @@ const Menu: React.FC = () => { <img src={logo} alt="Ecolyo logo" className="logo" /> </div> <div className="menu-list"> - {routes.map((route: Route) => ( + {routes.map((route) => ( <NavLink key={route.label} to={route.path} activeClassName="active"> {route.label} </NavLink> diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index 209515a3fd64206879f56f37614f7689997c5065..bf71857fb87ffca0cb55c833c1dbfb6edc8eacd4 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -1,9 +1,8 @@ import React, { useContext } from 'react' import { NavLink } from 'react-router-dom' -import routes from '../../constants/routes.json' import { useAuth } from '../../hooks/useAuth' import { UserContext } from '../../hooks/userContext' -import { Route } from '../../models/route.model' +import { routes } from '../Routes/Router' import './navbar.scss' const Navbar: React.FC = () => { @@ -13,7 +12,7 @@ const Navbar: React.FC = () => { return ( <div className="navbar"> <div className="menu-list"> - {routes.map((route: Route) => ( + {routes.map((route) => ( <NavLink key={route.label} to={route.path} activeClassName="active"> {route.label} </NavLink> diff --git a/src/components/Routes/PrivateRoute.tsx b/src/components/Routes/PrivateRoute.tsx deleted file mode 100644 index 0f2fc3e428fdbef04645a0e0bf673c81528ff8ac..0000000000000000000000000000000000000000 --- a/src/components/Routes/PrivateRoute.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React, { useContext } from 'react' -import { Route, Redirect } from 'react-router-dom' -import { UserContext } from '../../hooks/userContext' - -interface PrivateRouteProps { - component: React.FC - path: string - exact: boolean -} - -const PrivateRoute: React.FC<PrivateRouteProps> = ({ - component, - path, - exact, -}: PrivateRouteProps) => { - const { user } = useContext(UserContext) - - return user ? ( - <Route path={path} exact={exact} component={component} /> - ) : ( - <Redirect to="/login" /> - ) -} -export default PrivateRoute diff --git a/src/components/Routes/Router.tsx b/src/components/Routes/Router.tsx new file mode 100644 index 0000000000000000000000000000000000000000..cbf8b0f6e7edc1180b56b351167f260cf6a25be5 --- /dev/null +++ b/src/components/Routes/Router.tsx @@ -0,0 +1,57 @@ +import React, { useContext } from 'react' +import { Redirect, Route, Switch } from 'react-router-dom' +import { UserContext } from '../../hooks/userContext' +import Consents from '../Consents/Consents' +import Editing from '../Editing/Editing' +import Login from '../Login/Login' +import Prices from '../Prices/Prices' +import Settings from '../Settings/Settings' + +const links: { [key: string]: { label: string; path: string } } = { + newsletter: { + label: 'Newsletter', + path: '/newsletter', + }, + popups: { + label: 'Pop-ups', + path: '/popups', + }, + prices: { + label: 'Prix', + path: '/prices', + }, + consents: { + label: 'Consentements', + path: '/consents', + }, +} + +export const routes = Object.keys(links).map((key) => ({ + label: links[key].label, + path: links[key].path, +})) + +const Router: React.FC = () => { + const { user } = useContext(UserContext) + + return ( + <Switch> + {user ? ( + <> + <Route exact path={links.newsletter.path} component={Editing} /> + <Route exact path={links.prices.path} component={Prices} /> + <Route exact path={links.popups.path} component={Settings} /> + <Route exact path={links.consents.path} component={Consents} /> + <Redirect path="*" to={links.newsletter.path} /> + </> + ) : ( + <> + <Route path="/login" component={Login} /> + <Redirect path="*" to="/login" /> + </> + )} + </Switch> + ) +} + +export default Router diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx deleted file mode 100644 index 9e022e2e1f8c83a69de6a5624d7657f32b20db33..0000000000000000000000000000000000000000 --- a/src/components/Routes/Routes.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { useContext } from 'react' -import { Redirect, Route, Switch } from 'react-router-dom' -import { UserContext } from '../../hooks/userContext' -import Consents from '../Consents/Consents' -import Editing from '../Editing/Editing' -import Login from '../Login/Login' -import Prices from '../Prices/Prices' -import Settings from '../Settings/Settings' -import PrivateRoute from './PrivateRoute' - -const Routes: React.FC = () => { - const { user } = useContext(UserContext) - - return ( - <Switch> - {user && <Redirect path="/login" to="/editing" />} - <Route path="/login" component={Login} /> - <PrivateRoute exact path="/editing" component={Editing} /> - <PrivateRoute exact path="/prices" component={Prices} /> - <PrivateRoute exact path="/settings" component={Settings} /> - <PrivateRoute exact path="/consents" component={Consents} /> - <Redirect path="*" to="/editing" /> - </Switch> - ) -} - -export default Routes diff --git a/src/constants/routes.json b/src/constants/routes.json deleted file mode 100644 index edb9f99927426d2b57ab70ebd8d3246c72a2fb22..0000000000000000000000000000000000000000 --- a/src/constants/routes.json +++ /dev/null @@ -1,18 +0,0 @@ -[ - { - "label": "Consentements", - "path": "/consents" - }, - { - "label": "Edition", - "path": "/editing" - }, - { - "label": "Paramètres", - "path": "/settings" - }, - { - "label": "Prix", - "path": "/prices" - } -] diff --git a/src/models/route.model.ts b/src/models/route.model.ts deleted file mode 100644 index 116f14c77ce207f187cf2d5eeab39152c04ee74d..0000000000000000000000000000000000000000 --- a/src/models/route.model.ts +++ /dev/null @@ -1,6 +0,0 @@ -export interface Route { - label: string - path: string -} - -export interface Routes extends Array<Route> {}