Merge pull request #14 from python-discord/api/add-dummy-forms

Add dummy forms API

4 files changed, 57 insertions, 14 deletions

diff --git a/src/api/forms.ts b/src/api/forms.ts
new file mode 100644
index 0000000..7c2666a
--- /dev/null
+++ b/src/api/forms.ts
@@ -0,0 +1,25 @@
+export interface Form {
+    title: string,
+    description: string,
+    open: boolean
+}
+
+export function getForms(): Form[] {
+    return [
+        {
+            title: "Ban Appeals",
+            description: "Appealing bans from the Discord server",
+            open: true
+        },
+        {
+            title: "Insights 2020",
+            description: "Insights about the Python Discord community",
+            open: false
+        },
+        {
+            title: "Code Jam 2099 Sign Ups",
+            description: "Signing up for Python Discord's millionth code jam!",
+            open: false
+        }
+    ]
+}
diff --git a/src/components/FormListing.tsx b/src/components/FormListing.tsx
index 09b3134..dc761b6 100644
--- a/src/components/FormListing.tsx
+++ b/src/components/FormListing.tsx
@@ -9,15 +9,15 @@ import Tag from "./Tag";
 
 import colors from "../colors";
 
+import { Form } from "../api/forms";
+
 interface FormListingProps {
-  title: string,
-  description: string,
-  open: boolean
+  form: Form
 }
 
-function FormListing(props: FormListingProps) {
+function FormListing({ form }: FormListingProps) {
   const listingStyle = css`
-    background-color: ${props.open ? colors.success : colors.darkButNotBlack};
+    background-color: ${form.open ? colors.success : colors.darkButNotBlack};
     width: 60%;
     padding: 20px;
     margin-top: 20px;
@@ -39,14 +39,14 @@ function FormListing(props: FormListingProps) {
 
   let closedTag;
 
-  if (!props.open) {
+  if (!form.open) {
     closedTag = <Tag text="CLOSED" color={colors.error}/>
   };
 
   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>
+      <h3 css={{fontSize: "1.5em", marginBottom: "0"}}>{closedTag}{form.title} <FontAwesomeIcon icon={faArrowRight} css={{fontSize: "0.75em", paddingBottom: "1px"}}/></h3>
+      <p css={{marginTop: "5px"}}>{form.description}</p>
     </div>
   </Link>
 }
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index 4a6e157..ef588f3 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -4,6 +4,8 @@ import { css, jsx } from "@emotion/core";
 import HeaderBar from "../components/HeaderBar";
 import FormListing from "../components/FormListing";
 
+import { getForms } from "../api/forms";
+
 function LandingPage() {
   return <div>
     <HeaderBar/>
@@ -15,8 +17,11 @@ function LandingPage() {
         flex-direction: column;
       `}>
         <h1>Available Forms</h1>
-        <FormListing title="Ban Appeals" description="Appealing bans from the Discord server" open={true}/>
-        <FormListing title="Insights 2020" description="Insights about the Python Discord community" open={false}/>
+        
+
+        {getForms().map(form => (
+          <FormListing form={form}/>
+        ))}
       </div>
     </div>
   </div>
diff --git a/src/tests/components/FormListing.test.tsx b/src/tests/components/FormListing.test.tsx
index cb06201..4080f4d 100644
--- a/src/tests/components/FormListing.test.tsx
+++ b/src/tests/components/FormListing.test.tsx
@@ -3,28 +3,41 @@ import { render } from '@testing-library/react';
 import FormListing from "../../components/FormListing";
 
 import { BrowserRouter as Router } from 'react-router-dom';
+import { Form } from '../../api/forms';
+
+const openFormListing: Form = {
+    title: "Example form listing",
+    description: "My form listing",
+    open: true
+}
+
+const closedFormListing: Form = {
+    title: "Example form listing",
+    description: "My form listing",
+    open: false
+}
 
 test('renders form listing with specified title', () => {
-    const { getByText } = render(<Router><FormListing title="Example form listing" description="My form listing" open={true} /></Router>);
+    const { getByText } = render(<Router><FormListing form={openFormListing} /></Router>);
     const formListing = getByText(/Example form listing/i);
     expect(formListing).toBeInTheDocument();
 });
 
 test('renders form listing with specified description', () => {
-    const { getByText } = render(<Router><FormListing title="Example form listing" description="My form listing" open={true} /></Router>);
+    const { getByText } = render(<Router><FormListing form={openFormListing} /></Router>);
     const formListing = getByText(/My form listing/i);
     expect(formListing).toBeInTheDocument();
 });
 
 test('renders form listing with background green colour for open', () => {
-    const { container } = render(<Router><FormListing title="Example form listing" description="My form listing" open={true} /></Router>);
+    const { container } = render(<Router><FormListing form={openFormListing} /></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(<Router><FormListing  title="Example form listing" description="My form listing" open={false} /></Router>);
+    const { container } = render(<Router><FormListing form={closedFormListing} /></Router>);
     const elem = container.querySelector("a");
     const style = window.getComputedStyle(elem);
     expect(style.backgroundColor).toBe("rgb(44, 47, 51)");