Merge pull request #71 from mythmon/title

Include owner and repo in more places, to make pages easier to read

Author: mythmon

src/App.css

@@ -145,3 +145,7 @@ th > .column-extra {
   font-weight: normal;
   margin-right: 20px;
 }
+
+h2 .reponame {
+  color: #666;
+}

src/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter as Router, Link } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 import Routes from './Routes';
@@ -10,7 +10,6 @@ export default class App extends React.Component {
     return (
       <Router>
         <div className="App container">
-          <Header />
           <Routes />
           <Footer />
         </div>
@@ -19,16 +18,6 @@ export default class App extends React.Component {
   }
 }
 
-class Header extends React.Component {
-  render() {
-    return (
-      <h2 className="text-center">
-        <Link to="/">What's Deployed?</Link>
-      </h2>
-    );
-  }
-}
-
 class Footer extends React.Component {
   render() {
     let versionData;

src/DeployPage.js

@@ -16,19 +16,16 @@ class DeployPage extends React.Component {
     shortCode: PropTypes.string.isRequired
   };
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      owner: null,
-      repo: null,
-      deployments: null,
-      commits: null,
-      deployInfo: null,
-      error: null,
-      loading: null,
-      tags: null
-    };
-  }
+  state = {
+    owner: null,
+    repo: null,
+    deployments: null,
+    commits: null,
+    deployInfo: null,
+    error: null,
+    loading: null,
+    tags: null
+  };
 
   isLoading() {
     if (this.state.loading === null) {
@@ -53,14 +50,17 @@ class DeployPage extends React.Component {
 
   async decodeShortCode() {
     const {
-      match: {
-        params: { code }
-      }
+      history,
+      match: { params }
     } = this.props;
     this.startLoad('parameters');
     try {
-      let { owner, repo, deployments } = await shortUrls.decode(code);
+      let { owner, repo, deployments } = await shortUrls.decode(params.code);
       this.setState({ owner, repo, deployments });
+      if (params.owner !== owner || params.repo !== repo) {
+        history.replace(`/s/${params.code}/${owner}/${repo}`);
+      }
+
       this.fetchShas();
       this.fetchCommits();
       this.finishLoad('parameters');
@@ -144,46 +144,55 @@ class DeployPage extends React.Component {
 
     document.title = `What's Deployed on ${owner}/${repo}?`;
 
-    if (error) {
-      return <div className="alert alert-danger">{error.toString()}</div>;
-    }
-
-    if (this.isLoading()) {
-      return (
-        <div>
-          <span>Loading {Array.from(loading || '...').join(' and ')}</span>
-          <AutoProgressBar
-            count={loading ? loading.size : 0}
-            total={3}
-            targetTime={5000}
-          />
-        </div>
-      );
-    }
-
-    if (!deployInfo) {
-      return (
-        <div className="alert alert-danger">
-          No Deployment info could be found
-        </div>
-      );
-    }
-
     return (
       <div>
-        <DeployTable
-          deployInfo={deployInfo}
-          commits={commits}
-          tags={tags}
-          shortUrl={`/s/${code}`}
-        />
-        <RepoSummary
-          deployInfo={deployInfo}
-          tags={tags}
-          owner={owner}
-          repo={repo}
-        />
-        <Culprits deployInfo={deployInfo} owner={owner} repo={repo} />
+        <h2 className="text-center">
+          What's Deployed
+          {owner && repo && (
+            <span>
+              {' '}
+              on{' '}
+              <a
+                href={`https://github.com/${owner}/${repo}`}
+                className="reponame"
+              >
+                {owner}/{repo}
+              </a>
+            </span>
+          )}
+          ?
+        </h2>
+        {error && <div className="alert alert-danger">{error.toString()}</div>}
+        {this.isLoading() ? (
+          <>
+            <span>Loading {Array.from(loading || '...').join(' and ')}</span>
+            <AutoProgressBar
+              count={loading ? loading.size : 0}
+              total={3}
+              targetTime={5000}
+            />
+          </>
+        ) : !deployInfo ? (
+          <div className="alert alert-danger">
+            No Deployment info could be found
+          </div>
+        ) : (
+          <>
+            <DeployTable
+              deployInfo={deployInfo}
+              commits={commits}
+              tags={tags}
+              shortUrl={`/s/${code}`}
+            />
+            <RepoSummary
+              deployInfo={deployInfo}
+              tags={tags}
+              owner={owner}
+              repo={repo}
+            />
+            <Culprits deployInfo={deployInfo} owner={owner} repo={repo} />
+          </>
+        )}
       </div>
     );
   }

src/LongUrlRedirect.js

@@ -59,7 +59,7 @@ class LongUrlRedirect extends React.Component {
     const { owner, repo } = this.props;
     const { error } = this.state;
 
-    document.title = `What's deployed on ${owner}/${repo}?`;
+    document.title = `What's Deployed on ${owner}/${repo}?`;
 
     if (error) {
       return <div className="alert alert-danger">{error.toString()}</div>;

src/Routes.js

@@ -18,6 +18,7 @@ const Routes = withRouter(({ location }) => {
   return (
     <Switch>
       <Redirect from="/s-:code(.*)" to="/s/:code" />
+      <Route path="/s/:code/:owner/:repo" component={DeployPage} />
       <Route path="/s/:code" component={DeployPage} />
       <Route path="/" exact component={SetupPage} />
     </Switch>

src/SetupPage.js

@@ -8,6 +8,7 @@ export default class SetupPage extends React.Component {
   render() {
     return (
       <div>
+        <h2 className="text-center">What's Deployed</h2>
         <SetupFormWithRouter />
         <PreviousEnvironments />
         <WhatIsIt />
@@ -76,7 +77,7 @@ class SetupForm extends React.Component {
 
   render() {
     const { owner, repository, rows } = this.state;
-    document.title = "What's deployed?";
+    document.title = "What's Deployed?";
 
     return (
       <form>
@@ -173,7 +174,7 @@ class PreviousEnvironments extends React.Component {
           <ul>
             {environments.map(env => (
               <li key={env.shortlink}>
-                <Link to={`/s/${env.shortlink}`}>
+                <Link to={`/s/${env.shortlink}/${env.owner}/${env.repo}`}>
                   {env.owner}/{env.repo}
                 </Link>
                 <span className="names">