From c47296a2b5e4bbc90df808ec751be58822490d51 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Wed, 30 Sep 2020 21:25:05 +0100 Subject: Add dummy form data for fetching form listings --- src/api/forms.ts | 25 +++++++++++++++++++++++++ src/components/FormListing.tsx | 16 ++++++++-------- src/pages/LandingPage.tsx | 9 +++++++-- 3 files changed, 40 insertions(+), 10 deletions(-) create mode 100644 src/api/forms.ts diff --git a/src/api/forms.ts b/src/api/forms.ts new file mode 100644 index 0000000..a0c27ce --- /dev/null +++ b/src/api/forms.ts @@ -0,0 +1,25 @@ +export interface Form { + name: string, + description: string, + open: boolean +} + +export function getForms(): Form[] { + return [ + { + name: "Ban Appeals", + description: "Appealing bans from the Discord server", + open: true + }, + { + name: "Insights 2020", + description: "Insights about the Python Discord community", + open: false + }, + { + name: "Code Jam Sign Ups", + description: "Insights about the Python Discord community", + 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 = }; return
-

{closedTag}{props.title}

-

{props.description}

+

{closedTag}{form.title}

+

{form.description}

} 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
@@ -15,8 +17,11 @@ function LandingPage() { flex-direction: column; `}>

Available Forms

- - + + + {getForms().map(form => ( + + ))}
-- cgit v1.2.3 From 603ceb7fbad2f84a67aea4d7d5ff4e4b74f71238 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Wed, 30 Sep 2020 21:25:35 +0100 Subject: Update description of form listing --- src/api/forms.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/api/forms.ts b/src/api/forms.ts index a0c27ce..1b7b11c 100644 --- a/src/api/forms.ts +++ b/src/api/forms.ts @@ -17,8 +17,8 @@ export function getForms(): Form[] { open: false }, { - name: "Code Jam Sign Ups", - description: "Insights about the Python Discord community", + name: "Code Jam 2099 Sign Ups", + description: "Signing up for Python Discord's millionth code jam!", open: false } ] -- cgit v1.2.3 From 9566564100448a78e6746a5dfcbd761e99ec31f7 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Wed, 30 Sep 2020 21:31:25 +0100 Subject: Update form properties to mirror those in the form listing component --- src/api/forms.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/api/forms.ts b/src/api/forms.ts index 1b7b11c..7c2666a 100644 --- a/src/api/forms.ts +++ b/src/api/forms.ts @@ -1,5 +1,5 @@ export interface Form { - name: string, + title: string, description: string, open: boolean } @@ -7,17 +7,17 @@ export interface Form { export function getForms(): Form[] { return [ { - name: "Ban Appeals", + title: "Ban Appeals", description: "Appealing bans from the Discord server", open: true }, { - name: "Insights 2020", + title: "Insights 2020", description: "Insights about the Python Discord community", open: false }, { - name: "Code Jam 2099 Sign Ups", + title: "Code Jam 2099 Sign Ups", description: "Signing up for Python Discord's millionth code jam!", open: false } -- cgit v1.2.3 From 3bd6f1764732047841e132642e20496bc0add093 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Wed, 30 Sep 2020 21:38:21 +0100 Subject: Update tests with new FormListing props --- src/tests/components/FormListing.test.tsx | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) 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(); + const { getByText } = render(); const formListing = getByText(/Example form listing/i); expect(formListing).toBeInTheDocument(); }); test('renders form listing with specified description', () => { - const { getByText } = render(); + const { getByText } = render(); const formListing = getByText(/My form listing/i); expect(formListing).toBeInTheDocument(); }); test('renders form listing with background green colour for open', () => { - const { container } = render(); + const { container } = render(); 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(); + const { container } = render(); const elem = container.querySelector("a"); const style = window.getComputedStyle(elem); expect(style.backgroundColor).toBe("rgb(44, 47, 51)"); -- cgit v1.2.3