Add an about page (fixes #5)

src/main.tsx

@@ -12,6 +12,7 @@ import LoginForm from "./views/loginForm";
 import SignupForm from "./views/signupForm";
 import MainView from "./views/mainView";
 import EditorView from "./views/editorView";
+import AboutView from "./views/aboutView";
 
 import { setToken, resetToken, localLogout } from "./actions/auth";
 
@@ -56,27 +57,30 @@ class App extends React.Component<Props, Props> {
         }
     };
     componentDidMount = () => {
-        req.head("/session").then((res) => {
-            if (res.status !== HTTPSuccessCode) {
-                this.props.logout();
-            }
-        });
+        if (this.props.token) {
+            req.head("/session").then((res) => {
+                if (res.status !== HTTPSuccessCode) {
+                    this.props.logout();
+                }
+            });
+        }
     };
     render = () => {
-        const token = this.state.token as string;
-        const loggedIn = token.length !== 0;
+        const loggedIn = (this.state.token as string).length !== 0;
         return (
             <Router>
                 {!loggedIn && (
                     <Switch>
                         <Route path="/signup" exact component={SignupForm} />
                         <Route path="/" exact component={LoginForm} />
+                        <Route path="/about" exact component={AboutView} />
                     </Switch>
                 )}
                 {loggedIn && (
                     <Switch>
                         <Route path="/" exact component={MainView} />
                         <Route path="/task/:id" exact component={EditorView} />
+                        <Route path="/about" exact component={AboutView} />
                     </Switch>
                 )}
             </Router>

src/typings/bulma.ts

@@ -31,3 +31,9 @@ export interface BulmaFieldProps {
     /** `<div className="control">` */
     control?: React.ReactNode;
 }
+
+/** List of properties used by the `<section>` component in Bulma. */
+export interface BulmaSectionProps {
+    isMedium?: boolean;
+    isLarge?: boolean;
+}

src/views/aboutView.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { RouteComponentProps } from "react-router-dom";
+
+import Container from "./components/bulma/container";
+import Level from "./components/bulma/level";
+import Button from "./components/bulma/button";
+
+import { getServerVersion } from "../actions/misc";
+import strings from "./assets/locales";
+import { appHomePage, amberHomePage } from "../const";
+
+interface State {
+    serverVersion: string;
+}
+
+class AboutView extends React.Component<RouteComponentProps, State> {
+    state = {
+        serverVersion: "unknown",
+    };
+    componentDidMount = async () => {
+        let versionData = await getServerVersion();
+        this.setState({ serverVersion: versionData.version });
+    };
+    render = () => (
+        <Container>
+            <Level level className="navbar">
+                <Level levelItem levelLeft>
+                    <Button
+                        value={strings.btns_goBack}
+                        onClick={this.props.history.goBack}
+                    />
+                </Level>
+            </Level>
+            <Container>
+                <p>
+                    {`${strings.app_fullVersionString(
+                        this.state.serverVersion
+                    )}. ${strings.about_licenseInfo}`}
+                </p>
+                <p>
+                    {strings.about_linksParagraph}
+                    <ul>
+                        <li>
+                            <a href={appHomePage}>
+                                {strings.about_amberWebHomePage}
+                            </a>
+                        </li>
+                        <li>
+                            <a href={amberHomePage}>
+                                {strings.about_amberHomePage}
+                            </a>
+                        </li>
+                    </ul>
+                </p>
+            </Container>
+        </Container>
+    );
+}
+
+export default AboutView;

src/views/assets/locales.ts

@@ -1,3 +1,5 @@
+/* eslint-disable max-len */
+
 import LocalizedStrings from "react-localization";
 
 import { appVersion, appFullName, appAuthor, amberFullName } from "../../const";
@@ -35,6 +37,11 @@ export default new LocalizedStrings({
         task_toggleBtnCompleted: "Completed",
         task_toggleBtnPending: "Pending",
         app_versionString: `${appFullName} v${appVersion} by ${appAuthor}`,
-        amber_versionString: `${amberFullName} v`,
+        app_fullVersionString: (version: string) =>
+            `${appFullName} v${appVersion} by ${appAuthor}, running on top of ${amberFullName} v${version}`,
+        about_licenseInfo: "This app is free software, licensed MIT.",
+        about_amberWebHomePage: "Get Amber Web source code.",
+        about_amberHomePage: "Get Amber source code.",
+        about_linksParagraph: "Links:",
     },
 });

src/views/components/footer.tsx

@@ -1,28 +1,18 @@
-import React, { useState } from "react";
+import React from "react";
 
 import Level from "./bulma/level";
+import Link from "./link";
 
-import { getServerVersion } from "../../actions/misc";
-import { appHomePage, amberHomePage } from "../../const";
 import strings from "../assets/locales";
 
-export const Footer: React.FC = () => {
-    const [version, setVersion] = useState("unknown");
-    getServerVersion().then((r) => setVersion(r.version));
-    return (
-        <footer>
-            <Level level>
-                <Level levelItem className="footer_links">
-                    <a className="text link" href={appHomePage}>
-                        {`${strings.app_versionString}`}
-                    </a>
-                    <a className="text link" href={amberHomePage}>
-                        {`${strings.amber_versionString}${version}`}
-                    </a>
-                </Level>
+export const Footer: React.FC = () => (
+    <footer>
+        <Level level>
+            <Level levelItem className="footer_links">
+                <Link to="/about">{strings.app_versionString}</Link>
             </Level>
-        </footer>
-    );
-};
+        </Level>
+    </footer>
+);
 
 export default React.memo(Footer);