Added route constants (#315)

* Added route constants

* made all route URLs use constants

* Added sign in

src/main/www/src/App.js

@@ -8,6 +8,7 @@ import Application from './components/Application/Application';
 import Portal from './components/Portal/Portal';
 import NotFound404 from './components/ErrorPages/NotFound404';
 import InternalError50x from './components/ErrorPages/InternalError50x';
+import { ROUTE_SIGN_IN } from './Constants/Constants';
 
 const theme = createMuiTheme({
   palette: {
@@ -23,7 +24,7 @@ const App = () => {
   const [currentFormId, setCurrentFormId] = useState('');
   const [furthestPage, setFurthestPage] = useState({
     index: 0,
-    pathName: '/sign-in',
+    pathName: ROUTE_SIGN_IN,
   });
   const [needLoadingSignIn, setNeedLoadingSignIn] = useState(true);
   const [currentStepIndex, setCurrentStepIndex] = useState(0);

src/main/www/src/Constants/Constants.js

@@ -34,14 +34,13 @@ export const HAS_TOKEN_EXPIRED = 'HAS_TOKEN_EXPIRED';
 export const LOGIN_EXPIRED_MSG = 'Your session has expired, please sign in again.';
 export const MAX_LENGTH_HELPER_TEXT = 'The value exceeds max length 255 characters';
 
-export const PATH_NAME_ARRAY = [
-  '/company-info',
-  '/membership-level',
-  '/working-groups',
-  '/signing-authority',
-  '/review',
-  '/submitted',
-];
+export const ROUTE_SIGN_IN = '/sign-in';
+export const ROUTE_COMPANY = '/company-info';
+export const ROUTE_MEMBERSHIP = '/membership-level';
+export const ROUTE_WGS = '/working-groups';
+export const ROUTE_SIGNING = '/signing-authority';
+export const ROUTE_REVIEW = '/review';
+export const ROUTE_SUBMITTED = '/submitted';
 
 export const FETCH_METHOD = {
   POST: 'POST',
@@ -66,12 +65,12 @@ export const MEMBERSHIP_LEVELS = [
 ];
 
 export const PAGE_STEP = [
-  { label: SIGN_IN, pathName: '/sign-in' },
-  { label: COMPANY_INFORMATION, pathName: '/company-info' },
-  { label: MEMBERSHIP_LEVEL, pathName: '/membership-level' },
-  { label: WORKING_GROUPS, pathName: '/working-groups' },
-  { label: SIGNING_AUTHORITY, pathName: '/signing-authority' },
-  { label: REVIEW, pathName: '/review' },
+  { label: SIGN_IN, pathName: ROUTE_SIGN_IN },
+  { label: COMPANY_INFORMATION, pathName: ROUTE_COMPANY },
+  { label: MEMBERSHIP_LEVEL, pathName: ROUTE_MEMBERSHIP },
+  { label: WORKING_GROUPS, pathName: ROUTE_WGS },
+  { label: SIGNING_AUTHORITY, pathName: ROUTE_SIGNING },
+  { label: REVIEW, pathName: ROUTE_REVIEW },
 ];
 
 export const CONTACT_TYPE = {

src/main/www/src/components/Application/Application.js

@@ -2,7 +2,7 @@ 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';
-import { HAS_TOKEN_EXPIRED, LOGIN_EXPIRED_MSG, PAGE_STEP } from '../../Constants/Constants';
+import { HAS_TOKEN_EXPIRED, LOGIN_EXPIRED_MSG, PAGE_STEP, ROUTE_COMPANY, ROUTE_MEMBERSHIP, ROUTE_REVIEW, ROUTE_SIGNING, ROUTE_SUBMITTED, ROUTE_WGS } from '../../Constants/Constants';
 import { initialValues } from '../UIComponents/FormComponents/formFieldModel';
 import CompanyInformation from './CompanyInformation/CompanyInformation';
 import MembershipLevel from './MembershipLevel/MembershipLevel';
@@ -52,7 +52,7 @@ export default function Application() {
 
   const submitForm = () => {
     executeSendDataByStep(5, '', currentFormId, currentUser.name, '');
-    goToNextStep(5, '/submitted');
+    goToNextStep(5, ROUTE_SUBMITTED);
   };
 
   const submitCompanyInfo = () => {
@@ -124,7 +124,7 @@ export default function Application() {
     validationSchema: validationSchema[0],
     onSubmit: () => {
       submitCompanyInfo();
-      goToNextStep(1, '/membership-level');
+      goToNextStep(1, ROUTE_MEMBERSHIP);
     },
   });
 
@@ -153,7 +153,7 @@ export default function Application() {
     validationSchema: validationSchema[1],
     onSubmit: () => {
       submitMembershipLevel();
-      goToNextStep(2, '/working-groups');
+      goToNextStep(2, ROUTE_WGS);
     },
   });
 
@@ -186,7 +186,7 @@ export default function Application() {
     validationSchema: validationSchema[2],
     onSubmit: () => {
       submitWorkingGroups();
-      goToNextStep(3, '/signing-authority');
+      goToNextStep(3, ROUTE_SIGNING);
     },
   });
 
@@ -227,7 +227,7 @@ export default function Application() {
     validationSchema: validationSchema[3],
     onSubmit: () => {
       submitSigningAuthority();
-      goToNextStep(4, '/review');
+      goToNextStep(4, ROUTE_REVIEW);
     },
   });
 
@@ -303,7 +303,7 @@ export default function Application() {
           />
         </Route>
 
-        <Route path="/company-info">
+        <Route path={ROUTE_COMPANY}>
           {renderStepper()}
           {
             // stop users visiting steps/pages that are not able to edit yet
@@ -326,7 +326,7 @@ export default function Application() {
           }
         </Route>
 
-        <Route path="/membership-level">
+        <Route path={ROUTE_MEMBERSHIP}>
           {renderStepper()}
           {furthestPage.index >= 2 ? (
             <MembershipLevel
@@ -338,7 +338,7 @@ export default function Application() {
           )}
         </Route>
 
-        <Route path="/working-groups">
+        <Route path={ROUTE_WGS}>
           {renderStepper()}
           {furthestPage.index >= 3 ? (
             <WorkingGroupsWrapper
@@ -355,7 +355,7 @@ export default function Application() {
           )}
         </Route>
 
-        <Route path="/signing-authority">
+        <Route path={ROUTE_SIGNING}>
           {renderStepper()}
           {furthestPage.index >= 4 ? (
             <SigningAuthority
@@ -368,7 +368,7 @@ export default function Application() {
           )}
         </Route>
 
-        <Route path="/review">
+        <Route path={ROUTE_REVIEW}>
           {renderStepper()}
           {furthestPage.index >= 5 ? (
             <Review
@@ -382,7 +382,7 @@ export default function Application() {
           )}
         </Route>
 
-        <Route path="/submitted">
+        <Route path={ROUTE_SUBMITTED}>
           {furthestPage.index >= 6 ? <SubmitSuccess /> : <Redirect to={furthestPage.pathName} />}
         </Route>
 

src/main/www/src/components/Application/CompanyInformation/CompanyInformation.js

@@ -17,6 +17,7 @@ import {
   getCurrentMode,
   MODE_REACT_ONLY,
   MODE_REACT_API,
+  ROUTE_MEMBERSHIP,
 } from '../../../Constants/Constants';
 import CustomStepButton from '../../UIComponents/Button/CustomStepButton';
 import CompanyInformationVAT from './CompanyInformationVAT';
@@ -243,7 +244,7 @@ const CompanyInformation = ({
         <CompanyInformationVAT formik={formik} />
       </div>
 
-      <CustomStepButton previousPage="" nextPage="/membership-level" />
+      <CustomStepButton previousPage="" nextPage={ROUTE_MEMBERSHIP} />
     </form>
   );
 };

src/main/www/src/components/Application/MembershipLevel/MembershipLevel.js

@@ -3,7 +3,7 @@ import CustomStepButton from '../../UIComponents/Button/CustomStepButton';
 import { formField } from '../../UIComponents/FormComponents/formFieldModel';
 import { useContext, useEffect } from 'react';
 import { isObjectEmpty, scrollToTop } from '../../../Utils/formFunctionHelpers';
-import { MEMBERSHIP_LEVELS } from '../../../Constants/Constants';
+import { MEMBERSHIP_LEVELS, ROUTE_COMPANY, ROUTE_WGS } from '../../../Constants/Constants';
 import DropdownMenu from '../../UIComponents/Inputs/DropdownMenu';
 import MembershipContext from '../../../Context/MembershipContext';
 
@@ -56,8 +56,8 @@ const MembershipLevel = ({ formik, updatedFormValues }) => {
       </div>
 
       <CustomStepButton
-        previousPage="/company-info"
-        nextPage="/working-groups"
+        previousPage={ROUTE_COMPANY}
+        nextPage={ROUTE_WGS}
         checkIsEmpty={() => isObjectEmpty(formik.values.membershipLevel)}
         formik={formik}
         updatedFormValues={updatedFormValues}

src/main/www/src/components/Application/Review/Review.tsx

@@ -3,7 +3,7 @@ import CustomStepButton from '../../UIComponents/Button/CustomStepButton';
 import { FormValue } from '../../../Interfaces/form_interface';
 import { scrollToTop } from '../../../Utils/formFunctionHelpers';
 import { FormControlLabel, Checkbox } from '@material-ui/core';
-import { OPTIONS_FOR_ORG_TYPE, OPTIONS_FOR_PURCHASING_PROCESS } from '../../../Constants/Constants';
+import { OPTIONS_FOR_ORG_TYPE, OPTIONS_FOR_PURCHASING_PROCESS, ROUTE_SIGNING, ROUTE_SUBMITTED } from '../../../Constants/Constants';
 import ReadOnlyInput from '../../UIComponents/Inputs/ReadOnlyInput';
 import { formField } from '../../UIComponents/FormComponents/formFieldModel';
 import MembershipContext from '../../../Context/MembershipContext';
@@ -396,8 +396,8 @@ const Review: React.FC<ReviewProps> = ({ values, submitForm, isTermChecked, setI
       />
 
       <CustomStepButton
-        previousPage="/signing-authority"
-        nextPage="/submitted"
+        previousPage={ROUTE_SIGNING}
+        nextPage={ROUTE_SUBMITTED}
         disableSubmit={!isTermChecked}
         checkIsEmpty={() => false}
         formik={false}

src/main/www/src/components/Application/SignIn/SignIn.js

@@ -8,6 +8,7 @@ import {
   getCurrentMode,
   MODE_REACT_ONLY,
   MODE_REACT_API,
+  ROUTE_COMPANY,
 } from '../../../Constants/Constants';
 import { NavLink } from 'react-router-dom';
 import Loading from '../../UIComponents/Loading/Loading';
@@ -42,7 +43,7 @@ class SignIn extends React.Component {
   static contextType = MembershipContext;
 
   getFakeUser = (setFurthestPage) => {
-    setFurthestPage({ index: 1, pathName: '/company-info' });
+    setFurthestPage({ index: 1, pathName: ROUTE_COMPANY });
     this.context.setCurrentFormId('reactOnly');
     fetch('membership_data/fake_user.json', { headers: FETCH_HEADER })
       .then((resp) => resp.json())
@@ -65,7 +66,7 @@ class SignIn extends React.Component {
           Get started by logging in with your Eclipse Foundation account:
         </p>
         {getCurrentMode() === MODE_REACT_ONLY && (
-          <NavLink to="/company-info">
+          <NavLink to={ROUTE_COMPANY}>
             <button type="button" onClick={() => this.getFakeUser(setFurthestPage)} className="btn btn-secondary">
               React Only Login
             </button>

src/main/www/src/components/Application/SigningAuthority/SigningAuthority.js

@@ -5,6 +5,7 @@ import { useContext, useEffect } from 'react';
 import { isObjectEmpty, scrollToTop } from '../../../Utils/formFunctionHelpers';
 import { Checkbox, FormControlLabel } from '@material-ui/core';
 import MembershipContext from '../../../Context/MembershipContext';
+import { ROUTE_REVIEW, ROUTE_WGS } from '../../../Constants/Constants';
 
 /**
  * Have not added any API calls here,
@@ -87,8 +88,8 @@ const SigningAuthority = ({ formik, formikOrgValue, updatedFormValues }) => {
         </div>
       </div>
       <CustomStepButton
-        previousPage="/working-groups"
-        nextPage="/review"
+        previousPage={ROUTE_WGS}
+        nextPage={ROUTE_REVIEW}
         checkIsEmpty={() => isObjectEmpty(formik.values.signingAuthorityRepresentative)}
         formik={formik}
         updatedFormValues={updatedFormValues}

src/main/www/src/components/Application/WorkingGroups/WorkingGroupsWrapper.js

@@ -17,6 +17,8 @@ import {
   MODE_REACT_API,
   FULL_WORKING_GROUP_LIST_FOR_REACT_ONLY,
   api_prefix,
+  ROUTE_MEMBERSHIP,
+  ROUTE_SIGNING,
 } from '../../../Constants/Constants';
 import CustomStepButton from '../../UIComponents/Button/CustomStepButton';
 import { FormikProvider } from 'formik';
@@ -139,8 +141,8 @@ const WorkingGroupsWrapper = ({
           )}
         </div>
         <CustomStepButton
-          previousPage="/membership-level"
-          nextPage="/signing-authority"
+          previousPage={ROUTE_MEMBERSHIP}
+          nextPage={ROUTE_SIGNING}
           formik={formik}
           checkIsEmpty={checkIsEmpty}
           updatedFormValues={updatedFormValues}

src/main/www/src/components/UIComponents/Button/CustomStepButton.js

 import { Button } from '@material-ui/core';
 import { useContext, useState } from 'react';
 import { useHistory } from 'react-router-dom';
+import { ROUTE_SUBMITTED } from '../../../Constants/Constants';
 import MembershipContext from '../../../Context/MembershipContext';
 import { checkIsNotFurthestPage, validateGoBack } from '../../../Utils/formFunctionHelpers';
 import ModalWindow from '../Notifications/ModalWindow';
@@ -20,7 +21,7 @@ const CustomStepButton = ({ previousPage, nextPage, checkIsEmpty, disableSubmit,
   const { furthestPage, currentStepIndex } = useContext(MembershipContext);
 
   const handleBackBtnClicked = () => {
-    if (nextPage === '/submitted') {
+    if (nextPage === ROUTE_SUBMITTED) {
       history.push(previousPage);
       return;
     }
@@ -62,7 +63,7 @@ const CustomStepButton = ({ previousPage, nextPage, checkIsEmpty, disableSubmit,
       <MembershipContext.Consumer>
         {() => (
           <Button variant="contained" color="primary" size="large" type="submit" disabled={disableSubmit}>
-            {nextPage === '/submitted' ? 'Submit' : 'Next'}
+            {nextPage === ROUTE_SUBMITTED ? 'Submit' : 'Next'}
           </Button>
         )}
       </MembershipContext.Consumer>

src/main/www/src/components/UIComponents/FormPreprocess/FormChooser.js

@@ -6,6 +6,7 @@ import {
   MODE_REACT_ONLY,
   MODE_REACT_API,
   API_FORM_PARAM,
+  ROUTE_COMPANY,
 } from '../../../Constants/Constants';
 import {
   handleNewForm,
@@ -33,8 +34,8 @@ const FormChooser = ({
   const [hasExistingForm, setHasExistingForm] = useState('');
 
   const goToCompanyInfoStep = useCallback(() => {
-    setFurthestPage({ index: 1, pathName: '/company-info' });
-    history.push('/company-info');
+    setFurthestPage({ index: 1, pathName: ROUTE_COMPANY });
+    history.push(ROUTE_COMPANY);
   }, [history, setFurthestPage]);
 
   const handleContinueExistingForm = () => {

src/main/www/src/components/UIComponents/Steppers/Step.js

 import { useContext, useState } from 'react';
 import { useHistory, useRouteMatch } from 'react-router-dom';
+import { ROUTE_MEMBERSHIP, ROUTE_REVIEW, ROUTE_SIGNING, ROUTE_WGS } from '../../../Constants/Constants';
 import MembershipContext from '../../../Context/MembershipContext';
 import { checkIsNotFurthestPage, isObjectEmpty, validateGoBack } from '../../../Utils/formFunctionHelpers';
 import ModalWindow from '../Notifications/ModalWindow';
@@ -93,14 +94,14 @@ const Step = ({
 
         formikCompanyInfo
           .validateForm()
-          .then((result) => navigateTo(result, '/membership-level', formikCompanyInfo, isEmpty));
+          .then((result) => navigateTo(result, ROUTE_MEMBERSHIP, formikCompanyInfo, isEmpty));
         break;
 
       case '#membership-level':
         isEmpty = isObjectEmpty(formikMembershipLevel.values.membershipLevel);
         formikMembershipLevel
           .validateForm()
-          .then((result) => navigateTo(result, '/working-groups', formikMembershipLevel, isEmpty));
+          .then((result) => navigateTo(result, ROUTE_WGS, formikMembershipLevel, isEmpty));
         break;
 
       case '#working-groups':
@@ -114,14 +115,14 @@ const Step = ({
         }
         formikWorkingGroups
           .validateForm()
-          .then((result) => navigateTo(result, '/signing-authority', formikWorkingGroups, isEmpty));
+          .then((result) => navigateTo(result, ROUTE_SIGNING, formikWorkingGroups, isEmpty));
         break;
 
       case '#signing-authority':
         isEmpty = isObjectEmpty(formikSigningAuthority.values.signingAuthorityRepresentative);
         formikSigningAuthority
           .validateForm()
-          .then((result) => navigateTo(result, '/review', formikSigningAuthority, isEmpty));
+          .then((result) => navigateTo(result, ROUTE_REVIEW, formikSigningAuthority, isEmpty));
         break;
       case '#review':
         history.push(pathName);