mirror of
https://github.com/pomber/git-history.git
synced 2024-11-25 21:24:20 +03:00
Refactor <App />
This commit is contained in:
Rodrigo Pombo
parent
a049c272d9
commit
0159648011
@ -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>
|
||||
|
||||
153
src/app.js
153
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]);
|
||||
}
|
||||
|
||||
62
src/index.js
62
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 [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user