Unverified Commit 8d44f0dc authored by Zhou (Link)  Fang's avatar Zhou (Link) Fang Committed by GitHub
Browse files

Finished integration with working groups API call (#101)

* added API call

* finished integration with working groups API call

* made some improvements based on feedback
parent 350c5539
......@@ -8,7 +8,7 @@ export const api_prefix = () => {
return '//' + window.location.host;
};
export const api_prefix_form = api_prefix() + '/form';
export const API_PREFIX_FORM = api_prefix() + '/form';
export const COMPANY_INFORMATION = 'Company Information';
export const MEMBERSHIP_LEVEL = 'Membership Level';
......@@ -28,7 +28,7 @@ export const FETCH_HEADER = {
Accept: 'application/json',
};
export const membership_levels = [
export const MEMBERSHIP_LEVELS = [
{ label: 'Strategic Member', value: 'Strategic Member' },
{
label: 'Contributing Member (formerly referred to as Solutions Members)',
......@@ -45,14 +45,14 @@ export const PAGE_STEP = [
{ props: { label: REVIEW, pathName: '/review' } },
];
export const contact_type = {
export const CONTACT_TYPE = {
COMPANY: 'COMPANY',
MARKETING: 'MARKETING',
ACCOUNTING: 'ACCOUNTING',
WORKING_GROUP: 'WORKING_GROUP',
};
export const end_point = {
export const END_POINT = {
organizations: 'organizations',
contacts: 'contacts',
working_groups: 'working_groups',
......@@ -84,3 +84,43 @@ export function getCurrentMode() {
return MODE_REACT_ONLY;
}
export const FULL_WORKING_GROUP_LIST_FOR_REACT_ONLY = [
{
label: 'AsciiDoc',
value: 'AsciiDoc',
participation_levels: [
{
company_size: 10,
document_id: '2',
level: 'Partner members',
},
{
document_id: '2',
level: 'Committer members',
},
{
document_id: '2',
level: 'Guest members',
},
],
},
{
label: 'Internet of Things - IoT',
value: 'Internet of Things - IoT',
participation_levels: [
{
document_id: '1',
level: 'Strategic Member',
},
{
document_id: '1',
level: 'Participant Member',
},
{
document_id: '1',
level: 'Guest Member',
},
],
},
];
import {
FETCH_METHOD,
contact_type,
end_point,
api_prefix_form,
CONTACT_TYPE,
END_POINT,
API_PREFIX_FORM,
FETCH_HEADER,
getCurrentMode,
MODE_REACT_ONLY,
......@@ -110,13 +110,13 @@ export function mapMembershipLevel(existingMembershipLevel, membership_levels) {
* **/
export function matchContactFields(existingContactData) {
let existingCompanyContact = existingContactData.find(
(el) => el.type === contact_type.COMPANY
(el) => el.type === CONTACT_TYPE.COMPANY
);
let existingMarketingContact = existingContactData.find(
(el) => el.type === contact_type.MARKETING
(el) => el.type === CONTACT_TYPE.MARKETING
);
let existingAccoutingContact = existingContactData.find(
(el) => el.type === contact_type.ACCOUNTING
(el) => el.type === CONTACT_TYPE.ACCOUNTING
);
return {
......@@ -168,7 +168,7 @@ export function matchWorkingGroupFields(
// Array
existingworkingGroupData.forEach((item, index) => {
let wg = workingGroupsOptions?.find(
(el) => el.value === item?.working_group_id
(el) => el.label === item?.working_group_id
);
res.push({
id: item?.id || '',
......@@ -247,7 +247,7 @@ export function matchMembershipLevelFieldsToBackend(
* @param formId - Form Id fetched from the server, sotored in membership context, used for calling APIs
*/
export function matchContactFieldsToBackend(contactData, contactType, formId) {
if (contactType === contact_type.WORKING_GROUP && !contactData.id) {
if (contactType === CONTACT_TYPE.WORKING_GROUP && !contactData.id) {
return {
form_id: formId,
first_name: contactData.firstName,
......@@ -276,7 +276,7 @@ export function matchContactFieldsToBackend(contactData, contactType, formId) {
export function matchWGFieldsToBackend(eachWorkingGroupData, formId) {
var wg_contact = matchContactFieldsToBackend(
eachWorkingGroupData.workingGroupRepresentative,
contact_type.WORKING_GROUP,
CONTACT_TYPE.WORKING_GROUP,
formId
);
......@@ -308,33 +308,33 @@ export async function executeSendDataByStep(step, formData, formId, userId) {
case 1:
callSendData(
formId,
end_point.organizations,
END_POINT.organizations,
matchCompanyFieldsToBackend(formData.organization, formId)
);
callSendData(
formId,
end_point.contacts,
END_POINT.contacts,
matchContactFieldsToBackend(
formData.representative.member,
contact_type.COMPANY,
CONTACT_TYPE.COMPANY,
formId
)
);
callSendData(
formId,
end_point.contacts,
END_POINT.contacts,
matchContactFieldsToBackend(
formData.representative.marketing,
contact_type.MARKETING,
CONTACT_TYPE.MARKETING,
formId
)
);
callSendData(
formId,
end_point.contacts,
END_POINT.contacts,
matchContactFieldsToBackend(
formData.representative.accounting,
contact_type.ACCOUNTING,
CONTACT_TYPE.ACCOUNTING,
formId
)
);
......@@ -356,7 +356,7 @@ export async function executeSendDataByStep(step, formData, formId, userId) {
formData.workingGroups.forEach((item) => {
callSendData(
formId,
end_point.working_groups,
END_POINT.working_groups,
matchWGFieldsToBackend(item, formId)
);
});
......@@ -382,14 +382,14 @@ function callSendData(formId, endpoint = '', dataBody) {
const entityId = dataBody.id ? dataBody.id : '';
const method = dataBody.id ? FETCH_METHOD.PUT : FETCH_METHOD.POST;
let url = api_prefix_form + `/${formId}`;
let url = API_PREFIX_FORM + `/${formId}`;
if (endpoint) {
url = api_prefix_form + `/${formId}/${endpoint}`;
url = API_PREFIX_FORM + `/${formId}/${endpoint}`;
}
if (entityId && entityId !== formId) {
url = api_prefix_form + `/${formId}/${endpoint}/${entityId}`;
url = API_PREFIX_FORM + `/${formId}/${endpoint}/${entityId}`;
}
delete dataBody.id;
......@@ -436,12 +436,12 @@ export function deleteData(formId, endpoint, entityId, callback, index) {
// If removing existing working_group
if (entityId) {
let url = api_prefix_form + `/${formId}`;
let url = API_PREFIX_FORM + `/${formId}`;
if (endpoint) {
url = api_prefix_form + `/${formId}/${endpoint}`;
url = API_PREFIX_FORM + `/${formId}/${endpoint}`;
}
if (entityId && entityId !== formId) {
url = api_prefix_form + `/${formId}/${endpoint}/${entityId}`;
url = API_PREFIX_FORM + `/${formId}/${endpoint}/${entityId}`;
}
fetch(url, {
method: FETCH_METHOD.DELETE,
......@@ -479,7 +479,7 @@ export async function handleNewForm(setCurrentFormId, defaultBehaviour) {
signing_authority: false,
};
fetch(api_prefix_form, {
fetch(API_PREFIX_FORM, {
method: FETCH_METHOD.POST,
headers: FETCH_HEADER,
body: JSON.stringify(dataBody),
......
......@@ -8,8 +8,8 @@ import CompanyInformationCompany from './CompanyInformationCompany';
import CompanyInformationContacts from './CompanyInformationContacts';
import Loading from '../../UIComponents/Loading/Loading';
import {
end_point,
api_prefix_form,
END_POINT,
API_PREFIX_FORM,
FETCH_HEADER,
getCurrentMode,
MODE_REACT_ONLY,
......@@ -57,7 +57,7 @@ const CompanyInformation = ({ formik, isStartNewForm }) => {
// Once we have the API ready running on production,
// will use the correct domain name rather than localhost:8090
if (getCurrentMode() === MODE_REACT_API) {
url_prefix_local = api_prefix_form;
url_prefix_local = API_PREFIX_FORM;
}
// If the current form exsits, and it is not creating a new form
if (currentFormId) {
......@@ -67,14 +67,14 @@ const CompanyInformation = ({ formik, isStartNewForm }) => {
fetch(
url_prefix_local +
`/${currentFormId}/` +
end_point.organizations +
END_POINT.organizations +
url_suffix_local,
{ headers: FETCH_HEADER }
),
fetch(
url_prefix_local +
`/${currentFormId}/` +
end_point.contacts +
END_POINT.contacts +
url_suffix_local,
{ headers: FETCH_HEADER }
),
......
......@@ -4,9 +4,9 @@ import MembershipContext from '../../../Context/MembershipContext';
import Loading from '../../UIComponents/Loading/Loading';
import { mapMembershipLevel } from '../../../Utils/formFunctionHelpers';
import {
api_prefix_form,
API_PREFIX_FORM,
FETCH_HEADER,
membership_levels,
MEMBERSHIP_LEVELS,
newForm_tempId,
getCurrentMode,
MODE_REACT_ONLY,
......@@ -58,7 +58,7 @@ const MembershipLevel = ({ formik, isStartNewForm }) => {
}
if (getCurrentMode() === MODE_REACT_API) {
url_prefix_local = api_prefix_form;
url_prefix_local = API_PREFIX_FORM;
}
// If the current form exsits, and it is not creating a new form
......@@ -75,7 +75,7 @@ const MembershipLevel = ({ formik, isStartNewForm }) => {
// Formik, to set membershipLevel field with the mapped data
const tempMembershipLevel = mapMembershipLevel(
data[0]?.membership_level,
membership_levels
MEMBERSHIP_LEVELS
);
formik.setFieldValue(
'membershipLevel',
......@@ -124,7 +124,7 @@ const MembershipLevel = ({ formik, isStartNewForm }) => {
<div className="col-md-12">
<Autocomplete
id={membershipLevel.name}
options={membership_levels}
options={MEMBERSHIP_LEVELS}
fullWidth={true}
getOptionLabel={(option) => (option?.label ? option.label : '')}
getOptionSelected={(option, value) =>
......
......@@ -4,7 +4,7 @@ import FormChooser from '../../UIComponents/FormPreprocess/FormChooser';
import {
FETCH_HEADER,
api_prefix,
end_point,
END_POINT,
getCurrentMode,
MODE_REACT_ONLY,
MODE_REACT_API,
......@@ -14,7 +14,7 @@ import Loading from '../../UIComponents/Loading/Loading';
/**
* - When it is only running React App without server, uses fake user in public/fake_user.json
* - When run with server, call the userInfo end_point
* - When run with server, call the userInfo END_POINT
* - When logged in, `if(currentUser)`, render form chooser
*
* //// eslint-disable-next-line ---> not a best practice to use
......@@ -83,7 +83,7 @@ class SignIn extends React.Component {
componentDidMount() {
if (getCurrentMode() === MODE_REACT_API) {
fetch(api_prefix() + `/${end_point.userinfo}`, { headers: FETCH_HEADER })
fetch(api_prefix() + `/${END_POINT.userinfo}`, { headers: FETCH_HEADER })
.then((res) => res.json())
.then((data) => {
console.log('user info: ', data); // {family_name: "User1", given_name: "User1", name: "user1"}
......
......@@ -5,7 +5,7 @@ import WorkingGroupEffectiveDate from './WorkingGroupEffectiveDate';
import WorkingGroupsRepresentative from './WorkingGroupRepresentative';
import { deleteData } from '../../../Utils/formFunctionHelpers';
import {
end_point,
END_POINT,
WORKING_GROUPS,
workingGroups as workingGroupsLabel,
} from '../../../Constants/Constants';
......@@ -58,7 +58,7 @@ const WorkingGroup = ({ formik, fullWorkingGroupList, isLoading }) => {
console.log('you called DELETE method with id: ', id);
deleteData(
currentFormId,
end_point.working_groups,
END_POINT.working_groups,
id,
arrayHelpersRemove,
index
......
......@@ -39,7 +39,14 @@ const ParticipationLevel = ({
let temp = fullWorkingGroupList?.find(
(item) => workingGroupUserJoined.value === item.value
);
setParticipationLevelOptions(temp?.participation_levels);
// extract all the participation_levels
const optionsForParticipationLevels = temp?.participation_levels
? temp?.participation_levels.map((item) => item.level)
: [];
// the Set will deduplicate participation_levels options
setParticipationLevelOptions([...new Set(optionsForParticipationLevels)]);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [workingGroupUserJoined, fullWorkingGroupList]);
......
......@@ -4,13 +4,14 @@ import WorkingGroup from './WorkingGroup';
import { matchWorkingGroupFields } from '../../../Utils/formFunctionHelpers';
import Loading from '../../UIComponents/Loading/Loading';
import {
end_point,
api_prefix_form,
END_POINT,
API_PREFIX_FORM,
FETCH_HEADER,
newForm_tempId,
getCurrentMode,
MODE_REACT_ONLY,
MODE_REACT_API,
FULL_WORKING_GROUP_LIST_FOR_REACT_ONLY,
api_prefix,
} from '../../../Constants/Constants';
import CustomStepButton from '../../UIComponents/Button/CustomStepButton';
import { FormikProvider } from 'formik';
......@@ -43,13 +44,26 @@ const WorkingGroupsWrapper = ({ formik, isStartNewForm, furthestPage }) => {
useEffect(() => {
// Fetch the full availabe working group list that user can join
const fetchAvailableFullWorkingGroupList = () => {
fetch('workingGroups.json', { headers: FETCH_HEADER })
let url_prefix_local;
if (getCurrentMode() === MODE_REACT_ONLY) {
url_prefix_local = 'membership_data';
setFullWorkingGroupList(FULL_WORKING_GROUP_LIST_FOR_REACT_ONLY);
return;
}
if (getCurrentMode() === MODE_REACT_API) {
url_prefix_local = api_prefix() + '/';
}
fetch(url_prefix_local + END_POINT.working_groups, {
headers: FETCH_HEADER,
})
.then((res) => res.json())
.then((data) => {
let options = data.working_groups.map((item) => ({
let options = data.map((item) => ({
label: item.name,
value: item.id,
participation_levels: item.participation_levels,
value: item.name,
participation_levels: item.levels,
}));
setFullWorkingGroupList(options);
});
......@@ -73,15 +87,15 @@ const WorkingGroupsWrapper = ({ formik, isStartNewForm, furthestPage }) => {
}
if (getCurrentMode() === MODE_REACT_API) {
url_prefix_local = api_prefix_form;
url_prefix_local = API_PREFIX_FORM;
}
// If the current form exsits, and it is not creating a new form
if (currentFormId && currentFormId !== newForm_tempId) {
if (currentFormId) {
fetch(
url_prefix_local +
`/${currentFormId}/` +
end_point.working_groups +
END_POINT.working_groups +
url_suffix_local,
{ headers: FETCH_HEADER }
)
......
import MembershipContext from '../../../Context/MembershipContext';
import {
FETCH_HEADER,
api_prefix_form,
API_PREFIX_FORM,
getCurrentMode,
MODE_REACT_ONLY,
MODE_REACT_API,
......@@ -37,7 +37,7 @@ const FormChooser = ({ setFurthestPage, history, setIsStartNewForm }) => {
}
if (getCurrentMode() === MODE_REACT_API) {
url_prefix_local = api_prefix_form;
url_prefix_local = API_PREFIX_FORM;
}
fetch(url_prefix_local, { headers: FETCH_HEADER })
......
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