From 43b6bd079b4bd56f36e745f00a09971ae9a0a204 Mon Sep 17 00:00:00 2001
From: manuconcepbrito <manu041196@gmail.com>
Date: Mon, 25 Oct 2021 09:14:30 +0200
Subject: [PATCH] add reload when creating sessions
---
wahlfang_web/src/App.js | 11 +++---
.../src/pages/management/AddSession.js | 24 +++++-------
.../src/pages/management/ManagerSessions.js | 37 ++++++++++++++++++-
3 files changed, 51 insertions(+), 21 deletions(-)
diff --git a/wahlfang_web/src/App.js b/wahlfang_web/src/App.js
index f90d0a7..d67e6e0 100644
--- a/wahlfang_web/src/App.js
+++ b/wahlfang_web/src/App.js
@@ -5,16 +5,17 @@ import VoteApp from "./pages/VoteApp";
import ManagementApp from "./pages/ManagementApp";
import SpectatorView from "./pages/SpectatorView";
import About from "./pages/About";
-import Help from "./pages/management/Help";
-
+import {createBrowserHistory} from 'history';
+import {RecoilRoot} from 'recoil';
function App() {
const [loading, setLoading] = useState(false);
+ const historyInstance = createBrowserHistory();
return (
- <>
+ <RecoilRoot>
{loading ? <Loading/> : (
- <Router>
+ <Router history={historyInstance}>
<Switch>
<Route exact path="/about">
<About/>
@@ -43,7 +44,7 @@ function App() {
</Switch>
</Router>
)}
- </>
+ </RecoilRoot>
);
}
diff --git a/wahlfang_web/src/pages/management/AddSession.js b/wahlfang_web/src/pages/management/AddSession.js
index 02e392c..8c410f7 100644
--- a/wahlfang_web/src/pages/management/AddSession.js
+++ b/wahlfang_web/src/pages/management/AddSession.js
@@ -5,10 +5,12 @@ import Collapse from 'react-bootstrap/Collapse';
import Button from 'react-bootstrap/Button';
import * as yup from 'yup';
import {createSession} from "../../api/management";
-import {useHistory} from "react-router-dom";
+import {Redirect, useHistory} from "react-router-dom";
import moment from "moment";
import TextField from '@mui/material/TextField';
import BasicDatePicker from "../../components/BasicDatePicker"
+import {useRecoilState} from "recoil";
+import {sessionList} from "../../state/management";
const DATE_FORMAT = 'DD-MM-YYYY HH:mm'
@@ -16,8 +18,12 @@ const DATE_FORMAT = 'DD-MM-YYYY HH:mm'
export default function AddSession() {
const [toggle, setToggle] = useState(false);
const [date, onDateChange] = useState(new Date());
+ const [sessions, setSessions] = useRecoilState(sessionList);
+
+
const history = useHistory();
+
const handleSubmitAddSessionForm = (values, {setSubmitting}) => {
let moment_date = new moment(values.start_date);
// keepOffset must be true, bug info here https://github.com/moment/moment/issues/947
@@ -25,7 +31,9 @@ export default function AddSession() {
createSession(values)
.then(res => {
setSubmitting(false)
- history.push("/management/sessions")
+ window.location.assign('/management/sessions');
+ // TODO: Find out why recoil state is not reloaded when pushing the history
+ // history.push("/management/sessions")
})
.catch(err => {
const err_beauty = JSON.stringify(err, null, 4);
@@ -99,20 +107,8 @@ export default function AddSession() {
error={errors.title && touched.title && errors.title}
helperText={touched.title && errors.title}
/>
- {/*<input type="text"*/}
- {/* className="form-control form-control-user"*/}
- {/* name="title"*/}
- {/* autoFocus={true}*/}
- {/* onChange={handleChange}*/}
- {/* onBlur={handleBlur}*/}
- {/* value={values.title}*/}
- {/* required={true}/>*/}
- {/*{errors.title && touched.title && errors.title}*/}
</div>
<div className="mt-3 form-group">
- {/*<label>Meeting start (optional)</label>*/}
- {/*<Field name="start_date" timeFormat={false} component={FormikDateTime} />*/}
- {/*<BasicDatePicker value={values.start_date}/>*/}
<Field component={BasicDatePicker} name="start_date" onChange={handleChange}/>
</div>
<div className="mt-3 form-group">
diff --git a/wahlfang_web/src/pages/management/ManagerSessions.js b/wahlfang_web/src/pages/management/ManagerSessions.js
index 63ce82c..bd4b726 100644
--- a/wahlfang_web/src/pages/management/ManagerSessions.js
+++ b/wahlfang_web/src/pages/management/ManagerSessions.js
@@ -13,13 +13,29 @@ import { Typography } from '@mui/material';
import { useHistory } from "react-router-dom";
import moment from "moment";
import {deleteSession} from "../../api/management"
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
export default function ManagerSessions() {
+ const [open, setOpen] = React.useState(false);
+ const [index, setIndex] = React.useState(0);
const [sessions, setSessions] = useRecoilState(sessionList);
const history = useHistory();
+ const handleClickOpen = (index) => {
+ setOpen(true);
+ setIndex(index);
+ };
+
+ const handleClose = () => {
+ setOpen(false);
+ };
+
const formatDate = (start_date) => {
return moment(start_date).format("LLLL")
}
@@ -38,6 +54,7 @@ export default function ManagerSessions() {
.catch(err => {
console.log(err)
})
+ handleClose();
}
return (
@@ -48,19 +65,35 @@ export default function ManagerSessions() {
<div className="card shadow">
<div className="card-body">
<h4>My Sessions</h4>
- {sessions.map(session => (
+ {sessions.map((session, index) => (
<Box key={session.id} pb={3} sx={{ width: '100%', bgcolor: 'background.paper', }}>
<List component="nav" aria-label="main mailbox folders">
<ListItemButton>
<ListItemText disableTypography
primary={<Typography type="body2" style={{ color: '#495057' }}>{session.title}</Typography>} />
{session.start_date && <ListItemText sx={{pr: 2}} primary={<Typography align="right" type="overline" style={{ color: '#495057' }}>{formatDate(session.start_date)}</Typography>}/>}
- <Button onClick={() => handleDelete(session.id)} variant="outlined" startIcon={<DeleteIcon />} color="error"> Delete </Button>
+ <Button onClick={() => handleClickOpen(index)} variant="outlined" startIcon={<DeleteIcon />} color="error"> Delete </Button>
</ListItemButton>
</List>
<Divider />
</Box>
))}
+ <Dialog
+ open={open}
+ onClose={handleClose}
+ aria-labelledby="alert-dialog-title"
+ aria-describedby="alert-dialog-description"
+ >
+ <DialogTitle id="alert-dialog-title">
+ {"Are you sure you want to delete this session?"}
+ </DialogTitle>
+ <DialogActions>
+ <Button onClick={handleClose}>Cancel</Button>
+ <Button color="error" onClick={() => handleDelete(sessions[index].id)} autoFocus>
+ Delete
+ </Button>
+ </DialogActions>
+ </Dialog>
<Button onClick={toCreateSession} variant="contained" color="success">Create Session</Button>
</div>
</div>
--
GitLab