Feature/lazyload

package.json

@@ -10,13 +10,19 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "postcss": "^8.4.49",
+    "postcss-safe-parser": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
+  "resolutions": {
+    "postcss": "^8.4.0"
+  },
+
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

src/App.tsx

@@ -1,11 +1,12 @@
 import { Navigation } from './routes/Navigation';
+import { routes } from './routes/routes';
 
 function App() {
-  return (
-    <>
-      <Navigation />
-    </>
-  );
+	return (
+		<>
+			<Navigation routes={routes} />
+		</>
+	);
 }
 
 export default App;

src/components/CustomLink.tsx

@@ -0,0 +1,9 @@
+import { NavLink } from "react-router-dom";
+
+export interface CustomLinkProps {
+    name: string;
+    to: string;
+}
+
+export const CustomLink: React.FC<CustomLinkProps> = ({ name, to }) => (<li> <NavLink to={to ?? "-"} activeClassName="nav-active" exact>{name ?? "-"}</NavLink> </li>);
+export default CustomLink;

src/components/CustomLoading.tsx

@@ -0,0 +1,6 @@
+export interface CustomLoadingProps {
+	message: string;
+}
+
+export const CustomLoading: React.FC<CustomLoadingProps> = ({ message }) => (<h1>{message ?? "-"}</h1>);
+export default CustomLoading;

src/components/CustomRouter.tsx

@@ -0,0 +1,23 @@
+import { BrowserRouter as Router } from 'react-router-dom';
+import NavComponent, { IRoute } from './NavComponent';
+import SwitchComponent from './SwitchComponents';
+import { Suspense } from 'react';
+import CustomLoading from './CustomLoading';
+
+export interface RouterProps {
+	routes: IRoute[];
+}
+
+export const CustomRouter: React.FC<RouterProps> = ({ routes }) => {
+    return (
+    <Suspense fallback={<CustomLoading message='Loading...' />}>
+        <Router>
+            <div className="main-layout">
+                <NavComponent routes={routes} />
+                <SwitchComponent routes={routes} />
+            </div>
+        </Router>
+    </Suspense>);
+}
+
+export default CustomRouter;

src/components/NavComponent.tsx

@@ -0,0 +1,28 @@
+//Assets:
+import logo from '../logo.svg';
+//Components:
+import CustomLink from "./CustomLink";
+
+export interface IRoute {
+	path: string;
+	name: string;
+	Component: React.FC<any>;
+	to: string;
+	children?: IRoute[];
+}
+
+export interface NavProps {
+	routes: IRoute[];
+}
+
+export const NavComponent: React.FC<NavProps> = ({ routes }) => {
+	return (
+		<nav>
+			<img src={logo} alt="React Logo" />
+			<ul>
+				{routes && routes?.map(({ to, name }) => (<CustomLink name={name} to={to} key={name} />) )}
+			</ul>
+		</nav>
+	);
+}
+export default NavComponent;

src/components/SwitchComponents.tsx

@@ -0,0 +1,11 @@
+import { Route, Switch } from "react-router-dom";
+import { NavProps } from "./NavComponent";
+
+export type SwitchProps = Pick<NavProps, "routes">;
+
+export const SwitchComponent: React.FC<SwitchProps> = ({ routes }) =>
+	(<Switch>
+		{routes && routes.map(({ path, name, Component }) => (<Route key={name} path={path ?? "-"} exact> <Component /> </Route>))}
+	</Switch>);
+
+export default SwitchComponent;

src/components/index.ts

@@ -0,0 +1,5 @@
+export { CustomLoading } from './CustomLoading';
+export { CustomLink } from './CustomLink';
+export { CustomRouter } from './CustomRouter';
+export { NavComponent } from './NavComponent';
+export { SwitchComponent } from './SwitchComponents';

src/index.css

@@ -21,10 +21,10 @@ code {
 }
 
 nav {
+  overflow-y: hidden;
   background-color: #363a45;
   height: 100vh;
   margin-right: 15px;
-  overflow-y: scroll;
   text-align: center;
   width: 250px;
 }

src/lazyload-module/layout/LazyloadLayout.tsx

@@ -0,0 +1,13 @@
+//Components:
+import Navigation from '../router/Navigation';
+
+export const LazyloadLayout = () => {
+
+    return (
+        <div>
+            <h1>Lazyload Layout Page</h1>
+            <Navigation />
+        </div>
+    );
+}
+export default LazyloadLayout;

