Skip to content

Commit 2d0ac58

Browse files
patsta32patsta32
committed
adding react-detect-offline and homescreen button
1 parent 020ae02 commit 2d0ac58

File tree

7 files changed

+15169
-15489
lines changed

7 files changed

+15169
-15489
lines changed

‎package-lock.json

Lines changed: 15051 additions & 15467 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,16 @@
77
"@material-ui/styles": "4.9.0",
88
"localforage": "1.7.3",
99
"react": "16.12.0",
10+
"react-detect-offline": "^2.4.0",
1011
"react-dom": "16.12.0",
1112
"react-redux": "7.1.3",
1213
"react-router-dom": "5.1.2",
1314
"react-scripts": "3.3.1",
15+
"redux-devtools-extension": "2.13.8",
16+
"redux-logger": "3.0.6",
1417
"redux-persist": "6.0.0",
1518
"redux-thunk": "2.3.0",
16-
"typescript": "3.7.5",
17-
"redux-devtools-extension": "2.13.8",
18-
"redux-logger": "3.0.6"
19+
"typescript": "3.7.5"
1920
},
2021
"scripts": {
2122
"start": "react-scripts start",

‎src/App.tsx

Lines changed: 75 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,36 @@
11
// prettier-ignore
2-
import { AppBar, Badge, Divider, Drawer as DrawerMui, Hidden, IconButton, List, ListItem, ListItemIcon, ListItemText, Toolbar, Typography, useMediaQuery } from "@material-ui/core";
3-
import { Theme } from "@material-ui/core/styles";
4-
import FormatListNumberedIcon from "@material-ui/icons/FormatListNumbered";
5-
import HomeIcon from "@material-ui/icons/Home";
6-
import MenuIcon from "@material-ui/icons/Menu";
7-
import { makeStyles } from "@material-ui/styles";
8-
import * as React from "react";
9-
import { useSelector } from "react-redux";
10-
import { Route, Router } from "react-router-dom";
11-
import { history } from "./configureStore";
12-
import { Todo } from "./model";
13-
import { HomePage, TodoPage } from "./pages";
14-
import { RootState } from "./reducers/index";
15-
import { withRoot } from "./withRoot";
2+
import {
3+
AppBar,
4+
Badge,
5+
Divider,
6+
Drawer as DrawerMui,
7+
Hidden,
8+
IconButton,
9+
List,
10+
ListItem,
11+
ListItemIcon,
12+
ListItemText,
13+
Toolbar,
14+
Typography,
15+
useMediaQuery,
16+
} from '@material-ui/core';
17+
import { Theme } from '@material-ui/core/styles';
18+
import PlusIcon from '@material-ui/icons/Add';
19+
import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
20+
import HomeIcon from '@material-ui/icons/Home';
21+
import MenuIcon from '@material-ui/icons/Menu';
22+
import { makeStyles } from '@material-ui/styles';
23+
import * as React from 'react';
24+
import { Detector } from 'react-detect-offline';
25+
import { useSelector } from 'react-redux';
26+
import { Route, Router } from 'react-router-dom';
27+
28+
import { AddToHomescreenDialog } from './components/AddToHomescreenDialog';
29+
import { history } from './configureStore';
30+
import { Todo } from './model';
31+
import { HomePage, TodoPage } from './pages';
32+
import { RootState } from './reducers';
33+
import { withRoot } from './withRoot';
1634

1735
function Routes() {
1836
const classes = useStyles();
@@ -28,11 +46,38 @@ function Routes() {
2846

2947
function Drawer(props: { todoList: Todo[] }) {
3048
const classes = useStyles();
49+
const [homeScreenDialogOpen, setHomeScreenDialogOpen] = React.useState(false);
3150

3251
return (
3352
<div>
3453
<div className={classes.drawerHeader} />
3554
<Divider />
55+
<List>
56+
<Detector
57+
render={({ online }: any) => {
58+
console.log(online);
59+
return (
60+
61+
<div className={online ? classes.normal : classes.warning}>
62+
You are currently {online ? "online" : "offline"}
63+
</div>
64+
);
65+
}}
66+
/>
67+
</List>
68+
<Divider />
69+
<List>
70+
<ListItem button onClick={() => { setHomeScreenDialogOpen(true); }}>
71+
<ListItemIcon>
72+
<div className={classes.row}>
73+
<PlusIcon />
74+
<HomeIcon />
75+
</div>
76+
</ListItemIcon>
77+
<ListItemText primary="Add to Home" />
78+
</ListItem>
79+
</List>
80+
<Divider />
3681
<List>
3782
<ListItem button onClick={() => history.push("/")}>
3883
<ListItemIcon>
@@ -50,6 +95,10 @@ function Drawer(props: { todoList: Todo[] }) {
5095
<ListItemText primary="Todo" />
5196
</ListItem>
5297
</List>
98+
<AddToHomescreenDialog
99+
open={homeScreenDialogOpen}
100+
onClose={() => { setHomeScreenDialogOpen(false); }}
101+
/>
53102
</div>
54103
);
55104
}
@@ -146,6 +195,10 @@ const useStyles = makeStyles((theme: Theme) => ({
146195
zIndex: 1,
147196
overflow: "hidden",
148197
},
198+
row: {
199+
display: 'flex',
200+
flexDirection: 'row'
201+
},
149202
appFrame: {
150203
position: "relative",
151204
display: "flex",
@@ -171,6 +224,14 @@ const useStyles = makeStyles((theme: Theme) => ({
171224
height: "100%",
172225
},
173226
},
227+
normal: {
228+
margin: 10,
229+
color: 'green'
230+
},
231+
warning: {
232+
margin: 10,
233+
color: 'orange'
234+
},
174235
content: {
175236
backgroundColor: theme.palette.background.default,
176237
width: "100%",

‎src/components/AddToHomescreenDialog.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// prettier-ignore
2+
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from '@material-ui/core';
3+
import * as React from 'react';
4+
5+
interface Props {
6+
open: boolean;
7+
onClose: () => void;
8+
}
9+
10+
export function AddToHomescreenDialog(props: Props) {
11+
const { open, onClose } = props;
12+
13+
const handleClose = () => {
14+
onClose();
15+
};
16+
return (
17+
<Dialog open={open} onClose={handleClose}>
18+
<DialogTitle>Add to Homescreen</DialogTitle>
19+
<DialogContent>
20+
<Typography>1. On IOS open with Safari</Typography>
21+
<Typography>2. Open Share Dialog</Typography>
22+
<Typography>3. Click Add To Homescreen</Typography>
23+
</DialogContent>
24+
<DialogActions>
25+
<Button color="primary" onClick={handleClose}>
26+
OK
27+
</Button>
28+
</DialogActions>
29+
</Dialog>
30+
);
31+
}

‎src/components/TodoDialog.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
// prettier-ignore
2-
import { Button, Dialog, DialogActions, DialogTitle, TextField } from "@material-ui/core";
3-
import { makeStyles } from "@material-ui/styles";
4-
import * as React from "react";
5-
import { useActions } from "../actions";
6-
import * as TodoActions from "../actions/todo";
2+
import { Button, Dialog, DialogActions, DialogTitle, TextField } from '@material-ui/core';
3+
import { makeStyles } from '@material-ui/styles';
4+
import * as React from 'react';
5+
6+
import { useActions } from '../actions';
7+
import * as TodoActions from '../actions/todo';
78

89
interface Props {
910
open: boolean;

‎src/react-detect-offline.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare module "react-detect-offline";

‎typings/misc.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
declare module 'jss-preset-default';
22
declare module 'react-jss/*';
3+
declare module 'react-detect-offline';

0 commit comments

Comments
 (0)