From 01596480117e137aba8fb6f28adb7aafad2abd1c Mon Sep 17 00:00:00 2001
From: Rodrigo Pombo <pombopombopombo@gmail.com>
Date: Thu, 7 Feb 2019 15:59:18 -0300
Subject: [PATCH] Refactor <App />

---
 public/index.html |  10 +--
 src/app.js        | 153 ++++++++++++++++++++++++++++++++++++++++++++--
 src/index.js      |  62 ++-----------------
 3 files changed, 152 insertions(+), 73 deletions(-)
diff --git a/public/index.html b/public/index.html
index 5291fba..c6114af 100755
--- a/public/index.html
+++ b/public/index.html
@@ -45,14 +45,6 @@
         height: 100%;
       }
 
-      #message {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-      }
-
       footer {
         position: fixed;
         right: 10px;
@@ -67,7 +59,7 @@
     </style>
   </head>
   <body>
-    <div id="root"><div id="message"></div></div>
+    <div id="root"></div>
     <footer>
       <a href="https://github.com/pomber/github-history">GitHub History</a
       ><br />by <a href="https://twitter.com/pomber">@pomber</a>
diff --git a/src/app.js b/src/app.js
index a8410dc..ea98f4b 100755
--- a/src/app.js
+++ b/src/app.js
@@ -1,11 +1,152 @@
-import React from "react";
-import ReactDOM from "react-dom";
+import React, { useState, useEffect } from "react";
 import History from "./history";
+import { getHistory, auth, isLoggedIn } from "./github";
 
-function App({ commits, language }) {
-  return <History commits={commits} language={language} />;
+export default function AppWrapper(props) {
+  if (props.repo) {
+    return <App {...props} />;
+  } else {
+    return (
+      <Center>
+        <Landing />
+      </Center>
+    );
+  }
 }
 
-export function render(commits, root, lang) {
-  ReactDOM.render(<App commits={commits} language={lang} />, root);
+function Center({ children }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%"
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Landing() {
+  return (
+    <p>
+      URL should be something like
+      https://github-history.netlify.com/user/repo/commits/master/path/to/file.js
+    </p>
+  );
+}
+
+function App({ repo, sha, path, lang }) {
+  const fileName = path.split("/").pop();
+  useDocumentTitle(`GitHub History - ${fileName}`);
+
+  const { commits, loading, error } = useCommitsFetcher({
+    repo,
+    sha,
+    path,
+    lang
+  });
+
+  if (error) {
+    return <Error error={error} />;
+  }
+
+  if (loading) {
+    return <Loading repo={repo} sha={sha} path={path} />;
+  }
+
+  if (!commits.length) {
+    return <Error error={{ status: 404 }} />;
+  }
+
+  return <History commits={commits} language={lang} />;
+}
+
+function Error({ error }) {
+  if (error.status === 403) {
+    return (
+      <Center>
+        <p>
+          GitHub API rate limit exceeded for your IP (60 requests per hour).
+        </p>
+        <p>Log in with GitHub for more:</p>
+        <button onClick={login}>Log In</button>
+      </Center>
+    );
+  }
+
+  if (error.status === 404) {
+    return (
+      <Center>
+        <p>File not found.</p>
+        {!isLoggedIn() && (
+          <React.Fragment>
+            <p>Is it from a private repo? Log in with GitHub:</p>
+            <button onClick={login}>Log In</button>
+          </React.Fragment>
+        )}
+      </Center>
+    );
+  }
+
+  console.error(error);
+  return (
+    <Center>
+      <p>Unexpected error. Check the console.</p>
+    </Center>
+  );
+}
+
+function Loading({ repo, sha, path }) {
+  return (
+    <Center>
+      <p>
+        Loading <strong>{repo}</strong> <strong>{path} history...</strong>
+      </p>
+    </Center>
+  );
+}
+
+function login() {
+  auth()
+    .then(data => {
+      window.location.reload(false);
+    })
+    .catch(console.error);
+}
+
+function useCommitsFetcher({ repo, sha, path, lang }) {
+  const [state, setState] = useState({
+    commits: null,
+    loading: true,
+    error: null
+  });
+
+  useEffect(() => {
+    getHistory(repo, sha, path, lang)
+      .then(commits => {
+        setState({
+          commits,
+          loading: false,
+          error: false
+        });
+      })
+      .catch(error => {
+        setState({
+          loading: false,
+          error
+        });
+      });
+  }, [repo, sha, path, lang]);
+
+  return state;
+}
+
+function useDocumentTitle(title) {
+  useEffect(() => {
+    document.title = title;
+  }, [title]);
 }
diff --git a/src/index.js b/src/index.js
index f657ceb..9f1afac 100755
--- a/src/index.js
+++ b/src/index.js
@@ -1,67 +1,13 @@
-import { getHistory, auth, isLoggedIn } from "./github";
 import { getLanguage } from "./language-detector";
+import App from "./app";
+import React from "react";
+import ReactDOM from "react-dom";
 
 const [repo, sha, path] = getParams();
 const lang = getLanguage(path);
 const root = document.getElementById("root");
-const message = document.getElementById("message");
 
-if (!repo) {
-  // show docs
-  message.innerHTML = `<p>URL should be something like https://github-history.netlify.com/user/repo/commits/master/path/to/file.js</p>`;
-} else {
-  // show loading
-  message.innerHTML = `<p>Loading <strong>${repo}</strong> <strong>${path}</strong> history...</p>`;
-  document.title = `GitHub History - ${path.split("/").pop()}`;
-
-  Promise.all([getHistory(repo, sha, path, lang), import("./app")])
-    .then(([commits, app]) => {
-      if (!commits.length) {
-        throw new Error("No commits for this file? Maybe the path is wrong");
-      }
-      console.log(commits);
-      app.render(commits, root, lang);
-    })
-    .catch(handleError);
-}
-
-function handleError(error) {
-  const message = document.getElementById("message");
-  if (error.status === 403) {
-    message.innerHTML =
-      "<p>GitHub API rate limit exceeded for your IP (60 requests per hour).</p><p>Log in with GitHub for more</p>";
-    const button = document.createElement("button");
-    button.textContent = "Login";
-    button.onclick = () => {
-      auth()
-        .then(data => {
-          window.location.reload(false);
-        })
-        .catch(console.error);
-    };
-    message.appendChild(button);
-  } else if (error.status === 404) {
-    message.innerHTML = `<p>File not found</p>${
-      isLoggedIn() ? "" : "<p>Is it from a private repo? Log in with GitHub"
-    }`;
-
-    if (!isLoggedIn) {
-      const button = document.createElement("button");
-      button.textContent = "Login";
-      button.onclick = () => {
-        auth()
-          .then(data => {
-            window.location.reload(false);
-          })
-          .catch(console.error);
-      };
-      message.appendChild(button);
-    }
-  } else {
-    console.error(error);
-    message.innerHTML = `<p>Unexpected error. Check the console.</p>`;
-  }
-}
+ReactDOM.render(<App repo={repo} sha={sha} path={path} lang={lang} />, root);
 
 function getParams() {
   const [
