From cdb76d15a6688c34bdd08a2bbc520db46b63be5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dandelion=20Man=C3=A9?= <decentralion@dandelion.io>
Date: Wed, 15 Aug 2018 17:34:54 -0700
Subject: [PATCH] Display version string in the app's footer (#677)

Some CSS magic was required.
Also creates `src/app/version.js` for storing the version string.

Test plan: Visual inspection of the footer in both Chrome and Firefox,
both on a page with very little content (the cred explorer without a
repository loaded), and on a page with more than a screen height's of
content (the homepage, or cred explorer with a large repository loaded).
In all cases, the footer unobtrusively appears in the lower-left hand
corner at the bottom of the screen, (after scrolling past all content,
if applicable).
---
 CHANGELOG.md       |   1 +
 src/app/Page.js    | 124 ++++++++++++++++++++++++++++-----------------
 src/app/version.js |  19 +++++++
 3 files changed, 97 insertions(+), 47 deletions(-)
 create mode 100644 src/app/version.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0205f30..53d9688 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,4 +4,5 @@
 - Start tracking changes in `CHANGELOG.md`
 - Aggregate over connection types in the cred explorer (#502)
 - Support hosting SourceCred instances at arbitrary gateways, not just the root of a domain (#643)
+- Display version string in the app's footer
 
diff --git a/src/app/Page.js b/src/app/Page.js
index 24c2602..eed2f35 100644
--- a/src/app/Page.js
+++ b/src/app/Page.js
@@ -9,6 +9,7 @@ import GithubLogo from "./GithubLogo";
 import TwitterLogo from "./TwitterLogo";
 import {routeData} from "./routeData";
 import * as NullUtil from "../util/null";
+import {VERSION} from "./version";
 
 export default class Page extends React.Component<{|
   +assets: Assets,
@@ -16,59 +17,88 @@ export default class Page extends React.Component<{|
 |}> {
   render() {
     return (
-      <div>
-        <header>
-          <nav className={css(style.nav)}>
-            <ul className={css(style.navList)}>
-              <li className={css(style.navItem, style.navItemLeft)}>
-                <Link to="/" className={css(style.navLink, style.navLinkTitle)}>
-                  SourceCred
-                </Link>
-              </li>
-              {routeData.map(({navTitle, path}) =>
-                NullUtil.map(navTitle, (navTitle) => (
-                  <li
-                    key={path}
-                    className={css(style.navItem, style.navItemRight)}
+      <React.Fragment>
+        <div className={css(style.nonFooter)}>
+          <header>
+            <nav className={css(style.nav)}>
+              <ul className={css(style.navList)}>
+                <li className={css(style.navItem, style.navItemLeft)}>
+                  <Link
+                    to="/"
+                    className={css(style.navLink, style.navLinkTitle)}
                   >
-                    <Link to={path} className={css(style.navLink)}>
-                      {navTitle}
-                    </Link>
-                  </li>
-                ))
-              )}
-              <li className={css(style.navItem, style.navItemRight)}>
-                <a
-                  className={css(style.navLink)}
-                  href="https://github.com/sourcecred/sourcecred"
-                >
-                  <GithubLogo
-                    altText="SourceCred Github"
-                    className={css(style.navLogo)}
-                  />
-                </a>
-              </li>
-              <li className={css(style.navItem, style.navItemRight)}>
-                <a
-                  className={css(style.navLink)}
-                  href="https://twitter.com/sourcecred"
-                >
-                  <TwitterLogo
-                    altText="SourceCred Twitter"
-                    className={css(style.navLogo)}
-                  />
-                </a>
-              </li>
-            </ul>
-          </nav>
-        </header>
-        <main>{this.props.children}</main>
-      </div>
+                    SourceCred
+                  </Link>
+                </li>
+                {routeData.map(({navTitle, path}) =>
+                  NullUtil.map(navTitle, (navTitle) => (
+                    <li
+                      key={path}
+                      className={css(style.navItem, style.navItemRight)}
+                    >
+                      <Link to={path} className={css(style.navLink)}>
+                        {navTitle}
+                      </Link>
+                    </li>
+                  ))
+                )}
+                <li className={css(style.navItem, style.navItemRight)}>
+                  <a
+                    className={css(style.navLink)}
+                    href="https://github.com/sourcecred/sourcecred"
+                  >
+                    <GithubLogo
+                      altText="SourceCred Github"
+                      className={css(style.navLogo)}
+                    />
+                  </a>
+                </li>
+                <li className={css(style.navItem, style.navItemRight)}>
+                  <a
+                    className={css(style.navLink)}
+                    href="https://twitter.com/sourcecred"
+                  >
+                    <TwitterLogo
+                      altText="SourceCred Twitter"
+                      className={css(style.navLogo)}
+                    />
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </header>
+          <main>{this.props.children}</main>
+        </div>
+        <footer className={css(style.footer)}>
+          <div className={css(style.footerWrapper)}>
+            <span className={css(style.footerText)}>{VERSION}</span>
+          </div>
+        </footer>
+      </React.Fragment>
     );
   }
 }
 
+const footerHeight = 30;
 const style = StyleSheet.create({
+  footer: {
+    color: "#666",
+    height: footerHeight,
+    fontSize: 14,
+    position: "relative",
+  },
+  footerWrapper: {
+    textAlign: "right",
+    position: "absolute",
+    bottom: 5,
+    width: "100%",
+  },
+  footerText: {
+    marginRight: 5,
+  },
+  nonFooter: {
+    minHeight: `calc(100vh - ${footerHeight}px)`,
+  },
   nav: {
     height: 60,
     padding: "20px 100px",
diff --git a/src/app/version.js b/src/app/version.js
new file mode 100644
index 0000000..37fcc07
--- /dev/null
+++ b/src/app/version.js
@@ -0,0 +1,19 @@
+// @flow
+
+export type VersionInfo = {|
+  +major: number,
+  +minor: number,
+  +patch: number,
+|};
+
+export const VERSION_INFO = Object.freeze({
+  major: 0,
+  minor: 0,
+  patch: 0,
+});
+
+export function format(info: VersionInfo): string {
+  return `v${info.major}.${info.minor}.${info.patch}`;
+}
+
+export const VERSION = format(VERSION_INFO);