Show history

cli/server.js

@@ -19,10 +19,8 @@ const portPromise = getPort({ port: 3000 });
 
 module.exports = async function runServer(path, commitsPromise) {
   const server = http.createServer((request, response) => {
-    console.log(request.url);
     if (request.url === "/") {
       Promise.all([indexPromise, commitsPromise]).then(([index, commits]) => {
-        console.log(commits);
         const newIndex = index.replace(
           "<script>window._CLI=null</script>",
           `<script>window._CLI={commits:${JSON.stringify(

src/app-helpers.js

@@ -0,0 +1,40 @@
+import React, { useState, useEffect } from "react";
+import { getLanguage, loadLanguage } from "./language-detector";
+
+export function Center({ children }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        padding: "0 40px"
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function Loading({ repo, path }) {
+  return (
+    <Center>
+      <p>
+        Loading <strong>{path}</strong> history {repo ? "from " + repo : ""}...
+      </p>
+    </Center>
+  );
+}
+
+export function useLanguageLoader(path) {
+  const [loadedLang, setLang] = useState(false);
+
+  useEffect(() => {
+    const lang = getLanguage(path);
+    loadLanguage(lang).then(() => setLang(lang));
+  }, [path, setLang]);
+
+  return loadedLang;
+}

src/history.js

@@ -28,13 +28,15 @@ function CommitInfo({ commit, move, onClick }) {
         }}
         onClick={onClick}
       >
-        <img
-          src={commit.author.avatar}
-          alt={commit.author.login}
-          height={40}
-          width={40}
-          style={{ borderRadius: "4px" }}
-        />
+        {commit.author.avatar && (
+          <img
+            src={commit.author.avatar}
+            alt={commit.author.login}
+            height={40}
+            width={40}
+            style={{ borderRadius: "4px" }}
+          />
+        )}
         <div style={{ paddingLeft: "6px" }}>
           <div style={{ fontSize: "1.1rem", fontWeight: "500" }}>
             {commit.author.login}

src/index.js

@@ -1,27 +1,29 @@
 import { getLanguage } from "./language-detector";
-import App from "./app";
+import App from "./napp";
 import React from "react";
 import ReactDOM from "react-dom";
 
-const [repo, sha, path] = getParams();
-const lang = getLanguage(path);
 const root = document.getElementById("root");
+ReactDOM.render(<App />, root);
 
-ReactDOM.render(<App repo={repo} sha={sha} path={path} lang={lang} />, root);
+// const [repo, sha, path] = getParams();
+// const lang = getLanguage(path);
 
-function getParams() {
-  const [
-    ,
-    owner,
-    reponame,
-    action,
-    sha,
-    ...paths
-  ] = window.location.pathname.split("/");
+// ReactDOM.render(<App repo={repo} sha={sha} path={path} lang={lang} />, root);
 
-  if (action !== "commits" && action !== "blob") {
-    return [];
-  }
+// function getParams() {
+//   const [
+//     ,
+//     owner,
+//     reponame,
+//     action,
+//     sha,
+//     ...paths
+//   ] = window.location.pathname.split("/");
 
-  return [owner + "/" + reponame, sha, "/" + paths.join("/")];
-}
+//   if (action !== "commits" && action !== "blob") {
+//     return [];
+//   }
+
+//   return [owner + "/" + reponame, sha, "/" + paths.join("/")];
+// }

src/language-detector.js

@@ -68,3 +68,21 @@ const dependencies = {
 export function getLanguageDependencies(lang) {
   return dependencies[lang];
 }
+
+export function loadLanguage(lang) {
+  if (["js", "css", "html"].includes(lang)) {
+    return Promise.resolve();
+  }
+
+  const deps = getLanguageDependencies(lang);
+
+  let depPromise = import("prismjs");
+
+  if (deps) {
+    depPromise = depPromise.then(() =>
+      Promise.all(deps.map(dep => import(`prismjs/components/prism-${dep}`)))
+    );
+  }
+
+  return depPromise.then(() => import(`prismjs/components/prism-${lang}`));
+}

src/napp.js

@@ -0,0 +1,25 @@
+import React from "react";
+import History from "./history";
+import { Loading, useLanguageLoader } from "./app-helpers";
+
+const cli = window._CLI;
+
+export default function App() {
+  if (cli) {
+    return <CliApp data={cli} />;
+  } else {
+    return null;
+    // return <GitHubApp />;
+  }
+}
+
+function CliApp({ data }) {
+  let { commits, path } = data;
+  commits = commits.map(commit => ({ ...commit, date: new Date(commit.date) }));
+  const lang = useLanguageLoader(path);
+  if (!lang) {
+    return <Loading path={path} />;
+  } else {
+    return <History commits={commits} language={lang} />;
+  }
+}