evt.preventDefault()}>
{title}
diff --git a/newdle/client/src/components/TopHeader.js b/newdle/client/src/components/TopHeader.js
index a90ab0891..55c11cb95 100644
--- a/newdle/client/src/components/TopHeader.js
+++ b/newdle/client/src/components/TopHeader.js
@@ -1,5 +1,5 @@
import React from 'react';
-import {Route, Switch, Link} from 'react-router-dom';
+import {Route, Routes, Link} from 'react-router-dom';
import {t} from '@lingui/macro';
import {Grid, Header, Image} from 'semantic-ui-react';
import logo from '../images/logo.svg';
@@ -29,13 +29,16 @@ export default function TopHeader() {
-
-
-
-
-
-
-
+
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ {/* avoid warning on pages where we do not have a top header */}
+
+
diff --git a/newdle/client/src/components/UnloadPrompt.js b/newdle/client/src/components/UnloadPrompt.js
index a53994ad6..0cb8d24f2 100644
--- a/newdle/client/src/components/UnloadPrompt.js
+++ b/newdle/client/src/components/UnloadPrompt.js
@@ -1,5 +1,5 @@
import React, {useEffect} from 'react';
-import {Prompt} from 'react-router';
+// import {Prompt} from 'react-router';
import {t} from '@lingui/macro';
import PropTypes from 'prop-types';
@@ -24,7 +24,10 @@ function UnloadPrompt({active, router, message}) {
};
}, [active, message]);
- return router ? : null;
+ // TODO: wait for react-router 6 to bring back support for this...
+ // --> https://github.com/remix-run/react-router/issues/8139
+ // return router ? : null;
+ return null;
}
UnloadPrompt.propTypes = {
diff --git a/newdle/client/src/components/UserMenu.js b/newdle/client/src/components/UserMenu.js
index 3660bbe70..38ab54862 100644
--- a/newdle/client/src/components/UserMenu.js
+++ b/newdle/client/src/components/UserMenu.js
@@ -1,6 +1,6 @@
import React from 'react';
import {useSelector} from 'react-redux';
-import {useHistory} from 'react-router';
+import {useNavigate} from 'react-router';
import {Trans} from '@lingui/macro';
import {Dropdown, Icon} from 'semantic-ui-react';
import {useAuthentication} from '../auth';
@@ -9,7 +9,7 @@ import UserAvatar from './UserAvatar';
import styles from './UserMenu.module.scss';
export default function UserMenu() {
- const history = useHistory();
+ const navigate = useNavigate();
const user = useSelector(getUserInfo);
const {login, logout} = useAuthentication();
const isUserLoggedIn = useSelector(isLoggedIn);
@@ -33,7 +33,7 @@ export default function UserMenu() {
href="/mine"
onClick={evt => {
evt.preventDefault();
- history.push('/mine');
+ navigate('/mine');
}}
>
My newdles
@@ -42,7 +42,7 @@ export default function UserMenu() {
href="/participating"
onClick={evt => {
evt.preventDefault();
- history.push('/participating');
+ navigate('/participating');
}}
>
Newdles I'm in
diff --git a/newdle/client/src/components/answer/AnswerHeader.js b/newdle/client/src/components/answer/AnswerHeader.js
index 60f984f17..140e2cdfc 100644
--- a/newdle/client/src/components/answer/AnswerHeader.js
+++ b/newdle/client/src/components/answer/AnswerHeader.js
@@ -1,13 +1,13 @@
import React, {useEffect} from 'react';
import {useDispatch, useSelector} from 'react-redux';
-import PropTypes from 'prop-types';
+import {useParams} from 'react-router';
import {getUserInfo} from 'src/selectors';
import {abortAnswering, fetchNewdleForAnswer, clearNewdle, fetchNewdle} from '../../actions';
import {getNewdle} from '../../answerSelectors';
import NewdleTitle from '../NewdleTitle';
-export default function AnswerHeader({match}) {
- const code = match.params.code;
+export default function AnswerHeader() {
+ const {code} = useParams();
const newdle = useSelector(getNewdle);
const user = useSelector(getUserInfo) || {};
const dispatch = useDispatch();
@@ -50,11 +50,3 @@ export default function AnswerHeader({match}) {
/>
);
}
-
-AnswerHeader.propTypes = {
- match: PropTypes.shape({
- params: PropTypes.shape({
- code: PropTypes.string.isRequired,
- }).isRequired,
- }).isRequired,
-};
diff --git a/newdle/client/src/components/answer/AnswerPage.js b/newdle/client/src/components/answer/AnswerPage.js
index 865121d3c..87cb9ebdb 100644
--- a/newdle/client/src/components/answer/AnswerPage.js
+++ b/newdle/client/src/components/answer/AnswerPage.js
@@ -1,6 +1,6 @@
import React, {useEffect, useState} from 'react';
import {useDispatch, useSelector} from 'react-redux';
-import {useHistory} from 'react-router';
+import {useNavigate} from 'react-router';
import {useParams} from 'react-router-dom';
import {Trans, Plural, t} from '@lingui/macro';
import PropTypes from 'prop-types';
@@ -151,7 +151,7 @@ export default function AnswerPage() {
const allAvailableDisabled = useSelector(isAllAvailableSelectedImplicitly);
const dates = useSelector(getCalendarDates);
const [name, setName] = useState('');
- const history = useHistory();
+ const navigate = useNavigate();
const user = useSelector(getUserInfo);
const isCreator = user !== null && newdle !== null && user.uid === newdle.creator_uid;
const participantAnswers = useSelector(getParticipantAnswers);
@@ -185,7 +185,7 @@ export default function AnswerPage() {
if (!participantCode) {
// replace history entry if we are logged in (as going back would instantly redirect
// you back to your participant); otherwise push it
- history[user ? 'replace' : 'push'](`/newdle/${newdle.code}/${result.code}`);
+ navigate(`/newdle/${newdle.code}/${result.code}`, {replace: !!user});
}
return result;
},
@@ -217,9 +217,9 @@ export default function AnswerPage() {
useEffect(() => {
if (newdle && user && !participantCode && participant) {
- history.replace(`/newdle/${newdle.code}/${participant.code}`);
+ navigate(`/newdle/${newdle.code}/${participant.code}`, {replace: true});
}
- }, [newdle, user, participant, history, participantCode]);
+ }, [newdle, user, participant, navigate, participantCode]);
useEffect(() => {
if ((participantCode && !participantUnknown) || (!participantCode && user)) {
diff --git a/newdle/client/src/components/creation/ClonePage.js b/newdle/client/src/components/creation/ClonePage.js
index d8c3c1c43..1fad3c4dc 100644
--- a/newdle/client/src/components/creation/ClonePage.js
+++ b/newdle/client/src/components/creation/ClonePage.js
@@ -1,8 +1,8 @@
import 'moment-timezone';
import React, {useState} from 'react';
import {useSelector} from 'react-redux';
-import {useHistory} from 'react-router';
-import {Redirect} from 'react-router-dom';
+import {useNavigate} from 'react-router';
+import {Navigate} from 'react-router-dom';
import {t, Trans} from '@lingui/macro';
import _ from 'lodash';
import moment from 'moment';
@@ -25,7 +25,7 @@ import styles from './creation.module.scss';
export default function ClonePage() {
const isUserLoggedIn = useSelector(isLoggedIn);
const newdle = useSelector(getCreatedNewdle);
- const history = useHistory();
+ const navigate = useNavigate();
const [keepSettings, setKeepSettings] = useState(true);
const [keepParticipants, setKeepParticipants] = useState(true);
const [keepTimeslots, setKeepTimeslots] = useState(true);
@@ -34,7 +34,7 @@ export default function ClonePage() {
usePageTitle(t`Clone newdle`);
if (!isUserLoggedIn) {
- return ;
+ return ;
}
if (!newdle) {
return ;
@@ -44,7 +44,7 @@ export default function ClonePage() {
function cloneNewdle() {
const dayOffset = getDayOffset(newdle.timeslots, newdle.timezone, option, startDate);
- history.push({
+ navigate({
pathname: `/new`,
state: {
cloneData: {
diff --git a/newdle/client/src/components/creation/CreationPage.js b/newdle/client/src/components/creation/CreationPage.js
index b5bcb7343..b5b208cd2 100644
--- a/newdle/client/src/components/creation/CreationPage.js
+++ b/newdle/client/src/components/creation/CreationPage.js
@@ -1,6 +1,6 @@
import React, {useEffect} from 'react';
import {useDispatch, useSelector} from 'react-redux';
-import {Redirect, useLocation} from 'react-router-dom';
+import {Navigate, useLocation} from 'react-router-dom';
import {t} from '@lingui/macro';
import {
abortCreation,
@@ -62,7 +62,7 @@ export default function CreationPage() {
}, [dispatch, location.state]);
if (!isUserLoggedIn) {
- return ;
+ return ;
}
return (
diff --git a/newdle/client/src/components/creation/CreationSuccessPage.js b/newdle/client/src/components/creation/CreationSuccessPage.js
index 5b9a8ff1a..903904ea6 100644
--- a/newdle/client/src/components/creation/CreationSuccessPage.js
+++ b/newdle/client/src/components/creation/CreationSuccessPage.js
@@ -1,7 +1,7 @@
import React from 'react';
import {useSelector} from 'react-redux';
-import {useHistory} from 'react-router';
-import {Redirect} from 'react-router-dom';
+import {useNavigate} from 'react-router';
+import {Navigate} from 'react-router-dom';
import {Trans, t} from '@lingui/macro';
import {Button, Container, Header, Input, Popup} from 'semantic-ui-react';
import {getCreatedNewdle} from '../../selectors';
@@ -10,15 +10,15 @@ import styles from './CreationSuccessPage.module.scss';
export default function CreationSuccessPage() {
const newdle = useSelector(getCreatedNewdle);
- const history = useHistory();
+ const navigate = useNavigate();
usePageTitle(t`Newdle created`);
if (!newdle) {
- return ;
+ return ;
}
const handleSummaryClick = () => {
- history.push(`/newdle/${newdle.code}/summary`);
+ navigate(`/newdle/${newdle.code}/summary`);
};
return (
diff --git a/newdle/client/src/components/creation/EditPage.js b/newdle/client/src/components/creation/EditPage.js
index d4c006808..b4de66c9e 100644
--- a/newdle/client/src/components/creation/EditPage.js
+++ b/newdle/client/src/components/creation/EditPage.js
@@ -1,6 +1,6 @@
import React, {useEffect} from 'react';
import {useDispatch, useSelector} from 'react-redux';
-import {Redirect, Route, Switch, useParams} from 'react-router-dom';
+import {Navigate, Route, Routes, useParams} from 'react-router-dom';
import {t} from '@lingui/macro';
import {Loader} from 'semantic-ui-react';
import {fetchNewdle} from '../../actions';
@@ -24,22 +24,18 @@ export default function EditPage() {
}, [dispatch, newdle, newdleCode]);
if (!isUserLoggedIn) {
- return ;
+ return ;
}
if (!newdle) {
return ;
}
return (
-
-
- } />
- }
- />
- } />
-
+
+ } />
+ } />
+ } />
+ } />
+
);
}
diff --git a/newdle/client/src/components/creation/FinalStep.js b/newdle/client/src/components/creation/FinalStep.js
index e8127f3fb..8c23c5e52 100644
--- a/newdle/client/src/components/creation/FinalStep.js
+++ b/newdle/client/src/components/creation/FinalStep.js
@@ -1,6 +1,6 @@
import React, {useState} from 'react';
import {useDispatch, useSelector} from 'react-redux';
-import {useHistory} from 'react-router';
+import {useNavigate} from 'react-router';
import {t, Trans} from '@lingui/macro';
import PropTypes from 'prop-types';
import {Button, Container, Header, Icon, Input, Checkbox} from 'semantic-ui-react';
@@ -39,7 +39,7 @@ export default function FinalStep({isEditing}) {
const timezone = useSelector(getTimezone);
const activeNewdle = useSelector(getCreatedNewdle);
const dispatch = useDispatch();
- const history = useHistory();
+ const navigate = useNavigate();
const [_createNewdle, createSubmitting] = client.useBackendLazy(client.createNewdle);
const [_editNewdle, editSubmitting] = client.useBackendLazy(client.updateNewdle);
const [showAdvancedOptions, setShowAdvancedOptions] = useState(isEditing);
@@ -62,7 +62,7 @@ export default function FinalStep({isEditing}) {
if (newdle) {
dispatch(newdleCreated(newdle));
- history.push('/new/success');
+ navigate('/new/success');
}
}
@@ -71,7 +71,7 @@ export default function FinalStep({isEditing}) {
if (newdle) {
dispatch(updateNewdle(newdle));
- history.push(`/newdle/${newdle.code}/summary`);
+ navigate(`/newdle/${newdle.code}/summary`);
}
}
diff --git a/newdle/client/src/components/creation/ParticipantsStep.js b/newdle/client/src/components/creation/ParticipantsStep.js
index 3189041a1..0ea6665e0 100644
--- a/newdle/client/src/components/creation/ParticipantsStep.js
+++ b/newdle/client/src/components/creation/ParticipantsStep.js
@@ -1,6 +1,6 @@
import React from 'react';
import {useDispatch, useSelector} from 'react-redux';
-import {useHistory} from 'react-router';
+import {useNavigate} from 'react-router';
import {t, Trans} from '@lingui/macro';
import PropTypes from 'prop-types';
import {Button, Container, Icon, Message} from 'semantic-ui-react';
@@ -16,7 +16,7 @@ export default function ParticipantsStep({isEditing, isCloning}) {
const participantsDefined = useSelector(areParticipantsDefined);
const participants = useSelector(getParticipants);
const activeNewdle = useSelector(getCreatedNewdle);
- const history = useHistory();
+ const navigate = useNavigate();
const [_editNewdle, submitting] = client.useBackendLazy(client.updateNewdle);
async function editNewdle() {
@@ -25,7 +25,7 @@ export default function ParticipantsStep({isEditing, isCloning}) {
if (newdle) {
dispatch(clearParticipantCodes(newdle.code));
dispatch(updateNewdle(newdle));
- history.push(`/newdle/${newdle.code}/summary`);
+ navigate(`/newdle/${newdle.code}/summary`);
}
}
diff --git a/newdle/client/src/components/creation/timeslots/TimeslotsStep.js b/newdle/client/src/components/creation/timeslots/TimeslotsStep.js
index de25c7ff9..45fa4c2eb 100644
--- a/newdle/client/src/components/creation/timeslots/TimeslotsStep.js
+++ b/newdle/client/src/components/creation/timeslots/TimeslotsStep.js
@@ -1,6 +1,6 @@
import React from 'react';
import {useDispatch, useSelector} from 'react-redux';
-import {useHistory} from 'react-router';
+import {useNavigate} from 'react-router';
import {Trans, Plural} from '@lingui/macro';
import _ from 'lodash';
import PropTypes from 'prop-types';
@@ -46,7 +46,7 @@ export default function TimeslotsStep({isEditing}) {
const duration = useSelector(getDuration);
const timezone = useSelector(getTimezone);
const activeNewdle = useSelector(getCreatedNewdle);
- const history = useHistory();
+ const navigate = useNavigate();
const [_editNewdle, submitting] = client.useBackendLazy(client.updateNewdle);
async function editNewdle() {
@@ -54,7 +54,7 @@ export default function TimeslotsStep({isEditing}) {
if (newdle) {
dispatch(updateNewdle(newdle));
- history.push(`/newdle/${newdle.code}/summary`);
+ navigate(`/newdle/${newdle.code}/summary`);
}
}
diff --git a/newdle/client/src/components/home/HomePage.js b/newdle/client/src/components/home/HomePage.js
index e4abe6996..91bfb3283 100644
--- a/newdle/client/src/components/home/HomePage.js
+++ b/newdle/client/src/components/home/HomePage.js
@@ -1,5 +1,5 @@
import React from 'react';
-import {useHistory} from 'react-router';
+import {useNavigate} from 'react-router';
import {Trans} from '@lingui/macro';
import {Icon} from 'semantic-ui-react';
import {Button} from 'semantic-ui-react';
@@ -10,7 +10,7 @@ import LoginRequired from '../login/LoginRequired';
import styles from './HomePage.module.scss';
export default function HomePage() {
- const history = useHistory();
+ const navigate = useNavigate();
return (
@@ -48,7 +48,7 @@ export default function HomePage() {
labelPosition="right"
size="big"
onClick={() => {
- history.push('/new');
+ navigate('/new');
}}
>
Get started
diff --git a/newdle/client/src/components/login/LoginPrompt.js b/newdle/client/src/components/login/LoginPrompt.js
index b0be10073..ebdfbefdd 100644
--- a/newdle/client/src/components/login/LoginPrompt.js
+++ b/newdle/client/src/components/login/LoginPrompt.js
@@ -1,6 +1,6 @@
import React from 'react';
import {useDispatch, useSelector} from 'react-redux';
-import {useHistory} from 'react-router';
+import {useNavigate} from 'react-router';
import {t} from '@lingui/macro';
import {Modal} from 'semantic-ui-react';
import {loginPromptAborted} from '../../actions';
@@ -11,7 +11,7 @@ export default function LoginPrompt() {
const acquiringToken = useSelector(isAcquiringToken);
const loggedIn = useSelector(isLoggedIn);
const {login, logout} = useAuthentication();
- const history = useHistory();
+ const navigate = useNavigate();
const dispatch = useDispatch();
if (!acquiringToken) {
@@ -44,7 +44,7 @@ export default function LoginPrompt() {
key: 'cancel',
content: t`Cancel`,
onClick: () => {
- history.push('/');
+ navigate('/');
dispatch(loginPromptAborted());
},
},
diff --git a/newdle/client/src/components/summary/SummaryHeader.js b/newdle/client/src/components/summary/SummaryHeader.js
index 29f12cb00..eb5a23467 100644
--- a/newdle/client/src/components/summary/SummaryHeader.js
+++ b/newdle/client/src/components/summary/SummaryHeader.js
@@ -1,12 +1,12 @@
import React, {useEffect} from 'react';
import {useDispatch, useSelector} from 'react-redux';
-import PropTypes from 'prop-types';
+import {useParams} from 'react-router';
import {clearNewdle, fetchNewdle} from '../../actions';
import {getNewdle} from '../../selectors';
import NewdleTitle from '../NewdleTitle';
-export default function SummaryHeader({match}) {
- const code = match.params.code;
+export default function SummaryHeader() {
+ const {code} = useParams();
const newdle = useSelector(getNewdle);
const dispatch = useDispatch();
@@ -36,11 +36,3 @@ export default function SummaryHeader({match}) {
/>
);
}
-
-SummaryHeader.propTypes = {
- match: PropTypes.shape({
- params: PropTypes.shape({
- code: PropTypes.string.isRequired,
- }).isRequired,
- }).isRequired,
-};
diff --git a/newdle/client/src/locales/es/messages.po b/newdle/client/src/locales/es/messages.po
index 51ab1d723..79c9016ab 100644
--- a/newdle/client/src/locales/es/messages.po
+++ b/newdle/client/src/locales/es/messages.po
@@ -197,7 +197,7 @@ msgstr ""
msgid "Email address"
msgstr ""
-#: src/components/ErrorMessage.js:30
+#: src/components/ErrorMessage.js:31
msgid "Error occurred"
msgstr ""