Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9bf1ae3

Browse files
author
Emile Frey
committed
adds a context level dialog/modal
1 parent 861eee3 commit 9bf1ae3

File tree

6 files changed

+91
-8
lines changed

6 files changed

+91
-8
lines changed

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@ The server should be available at `http://127.0.0.1/`. This mode will not hot re
5353

5454
### Alerts:
5555
- An alert setter at the context level is also included. An example of TriggerAlert is shown in Home.tsx (variants displayed after successful/failed submit). See AlertContext.tsx for typings.
56+
-
57+
### Modal/Dialog:
58+
- Similar to the alert setter, a context level modal/dialog is also provided. Use OpenDialog (basic example shown in Home.tsx) to open and set the modal title/contents/footer.
5659

5760
### Customization:
5861
- The app name (shown at login & header) is set by the constant APP_NAME in frontend/src/settings.tsx.
@@ -75,8 +78,8 @@ The server should be available at `http://127.0.0.1/`. This mode will not hot re
7578
- [x] forgot password functionality (email)
7679
- [x] Add support for nested sub-routes off the main left-nav routes
7780
- [x] Ensure match params (i.e. /user/profile/1/) work correctly.
81+
- [x] Context level modal?
7882
- [ ] Reset session timeout with activity.
79-
- [ ] Context level modal?
8083
- [ ] Swagger API Explorer
8184
- [ ] Backend Testing
8285
- [ ] Frontend Testing (React Testing Library)

‎frontend/src/App.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@ import Layout from './components/Layout/Layout';
44
import { connect } from 'react-redux';
55
import * as actions from './auth/authActions';
66
import { PrivateRouteProps } from './routes/PrivateRoute';
7-
import { Snackbar, ThemeProvider } from '@material-ui/core';
7+
import { Dialog,DialogActions,DialogContent,DialogTitle,Snackbar, ThemeProvider } from '@material-ui/core';
88
import { theme } from './Theme'
99
import { AlertContext } from './contexts/AlertContext';
1010
import Alert from '@material-ui/lab/Alert';
1111
import { AxiosError } from './interfaces/axios/AxiosError'
1212
import { ThemeContext } from './contexts/ThemeContext';
1313
import { useLocation } from "react-router-dom";
14+
import { DialogContext } from './contexts/DialogContext';
1415

1516

