feat: populate all dropdowns with picklists

Chia-Network · Feb 9, 2022 · 0d9d0c2 · 0d9d0c2
1 parent 1bcbad3
commit 0d9d0c2
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 30 deletions.
diff --git a/src/components/forms/CreateUnitsForm.js b/src/components/forms/CreateUnitsForm.js
@@ -36,10 +36,7 @@ import LabelsRepeater from './LabelsRepeater';
 import IssuanceRepeater from './IssuanceRepeater';
 import { postNewUnits } from '../../store/actions/climateWarehouseActions';
 import { FormattedMessage, useIntl } from 'react-intl';
-import {
-  correspondingAdjustmentDeclarationValues,
-  correspondingAdjustmentStatusValues,
-} from '../../utils/pick-values';
+import { correspondingAdjustmentDeclarationValues } from '../../utils/pick-values';
 
 const StyledFormContainer = styled('div')`
   display: flex;
@@ -105,6 +102,15 @@ const CreateUnitsForm = withRouter(({ onClose, left, top, width, height }) => {
     [pickLists],
   );
 
+  const selectCorrespondingAdjustmentStatusOptions = useMemo(
+    () =>
+      pickLists.correspondingAdjustmentStatus.map(country => ({
+        value: country,
+        label: country,
+      })),
+    [pickLists],
+  );
+
   const handleEditUnits = async () => {
     setErrorMessage({});
     const dataToSend = _.cloneDeep(newUnits);
@@ -147,7 +153,7 @@ const CreateUnitsForm = withRouter(({ onClose, left, top, width, height }) => {
     }
     if (!_.isEmpty(selectedCorrespondingAdjustmentStatus)) {
       dataToSend.correspondingAdjustmentStatus =
-        selectedCorrespondingAdjustmentStatus[0].value;
+        selectedCorrespondingAdjustmentStatus;
     }
     await unitsSchema
       .validate(dataToSend, { abortEarly: false })
@@ -857,13 +863,27 @@ const CreateUnitsForm = withRouter(({ onClose, left, top, width, height }) => {
                         <Select
                           size={SelectSizeEnum.large}
                           type={SelectTypeEnum.basic}
-                          options={correspondingAdjustmentStatusValues}
-                          onChange={value =>
-                            setSelectedCorrespondingAdjustmentStatus(value)
+                          options={selectCorrespondingAdjustmentStatusOptions}
+                          onChange={selectedOptions =>
+                            setSelectedCorrespondingAdjustmentStatus(
+                              selectedOptions[0].value,
+                            )
                           }
-                          placeholder={`-- ${intl.formatMessage({
-                            id: 'select',
-                          })} --`}
+                          selected={
+                            selectedCorrespondingAdjustmentStatus
+                              ? [
+                                  {
+                                    label:
+                                      selectedCorrespondingAdjustmentStatus,
+                                    value:
+                                      selectedCorrespondingAdjustmentStatus,
+                                  },
+                                ]
+                              : undefined
+                          }
+                          placeholder={intl.formatMessage({
+                            id: 'corresponding-adjustment-status',
+                          })}
                         />
                       </InputContainer>
                       {errorMessage?.correspondingAdjustmentStatus && (

diff --git a/src/components/forms/EditUnitsForm.js b/src/components/forms/EditUnitsForm.js
@@ -35,10 +35,7 @@ import IssuanceRepeater from './IssuanceRepeater';
 import { updateUnitsRecord } from '../../store/actions/climateWarehouseActions';
 import { FormattedMessage, useIntl } from 'react-intl';
 
-import {
-  correspondingAdjustmentDeclarationValues,
-  correspondingAdjustmentStatusValues,
-} from '../../utils/pick-values';
+import { correspondingAdjustmentDeclarationValues } from '../../utils/pick-values';
 
 const EditUnitsForm = ({ onClose }) => {
   const { notification } = useSelector(state => state.app);
@@ -84,6 +81,15 @@ const EditUnitsForm = ({ onClose }) => {
     [pickLists],
   );
 
+  const selectCorrespondingAdjustmentStatusOptions = useMemo(
+    () =>
+      pickLists.correspondingAdjustmentStatus.map(country => ({
+        value: country,
+        label: country,
+      })),
+    [pickLists],
+  );
+
   const handleTabChange = (event, newValue) => {
     setTabValue(newValue);
   };
@@ -192,7 +198,7 @@ const EditUnitsForm = ({ onClose }) => {
     }
     if (!_.isEmpty(selectedCorrespondingAdjustmentStatus)) {
       dataToSend.correspondingAdjustmentStatus =
-        selectedCorrespondingAdjustmentStatus[0].value;
+        selectedCorrespondingAdjustmentStatus;
     }
     unitsSchema
       .validate(dataToSend, { abortEarly: false })
@@ -846,21 +852,27 @@ const EditUnitsForm = ({ onClose }) => {
                           <Select
                             size={SelectSizeEnum.large}
                             type={SelectTypeEnum.basic}
-                            options={correspondingAdjustmentStatusValues}
-                            onChange={value =>
-                              setSelectedCorrespondingAdjustmentStatus(value)
+                            options={selectCorrespondingAdjustmentStatusOptions}
+                            onChange={selectedOptions =>
+                              setSelectedCorrespondingAdjustmentStatus(
+                                selectedOptions[0].value,
+                              )
+                            }
+                            placeholder={intl.formatMessage({
+                              id: 'corresponding-adjustment-status',
+                            })}
+                            selected={
+                              climatewarehouseUnits.correspondingAdjustmentStatus
+                                ? [
+                                    {
+                                      label:
+                                        climatewarehouseUnits.correspondingAdjustmentStatus,
+                                      value:
+                                        climatewarehouseUnits.correspondingAdjustmentStatus,
+                                    },
+                                  ]
+                                : undefined
                             }
-                            placeholder={`-- ${intl.formatMessage({
-                              id: 'select',
-                            })} --`}
-                            selected={[
-                              {
-                                label:
-                                  climatewarehouseUnits.correspondingAdjustmentStatus,
-                                value:
-                                  climatewarehouseUnits.correspondingAdjustmentStatus,
-                              },
-                            ]}
                           />
                         </InputContainer>
                         {errorMessageAlert('correspondingAdjustmentStatus')}