├── .gitignore
├── README.md
├── package.json
├── public
├── favicon.ico
└── index.html
├── src
├── App.test.js
├── components
│ ├── App.js
│ ├── Event.js
│ ├── Events.js
│ ├── Header.js
│ └── Search.js
├── index.css
├── index.js
└── logo.svg
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 |
6 | # production
7 | build
8 |
9 | # misc
10 | .DS_Store
11 | npm-debug.log
12 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Search GitHub events by username
2 | Demo: https://young-stream-95005.herokuapp.com/
3 |
4 | Basically, I'm trying to replicate a user's activity feed on GitHub, but mostly
5 | this was an exercise to fetch an external API on initial load via React. I've
6 | recently expanded on this by creating a form to fetch different users.
7 |
8 | I made this demo as part of my learning process and hope that it will help someone
9 | else along their path in learning React. There's still lots to do here ~~since we
10 | are basically just hitting an external endpoint and not really doing anything
11 | dynamic in the UI.~~
12 |
13 | ## Credits
14 | This was bootstrapped with the `create-react-app` project. Read their docs to find out
15 | how this is organized: https://github.com/facebookincubator/create-react-app.
16 |
17 | I learned all of my React with Wes Bos' online React For Beginners tutorial.
18 | https://reactforbeginners.com
19 |
20 | ## To Do
21 | * ~~Use `fetch()` API instead of jQuery - seems a bit much to load jQuery just for an API call.~~
22 | * Create a filter allow users to fetch certain types of data
23 | * ~~Create a form to make the username dynamic~~
24 | * Show the user info
25 | * ~~Add localStorage~~
26 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "github-feed-react",
3 | "version": "0.0.1",
4 | "private": true,
5 | "devDependencies": {
6 | "react-scripts": "0.7.0"
7 | },
8 | "dependencies": {
9 | "moment": "^2.15.1",
10 | "react": "^15.3.2",
11 | "react-dom": "^15.3.2"
12 | },
13 | "scripts": {
14 | "start": "react-scripts start",
15 | "build": "react-scripts build",
16 | "test": "react-scripts test --env=jsdom",
17 | "eject": "react-scripts eject"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jacobarriola/github-feed-react/dc4d1144f8544664e52727233647000d255fce0a/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
16 | React App
17 |
18 |
19 |
20 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | });
9 |
--------------------------------------------------------------------------------
/src/components/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Header from './Header';
3 | import Events from './Events';
4 |
5 | class App extends Component {
6 | render() {
7 | return (
8 |
9 |
10 |
11 |
12 | );
13 | }
14 | }
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/src/components/Event.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import moment from 'moment';
3 |
4 | class Event extends React.Component {
5 | render() {
6 | const {type, created_at, repo} = this.props.item;
7 | const url = `https://github.com/${repo.name}`;
8 |
9 | return (
10 |
11 |
12 | {type} - {moment.utc( created_at, "YYYYMMDD" ).fromNow()}
13 |
14 | )
15 | }
16 | };
17 |
18 | export default Event;
19 |
--------------------------------------------------------------------------------
/src/components/Events.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Event from './Event';
3 | import Search from './Search';
4 |
5 | class Events extends React.Component {
6 | constructor(props) {
7 | super(props);
8 |
9 | this.searchUser = this.searchUser.bind(this);
10 |
11 | this.state = {
12 | items: []
13 | }
14 | }
15 |
16 | // componentWillMount() {
17 | // this.loadEvents();
18 | // }
19 | //
20 | // loadEvents() {
21 | // const localStorageUser = localStorage.getItem(`search-jacobarriola`);
22 | // if ( localStorageUser ) {
23 | // const localUser = JSON.parse(localStorageUser);
24 | // this.setState({ items: localUser });
25 | // return;
26 | // }
27 | // fetch(`https://api.github.com/users/jacobarriola/events?per_page=12`)
28 | // .then(response => response.json())
29 | // .then(items => {
30 | // this.setState({ items });
31 | // localStorage.setItem(`search-jacobarriola`, JSON.stringify(items));
32 | // });
33 | // }
34 |
35 | searchUser(user) {
36 | const localStorageUser = localStorage.getItem(`search-${user}`);
37 | if ( localStorageUser ) {
38 | const localUser = JSON.parse(localStorageUser);
39 | this.setState({ items: localUser });
40 | return;
41 | }
42 | fetch(`https://api.github.com/users/${user}/events?per_page=12`)
43 | .then(response => response.json())
44 | .then(items => {
45 | this.setState({ items });
46 | localStorage.setItem(`search-${user}`, JSON.stringify(items));
47 | });
48 | }
49 |
50 | render() {
51 | return (
52 |
53 |
54 |
55 | {this.state.items.map((items, i) => )}
56 |
57 |