src/lazyload-module/pages/User.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export interface UserProps {
+    id: number | string;
+}
+export const User: React.FC<UserProps> = ({ id }) => (<h1>User page</h1>);
+export default User;

src/lazyload-module/pages/Users.tsx

@@ -0,0 +1,2 @@
+export const Users: React.FC = () => (<h1>Users page</h1>);
+export default Users;

src/lazyload-module/pages/index.ts

@@ -0,0 +1,2 @@
+export { Users } from './Users';
+export { User } from './User';

src/lazyload-module/router/Navigation.tsx

@@ -0,0 +1,31 @@
+import { Link, Redirect, Route, Switch, useRouteMatch, BrowserRouter as Router } from "react-router-dom";
+import { User, Users } from "../pages";
+
+export const Navigation: React.FC = () => {
+    const { path, url } = useRouteMatch();
+    const userID: string = '123123';
+    return (
+        <Router>
+            <h2>Lazylayout - pages:</h2>
+            <ul>
+                <li>
+                    <Link to={`${url}/users/${userID}`}>User ID + {userID}</Link>
+                </li>
+                <li>
+                    <Link to={`${url}`}>Users</Link>
+                </li>
+            </ul>
+            <Switch>
+                <Route path={`${path}/users/:id`} exact>
+                    <User id={userID} />
+                </Route>
+                <Route path={`${path}/`} exact>
+                    <Users />
+                </Route>
+                <Redirect to={`${path}/` } />
+            </Switch>
+        </Router>
+    );
+}
+
+export default Navigation;

src/pages/About.tsx

@@ -0,0 +1,2 @@
+export const About: React.FC = () => (<h1>About page</h1>);
+export default About;

src/pages/Home.tsx

@@ -0,0 +1,2 @@
+export const Home: React.FC = () => (<h1>Home page</h1>);
+export default Home;

src/pages/index.ts

@@ -0,0 +1,2 @@
+export { Home } from './Home';
+export { About } from './About';

src/routes/Navigation.tsx

@@ -1,45 +1,10 @@
-import {
-  BrowserRouter as Router,
-  Switch,
-  Route,
-  NavLink
-} from 'react-router-dom';
+//Components:
+import { CustomRouter } from '../components/CustomRouter';
+//Utils:
+import { IRoute } from '../utils/utils';
+export interface NavigationProps {
+	routes: IRoute[];
+}
 
-import logo from '../logo.svg';
-
-export const Navigation = () => {
-  return (
-    <Router>
-      <div className="main-layout">
-        <nav>
-            <img src={ logo } alt="React Logo" />
-          <ul>
-            <li>
-              <NavLink to="/" activeClassName="nav-active" exact>Home</NavLink>
-            </li>
-            <li>
-              <NavLink to="/about" activeClassName="nav-active" exact>About</NavLink>
-            </li>
-            <li>
-              <NavLink to="/users" activeClassName="nav-active" exact>Users</NavLink>
-            </li>
-          </ul>
-        </nav>
-
-        {/* A <Switch> looks through its children <Route>s and
-            renders the first one that matches the current URL. */}
-        <Switch>
-          <Route path="/about">
-            <h1>About</h1>
-          </Route>
-          <Route path="/users">
-            <h1>Users</h1>
-          </Route>
-          <Route path="/">
-            <h1>Home</h1>
-          </Route>
-        </Switch>
-      </div>
-    </Router>
-  );
-}
+export const Navigation: React.FC<NavigationProps> = ({ routes }) => (<CustomRouter routes={routes} />);
+export default Navigation;

src/routes/routes.ts

@@ -0,0 +1,28 @@
+//Components"
+import { lazy } from "react";
+import { About, Home } from "../pages";
+//Utils:
+import { IRoute } from "../utils/utils";
+
+const LazyloadLayout = lazy(() => import(/* webpackChunckName:"LazyloadLayout" */'../lazyload-module/layout/LazyloadLayout'));
+
+export const routes: IRoute[] = [
+	{
+		path: '/',
+		name: 'Home',
+		Component: Home,
+		to: '',
+	},
+	{
+		path: '/about',
+		name: 'About',
+		Component: About,
+		to: 'about',
+	},
+    {
+        path: '/lazyload',
+        name: 'Lazy Load',
+        Component: LazyloadLayout,
+		to: 'lazyload',
+    }
+];

src/utils/utils.ts

@@ -0,0 +1,7 @@
+export interface IRoute {
+	path: string;
+	name: string;
+	Component: React.FC<any>;
+	to: string;
+	children?: IRoute[];
+}