mirror of
https://github.com/pomber/git-history.git
synced 2024-08-17 02:10:25 +03:00
Fix app
This commit is contained in:
Rodrigo Pombo
parent
d9332451cb
commit
468f8af76d
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "githistory",
|
||||
"name": "githistory-web",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
|
||||
@ -10,6 +10,6 @@
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
"theme_color": "#d6deeb",
|
||||
"background_color": "#011627"
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<Center>
|
||||
<p>
|
||||
GitHub API rate limit exceeded for your IP (60 requests per hour).
|
||||
</p>
|
||||
<p>Sign in with GitHub for more:</p>
|
||||
<GitHubButton onClick={login} />
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
if (error.status === 404) {
|
||||
return (
|
||||
<Center>
|
||||
<p>File not found.</p>
|
||||
{!isLoggedIn() && (
|
||||
<React.Fragment>
|
||||
<p>Is it from a private repo? Sign in with GitHub:</p>
|
||||
<GitHubButton onClick={login} />
|
||||
</React.Fragment>
|
||||
)}
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
console.error(error);
|
||||
return (
|
||||
<Center>
|
||||
<p>Unexpected error. Check the console.</p>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
function GitHubButton({ onClick }) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
style={{ fontWeight: 600, padding: "0.5em 0.7em", cursor: "pointer" }}
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
height="1em"
|
||||
width="1em"
|
||||
viewBox="0 0 40 40"
|
||||
style={{ verticalAlign: "middle", marginRight: "0.5rem" }}
|
||||
>
|
||||
<g>
|
||||
<path d="m20 0c-11 0-20 9-20 20 0 8.8 5.7 16.3 13.7 19 1 0.2 1.3-0.5 1.3-1 0-0.5 0-2 0-3.7-5.5 1.2-6.7-2.4-6.7-2.4-0.9-2.3-2.2-2.9-2.2-2.9-1.9-1.2 0.1-1.2 0.1-1.2 2 0.1 3.1 2.1 3.1 2.1 1.7 3 4.6 2.1 5.8 1.6 0.2-1.3 0.7-2.2 1.3-2.7-4.5-0.5-9.2-2.2-9.2-9.8 0-2.2 0.8-4 2.1-5.4-0.2-0.5-0.9-2.6 0.2-5.3 0 0 1.7-0.5 5.5 2 1.6-0.4 3.3-0.6 5-0.6 1.7 0 3.4 0.2 5 0.7 3.8-2.6 5.5-2.1 5.5-2.1 1.1 2.8 0.4 4.8 0.2 5.3 1.3 1.4 2.1 3.2 2.1 5.4 0 7.6-4.7 9.3-9.2 9.8 0.7 0.6 1.4 1.9 1.4 3.7 0 2.7 0 4.9 0 5.5 0 0.6 0.3 1.2 1.3 1 8-2.7 13.7-10.2 13.7-19 0-11-9-20-20-20z" />
|
||||
</g>
|
||||
</svg>
|
||||
Sign in with GitHub
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
220
src/app.js
Executable file → Normal file
220
src/app.js
Executable file → Normal file
@ -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";
|
||||
|
||||
export default function AppWrapper(props) {
|
||||
if (props.repo) {
|
||||
return <App {...props} />;
|
||||
} else {
|
||||
const cli = window._CLI;
|
||||
|
||||
export default function App() {
|
||||
if (cli) {
|
||||
return <CliApp data={cli} />;
|
||||
}
|
||||
|
||||
const [repo, sha, path] = getUrlParams();
|
||||
|
||||
if (!repo) {
|
||||
return <Landing />;
|
||||
} else {
|
||||
return <GitHubApp repo={repo} sha={sha} path={path} />;
|
||||
}
|
||||
}
|
||||
|
||||
function Center({ children }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "100%",
|
||||
padding: "0 40px"
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
function CliApp({ data }) {
|
||||
let { commits, path } = data;
|
||||
|
||||
function Landing() {
|
||||
const url = `${window.location.protocol}//${
|
||||
window.location.host
|
||||
}/babel/babel/blob/master/packages/babel-core/test/browserify.js`;
|
||||
return (
|
||||
<Center>
|
||||
<img src={demo} alt="demo" style={{ width: 900, maxWidth: "100%" }} />
|
||||
<h1>Git History</h1>
|
||||
<div>
|
||||
<p>
|
||||
Quickly browse the history of any GitHub file:
|
||||
<ol>
|
||||
<li>
|
||||
Replace <strong>github.com</strong> with{" "}
|
||||
<strong>github.githistory.xyz</strong> in any file url
|
||||
</li>
|
||||
<li>There's no step two</li>
|
||||
</ol>
|
||||
<a href={url}>Try it</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
You can also add an <strong>Open in Git History</strong> button to
|
||||
GitHub with the{" "}
|
||||
<a href="https://chrome.google.com/webstore/detail/github-history-browser-ex/laghnmifffncfonaoffcndocllegejnf">
|
||||
Chrome
|
||||
</a>{" "}
|
||||
and{" "}
|
||||
<a href="https://addons.mozilla.org/es/firefox/addon/github-history/">
|
||||
Firefox
|
||||
</a>{" "}
|
||||
extensions.
|
||||
</p>
|
||||
</div>
|
||||
<div style={{ height: "20%" }} />
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
function App({ repo, sha, path, lang }) {
|
||||
const fileName = path.split("/").pop();
|
||||
useDocumentTitle(`Git History - ${fileName}`);
|
||||
|
||||
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} />;
|
||||
}
|
||||
}
|
||||
|
||||
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 <Error error={error} />;
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <Loading repo={repo} sha={sha} path={path} />;
|
||||
if (!lang || loading) {
|
||||
return <Loading repo={repo} path={path} />;
|
||||
}
|
||||
|
||||
if (!commits.length) {
|
||||
@ -92,114 +67,3 @@ function App({ repo, sha, path, lang }) {
|
||||
|
||||
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>Sign in with GitHub for more:</p>
|
||||
<GitHubButton onClick={login} />
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
if (error.status === 404) {
|
||||
return (
|
||||
<Center>
|
||||
<p>File not found.</p>
|
||||
{!isLoggedIn() && (
|
||||
<React.Fragment>
|
||||
<p>Is it from a private repo? Sign in with GitHub:</p>
|
||||
<GitHubButton onClick={login} />
|
||||
</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 GitHubButton({ onClick }) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
style={{ fontWeight: 600, padding: "0.5em 0.7em", cursor: "pointer" }}
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
height="1em"
|
||||
width="1em"
|
||||
viewBox="0 0 40 40"
|
||||
style={{ verticalAlign: "middle", marginRight: "0.5rem" }}
|
||||
>
|
||||
<g>
|
||||
<path d="m20 0c-11 0-20 9-20 20 0 8.8 5.7 16.3 13.7 19 1 0.2 1.3-0.5 1.3-1 0-0.5 0-2 0-3.7-5.5 1.2-6.7-2.4-6.7-2.4-0.9-2.3-2.2-2.9-2.2-2.9-1.9-1.2 0.1-1.2 0.1-1.2 2 0.1 3.1 2.1 3.1 2.1 1.7 3 4.6 2.1 5.8 1.6 0.2-1.3 0.7-2.2 1.3-2.7-4.5-0.5-9.2-2.2-9.2-9.8 0-2.2 0.8-4 2.1-5.4-0.2-0.5-0.9-2.6 0.2-5.3 0 0 1.7-0.5 5.5 2 1.6-0.4 3.3-0.6 5-0.6 1.7 0 3.4 0.2 5 0.7 3.8-2.6 5.5-2.1 5.5-2.1 1.1 2.8 0.4 4.8 0.2 5.3 1.3 1.4 2.1 3.2 2.1 5.4 0 7.6-4.7 9.3-9.2 9.8 0.7 0.6 1.4 1.9 1.4 3.7 0 2.7 0 4.9 0 5.5 0 0.6 0.3 1.2 1.3 1 8-2.7 13.7-10.2 13.7-19 0-11-9-20-20-20z" />
|
||||
</g>
|
||||
</svg>
|
||||
Sign in with GitHub
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
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]);
|
||||
}
|
||||
|
||||
@ -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}`));
|
||||
}
|
||||
|
||||
25
src/index.js
25
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(<App />, root);
|
||||
|
||||
// const [repo, sha, path] = getParams();
|
||||
// const lang = getLanguage(path);
|
||||
|
||||
// ReactDOM.render(<App repo={repo} sha={sha} path={path} lang={lang} />, 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("/")];
|
||||
// }
|
||||
|
||||
49
src/landing.js
Normal file
49
src/landing.js
Normal file
@ -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 (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
padding: "10px 20px 0",
|
||||
boxSizing: "border-box"
|
||||
}}
|
||||
>
|
||||
<img src={demo} alt="demo" style={{ width: 900, maxWidth: "100%" }} />
|
||||
<h1>Git History</h1>
|
||||
<div>
|
||||
<div>
|
||||
Quickly browse the history of any GitHub file:
|
||||
<ol>
|
||||
<li>
|
||||
Replace <strong>github.com</strong> with{" "}
|
||||
<strong>github.githistory.xyz</strong> in any file url
|
||||
</li>
|
||||
<li>There's no step two</li>
|
||||
</ol>
|
||||
<a href={url}>Try it</a>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
You can also add an <strong>Open in Git History</strong> button to
|
||||
GitHub with the{" "}
|
||||
<a href="https://chrome.google.com/webstore/detail/github-history-browser-ex/laghnmifffncfonaoffcndocllegejnf">
|
||||
Chrome
|
||||
</a>{" "}
|
||||
and{" "}
|
||||
<a href="https://addons.mozilla.org/es/firefox/addon/github-history/">
|
||||
Firefox
|
||||
</a>{" "}
|
||||
extensions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
25
src/napp.js
25
src/napp.js
@ -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 <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} />;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user