From 468f8af76d7fdef6e92921847cd02353200d9bec Mon Sep 17 00:00:00 2001 From: Rodrigo Pombo Date: Sun, 10 Feb 2019 14:10:11 -0300 Subject: [PATCH] Fix app --- package.json | 2 +- public/manifest.json | 4 +- src/app-helpers.js | 119 ++++++++++++++++++++++++ src/app.js | 214 ++++++++----------------------------------- src/github.js | 27 +----- src/index.js | 25 +---- src/landing.js | 49 ++++++++++ src/napp.js | 25 ----- 8 files changed, 212 insertions(+), 253 deletions(-) mode change 100755 => 100644 src/app.js create mode 100644 src/landing.js delete mode 100644 src/napp.js diff --git a/package.json b/package.json index 428a3b7..6758112 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "githistory", + "name": "githistory-web", "version": "0.1.0", "private": true, "dependencies": { diff --git a/public/manifest.json b/public/manifest.json index a82f1bf..2e09354 100755 --- a/public/manifest.json +++ b/public/manifest.json @@ -10,6 +10,6 @@ ], "start_url": ".", "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" + "theme_color": "#d6deeb", + "background_color": "#011627" } diff --git a/src/app-helpers.js b/src/app-helpers.js index b2f2dd2..7c9d21c 100644 --- a/src/app-helpers.js +++ b/src/app-helpers.js @@ -1,5 +1,6 @@ import React, { useState, useEffect } from "react"; import { getLanguage, loadLanguage } from "./language-detector"; +import { auth, isLoggedIn, getCommits } from "./github"; export function Center({ children }) { return ( @@ -28,6 +29,66 @@ export function Loading({ repo, path }) { ); } +export function Error({ error }) { + if (error.status === 403) { + return ( +
+

+ GitHub API rate limit exceeded for your IP (60 requests per hour). +

+

Sign in with GitHub for more:

+ +
+ ); + } + + if (error.status === 404) { + return ( +
+

File not found.

+ {!isLoggedIn() && ( + +

Is it from a private repo? Sign in with GitHub:

+ + + )} +
+ ); + } + + console.error(error); + return ( +
+

Unexpected error. Check the console.

+
+ ); +} + +function GitHubButton({ onClick }) { + return ( + + ); +} + export function useLanguageLoader(path) { const [loadedLang, setLang] = useState(false); @@ -38,3 +99,61 @@ export function useLanguageLoader(path) { return loadedLang; } + +export function useCommitsFetcher({ repo, sha, path }) { + const [state, setState] = useState({ + commits: null, + loading: true, + error: null + }); + + useEffect(() => { + getCommits(repo, sha, path) + .then(commits => { + setState({ + commits, + loading: false, + error: false + }); + }) + .catch(error => { + setState({ + loading: false, + error + }); + }); + }, [repo, sha, path]); + + return state; +} + +export function useDocumentTitle(title) { + useEffect(() => { + document.title = title; + }, [title]); +} + +export function getUrlParams() { + const [ + , + owner, + reponame, + action, + sha, + ...paths + ] = window.location.pathname.split("/"); + + if (action !== "commits" && action !== "blob") { + return []; + } + + return [owner + "/" + reponame, sha, "/" + paths.join("/")]; +} + +function login() { + auth() + .then(data => { + window.location.reload(false); + }) + .catch(console.error); +} diff --git a/src/app.js b/src/app.js old mode 100755 new mode 100644 index 18e1a50..a9bc15d --- a/src/app.js +++ b/src/app.js @@ -1,89 +1,64 @@ -import React, { useState, useEffect } from "react"; +import React from "react"; import History from "./history"; -import { getHistory, auth, isLoggedIn } from "./github"; -import demo from "./demo.gif"; +import Landing from "./landing"; +import { + getUrlParams, + useLanguageLoader, + useCommitsFetcher, + useDocumentTitle, + Loading, + Error +} from "./app-helpers"; + +const cli = window._CLI; + +export default function App() { + if (cli) { + return ; + } -export default function AppWrapper(props) { - if (props.repo) { - return ; - } else { + const [repo, sha, path] = getUrlParams(); + + if (!repo) { return ; + } else { + return ; } } -function Center({ children }) { - return ( -
- {children} -
- ); -} +function CliApp({ data }) { + let { commits, path } = data; + + const fileName = path.split("/").pop(); + useDocumentTitle(`Git History - ${fileName}`); -function Landing() { - const url = `${window.location.protocol}//${ - window.location.host - }/babel/babel/blob/master/packages/babel-core/test/browserify.js`; - return ( -
- demo -

Git History

-
-

- Quickly browse the history of any GitHub file: -

    -
  1. - Replace github.com with{" "} - github.githistory.xyz in any file url -
    2. -
  2. There's no step two
    3. -
- Try it -

+ commits = commits.map(commit => ({ ...commit, date: new Date(commit.date) })); + const lang = useLanguageLoader(path); -

- You can also add an Open in Git History button to - GitHub with the{" "} - - Chrome - {" "} - and{" "} - - Firefox - {" "} - extensions. -

-
-
-
- ); + if (!lang) { + return ; + } else { + return ; + } } -function App({ repo, sha, path, lang }) { +function GitHubApp({ repo, sha, path }) { const fileName = path.split("/").pop(); useDocumentTitle(`Git History - ${fileName}`); + const lang = useLanguageLoader(path); const { commits, loading, error } = useCommitsFetcher({ repo, sha, - path, - lang + path }); if (error) { return ; } - if (loading) { - return ; + if (!lang || loading) { + return ; } if (!commits.length) { @@ -92,114 +67,3 @@ function App({ repo, sha, path, lang }) { return ; } - -function Error({ error }) { - if (error.status === 403) { - return ( -
-

- GitHub API rate limit exceeded for your IP (60 requests per hour). -

-

Sign in with GitHub for more:

- -
- ); - } - - if (error.status === 404) { - return ( -
-

File not found.

- {!isLoggedIn() && ( - -

Is it from a private repo? Sign in with GitHub:

- - - )} -
- ); - } - - console.error(error); - return ( -
-

Unexpected error. Check the console.

-
- ); -} - -function Loading({ repo, sha, path }) { - return ( -
-

- Loading {repo} {path} history... -

-
- ); -} - -function GitHubButton({ onClick }) { - return ( - - ); -} - -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/github.js b/src/github.js index cefee36..ba4f486 100644 --- a/src/github.js +++ b/src/github.js @@ -1,6 +1,5 @@ import netlify from "netlify-auth-providers"; import { Base64 } from "js-base64"; -import { getLanguageDependencies } from "./language-detector"; const TOKEN_KEY = "github-token"; function getHeaders() { @@ -26,7 +25,7 @@ async function getContent(repo, sha, path) { return { content, url: contentJson.html_url }; } -async function getCommits(repo, sha, path, top = 10) { +export async function getCommits(repo, sha, path, top = 10) { const commitsResponse = await fetch( `https://api.github.com/repos/${repo}/commits?sha=${sha}&path=${path}`, { headers: getHeaders() } @@ -65,12 +64,6 @@ async function getCommits(repo, sha, path, top = 10) { return commits; } -export function getHistory(repo, sha, path, lang) { - return Promise.all([getCommits(repo, sha, path), loadLanguage(lang)]).then( - ([commits]) => commits - ); -} - export function auth() { return new Promise((resolve, reject) => { var authenticator = new netlify({ @@ -88,21 +81,3 @@ export function auth() { }); }); } - -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}`)); -} diff --git a/src/index.js b/src/index.js index 07cdd49..438acc4 100755 --- a/src/index.js +++ b/src/index.js @@ -1,29 +1,6 @@ -import { getLanguage } from "./language-detector"; -import App from "./napp"; +import App from "./app"; import React from "react"; import ReactDOM from "react-dom"; const root = document.getElementById("root"); ReactDOM.render(, root); - -// const [repo, sha, path] = getParams(); -// const lang = getLanguage(path); - -// ReactDOM.render(, root); - -// function getParams() { -// const [ -// , -// owner, -// reponame, -// action, -// sha, -// ...paths -// ] = window.location.pathname.split("/"); - -// if (action !== "commits" && action !== "blob") { -// return []; -// } - -// return [owner + "/" + reponame, sha, "/" + paths.join("/")]; -// } diff --git a/src/landing.js b/src/landing.js new file mode 100644 index 0000000..cd64d1b --- /dev/null +++ b/src/landing.js @@ -0,0 +1,49 @@ +import React from "react"; +import demo from "./demo.gif"; + +export default function Landing() { + const url = `${window.location.protocol}//${ + window.location.host + }/babel/babel/blob/master/packages/babel-core/test/browserify.js`; + return ( +
+ demo +

Git History

+
+
+ Quickly browse the history of any GitHub file: +
    +
  1. + Replace github.com with{" "} + github.githistory.xyz in any file url +
    2. +
  2. There's no step two
    3. +
+ Try it +
+ +

+ You can also add an Open in Git History button to + GitHub with the{" "} + + Chrome + {" "} + and{" "} + + Firefox + {" "} + extensions. +

+
+
+ ); +} diff --git a/src/napp.js b/src/napp.js deleted file mode 100644 index 43ed88b..0000000 --- a/src/napp.js +++ /dev/null @@ -1,25 +0,0 @@ -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 ; - } else { - return null; - // return ; - } -} - -function CliApp({ data }) { - let { commits, path } = data; - commits = commits.map(commit => ({ ...commit, date: new Date(commit.date) })); - const lang = useLanguageLoader(path); - if (!lang) { - return ; - } else { - return ; - } -}