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

Fixed prefill issue for autocomplete field (#85)

* Fixed prefill issue for autocomplete field

* fixed loading animation logic
parent c5f43207
......@@ -78,11 +78,11 @@ export function matchCompanyFields(existingOrganizationData) {
street: existingOrganizationData?.address.street || '',
city: existingOrganizationData?.address.city || '',
provinceOrState: existingOrganizationData?.address.province_state || '',
country: {
'country-label': {
label: existingOrganizationData?.address.country || '',
value: existingOrganizationData?.address.country || '',
},
'country-label': existingOrganizationData?.address.country || '',
country: existingOrganizationData?.address.country || '',
postalCode: existingOrganizationData?.address.postal_code || '',
},
twitterHandle: existingOrganizationData?.twitter_handle || '',
......@@ -179,12 +179,8 @@ export function matchWorkingGroupFields(
value: item?.working_group_id,
participation_levels: wg?.participation_levels,
} || '',
participationLevel:
{
label: item?.participation_level,
value: item?.participation_level,
} || '',
effectiveDate: new Date(item?.effective_date) || '',
participationLevel: item?.participation_level || '',
effectiveDate: item?.effective_date?.substring(0, 10) || '',
workingGroupRepresentative: {
firstName: item?.contact.first_name || '',
lastName: item?.contact.last_name || '',
......
import React, { useContext, useEffect, useState } from 'react';
import { useContext, useEffect, useState } from 'react';
import MembershipContext from '../../../Context/MembershipContext';
import {
matchCompanyFields,
......@@ -87,7 +87,6 @@ const CompanyInformation = ({ formik }) => {
// Call the the function to map the retrived
// organization backend data to fit frontend
let tempOrg = matchCompanyFields(organizations[0]);
console.log(tempOrg);
// Call the setFieldValue of Formik, to set
// organization field with the mapped data,
// if nested, it will automatically map the
......
import React from 'react';
import Input from '../../UIComponents/Inputs/Input';
import { formField } from '../../UIComponents/FormComponents/formFieldModel';
import Autocomplete from '@material-ui/lab/Autocomplete';
......
import React, { useEffect } from 'react';
import { useEffect } from 'react';
import Input from '../../UIComponents/Inputs/Input';
import { formField } from '../../UIComponents/FormComponents/formFieldModel';
import { Checkbox, FormControlLabel } from '@material-ui/core';
......
import React, { useContext, useEffect, useState } from 'react';
import { useContext, useEffect, useState } from 'react';
import MembershipLevelFeeTable from './MembershipLevelFeeTable';
import MembershipContext from '../../../Context/MembershipContext';
import Loading from '../../UIComponents/Loading/Loading';
......@@ -48,7 +48,7 @@ const MembershipLevel = ({ formik }) => {
// use fake json data; if running with API, use API
// just for React only testing.
let currentFormId = 'form_1';
// let currentFormId = 'form_1';
let url_prefix_local;
let url_suffix_local = '';
if (getCurrentMode() === MODE_REACT_ONLY) {
......
import React from 'react';
/**
* This is a pure static html table copied from membership site:
* https://www.eclipse.org/membership/#tab-fees
......
......@@ -161,7 +161,7 @@ const Review = ({ values, submitForm }) => {
<div className="row margin-bottom-30">
<div className="col-md-8">
<label>Working group</label>
<div className="preview-field">{el.workingGroup}</div>
<div className="preview-field">{el['workingGroup-label']}</div>
</div>
<div className="col-md-8">
<label>Intended Participation Level</label>
......
import React from 'react';
const SignInIntroduction = () => {
return (
<div className="row">
......
import React from 'react';
import CustomStepButton from '../../UIComponents/Button/CustomStepButton';
import Input from '../../UIComponents/Inputs/Input';
import { formField } from '../../UIComponents/FormComponents/formFieldModel';
......@@ -11,7 +10,6 @@ import { formField } from '../../UIComponents/FormComponents/formFieldModel';
const sectionName = 'signing-authority';
const SigningAuthority = ({ formik }) => {
const { signingAuthorityRepresentative } = formField;
console.log(formik.values);
return (
<form onSubmit={formik.handleSubmit}>
<h1 className="fw-600 h2" id={sectionName}>
......
import React from 'react';
/**
* This is just a pure html component to
* display after all steps finished and
......
import React, { useContext, useEffect, useState } from 'react';
import { useContext } from 'react';
import MembershipContext from '../../../Context/MembershipContext';
import WorkingGroupParticipationLevel from './WorkingGroupParticipationLevel';
import WorkingGroupEffectiveDate from './WorkingGroupEffectiveDate';
......@@ -6,13 +6,13 @@ import WorkingGroupsRepresentative from './WorkingGroupRepresentative';
import { deleteData } from '../../../Utils/formFunctionHelpers';
import {
end_point,
FETCH_HEADER,
WORKING_GROUPS,
workingGroups as workingGroupsLabel,
} from '../../../Constants/Constants';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { makeStyles, TextField } from '@material-ui/core';
import { FieldArray } from 'formik';
import Loading from '../../UIComponents/Loading/Loading';
/**
* Wrapper for Working Group Selector,
......@@ -49,10 +49,9 @@ const useStyles = makeStyles(() => ({
},
}));
const WorkingGroup = ({ formik }) => {
const WorkingGroup = ({ formik, fullWorkingGroupList, isLoading }) => {
const classes = useStyles();
const { currentFormId } = useContext(MembershipContext);
const [workingGroupListData, setWorkingGroupListData] = useState([]); // the working groups data, all available ones
const removeWorkingGroupCall = (arrayHelpersRemove, index, id) => {
// Call API to remove
......@@ -66,24 +65,9 @@ const WorkingGroup = ({ formik }) => {
);
};
const fetchAvailableWorkingGroups = () => {
fetch('workingGroups.json', { headers: FETCH_HEADER })
.then((res) => res.json())
.then((data) => {
let options = data.working_groups.map((item) => ({
label: item.name,
value: item.id,
participation_levels: item.participation_levels,
}));
setWorkingGroupListData(options);
});
};
useEffect(() => {
fetchAvailableWorkingGroups();
}, []);
return (
return isLoading ? (
<Loading />
) : (
<FieldArray
name={workingGroupsLabel}
render={(arrayHelpers) => (
......@@ -95,32 +79,38 @@ const WorkingGroup = ({ formik }) => {
className="h4 fw-600"
id={`${formik.values.workingGroups}.${index}.workingGroup`}
>
Which working group would you like to join?{' '}
<span className="orange-star">*</span>{' '}
Which working group would you like to join?
<span className="orange-star">*</span>
</h2>
<Autocomplete
id={`${workingGroupsLabel}.${index}.workingGroup`}
options={workingGroupListData}
options={fullWorkingGroupList}
getOptionLabel={(option) =>
option?.label ? option.label : ''
}
fullWidth={true}
onChange={(ev, value) => {
// need to clear the participation level when user selects another working group
formik.setFieldValue(
`workingGroups.${index}.participationLevel`,
''
);
// this is only for display
formik.setFieldValue(
`${workingGroupsLabel}.${index}.workingGroup-label`,
value ? value : null
value ? value.label : null
);
// this is the data will be actually used
formik.setFieldValue(
`${workingGroupsLabel}.${index}.workingGroup`,
value ? value.value : null
value ? value : null
);
}}
value={
formik.values.workingGroups[index]['workingGroup-label']
? formik.values.workingGroups[index]['workingGroup-label']
formik.values.workingGroups[index]['workingGroup']
? formik.values.workingGroups[index]['workingGroup']
: null
}
renderInput={(params) => {
......@@ -147,9 +137,10 @@ const WorkingGroup = ({ formik }) => {
<>
<WorkingGroupParticipationLevel
name={`${workingGroupsLabel}.${index}.participationLevel`}
workingGroupsLabel={workingGroupsLabel}
index={index}
workingGroup={workingGroup.workingGroup}
workingGroupListData={workingGroupListData}
workingGroupUserJoined={workingGroup.workingGroup}
fullWorkingGroupList={fullWorkingGroupList}
formik={formik}
/>
<WorkingGroupEffectiveDate
......
import React from 'react';
import DateInput from '../../UIComponents/Inputs/DateInput';
/**
* Render Effective Date input component (react-datepicker)
*
* - Props:
* - name: fieldName (for Effective Date, an example would be: `workingGroups[i].effectiveDate`);
* - name: fieldName (for Effective Date, an example would be: `workingGroups[i].effectiveDate`);
* this is handled by and passed from WorkingGroup component
*/
const EffectiveDate = ({ name, index, formik }) => {
......
import React, { useState, useEffect } from 'react';
import { useState, useEffect } from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { makeStyles, TextField } from '@material-ui/core';
......@@ -21,30 +21,28 @@ const useStyles = makeStyles(() => ({
const ParticipationLevel = ({
name,
workingGroup,
workingGroupListData,
workingGroupUserJoined,
fullWorkingGroupList,
formik,
index,
}) => {
const classes = useStyles();
const [participationLevelOptions, setParticipationLevelOptions] = useState(
[]
);
const [participationLevels, setParticipationLevels] = useState([]);
const theIndex = index;
useEffect(() => {
// If have selected working group, find this working group's
// participation levels, and pass to the react-select option
if (workingGroupListData) {
let temp = workingGroupListData?.find(
(item) => workingGroup === item.value
);
setParticipationLevels(temp?.participation_levels);
formik.setFieldValue(
`workingGroups.${theIndex}.participationLevel-label`,
''
if (fullWorkingGroupList) {
let temp = fullWorkingGroupList?.find(
(item) => workingGroupUserJoined.value === item.value
);
setParticipationLevelOptions(temp?.participation_levels);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [workingGroupListData]);
}, [workingGroupUserJoined]);
return (
<>
......@@ -55,21 +53,15 @@ const ParticipationLevel = ({
<div className="row">
<div className="col-md-12">
<Autocomplete
options={participationLevels}
options={participationLevelOptions}
getOptionLabel={(option) => (option ? option : '')}
fullWidth={true}
onChange={(ev, value) => {
// this is only for display
formik.setFieldValue(`${name}-label`, value ? value : null);
// this is the data will be actually used
formik.setFieldValue(name, value ? value : null);
}}
value={
formik.values.workingGroups[theIndex]['participationLevel-label']
? formik.values.workingGroups[theIndex][
'participationLevel-label'
]
formik.values.workingGroups[theIndex]['participationLevel']
? formik.values.workingGroups[theIndex]['participationLevel']
: null
}
renderInput={(params) => {
......
import React from 'react';
import Input from '../../UIComponents/Inputs/Input';
import { formField } from '../../UIComponents/FormComponents/formFieldModel';
......@@ -35,17 +34,17 @@ const WorkingGroupRepresentative = ({ name, index, formik }) => {
}
error={
formik.touched.workingGroups?.[theIndex]
.workingGroupRepresentative[`${el.name}`] &&
?.workingGroupRepresentative?.[`${el.name}`] &&
Boolean(
formik.errors.workingGroups?.[theIndex]
.workingGroupRepresentative[`${el.name}`]
?.workingGroupRepresentative?.[`${el.name}`]
)
}
helperText={
formik.touched.workingGroups?.[theIndex]
.workingGroupRepresentative[`${el.name}`] &&
?.workingGroupRepresentative?.[`${el.name}`] &&
formik.errors.workingGroups?.[theIndex]
.workingGroupRepresentative[`${el.name}`]
?.workingGroupRepresentative?.[`${el.name}`]
}
/>
</div>
......
import React, { useState, useContext, useEffect } from 'react';
import { useState, useContext, useEffect } from 'react';
import MembershipContext from '../../../Context/MembershipContext';
import WorkingGroup from './WorkingGroup';
import { matchWorkingGroupFields } from '../../../Utils/formFunctionHelpers';
......@@ -33,11 +33,26 @@ import { FormikProvider } from 'formik';
const WorkingGroupsWrapper = ({ formik }) => {
const { currentFormId } = useContext(MembershipContext);
const [loading, setLoading] = useState(false);
const [workingGroupsData, setWorkingGroupsData] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [workingGroupsUserJoined, setWorkingGroupsUserJoined] = useState([]);
const [fullWorkingGroupList, setFullWorkingGroupList] = useState([]);
// Fetch existing form data
const fetchWorkingGroupsData = () => {
// Fetch the full availabe working group list that user can join
const fetchAvailableFullWorkingGroupList = () => {
fetch('workingGroups.json', { headers: FETCH_HEADER })
.then((res) => res.json())
.then((data) => {
let options = data.working_groups.map((item) => ({
label: item.name,
value: item.id,
participation_levels: item.participation_levels,
}));
setFullWorkingGroupList(options);
});
};
// Fetch the working groups user has joined
const fetchWorkingGroupsUserJoined = () => {
// All pre-process: if running without server,
// use fake json data; if running with API, use API
......@@ -68,14 +83,17 @@ const WorkingGroupsWrapper = ({ formik }) => {
// the retrived working groups backend data to fit frontend, and
// setFieldValue(): Prefill Data --> Call the setFieldValue
// of Formik, to set workingGroups field with the mapped data
const theData = matchWorkingGroupFields(data, workingGroupsData);
setWorkingGroupsData(theData);
formik.setFieldValue('workingGroups', theData);
const theGroupsUserJoined = matchWorkingGroupFields(
data,
fullWorkingGroupList
);
setWorkingGroupsUserJoined(theGroupsUserJoined);
formik.setFieldValue('workingGroups', theGroupsUserJoined);
}
setLoading(false);
setIsLoading(false);
});
} else {
setLoading(false);
setIsLoading(false);
}
};
......@@ -83,12 +101,19 @@ const WorkingGroupsWrapper = ({ formik }) => {
// fetchWorkingGroupsData Function does not change,
// will not cause re-render again
useEffect(() => {
// Fetch existing form data
fetchWorkingGroupsData();
// Fetch full availabe working group list
fetchAvailableFullWorkingGroupList();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (loading) {
useEffect(() => {
if (fullWorkingGroupList.length > 0) {
fetchWorkingGroupsUserJoined();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [fullWorkingGroupList]);
if (isLoading) {
return <Loading />;
}
......@@ -101,7 +126,12 @@ const WorkingGroupsWrapper = ({ formik }) => {
id="working-groups-page"
className="align-center margin-top-50 margin-bottom-30"
>
<WorkingGroup formik={formik} />
<WorkingGroup
formik={formik}
workingGroupsUserJoined={workingGroupsUserJoined}
fullWorkingGroupList={fullWorkingGroupList}
isLoading={isLoading}
/>
</div>
<CustomStepButton
......
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