Move routes to the dedicated file

closes #70

client/src/components/App/index.js

@@ -1,48 +1,9 @@
-import './style.scss';
-import React, { Fragment } from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-import Landing from '../../domain/Landing';
-import SignUp from '../../domain/Auth/SignUp';
-import Login from '../../domain/Auth/Login';
-import MovieList from '../../domain/MovieList';
-import Navbar from '../Navbar/index';
+import React from 'react';
 
-function App() {
-  return (
-    <Router>
-      <Fragment>
-        <Navbar />
-        <div className="App">
-          <Route exact path="/" component={Landing} />
-          <Switch>
-            {/* http://localhost:3000/movies */}
-            <Route exact path="/movies" component={MovieList} />
-            {/* http://localhost:3000/signup */}
-            <Route exact path="/signup" component={SignUp} />
-            {/* http://localhost:3000/login */}
-            <Route exact path="/login" component={Login} />
-            {/* http://localhost:3000/logout */}
-            {/* <Route exact path='/login' component={ Logout }/> */}
-            {/* http://localhost:3000/users/me */}
-            {/* <Route exact path='/users/me' component={ UserProfile }/> */}
-            {/* http://localhost:3000/reservation/pre/:screeningId */}
-            {/* <Route path='/reservation/pre/:screeningId' component={ ReservationPreview }/> */}
-            {/* http://localhost:3000/reservation/chooseSeats/:screeningId */}
-            {/* <Route path='/reservation/chooseSeats/:screeningId' component={ ReservationDetails }/> */}
-            {/* http://localhost:3000/reservation/details/:reservationId */}
-            {/* <Route path='/reservation/details/:reservationId' component={ ReservationConfirmation }/> */}
-            {/* http://localhost:3000/reservation/payment/:reservationId */}
-            {/* <Route path='/reservation/payment/:reservationId' component={ ReservationPayment }/> */}
-            {/* http://localhost:3000/reservation/confirm/:reservationId */}
-            {/* <Route path='/reservation/confirm/:reservationId' component={ ReservationConfirmation }/> */}
+import Routes from '../Routes/Routes.js';
 
-            {/* <PrivateRoute exact path='/admin' component={ Admin }/> */}
-            {/* http://localhost:3000/admin */}
-          </Switch>
-        </div>
-      </Fragment>
-    </Router>
-  );
+function App() {
+  return <Routes />;
 }
 
 export default App;

client/src/components/Loader/index.js

@@ -0,0 +1,7 @@
+import './style.scss';
+
+function Loader() {
+  return <div className="loader">To be continued...</div>;
+}
+
+export default Loader;

client/src/components/Loader/style.scss

@@ -0,0 +1,5 @@
+@import '../../styles/variables';
+.loader {
+  background-color: $color-primary;
+  color: $text-color-secondary;
+}

client/src/components/Routes/Routes.js

@@ -0,0 +1,56 @@
+import '../App/style.scss';
+import React, { Fragment, lazy, Suspense } from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import Loader from '../Loader';
+
+const Landing = lazy(() => import('../../domain/Landing'));
+
+const SignUp = lazy(() => import('../../domain/Auth/SignUp'));
+
+const Login = lazy(() => import('../../domain/Auth/Login'));
+
+const MovieList = lazy(() => import('../../domain/MovieList'));
+
+const Navbar = lazy(() => import('../Navbar/index'));
+
+function Routes() {
+  return (
+    <Suspense fallback={<Loader />}>
+      <Router>
+        <Fragment>
+          <Navbar />
+          <div className="App">
+            <Route exact path="/" component={Landing} />
+            <Switch>
+              {/* http://localhost:3000/movies */}
+              <Route exact path="/movies" component={MovieList} />
+              {/* http://localhost:3000/signup */}
+              <Route exact path="/signup" component={SignUp} />
+              {/* http://localhost:3000/login */}
+              <Route exact path="/login" component={Login} />
+              {/* http://localhost:3000/logout */}
+              {/* <Route exact path='/login' component={ Logout }/> */}
+              {/* http://localhost:3000/users/me */}
+              {/* <Route exact path='/users/me' component={ UserProfile }/> */}
+              {/* http://localhost:3000/reservation/pre/:screeningId */}
+              {/* <Route path='/reservation/pre/:screeningId' component={ ReservationPreview }/> */}
+              {/* http://localhost:3000/reservation/chooseSeats/:screeningId */}
+              {/* <Route path='/reservation/chooseSeats/:screeningId' component={ ReservationDetails }/> */}
+              {/* http://localhost:3000/reservation/details/:reservationId */}
+              {/* <Route path='/reservation/details/:reservationId' component={ ReservationConfirmation }/> */}
+              {/* http://localhost:3000/reservation/payment/:reservationId */}
+              {/* <Route path='/reservation/payment/:reservationId' component={ ReservationPayment }/> */}
+              {/* http://localhost:3000/reservation/confirm/:reservationId */}
+              {/* <Route path='/reservation/confirm/:reservationId' component={ ReservationConfirmation }/> */}
+
+              {/* <PrivateRoute exact path='/admin' component={ Admin }/> */}
+              {/* http://localhost:3000/admin */}
+            </Switch>
+          </div>
+        </Fragment>
+      </Router>
+    </Suspense>
+  );
+}
+
+export default Routes;