Skip to content

Commit

Permalink
Implementation
Browse files Browse the repository at this point in the history
  • Loading branch information
kristianfreeman committed May 20, 2020
1 parent fc096d3 commit 446eead
Show file tree
Hide file tree
Showing 14 changed files with 204 additions and 251 deletions.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
"react-scripts": "3.4.1",
"recoil": "^0.0.7"
},
"scripts": {
"start": "react-scripts start",
Expand Down
41 changes: 21 additions & 20 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,38 +6,39 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link href="https://unpkg.com/@primer/css/dist/primer.css" rel="stylesheet" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
38 changes: 0 additions & 38 deletions src/App.css

This file was deleted.

27 changes: 9 additions & 18 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,15 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import React from "react";

import Menu from "./Menu";
import Repos from "./Repos";

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<div className="container-lg my-4">
<Menu />
<div className="Box">
<Repos />
</div>
</div>
);
}
Expand Down
9 changes: 0 additions & 9 deletions src/App.test.js

This file was deleted.

22 changes: 22 additions & 0 deletions src/Menu.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from "react";
import { useRecoilState } from "recoil";
import { view as viewAtom } from "./atoms";

export default () => {
const viewOptions = ["daily", "weekly", "monthly"];
const [view, setView] = useRecoilState(viewAtom);
return (
<nav className="menu">
{viewOptions.map((v) => (
<a
className={`menu-item ${view === v ? "text-bold" : ""}`}
href="#"
onClick={() => setView(v)}
key={v}
>
Trending {v}
</a>
))}
</nav>
);
};
72 changes: 72 additions & 0 deletions src/Repo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import React from "react";

export default ({ repo }) => {
return (
<div className="Box-row d-flex flex-items-center">
<div className="flex-auto">
<svg
height="16"
class="octicon octicon-repo mr-2 text-gray"
mr="1"
color="gray"
viewBox="0 0 12 16"
version="1.1"
width="12"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"
></path>
</svg>
<a href={repo.url}>
<strong>
{repo.author} / {repo.name}
</strong>
</a>

<div className="py-2 text-small text-gray-light">
{repo.description}
</div>

<div className="text-small text-gray-light d-flex">
<div className="mr-2">
<svg
height="16"
class="octicon octicon-star mr-1"
aria-label="star"
viewBox="0 0 14 16"
version="1.1"
width="14"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"
></path>
</svg>
{repo.stars} stars
</div>

<div>
<svg
height="16"
class="octicon octicon-repo-forked mr-1"
aria-label="fork"
viewBox="0 0 10 16"
version="1.1"
width="10"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M8 1a1.993 1.993 0 00-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 002 1a1.993 1.993 0 00-1 3.72V6.5l3 3v1.78A1.993 1.993 0 005 15a1.993 1.993 0 001-3.72V9.5l3-3V4.72A1.993 1.993 0 008 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"
></path>
</svg>
{repo.forks} forks
</div>
</div>
</div>
</div>
);
};
35 changes: 35 additions & 0 deletions src/Repos.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import React, { useEffect } from "react";
import { useRecoilState, useRecoilValue } from "recoil";

import { repos as reposAtom, view as viewAtom } from "./atoms";
import Repo from "./Repo";

export default () => {
const [repos, setRepos] = useRecoilState(reposAtom);
const view = useRecoilValue(viewAtom);

useEffect(() => {
const getRepos = async () => {
const url = `https://ghapi.huchen.dev/repositories?since=${view}`;
const resp = await fetch(url);
const body = await resp.json();
setRepos(
Object.assign({}, repos, {
[view]: body,
})
);
};

getRepos();
}, [repos, setRepos, view]);

return repos[view] ? (
<ul>
{repos[view].map((repo) => (
<Repo repo={repo} />
))}
</ul>
) : (
<span>No repos found</span>
);
};
15 changes: 15 additions & 0 deletions src/atoms.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { atom } from "recoil";

export const repos = atom({
key: "repos",
default: {
daily: [],
weekly: [],
monthly: [],
},
});

export const view = atom({
key: "view",
default: "monthly",
});
21 changes: 9 additions & 12 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { RecoilRoot } from "recoil";

ReactDOM.render(
<React.StrictMode>
<App />
<RecoilRoot>
<App />
</RecoilRoot>
</React.StrictMode>,
document.getElementById('root')
document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
7 changes: 0 additions & 7 deletions src/logo.svg

This file was deleted.

Loading

0 comments on commit 446eead

Please sign in to comment.