From f5a5a9dba1bcb81e46f55e87b41df5878b6de21c Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 5 Oct 2020 13:04:32 +0100 Subject: Move global styles to their own file --- src/globalStyles.ts | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 src/globalStyles.ts (limited to 'src') diff --git a/src/globalStyles.ts b/src/globalStyles.ts new file mode 100644 index 0000000..431ee36 --- /dev/null +++ b/src/globalStyles.ts @@ -0,0 +1,40 @@ +import { css } from "@emotion/core"; + +import colors from "./colors"; + +export default css` +@import url('https://fonts.googleapis.com/css2?family=Hind:wght@700&display=swap'); + +@font-face { + font-family: 'Uni Sans'; + src: url(/fonts/unisans.otf) format('opentype'); +} + +body { + background-color: ${colors.notQuiteBlack}; + color: white; + font-family: "Hind", "Helvetica", "Arial", sans-serif; + margin: 0; +} + +.fade-enter, +.fade-exit { + position: absolute; + top: 0; + left: 0; + transition: 300ms ease-in-out opacity, 300ms ease-in-out transform; + width: 100%; +} + +.fade-enter, +.fade-exit-active { + opacity: 0; + transform: scale(0.98); +} + +.fade-enter-active { + opacity: 1; + z-index: 1; + transform: scale(1); +} +`; -- cgit v1.2.3 From ddc4ce8501df57e03515fc843987281fc85f4c23 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 5 Oct 2020 13:04:39 +0100 Subject: Update the form path --- src/App.tsx | 42 +++--------------------------------------- 1 file changed, 3 insertions(+), 39 deletions(-) (limited to 'src') diff --git a/src/App.tsx b/src/App.tsx index 05d8ded..9dd8b49 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,6 @@ /** @jsx jsx */ /** @global location */ -import { css, jsx, Global } from "@emotion/core"; +import { jsx, Global } from "@emotion/core"; import { BrowserRouter as Router, @@ -11,49 +11,13 @@ import { 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'); - -@font-face { - font-family: 'Uni Sans'; - src: url(fonts/unisans.otf) format('opentype'); -} - -body { - background-color: ${colors.notQuiteBlack}; - color: white; - font-family: "Hind", "Helvetica", "Arial", sans-serif; - margin: 0; -} - -.fade-enter, -.fade-exit { - position: absolute; - top: 0; - left: 0; - transition: 300ms ease-in-out opacity, 300ms ease-in-out transform; - width: 100%; -} - -.fade-enter, -.fade-exit-active { - opacity: 0; - transform: scale(0.98); -} - -.fade-enter-active { - opacity: 1; - z-index: 1; - transform: scale(1); -} -`; +import globalStyles from "./globalStyles"; const routes = [ { path: "/", Component: LandingPage }, - { path: "/form", Component: FormPage} + { path: "/form/:id", Component: FormPage} ] function App() { -- cgit v1.2.3 From 8b28e0ea36ee7613254817d89a2ed33050137ad0 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 5 Oct 2020 13:04:46 +0100 Subject: Update the forms API wrapper to fetch a specific form --- src/api/forms.ts | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/api/forms.ts b/src/api/forms.ts index 7c2666a..a4a4981 100644 --- a/src/api/forms.ts +++ b/src/api/forms.ts @@ -1,25 +1,53 @@ -export interface Form { +import { Question, QuestionType } from "./question" + +export interface AllFormsForm { title: string, + id: string, description: string, open: boolean } -export function getForms(): Form[] { +export interface Form extends AllFormsForm { + questions: Array +} + +export function getForms(): AllFormsForm[] { return [ { title: "Ban Appeals", + id: "ban-appeals", description: "Appealing bans from the Discord server", open: true }, { title: "Insights 2020", + id: "insights-2020", description: "Insights about the Python Discord community", open: false }, { title: "Code Jam 2099 Sign Ups", + id: "code-jam-2099-sign-up", description: "Signing up for Python Discord's millionth code jam!", open: false } ] } + +export function getForm(id: string): Promise
{ + const data: Form = { + title: "Ban Appeals", + id: "ban-appeals", + description: "Appealing bans from the Discord server", + open: true, + questions: [ + { + name: "How Spanish are you?", + type: QuestionType.Text + } + ] + } + return new Promise((resolve) => { + setTimeout(() => resolve(data), 1500) + }) +} -- cgit v1.2.3 From 1c686c78ee92dd6ad3701511c6e63984b49124e8 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 5 Oct 2020 13:04:53 +0100 Subject: Add a very basic question type --- src/api/question.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/api/question.ts (limited to 'src') diff --git a/src/api/question.ts b/src/api/question.ts new file mode 100644 index 0000000..e051459 --- /dev/null +++ b/src/api/question.ts @@ -0,0 +1,11 @@ +export enum QuestionType { + Text, + Checkbox, + Radio, + Code +} + +export interface Question { + name: string, + type: QuestionType +} -- cgit v1.2.3 From 986660501dd9e4c0351ef4f08a9d6832eb01a44b Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 5 Oct 2020 13:05:06 +0100 Subject: Link to the form page instead of generic form URL --- src/components/FormListing.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/components/FormListing.tsx b/src/components/FormListing.tsx index dc761b6..2493608 100644 --- a/src/components/FormListing.tsx +++ b/src/components/FormListing.tsx @@ -9,10 +9,10 @@ import Tag from "./Tag"; import colors from "../colors"; -import { Form } from "../api/forms"; +import { AllFormsForm } from "../api/forms"; interface FormListingProps { - form: Form + form: AllFormsForm } function FormListing({ form }: FormListingProps) { @@ -43,7 +43,7 @@ function FormListing({ form }: FormListingProps) { closedTag = }; - return + return

{closedTag}{form.title}

{form.description}

-- cgit v1.2.3 From 19c5d0637581e42ead5e326a4fd41bcc8067d5b5 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 5 Oct 2020 13:05:18 +0100 Subject: Update headerbar to be more responsive and take custom text --- src/components/HeaderBar/index.tsx | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) (limited to 'src') diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx index 6289dfc..c3d46fc 100644 --- a/src/components/HeaderBar/index.tsx +++ b/src/components/HeaderBar/index.tsx @@ -5,6 +5,10 @@ import SVG from "react-inlinesvg"; import header1 from "./header_1.svg"; import header2 from "./header_2.svg"; +interface HeaderBarProps { + title?: string +} + const headerImageStyles = css` z-index: -1; top: 0; @@ -13,22 +17,22 @@ width: 100%; transition: height 1s; @media (max-width: 770px) { - height: 180px; -} - -@media (max-width: 580px) { height: 140px; } `; -function HeaderBar() { +function HeaderBar({ title }: HeaderBarProps) { + if (!title) { + title = "Python Discord Forms"; + }; + return

- Python Discord Forms + {title}

} -- cgit v1.2.3 From cadc534fccbeaeed8dd4b00480b16555ac0ab207 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 5 Oct 2020 13:05:35 +0100 Subject: Major rewrite of forms page to render specific form --- src/pages/FormPage.tsx | 43 ++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 40 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/pages/FormPage.tsx b/src/pages/FormPage.tsx index aa4cec3..45c093a 100644 --- a/src/pages/FormPage.tsx +++ b/src/pages/FormPage.tsx @@ -2,10 +2,47 @@ import { jsx } from "@emotion/core"; import { Link } from "react-router-dom"; +import { DotLoader } from "react-spinners"; + +import { useParams } from "react-router"; +import HeaderBar from "../components/HeaderBar"; +import { useEffect, useState } from "react"; +import { Form, getForm } from "../api/forms"; + +interface PathParams { + id: string +} + +function Loading() { + return
+ +
+ +
+
+} + function FormPage() { - return
-

Form page

- Go home + const { id } = useParams(); + + const [form, setForm] = useState(); + + useEffect(() => { + getForm(id).then(form => { + setForm(form); + }) + }) + + if (!form) { + return + } + + return
+ +
+

{form.description}

+ Return home +
} -- cgit v1.2.3 From bff0f036cb3e27d76d4f1a775c080795d30dac08 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 5 Oct 2020 13:05:42 +0100 Subject: Update form listing tests with new types --- src/tests/components/FormListing.test.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/tests/components/FormListing.test.tsx b/src/tests/components/FormListing.test.tsx index 4080f4d..82d1380 100644 --- a/src/tests/components/FormListing.test.tsx +++ b/src/tests/components/FormListing.test.tsx @@ -3,16 +3,18 @@ import { render } from '@testing-library/react'; import FormListing from "../../components/FormListing"; import { BrowserRouter as Router } from 'react-router-dom'; -import { Form } from '../../api/forms'; +import { AllFormsForm } from '../../api/forms'; -const openFormListing: Form = { +const openFormListing: AllFormsForm = { title: "Example form listing", + id: "example-form-listing", description: "My form listing", open: true } -const closedFormListing: Form = { +const closedFormListing: AllFormsForm = { title: "Example form listing", + id: "example-form-listing", description: "My form listing", open: false } -- cgit v1.2.3 From 0bdec405e8adc8be2120c3f88311503503f6e2e9 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 5 Oct 2020 13:07:11 +0100 Subject: Update header test to include custom titles --- src/tests/components/HeaderBar.test.tsx | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'src') diff --git a/src/tests/components/HeaderBar.test.tsx b/src/tests/components/HeaderBar.test.tsx index 3567d7e..2e1f868 100644 --- a/src/tests/components/HeaderBar.test.tsx +++ b/src/tests/components/HeaderBar.test.tsx @@ -7,3 +7,10 @@ test('renders header bar with title', () => { const formListing = getByText(/Python Discord Forms/i); expect(formListing).toBeInTheDocument(); }); + +test('renders header bar with custom title', () => { + const { getByText } = render(); + const formListing = getByText(/Testing title/i); + expect(formListing).toBeInTheDocument(); +}); + -- cgit v1.2.3