From 191581e287f78ba325fdd7681c83586309b59df2 Mon Sep 17 00:00:00 2001
From: Hassan Abouelela <hassan@hassanamr.com>
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 <hassan@hassanamr.com>
---
 src/pages/FormPage/Navigation.tsx | 111 ++++++++------------------------------
 1 file changed, 22 insertions(+), 89 deletions(-)

(limited to 'src/pages/FormPage/Navigation.tsx')

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<NavigationProps> {
-    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<boolean>(!(
+        props.scopes.includes(OAuthScopes.Identify) && !checkScopes(props.scopes)
+    ));
+
+    let submit = null;
+    if (props.form_state) {
+        let innerElement;
+        if (!authorized) {
+            innerElement = <OAuth2Button rerender={() => setAuth(true)} scopes={props.scopes}/>;
+        } else {
+            innerElement = <button form="form" type="submit">Submit</button>;
         }
-      }
-
-      .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 = <div css={styles.actionButtonStyles}>{innerElement}</div>;
     }
 
-    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 = <OAuth2Button scopes={this.props.scopes} rerender={() => this.setState({"logged_in": true})}/>;
-            } else {
-                inner_submit = <button form="form" type="submit">Submit</button>;
-            }
-            submit = <div css={submitStyles}>{ inner_submit }</div>;
-        }
-
-        return (
-            <div css={[unselectable, Navigation.containerStyles]}>
-                <div className={ "return_button" + (this.props.form_state ? "" : " closed") }>
-                    <Link to="/" css={Navigation.returnStyles}>Return Home</Link>
-                </div>
-                <br css={Navigation.separatorStyles}/>
+    return (
+        <div css={[styles.unselectable, styles.mainTextStyles]}>
+            <div css={styles.navigationStyles}>
+                <Link to="/" css={styles.returnButtonStyles}>Return Home</Link>
                 { submit }
             </div>
-        );
-    }
+        </div>
+    );
 }
-- 
cgit v1.2.3