1617
type Error = {
@@ -32,6 +33,7 @@ export interface AppProps extends AuthProps, PrivateRouteProps { }
3233
function App(props: AppProps) {
3334

3435
const { alertType, openAlert, alertMessage, handleAlertClose } = useContext(AlertContext);
36+
const { showDialog, dialogTitle, dialogBody, dialogActions, handleDialogClose } = useContext(DialogContext);
3537
const { darkMode } = useContext(ThemeContext);
3638
const palletType = darkMode ? "dark" : "light"
3739
const location = useLocation().pathname
@@ -55,6 +57,15 @@ function App(props: AppProps) {
5557
{alertMessage}
5658
</Alert>
5759
</Snackbar>
60+
<Dialog maxWidth="md" fullWidth open={showDialog} onClose={handleDialogClose} aria-labelledby="alert-dialog-title">
61+
<DialogTitle id="alert-dialog-title">{dialogTitle}</DialogTitle>
62+
<DialogContent>
63+
{dialogBody}
64+
</DialogContent>
65+
<DialogActions>
66+
{dialogActions}
67+
</DialogActions>
68+
</Dialog>
5869
</ThemeProvider>
5970
</div>
6071
);

‎frontend/src/components/Home.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ import * as settings from '../settings';
44

55
import CssBaseline from '@material-ui/core/CssBaseline';
66
import { makeStyles } from '@material-ui/core/styles';
7-
import { Container, Grid, Paper, Typography, Button, TextField, Tooltip, Switch, createStyles, Theme, withStyles, SwitchProps, SwitchClassKey } from '@material-ui/core';
7+
import { Container, Grid, Paper, Typography, Button, TextField, Tooltip, Switch, createStyles, Theme, withStyles, SwitchProps, SwitchClassKey,DialogContentText } from '@material-ui/core';
88
import { AppProps } from '../App';
99
import { AlertContext } from '../contexts/AlertContext';
10+
import { DialogContext } from '../contexts/DialogContext';
1011

1112
const useStyles = makeStyles((theme) => ({
1213
container: {
@@ -111,6 +112,7 @@ function Home(props: AppProps) {
111112
const [token, setToken] = useState(props.token)
112113
const userInput = useRef<HTMLInputElement>(null)
113114
const { TriggerAlert } = useContext(AlertContext)
115+
const { OpenDialog } = useContext(DialogContext)
114116
const classes = useStyles()
115117

116118
const handleSubmit = (event: any) => {
@@ -206,6 +208,13 @@ function Home(props: AppProps) {
206208
<Button variant="contained" color="primary" onClick={() => props.history.push(`${props.location.pathname}/nestedsubroute/${userInput.current?.value}`)} >
207209
Submit
208210
</Button>
211+
<Typography variant="subtitle2" style={{ marginTop: 20 }}>
212+
Demo Dialog: <span>&nbsp;</span>
213+
</Typography>
214+
<Button variant="contained" color="primary"
215+
onClick={() => OpenDialog("Test Title", <DialogContentText>This is an example of a dialog body. Put whatever you want here.</DialogContentText>)} >
216+
Open Dialog
217+
</Button>
209218
</Paper>
210219
</Grid>
211220
</Grid>

‎frontend/src/contexts/AlertContext.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const AlertContextProvider = (props: any) => {
2323
const [alertType, setAlertType] = useState<Color>('error');
2424

2525
const TriggerAlert = (message: string, severity: Color = 'info') => {
26+
setOpenAlert(false);
2627
setAlertMessage(message);
2728
setAlertType(severity);
2829
setOpenAlert(true);
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React, { createContext, useState } from 'react';
2+
import Button from '@material-ui/core/Button';
3+
4+
export type DialogContextProps = {
5+
OpenDialog: (title: string, body: JSX.Element, actions?: any) => void,
6+
showDialog: boolean,
7+
dialogTitle: string,
8+
dialogBody: JSX.Element,
9+
dialogActions: JSX.Element,
10+
handleDialogClose: ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void) | undefined
11+
};
12+
13+
export const DialogContext = createContext<DialogContextProps>({
14+
OpenDialog: () => { },
15+
showDialog: false,
16+
dialogTitle: '',
17+
dialogBody: <></>,
18+
dialogActions: <></>,
19+
handleDialogClose: () => { }
20+
});
21+
22+
const DialogContextProvider = (props: any) => {
23+
const [showDialog, setShowDialog] = useState(false);
24+
const [dialogTitle, setDialogTitle] = useState('');
25+
const [dialogBody, setDialogBody] = useState(<></>);
26+
const [dialogActions, setDialogActions] = useState(<></>);
27+
28+
const OpenDialog = (title: string, body: JSX.Element, actions: any = undefined) => {
29+
setDialogTitle(title);
30+
setDialogBody(body);
31+
if (actions)
32+
setDialogActions(actions);
33+
else
34+
setDialogActions(<Button onClick={() => setShowDialog(false)} variant="contained">Close Dialog</Button>)
35+
setShowDialog(true)
36+
}
37+
38+
const handleDialogClose = (event: {}, reason: "backdropClick" | "escapeKeyDown") => {
39+
setShowDialog(false);
40+
};
41+
42+
return (
43+
<DialogContext.Provider value={{
44+
showDialog,
45+
dialogTitle,
46+
dialogBody,
47+
dialogActions,
48+
handleDialogClose,
49+
OpenDialog
50+
}}>
51+
{props.children}
52+
</DialogContext.Provider>
53+
)
54+
}
55+
56+
export default DialogContextProvider;

‎frontend/src/index.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import thunk from 'redux-thunk';
99
import authReducer from './auth/authReducer';
1010
import AlertContextProvider from './contexts/AlertContext'
1111
import ThemeContextProvider from './contexts/ThemeContext'
12+
import DialogContextProvider from './contexts/DialogContext'
1213
import { BrowserRouter } from 'react-router-dom';
1314

1415
const reducer = combineReducers({ auth: authReducer }); // Using Combine Reducers here although only one reducer is present.
@@ -22,11 +23,13 @@ ReactDOM.render(
2223
<React.StrictMode>
2324
<Provider store={store}>
2425
<AlertContextProvider>
25-
<ThemeContextProvider>
26-
<BrowserRouter>
27-
<App />
28-
</BrowserRouter>
29-
</ThemeContextProvider>
26+
<DialogContextProvider>
27+
<ThemeContextProvider>
28+
<BrowserRouter>
29+
<App />
30+
</BrowserRouter>
31+
</ThemeContextProvider>
32+
</DialogContextProvider>
3033
</AlertContextProvider>
3134
</Provider>
3235
</React.StrictMode>,

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /