mirror of
https://github.com/pomber/git-history.git
synced 2024-09-11 14:35:57 +03:00
Fix app
This commit is contained in:
parent
d9332451cb
commit
468f8af76d
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "githistory",
|
"name": "githistory-web",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
@ -10,6 +10,6 @@
|
|||||||
],
|
],
|
||||||
"start_url": ".",
|
"start_url": ".",
|
||||||
"display": "standalone",
|
"display": "standalone",
|
||||||
"theme_color": "#000000",
|
"theme_color": "#d6deeb",
|
||||||
"background_color": "#ffffff"
|
"background_color": "#011627"
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { getLanguage, loadLanguage } from "./language-detector";
|
import { getLanguage, loadLanguage } from "./language-detector";
|
||||||
|
import { auth, isLoggedIn, getCommits } from "./github";
|
||||||
|
|
||||||
export function Center({ children }) {
|
export function Center({ children }) {
|
||||||
return (
|
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) {
|
export function useLanguageLoader(path) {
|
||||||
const [loadedLang, setLang] = useState(false);
|
const [loadedLang, setLang] = useState(false);
|
||||||
|
|
||||||
@ -38,3 +99,61 @@ export function useLanguageLoader(path) {
|
|||||||
|
|
||||||
return loadedLang;
|
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 History from "./history";
|
||||||
import { getHistory, auth, isLoggedIn } from "./github";
|
import Landing from "./landing";
|
||||||
import demo from "./demo.gif";
|
import {
|
||||||
|
getUrlParams,
|
||||||
|
useLanguageLoader,
|
||||||
|
useCommitsFetcher,
|
||||||
|
useDocumentTitle,
|
||||||
|
Loading,
|
||||||
|
Error
|
||||||
|
} from "./app-helpers";
|
||||||
|
|
||||||
export default function AppWrapper(props) {
|
const cli = window._CLI;
|
||||||
if (props.repo) {
|
|
||||||
return <App {...props} />;
|
export default function App() {
|
||||||
} else {
|
if (cli) {
|
||||||
|
return <CliApp data={cli} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [repo, sha, path] = getUrlParams();
|
||||||
|
|
||||||
|
if (!repo) {
|
||||||
return <Landing />;
|
return <Landing />;
|
||||||
|
} else {
|
||||||
|
return <GitHubApp repo={repo} sha={sha} path={path} />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function Center({ children }) {
|
function CliApp({ data }) {
|
||||||
return (
|
let { commits, path } = data;
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
height: "100%",
|
|
||||||
padding: "0 40px"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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();
|
const fileName = path.split("/").pop();
|
||||||
useDocumentTitle(`Git History - ${fileName}`);
|
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({
|
const { commits, loading, error } = useCommitsFetcher({
|
||||||
repo,
|
repo,
|
||||||
sha,
|
sha,
|
||||||
path,
|
path
|
||||||
lang
|
|
||||||
});
|
});
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
return <Error error={error} />;
|
return <Error error={error} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (loading) {
|
if (!lang || loading) {
|
||||||
return <Loading repo={repo} sha={sha} path={path} />;
|
return <Loading repo={repo} path={path} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!commits.length) {
|
if (!commits.length) {
|
||||||
@ -92,114 +67,3 @@ function App({ repo, sha, path, lang }) {
|
|||||||
|
|
||||||
return <History commits={commits} language={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 netlify from "netlify-auth-providers";
|
||||||
import { Base64 } from "js-base64";
|
import { Base64 } from "js-base64";
|
||||||
import { getLanguageDependencies } from "./language-detector";
|
|
||||||
const TOKEN_KEY = "github-token";
|
const TOKEN_KEY = "github-token";
|
||||||
|
|
||||||
function getHeaders() {
|
function getHeaders() {
|
||||||
@ -26,7 +25,7 @@ async function getContent(repo, sha, path) {
|
|||||||
return { content, url: contentJson.html_url };
|
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(
|
const commitsResponse = await fetch(
|
||||||
`https://api.github.com/repos/${repo}/commits?sha=${sha}&path=${path}`,
|
`https://api.github.com/repos/${repo}/commits?sha=${sha}&path=${path}`,
|
||||||
{ headers: getHeaders() }
|
{ headers: getHeaders() }
|
||||||
@ -65,12 +64,6 @@ async function getCommits(repo, sha, path, top = 10) {
|
|||||||
return commits;
|
return commits;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getHistory(repo, sha, path, lang) {
|
|
||||||
return Promise.all([getCommits(repo, sha, path), loadLanguage(lang)]).then(
|
|
||||||
([commits]) => commits
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function auth() {
|
export function auth() {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
var authenticator = new netlify({
|
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 "./app";
|
||||||
import App from "./napp";
|
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import ReactDOM from "react-dom";
|
import ReactDOM from "react-dom";
|
||||||
|
|
||||||
const root = document.getElementById("root");
|
const root = document.getElementById("root");
|
||||||
ReactDOM.render(<App />, 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