feat: routing

Author: marcelovicentegc

frontend/containers/BiographyPage/index.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const BiographyPage: React.SFC = () => {
+  return <h1>BIOGRAPHY PAGE</h1>;
+};

frontend/containers/LandingPage/index.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { Image, Span, GreetingsBox } from "./style";
 import rocketLaunch from "../../icons/rocketLaunch.png";
 import { useLandingPageContext } from "../../contexts/LandingPageContext";
+import { Layout } from "../../components/Layout";
+import { Header } from "../../components/Header";
 const Modal = React.lazy(() => import("./Modal"));
 
 export const LandingPage: React.FC = () => {
@@ -13,33 +15,36 @@ export const LandingPage: React.FC = () => {
     displayTipEditionModal,
     displayTipsModal,
     removeTip,
-    editTip
+    editTip,
   } = useLandingPageContext();
 
   return (
     <>
-      <React.Suspense fallback={"loading..."}>
-        {!!state.modal && (
-          <Modal
-            state={state}
-            hideTipsModal={hideTipsModal}
-            addTip={addTip}
-            displayTipAdditionModal={displayTipAdditionModal}
-            displayTipEditionModal={displayTipEditionModal}
-            displayTipsModal={displayTipsModal}
-            removeTip={removeTip}
-            editTip={editTip}
-          />
-        )}
-      </React.Suspense>
-      <GreetingsBox data-testid="greetingsBox">
-        <Span data-testid="span">
-          The install worked successfully! Congratulations!
-        </Span>
-        <br />
-        <Span data-testid="span">Now go build something great 😃!</Span>
-      </GreetingsBox>
-      <Image src={rocketLaunch} alt={"Rocket being launched"} />
+      <Header />
+      <Layout>
+        <React.Suspense fallback={"loading..."}>
+          {!!state.modal && (
+            <Modal
+              state={state}
+              hideTipsModal={hideTipsModal}
+              addTip={addTip}
+              displayTipAdditionModal={displayTipAdditionModal}
+              displayTipEditionModal={displayTipEditionModal}
+              displayTipsModal={displayTipsModal}
+              removeTip={removeTip}
+              editTip={editTip}
+            />
+          )}
+        </React.Suspense>
+        <GreetingsBox data-testid="greetingsBox">
+          <Span data-testid="span">
+            The install worked successfully! Congratulations!
+          </Span>
+          <br />
+          <Span data-testid="span">Now go build something great 😃!</Span>
+        </GreetingsBox>
+        <Image src={rocketLaunch} alt={"Rocket being launched"} />
+      </Layout>
     </>
   );
 };

frontend/containers/PublicationPage/index.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export const PublicationPage: React.SFC = () => {
+  return <h1>PUBLICATION PAGE</h1>;
+};

frontend/containers/Routes/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Switch, Route } from "react-router-dom";
+import { LandingPage } from "../LandingPage";
+import { BiographyPage } from "../BiographyPage";
+import { ROUTES } from "../../routes";
+import { PublicationPage } from "../PublicationPage";
+
+export const Routes = () => {
+  return (
+    <Switch>
+      <Route path={ROUTES.LANDING_PAGE} exact>
+        <LandingPage />
+      </Route>
+      <Route path={ROUTES.BIOGRAPHY_PAGE} exact>
+        <BiographyPage />
+      </Route>
+      <Route path={ROUTES.PUBLICATION_PAGE} exact>
+        <PublicationPage />
+      </Route>
+    </Switch>
+  );
+};

frontend/index.tsx

@@ -2,11 +2,10 @@ import * as React from "react";
 import { render } from "react-dom";
 import { createGlobalStyle, ThemeProvider } from "styled-components";
 import { theme, Theme } from "./utils/theme";
-import { Header } from "./components/Header";
-import { Layout } from "./components/Layout";
 import { LandingPageProvider } from "./contexts/LandingPageContext";
 import { register } from "./serviceWorker";
-import { LandingPage } from "./containers/LandingPage";
+import { BrowserRouter } from "react-router-dom";
+import { Routes } from "./containers/Routes";
 
 const GlobalStyle = createGlobalStyle<{ theme: Theme }>`
     html {
@@ -15,7 +14,7 @@ const GlobalStyle = createGlobalStyle<{ theme: Theme }>`
       overflow-x: hidden;
       
       body {
-            ${props => props.theme.fontFamily}
+            ${(props) => props.theme.fontFamily}
             margin: 0;
             height: 100%;
 
@@ -31,10 +30,9 @@ const Root: React.FC = () => {
     <ThemeProvider theme={theme}>
       <LandingPageProvider>
         <GlobalStyle theme={theme} />
-        <Header />
-        <Layout>
-          <LandingPage />
-        </Layout>
+        <BrowserRouter>
+          <Routes />
+        </BrowserRouter>
       </LandingPageProvider>
     </ThemeProvider>
   );

frontend/package-lock.json

@@ -21,9 +21,11 @@
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
+    "@types/react-router-dom": "^5.1.5",
     "jest": "^24.9.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-router-dom": "^5.2.0",
     "styled-components": "^4.4.1",
     "typescript": "^3.7.2"
   },

frontend/package.json

@@ -0,0 +1,5 @@
+export enum ROUTES {
+  LANDING_PAGE = "/",
+  BIOGRAPHY_PAGE = "/biography",
+  PUBLICATION_PAGE = "/blog/:publication",
+}

frontend/routes/index.ts

@@ -1,7 +1,8 @@
-from django.urls import path
+from django.urls import path, re_path
 from . import views
 
 
 urlpatterns = [
     path('', views.index ),
+    re_path(r'^(?:.*)/?$', views.index)
 ]