Commit eeda880e authored by Zhou Fang's avatar Zhou Fang Committed by Martin Lowe
Browse files

improved error handler to handle 499 response

parent fed767b1
......@@ -348,8 +348,6 @@ export async function executeSendDataByStep(
formData,
formId,
userId,
redirectTo,
handleLoginExpired,
goToNextStep,
setFieldValueObj
) {
......@@ -365,8 +363,6 @@ export async function executeSendDataByStep(
formId,
END_POINT.organizations,
matchCompanyFieldsToBackend(formData.organization, formId),
redirectTo,
handleLoginExpired,
goToNextStepObj,
{
fieldName: setFieldValueObj.fieldName.organization,
......@@ -381,8 +377,6 @@ export async function executeSendDataByStep(
CONTACT_TYPE.COMPANY,
formId
),
redirectTo,
handleLoginExpired,
'',
{
fieldName: setFieldValueObj.fieldName.member,
......@@ -397,8 +391,6 @@ export async function executeSendDataByStep(
CONTACT_TYPE.MARKETING,
formId
),
redirectTo,
handleLoginExpired,
'',
{
fieldName: setFieldValueObj.fieldName.marketing,
......@@ -413,8 +405,6 @@ export async function executeSendDataByStep(
CONTACT_TYPE.ACCOUNTING,
formId
),
redirectTo,
handleLoginExpired,
'',
{
fieldName: setFieldValueObj.fieldName.accounting,
......@@ -425,8 +415,6 @@ export async function executeSendDataByStep(
formId,
'',
matchMembershipLevelFieldsToBackend(formData, formId, userId),
redirectTo,
handleLoginExpired,
''
);
break;
......@@ -436,8 +424,6 @@ export async function executeSendDataByStep(
formId,
'',
matchMembershipLevelFieldsToBackend(formData, formId, userId),
redirectTo,
handleLoginExpired,
goToNextStepObj
);
break;
......@@ -448,8 +434,6 @@ export async function executeSendDataByStep(
formId,
END_POINT.working_groups,
matchWGFieldsToBackend(item, formId),
redirectTo,
handleLoginExpired,
goToNextStepObj,
setFieldValueObj,
index
......@@ -466,8 +450,6 @@ export async function executeSendDataByStep(
CONTACT_TYPE.SIGNING,
formId
),
redirectTo,
handleLoginExpired,
goToNextStepObj,
setFieldValueObj
);
......@@ -478,8 +460,6 @@ export async function executeSendDataByStep(
formId,
END_POINT.complete,
false,
redirectTo,
handleLoginExpired,
goToNextStepObj,
setFieldValueObj
);
......@@ -502,8 +482,6 @@ function callSendData(
formId,
endpoint = '',
dataBody,
redirectTo,
handleLoginExpired,
goToNextStepObj,
setFieldValueObj,
index
......@@ -544,8 +522,8 @@ function callSendData(
if (res.ok) return res.json();
}
requestErrorHandler(res.status, redirectTo, handleLoginExpired);
throw new Error(`${res.status} ${res.statusText}`);
requestErrorHandler(res.status);
throw res.status;
})
.then((data) => {
if (setFieldValueObj && method === 'POST') {
......@@ -621,7 +599,7 @@ function callSendData(
console.log(err);
// This will make sure when "then" is skipped, we could still handle the error
// And because this "err" is just an error message without error/status code, so we use 0 here.
requestErrorHandler(0, redirectTo, handleLoginExpired);
requestErrorHandler(err);
});
}
}
......@@ -698,7 +676,12 @@ export function handleNewForm(setCurrentFormId, goToCompanyInfoStep) {
headers: FETCH_HEADER,
body: JSON.stringify(dataBody),
})
.then((res) => res.json())
.then((res) => {
if (res.ok) return res.json();
requestErrorHandler(res.status);
throw res.status;
})
.then((data) => {
console.log('Start with a new form:', data);
setCurrentFormId(data[0]?.id);
......@@ -709,12 +692,9 @@ export function handleNewForm(setCurrentFormId, goToCompanyInfoStep) {
// Probably Also need to delete the old form Id, or keep in the db for 30 days
}
export function requestErrorHandler(
statusCode,
redirectTo,
handleLoginExpired
) {
export function requestErrorHandler(statusCode) {
const origin = window.location.origin;
switch (statusCode) {
case 404:
window.location.assign(origin + '/404');
......@@ -723,8 +703,12 @@ export function requestErrorHandler(
window.location.assign(origin + '/50x');
break;
case 401:
redirectTo('/');
handleLoginExpired();
sessionStorage.setItem('HAS_TOKEN_EXPIREd', 'true');
window.location.assign(origin + '/');
break;
case 499:
sessionStorage.setItem('HAS_TOKEN_EXPIREd', 'true');
window.location.assign(origin + '/');
break;
default:
window.location.assign(origin + '/50x');
......
import { useCallback, useContext, useState } from 'react';
import { useCallback, useContext, useEffect, useState } from 'react';
import { Switch, Route, Redirect, useHistory } from 'react-router-dom';
import { useFormik } from 'formik';
import SignIn from './SignIn/SignIn';
......@@ -55,8 +55,6 @@ export default function Application() {
'',
currentFormId,
currentUser.name,
history.push,
handleLoginExpired,
goToNextStep,
''
);
......@@ -90,7 +88,10 @@ export default function Application() {
const valueForMembershipLevelFormik = [
{ field: 'purchasingAndVAT', value: purchasingAndVAT },
{ field: 'membershipLevel', value: membershipLevel },
{ field: 'membershipLevel-label', value: membershipLevelLabel?.label ? membershipLevelLabel : null},
{
field: 'membershipLevel-label',
value: membershipLevelLabel?.label ? membershipLevelLabel : null,
},
];
// set valueToUpdateFormik to membershipLevel formik to make sure the value is up to date
updateMembershipLevelForm(valueForMembershipLevelFormik);
......@@ -117,8 +118,6 @@ export default function Application() {
theNewValue,
currentFormId,
currentUser.name,
history.push,
handleLoginExpired,
goToNextStep,
setFieldValueObj
);
......@@ -151,8 +150,6 @@ export default function Application() {
values,
currentFormId,
currentUser.name,
history.push,
handleLoginExpired,
goToNextStep
);
},
......@@ -176,8 +173,6 @@ export default function Application() {
values,
currentFormId,
currentUser.name,
history.push,
handleLoginExpired,
goToNextStep,
setFieldValueObj
);
......@@ -217,8 +212,6 @@ export default function Application() {
values,
currentFormId,
currentUser.name,
history.push,
handleLoginExpired,
goToNextStep,
setFieldValueObj
);
......@@ -226,10 +219,21 @@ export default function Application() {
});
const handleLoginExpired = useCallback(() => {
setIsLoginExpired(true);
setTimeout(() => {
setIsLoginExpired(false);
}, 6000);
if (sessionStorage.getItem('HAS_TOKEN_EXPIREd')) {
sessionStorage.setItem('HAS_TOKEN_EXPIREd', '');
// using setTimeout here is to make the pop up message more noticeable
setTimeout(() => {
setIsLoginExpired(true);
}, 200);
setTimeout(() => {
setIsLoginExpired(false);
}, 4000);
}
}, []);
useEffect(() => {
handleLoginExpired();
}, []);
// generate the step options above the form
......@@ -265,7 +269,6 @@ export default function Application() {
setFurthestPage={setFurthestPage}
history={history}
setIsStartNewForm={setIsStartNewForm}
handleLoginExpired={handleLoginExpired}
resetCompanyInfoForm={formikCompanyInfo.resetForm}
resetMembershipLevelForm={formikMembershipLevel.resetForm}
resetWorkingGroupForm={formikWorkingGroups.resetForm}
......@@ -281,8 +284,6 @@ export default function Application() {
<CompanyInformation
formik={formikCompanyInfo}
isStartNewForm={isStartNewForm}
redirectTo={history.push}
handleLoginExpired={handleLoginExpired}
/>
) : (
// if uses are not allowed to visit this page,
......@@ -307,8 +308,6 @@ export default function Application() {
<WorkingGroupsWrapper
formik={formikWorkingGroups}
isStartNewForm={isStartNewForm}
redirectTo={history.push}
handleLoginExpired={handleLoginExpired}
/>
) : (
<Redirect to={furthestPage.pathName} />
......
......@@ -48,12 +48,7 @@ const useStyles = makeStyles(() => ({
let hasOrgData = false;
let hasMembershipLevelData = false;
const CompanyInformation = ({
formik,
isStartNewForm,
redirectTo,
handleLoginExpired,
}) => {
const CompanyInformation = ({ formik, isStartNewForm }) => {
const { currentFormId } = useContext(MembershipContext); // current chosen form id
const [loading, setLoading] = useState(true);
const { setFieldValue } = formik;
......@@ -114,8 +109,8 @@ const CompanyInformation = ({
res.map((r) => {
if (r.ok) return r.json();
requestErrorHandler(r.status, redirectTo, handleLoginExpired);
throw new Error(`${r.status} ${r.statusText}`);
requestErrorHandler(r.status);
throw r.status;
})
)
)
......@@ -174,8 +169,8 @@ const CompanyInformation = ({
.then((res) => {
if (res.ok) return res.json();
requestErrorHandler(res.status, redirectTo, handleLoginExpired);
throw new Error(`${res.status} ${res.statusText}`);
requestErrorHandler(res.status);
throw res.status;
})
.then((data) => {
if (data) {
......@@ -197,8 +192,8 @@ const CompanyInformation = ({
setLoading(false);
})
.catch((err) => {
requestErrorHandler(0, redirectTo, handleLoginExpired);
console.log(err);
requestErrorHandler(err);
});
};
......@@ -212,7 +207,7 @@ const CompanyInformation = ({
if (!hasMembershipLevelData) detectModeAndFetchMembershipLevel();
if (hasOrgData && hasMembershipLevelData) setLoading(false);
}
}, [isStartNewForm, setFieldValue, currentFormId, redirectTo, handleLoginExpired]);
}, [isStartNewForm, setFieldValue, currentFormId]);
// If it is in loading status or hasn't gotten the form id,
// only return a loading spinning
......
......@@ -132,7 +132,6 @@ class SignIn extends React.Component {
setFurthestPage={this.props.setFurthestPage}
history={this.props.history}
setIsStartNewForm={this.props.setIsStartNewForm}
handleLoginExpired={this.props.handleLoginExpired}
resetCompanyInfoForm={this.props.resetCompanyInfoForm}
resetMembershipLevelForm={this.props.resetMembershipLevelForm}
resetWorkingGroupForm={this.props.resetWorkingGroupForm}
......
......@@ -38,12 +38,7 @@ import { FormikProvider } from 'formik';
let hasWGData = false;
const WorkingGroupsWrapper = ({
formik,
isStartNewForm,
redirectTo,
handleLoginExpired,
}) => {
const WorkingGroupsWrapper = ({ formik, isStartNewForm }) => {
const { currentFormId } = useContext(MembershipContext);
const { setFieldValue } = formik;
const [isLoading, setIsLoading] = useState(true);
......@@ -77,8 +72,8 @@ const WorkingGroupsWrapper = ({
.then((res) => {
if (res.ok) return res.json();
requestErrorHandler(res.status, redirectTo, handleLoginExpired);
throw new Error(`${res.status} ${res.statusText}`);
requestErrorHandler(res.status);
throw res.status;
})
.then((data) => {
let options = data.map((item) => ({
......@@ -89,13 +84,13 @@ const WorkingGroupsWrapper = ({
setFullWorkingGroupList(options);
})
.catch((err) => {
requestErrorHandler(0, redirectTo, handleLoginExpired);
requestErrorHandler(err);
console.log(err);
});
};
fetchAvailableFullWorkingGroupList();
}, [redirectTo, handleLoginExpired]);
}, []);
useEffect(() => {
// Fetch the working groups user has joined
......@@ -126,8 +121,8 @@ const WorkingGroupsWrapper = ({
.then((res) => {
if (res.ok) return res.json();
requestErrorHandler(res.status, redirectTo, handleLoginExpired);
throw new Error(`${res.status} ${res.statusText}`);
requestErrorHandler(res.status);
throw res.status;
})
.then((data) => {
if (data.length) {
......@@ -146,7 +141,7 @@ const WorkingGroupsWrapper = ({
setIsLoading(false);
})
.catch((err) => {
requestErrorHandler(0, redirectTo, handleLoginExpired);
requestErrorHandler(err);
console.log(err);
});
};
......@@ -157,14 +152,7 @@ const WorkingGroupsWrapper = ({
} else {
setIsLoading(false);
}
}, [
isStartNewForm,
currentFormId,
fullWorkingGroupList,
setFieldValue,
redirectTo,
handleLoginExpired,
]);
}, [isStartNewForm, currentFormId, fullWorkingGroupList, setFieldValue]);
if (isLoading) {
return <Loading />;
......
......@@ -22,7 +22,6 @@ const FormChooser = ({
setFurthestPage,
history,
setIsStartNewForm,
handleLoginExpired,
resetSigningAuthorityForm,
resetWorkingGroupForm,
resetMembershipLevelForm,
......@@ -68,8 +67,8 @@ const FormChooser = ({
.then((res) => {
if (res.ok) return res.json();
requestErrorHandler(res.status, history.push, handleLoginExpired);
throw new Error(`${res.status} ${res.statusText}`);
requestErrorHandler(res.status);
throw res.status;
})
.then((data) => {
console.log('existing forms: ', data);
......@@ -82,7 +81,7 @@ const FormChooser = ({
}
})
.catch((err) => {
requestErrorHandler(0, history.push, handleLoginExpired);
requestErrorHandler(err);
console.log(err);
});
};
......@@ -90,7 +89,7 @@ const FormChooser = ({
if (hasExistingForm === '') {
fetchExistingForms();
}
}, [goToCompanyInfoStep, setCurrentFormId, hasExistingForm, history.push, handleLoginExpired]);
}, [goToCompanyInfoStep, setCurrentFormId, hasExistingForm]);
return (
<>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment