From 191581e287f78ba325fdd7681c83586309b59df2 Mon Sep 17 00:00:00 2001 From: Hassan Abouelela Date: Tue, 19 Jul 2022 13:58:34 +0200 Subject: Simplify Navigation Component Extract the styles from the navigation component to common styles, and convert it to a function component. Signed-off-by: Hassan Abouelela --- src/commonStyles.tsx | 61 ++++++++++++++-- src/components/OAuth2Button.tsx | 6 +- src/pages/FormPage/ErrorPage.tsx | 29 ++++---- src/pages/FormPage/Navigation.tsx | 111 ++++++----------------------- src/pages/FormPage/SuccessPage.tsx | 10 ++- src/tests/components/OAuth2Button.test.tsx | 4 +- 6 files changed, 101 insertions(+), 120 deletions(-) (limited to 'src') diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx index bfae17e..b4989da 100644 --- a/src/commonStyles.tsx +++ b/src/commonStyles.tsx @@ -51,8 +51,7 @@ const textInputs = css` border-radius: 8px; `; -const submitStyles = css` - text-align: right; +const actionButtonStyles = css` white-space: nowrap; button:disabled { @@ -61,6 +60,7 @@ const submitStyles = css` } button { + width: 100%; cursor: pointer; border: none; @@ -91,12 +91,65 @@ const invalidStyles = css` } `; +const mainTextStyles = css` + margin: auto; + width: 50%; + + text-align: center; + font-size: 1.5rem; + + > div { + margin: 2rem auto; + } + + @media (max-width: 800px) { + width: 80%; + } +`; + +const navigationStyles = css` + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + + column-gap: 20px; + row-gap: 20px; + + > * { + // Make all elements the same size + flex: 0 1 16rem; + } +`; + +const returnButtonStyles = css` + font-size: 1.5rem; + text-align: center; + + color: white; + text-decoration: none; + background-color: ${colors.greyple}; + + padding: 0.5rem 0; + border-radius: 8px; + + transition: background-color 300ms; + + :hover { + background-color: ${colors.darkerGreyple}; + } +`; + export { selectable, unselectable, hiddenInput, multiSelectInput, textInputs, - submitStyles, - invalidStyles + actionButtonStyles, + invalidStyles, + mainTextStyles, + returnButtonStyles, + navigationStyles, }; diff --git a/src/components/OAuth2Button.tsx b/src/components/OAuth2Button.tsx index 885c080..be8d160 100644 --- a/src/components/OAuth2Button.tsx +++ b/src/components/OAuth2Button.tsx @@ -11,7 +11,7 @@ import { selectable } from "../commonStyles"; interface OAuth2ButtonProps { scopes?: OAuthScopes[], - rerender: () => void + rerender?: () => void } const iconStyles = css` @@ -59,7 +59,7 @@ async function login(props: OAuth2ButtonProps, errorDialog: React.RefObject
; diff --git a/src/pages/FormPage/ErrorPage.tsx b/src/pages/FormPage/ErrorPage.tsx index da336cf..351170b 100644 --- a/src/pages/FormPage/ErrorPage.tsx +++ b/src/pages/FormPage/ErrorPage.tsx @@ -7,9 +7,7 @@ import HeaderBar from "../../components/HeaderBar"; import {Form} from "../../api/forms"; import {clearAuth} from "../../api/auth"; -import {selectable, submitStyles, unselectable} from "../../commonStyles"; - -import Navigation from "./Navigation"; +import * as styles from "../../commonStyles"; interface ErrorProps { @@ -28,19 +26,18 @@ export default function ErrorPage(props: ErrorProps): JSX.Element { return (
-
-

{props.message}

-
- Return Home -
-
-
- +
+

{props.message}

+
+ Return Home +
+ +
diff --git a/src/pages/FormPage/Navigation.tsx b/src/pages/FormPage/Navigation.tsx index 52cd47e..20c7dce 100644 --- a/src/pages/FormPage/Navigation.tsx +++ b/src/pages/FormPage/Navigation.tsx @@ -1,12 +1,9 @@ /** @jsx jsx */ -import {jsx, css} from "@emotion/react"; - -import React from "react"; +import {jsx} from "@emotion/react"; +import React, {useState} from "react"; import {Link} from "react-router-dom"; -import colors from "../../colors"; -import {submitStyles, unselectable} from "../../commonStyles"; - +import * as styles from "../../commonStyles"; import {checkScopes, OAuthScopes} from "../../api/auth"; import OAuth2Button from "../../components/OAuth2Button"; @@ -16,92 +13,28 @@ interface NavigationProps { scopes: OAuthScopes[] } -export default class Navigation extends React.Component { - static containerStyles = css` - margin: auto; - width: 50%; - - text-align: center; - font-size: 1.5rem; - - > div { - display: inline-block; - margin: 2rem auto; - width: 50%; - } - - @media (max-width: 870px) { - width: 100%; - - > div { - display: flex; - justify-content: center; - - margin: 0 auto; +export default function Navigation(props: NavigationProps): JSX.Element { + const [authorized, setAuth] = useState(!( + props.scopes.includes(OAuthScopes.Identify) && !checkScopes(props.scopes) + )); + + let submit = null; + if (props.form_state) { + let innerElement; + if (!authorized) { + innerElement = setAuth(true)} scopes={props.scopes}/>; + } else { + innerElement = ; } - } - - .return_button { - text-align: left; - } - - .return_button.closed { - text-align: center; - } - `; - - static separatorStyles = css` - height: 0; - display: none; - - @media (max-width: 870px) { - display: block; - } - `; - - static returnStyles = css` - padding: 0.5rem 2.2rem; - border-radius: 8px; - - color: white; - text-decoration: none; - white-space: nowrap; - - background-color: ${colors.greyple}; - transition: background-color 300ms; - - :hover { - background-color: ${colors.darkerGreyple}; - } - `; - - constructor(props: NavigationProps) { - super(props); - this.state = {"logged_in": false}; + submit =
{innerElement}
; } - render(): JSX.Element { - let submit = null; - - if (this.props.form_state) { - let inner_submit; - if (this.props.scopes.includes(OAuthScopes.Identify) && !checkScopes(this.props.scopes)) { - // Render OAuth button if login is required, and the scopes needed are not available - inner_submit = this.setState({"logged_in": true})}/>; - } else { - inner_submit = ; - } - submit =
{ inner_submit }
; - } - - return ( -
-
- Return Home -
-
+ return ( +
+
+ Return Home { submit }
- ); - } +
+ ); } diff --git a/src/pages/FormPage/SuccessPage.tsx b/src/pages/FormPage/SuccessPage.tsx index e35bd4d..e83ca0d 100644 --- a/src/pages/FormPage/SuccessPage.tsx +++ b/src/pages/FormPage/SuccessPage.tsx @@ -4,9 +4,7 @@ import {Link} from "react-router-dom"; import {Form} from "../../api/forms"; import HeaderBar from "../../components/HeaderBar"; -import {unselectable} from "../../commonStyles"; - -import Navigation from "./Navigation"; +import {returnButtonStyles, navigationStyles, unselectable, mainTextStyles} from "../../commonStyles"; interface SuccessProps { @@ -34,10 +32,10 @@ export default function Success(props: SuccessProps): JSX.Element { return (
-
+

{submitted_text}

-
- Return Home +
+ Return Home
diff --git a/src/tests/components/OAuth2Button.test.tsx b/src/tests/components/OAuth2Button.test.tsx index a773686..2a67f98 100644 --- a/src/tests/components/OAuth2Button.test.tsx +++ b/src/tests/components/OAuth2Button.test.tsx @@ -3,8 +3,8 @@ import { render } from "@testing-library/react"; import OAuth2Button from "../../components/OAuth2Button"; test("renders oauth2 sign in button text", () => { - const { getByText } = render(); - const button = getByText(/Discord Login/i); + const { getByText } = render(); + const button = getByText(/Login To Submit/i); expect(button).toBeInTheDocument(); }); -- cgit v1.2.3