No Internet
6 | ) 7 | } 8 | 9 | export default NoInternet; 10 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import Header from './Header'; 2 | import CardComponent from './CardComponent'; 3 | import NoInternet from './NoInternet'; 4 | 5 | export { 6 | Header, 7 | CardComponent, 8 | NoInternet, 9 | }; 10 | -------------------------------------------------------------------------------- /src/containers/AppWrapper/index.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | import Helmet from 'react-helmet'; 3 | import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 4 | import { Grid } from 'react-bootstrap'; 5 | import Snackbar from 'material-ui/Snackbar'; 6 | 7 | import { Header } from 'components'; 8 | import { menuItems, appleMetas, linkPwaMetas } from 'utils/constants'; 9 | import './styles.css'; 10 | 11 | const muStyles = { 12 | contentStyle: { 13 | textAlign: 'center' 14 | } 15 | }; 16 | 17 | class AppWrapper extends PureComponent { 18 | state = { 19 | online: true, 20 | showSnackbar: false, 21 | }; 22 | 23 | componentWillMount() { 24 | if (!window.Offline.check()) { 25 | this.setState({ 26 | online: false, 27 | showSnackbar: true, 28 | }); 29 | } 30 | } 31 | 32 | componentDidMount() { 33 | window.Offline.on('down', () => { 34 | this.setState({ 35 | online: false, 36 | showSnackbar: true, 37 | }); 38 | }); 39 | window.Offline.on('up', () => { 40 | this.setState({ 41 | online: true, 42 | showSnackbar: true, 43 | }); 44 | }); 45 | } 46 | 47 | handleRequestClose = () => { 48 | this.setState({ 49 | showSnackbar: false, 50 | }); 51 | } 52 | 53 | renderOffOnlineSnackbar() { 54 | const { online, showSnackbar } = this.state; 55 | const msg = !online ? 'Offline' : 'Online'; 56 | return ( 57 |
75 |
78 | {this.props.children}
79 |
80 | {this.renderOffOnlineSnackbar()}
81 |
82 |
9 | {menuItems.map((item, index) =>
10 |
11 | 
12 |
13 | )}
14 |
15 | );
16 | }
17 |
18 | export default HomePage;
--------------------------------------------------------------------------------
/src/containers/HomePage/styles.css:
--------------------------------------------------------------------------------
1 | .homePage {
2 | text-align: center;
3 | }
4 |
5 | .homePage img {
6 | width: 200px;
7 | margin-right: 15px;
8 | margin-bottom: 15px;
9 | }
--------------------------------------------------------------------------------
/src/containers/NewsListing/actions.js:
--------------------------------------------------------------------------------
1 | import {
2 | FETCH_DATA,
3 | FETCH_DATA_SUCCESS,
4 | FETCH_DATA_FAIL,
5 | } from './constants';
6 |
7 | export function fetchData(source) {
8 | return {
9 | type: FETCH_DATA,
10 | payload: {
11 | source,
12 | }
13 | };
14 | }
15 |
16 | export function fetchDataSuccess(response) {
17 | return {
18 | type: FETCH_DATA_SUCCESS,
19 | payload: {
20 | response
21 | },
22 | };
23 | }
24 |
25 | export function fetchDataFail() {
26 | return {
27 | type: FETCH_DATA_FAIL,
28 | };
29 | }
30 |
--------------------------------------------------------------------------------
/src/containers/NewsListing/constants.js:
--------------------------------------------------------------------------------
1 | export const FETCH_DATA = 'src/containers/TechCrunch/FETCH_DATA';
2 | export const FETCH_DATA_SUCCESS = 'src/containers/TechCrunch/FETCH_DATA_SUCCESS';
3 | export const FETCH_DATA_FAIL = 'src/containers/TechCrunch/FETCH_DATA_FAIL';
4 |
--------------------------------------------------------------------------------
/src/containers/NewsListing/index.js:
--------------------------------------------------------------------------------
1 | import './styles.css';
2 | import React, { Component } from 'react';
3 | import { connect } from 'react-redux';
4 | import CircularProgress from 'material-ui/CircularProgress';
5 |
6 | import { CardComponent, NoInternet } from 'components';
7 | import Paper from 'material-ui/Paper';
8 |
9 | const muStyles = {
10 | padding: 50,
11 | textAlign: 'center',
12 | marginBottom: 20,
13 | };
14 |
15 | class NewsListing extends Component {
16 | renderLoading() {
17 | const { fetching } = this.props;
18 | return (
19 | fetching &&
20 |
36 | {element}
37 | {this.renderLoading()}
38 |
39 | )
40 | }
41 | }
42 |
43 | const mapStateToProps = (state) => ({
44 | newsState: state.newsReducer,
45 | articles: state.newsReducer.articles,
46 | source: state.newsReducer.source,
47 | fetching: state.newsReducer.fetching,
48 | });
49 |
50 | const mapDispatchToProps = (dispatch) => ({
51 | dispatch,
52 | });
53 |
54 | export default connect(mapStateToProps, mapDispatchToProps)(NewsListing);
55 |
--------------------------------------------------------------------------------
/src/containers/NewsListing/reducer.js:
--------------------------------------------------------------------------------
1 | import {
2 | FETCH_DATA_SUCCESS,
3 | } from './constants';
4 |
5 | const initialState = {
6 | articles: [],
7 | source: null,
8 | fetching: true,
9 | };
10 |
11 | function newsReducer(state = initialState, action) {
12 | switch(action.type) {
13 | case FETCH_DATA_SUCCESS: {
14 | return {
15 | ...state,
16 | articles: action.payload.response.articles,
17 | source: action.payload.response.source,
18 | fetching: false,
19 | }
20 | }
21 | default: {
22 | return state;
23 | }
24 | }
25 | }
26 |
27 | export default newsReducer;
28 |
--------------------------------------------------------------------------------
/src/containers/NewsListing/sagas.js:
--------------------------------------------------------------------------------
1 | import { call, put, takeLatest } from 'redux-saga/effects'
2 | import {
3 | FETCH_DATA,
4 | } from './constants';
5 | import {
6 | fetchDataSuccess,
7 | fetchDataFail,
8 | } from './actions';
9 | import { configs } from 'utils/configs';
10 | import request from 'utils/request';
11 | import {
12 | prettyDisplayDate
13 | } from 'utils';
14 |
15 | function normalizeData(rawData) {
16 | return rawData.map(item => {
17 | item.publishedDate = `Published at ${prettyDisplayDate(item.publishedAt)}`;
18 | return item;
19 | });
20 | }
21 |
22 | function* fetchListItem(action) {
23 | try {
24 | const { source } = action.payload;
25 | const requestURL = `${configs.apiUrl}/articles?source=${source}&apiKey=${configs.newsApiKey}`;
26 | const response = yield call(request, requestURL);
27 | response.articles = normalizeData(response.articles);
28 | yield put(fetchDataSuccess(response));
29 | } catch (err) {
30 | yield put(fetchDataFail(err));
31 | }
32 | }
33 |
34 | function* getNewsData() {
35 | // const watcher = yield takeLatest(FETCH_DATA, fetchListItem);
36 | // // Suspend execution until location changes
37 | // yield take(LOCATION_CHANGE);
38 | // yield cancel(watcher);
39 | yield takeLatest(FETCH_DATA, fetchListItem);
40 | }
41 |
42 | export default getNewsData;
43 |
--------------------------------------------------------------------------------
/src/containers/NewsListing/styles.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/davidnguyen11/create-react-progressive-web-app/cfc38305f5e66f839ffdfbf327760dc745fa1fc4/src/containers/NewsListing/styles.css
--------------------------------------------------------------------------------
/src/containers/NotFound/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function NotFound() {
4 | return (
5 |