Merge pull request #12 from python-discord/routing/add-react-router

Add routing

5 files changed, 86 insertions, 13 deletions

diff --git a/src/App.tsx b/src/App.tsx
index d372e2f..56fbd17 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,18 @@
 /** @jsx jsx */
+/** @global location */
 import { css, jsx, Global } from "@emotion/core";
 
+import {
+  BrowserRouter as Router,
+  Route,
+  Switch
+} from "react-router-dom";
+
+import { CSSTransition, TransitionGroup } from "react-transition-group";
+
 import LandingPage from "./pages/LandingPage";
 import colors from "./colors";
+import FormPage from "./pages/FormPage";
 
 const globalStyles = css`
 @import url('https://fonts.googleapis.com/css2?family=Hind:wght@700&display=swap');
@@ -18,13 +28,53 @@ body {
   font-family: "Hind", "Helvetica", "Arial", sans-serif;
   margin: 0;
 }
+
+.fade-enter,
+.fade-exit {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: 300ms ease opacity;
+  width: 100%;
+}
+
+.fade-enter,
+.fade-exit-active {
+  opacity: 0;
+}
+
+.fade-enter-active {
+  opacity: 1;
+  z-index: 1;
+}
 `;
 
+const routes = [
+  { path: "/", Component: LandingPage },
+  { path: "/form", Component: FormPage}
+]
+
 function App() {
   return (
     <div>
       <Global styles={globalStyles}/>
-      <LandingPage/>
+      <Router>
+        <Route render={({ location }) => (
+          <TransitionGroup>
+            <CSSTransition
+              key={location.pathname}
+              classNames="fade"
+              timeout={300}
+            >
+              <Switch location={location}>
+                {routes.map(({path, Component}) => (
+                  <Route exact path={path} component={Component}/>
+                ))}
+              </Switch>
+            </CSSTransition>
+          </TransitionGroup>
+        )}/>
+      </Router>
     </div>
   );
 };
diff --git a/src/components/FormListing.tsx b/src/components/FormListing.tsx
index 58f21f8..09b3134 100644
--- a/src/components/FormListing.tsx
+++ b/src/components/FormListing.tsx
@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { css, jsx } from "@emotion/core";
+import { Link } from "react-router-dom";
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
@@ -24,6 +25,8 @@ function FormListing(props: FormListingProps) {
     border-radius: 10px;
     transition-property: transform, width;
     transition-duration: 500ms;
+    text-decoration: none;
+    color: inherit;
 
     @media (max-width: 575px) {
       width: 80%;
@@ -40,10 +43,12 @@ function FormListing(props: FormListingProps) {
     closedTag = <Tag text="CLOSED" color={colors.error}/>
   };
 
-  return <div css={listingStyle}>
-    <h3 css={{fontSize: "1.5em", marginBottom: "0"}}>{closedTag}{props.title} <FontAwesomeIcon icon={faArrowRight} css={{fontSize: "0.75em", paddingBottom: "1px"}}/></h3>
-    <p css={{marginTop: "5px"}}>{props.description}</p>
-  </div>
+  return <Link to="/form" css={listingStyle}>
+    <div>
+      <h3 css={{fontSize: "1.5em", marginBottom: "0"}}>{closedTag}{props.title} <FontAwesomeIcon icon={faArrowRight} css={{fontSize: "0.75em", paddingBottom: "1px"}}/></h3>
+      <p css={{marginTop: "5px"}}>{props.description}</p>
+    </div>
+  </Link>
 }
 
 export default FormListing;
diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx
index 94dd900..6289dfc 100644
--- a/src/components/HeaderBar/index.tsx
+++ b/src/components/HeaderBar/index.tsx
@@ -46,11 +46,15 @@ function HeaderBar() {
         font-size: 2em;
       }
 
-      @media (max-width: 400px) {
-        font-size: 1.5em;
+      @media (max-width: 450px) {
+        font-size: 1.70em;
         text-align: center;
         margin-left: 0;
       }
+
+      @media (max-width: 400px) {
+        font-size: 1.3em;
+      }
     `}>
       Python Discord Forms
     </h1>
diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx
new file mode 100644
index 0000000..aa4cec3
--- /dev/null
+++ b/src/pages/FormPage.tsx
@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import { jsx } from "@emotion/core";
+import { Link } from "react-router-dom";
+
+function FormPage() {
+    return <div css={{marginLeft: "20px"}}>
+        <h1>Form page</h1>
+        <Link to="/" css={{color: "white"}}>Go home</Link>
+    </div>
+}
+
+export default FormPage;
diff --git a/src/tests/components/FormListing.test.tsx b/src/tests/components/FormListing.test.tsx
index 26c7c93..cb06201 100644
--- a/src/tests/components/FormListing.test.tsx
+++ b/src/tests/components/FormListing.test.tsx
@@ -2,28 +2,30 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import FormListing from "../../components/FormListing";
 
+import { BrowserRouter as Router } from 'react-router-dom';
+
 test('renders form listing with specified title', () => {
-    const { getByText } = render(<FormListing title="Example form listing" description="My form listing" open={true} />);
+    const { getByText } = render(<Router><FormListing title="Example form listing" description="My form listing" open={true} /></Router>);
     const formListing = getByText(/Example form listing/i);
     expect(formListing).toBeInTheDocument();
 });
 
 test('renders form listing with specified description', () => {
-    const { getByText } = render(<FormListing title="Example form listing" description="My form listing" open={true} />);
+    const { getByText } = render(<Router><FormListing title="Example form listing" description="My form listing" open={true} /></Router>);
     const formListing = getByText(/My form listing/i);
     expect(formListing).toBeInTheDocument();
 });
 
 test('renders form listing with background green colour for open', () => {
-    const { container } = render(<FormListing title="Example form listing" description="My form listing" open={true} />);
-    const elem = container.querySelector("div");
+    const { container } = render(<Router><FormListing title="Example form listing" description="My form listing" open={true} /></Router>);
+    const elem = container.querySelector("a");
     const style = window.getComputedStyle(elem);
     expect(style.backgroundColor).toBe("rgb(67, 181, 129)");
 });
 
 test('renders form listing with background dark colour for closed', () => {
-    const { container } = render(<FormListing title="Example form listing" description="My form listing" open={false} />);
-    const elem = container.querySelector("div");
+    const { container } = render(<Router><FormListing  title="Example form listing" description="My form listing" open={false} /></Router>);
+    const elem = container.querySelector("a");
     const style = window.getComputedStyle(elem);
     expect(style.backgroundColor).toBe("rgb(44, 47, 51)");
 });