Merge pull request #3 from SixBlueBlack/module3-task1

src/components/app.tsx

@@ -1,11 +1,35 @@
 import MainScreen from '../pages/main.tsx';
+import {BrowserRouter, Route, Routes} from 'react-router-dom';
+import {AppRoute, AuthorizationStatus} from '../const';
+import Login from '../pages/login.tsx';
+import Favourites from '../pages/favourites.tsx';
+import Offer from '../pages/offer.tsx';
+import NotFound from '../pages/not_found.tsx';
+import PrivateRoute from './private-route.tsx';
 
 type AppProps = {
   offersNumber: number;
 }
 
 function App({offersNumber}: AppProps): JSX.Element {
-  return (<MainScreen offersNumber={offersNumber}/>);
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path={AppRoute.Main} element={<MainScreen offersNumber={offersNumber}/>}/>
+        <Route path={AppRoute.Login} element={<Login/>}/>
+        <Route
+          path={AppRoute.Favourites}
+          element={
+            <PrivateRoute authorizationStatus={AuthorizationStatus.NoAuth}>
+              <Favourites/>
+            </PrivateRoute>
+          }
+        />
+        <Route path={AppRoute.Offer} element={<Offer/>}/>
+        <Route path="*" element={<NotFound/>}/>
+      </Routes>
+    </BrowserRouter>
+  );
 }
 
 export default App;

src/components/private-route.tsx

@@ -0,0 +1,16 @@
+import {AppRoute, AuthorizationStatus} from '../const.ts';
+import {Navigate} from 'react-router-dom';
+
+type PrivateRouteProps = {
+  authorizationStatus: AuthorizationStatus;
+  children: JSX.Element;
+}
+
+function PrivateRoute(props: PrivateRouteProps): JSX.Element {
+  const {authorizationStatus, children} = props;
+  return (
+    authorizationStatus === AuthorizationStatus.Auth ? children : <Navigate to={AppRoute.Login}/>
+  );
+}
+
+export default PrivateRoute;

src/const.ts

@@ -0,0 +1,12 @@
+export enum AppRoute {
+  Main = '/',
+  Login = '/login',
+  Favourites = '/favourites',
+  Offer = '/offer/:id'
+}
+
+export enum AuthorizationStatus {
+  Auth = 'AUTH',
+  NoAuth = 'NO_AUTH',
+  Unknown = 'UNKNOWN'
+}

src/pages/not_found.tsx

@@ -0,0 +1,13 @@
+import {Link} from 'react-router-dom';
+import {Fragment} from 'react';
+
+function NotFound() {
+  return (
+    <Fragment>
+      <h1>404 Not Found</h1>
+      <Link to="/">Go back</Link>
+    </Fragment>
+  );
+}
+
+export default NotFound;