feat: populate all dropdowns with picklists

Chia-Network · Feb 9, 2022 · 4b929f5 · 4b929f5
1 parent 5005d03
commit 4b929f5
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 24 deletions.
diff --git a/src/components/forms/CreateUnitsForm.js b/src/components/forms/CreateUnitsForm.js
@@ -121,6 +121,15 @@ const CreateUnitsForm = withRouter(({ onClose, left, top, width, height }) => {
     [pickLists],
   );
 
+  const selectCountriesOptions = useMemo(
+    () =>
+      pickLists.countries.map(country => ({
+        value: country,
+        label: country,
+      })),
+    [pickLists],
+  );
+
   const handleEditUnits = async () => {
     setErrorMessage({});
     const dataToSend = _.cloneDeep(newUnits);
@@ -370,22 +379,30 @@ const CreateUnitsForm = withRouter(({ onClose, left, top, width, height }) => {
                         </Body>
                       </StyledLabelContainer>
                       <InputContainer>
-                        <StandardInput
-                          variant={errorInputAlert(
-                            'countryJurisdictionOfOwner',
-                          )}
-                          size={InputSizeEnum.large}
-                          placeholderText={intl.formatMessage({
-                            id: 'country-jurisdiction-of-owner',
-                          })}
-                          state={InputStateEnum.default}
-                          value={newUnits.countryJurisdictionOfOwner}
-                          onChange={value =>
+                        <Select
+                          size={SelectSizeEnum.large}
+                          type={SelectTypeEnum.basic}
+                          options={selectCountriesOptions}
+                          selected={
+                            newUnits.countryJurisdictionOfOwner
+                              ? [
+                                  {
+                                    label: newUnits.countryJurisdictionOfOwner,
+                                    value: newUnits.countryJurisdictionOfOwner,
+                                  },
+                                ]
+                              : undefined
+                          }
+                          onChange={selectedOptions =>
                             setNewUnits(prev => ({
                               ...prev,
-                              countryJurisdictionOfOwner: value,
+                              countryJurisdictionOfOwner:
+                                selectedOptions[0].value,
                             }))
                           }
+                          placeholder={intl.formatMessage({
+                            id: 'country-jurisdiction-of-owner',
+                          })}
                         />
                       </InputContainer>
                       {errorMessage?.countryJurisdictionOfOwner && (

diff --git a/src/components/forms/EditUnitsForm.js b/src/components/forms/EditUnitsForm.js
@@ -99,6 +99,15 @@ const EditUnitsForm = ({ onClose }) => {
     [pickLists],
   );
 
+  const selectCountriesOptions = useMemo(
+    () =>
+      pickLists.countries.map(country => ({
+        value: country,
+        label: country,
+      })),
+    [pickLists],
+  );
+
   const handleTabChange = (event, newValue) => {
     setTabValue(newValue);
   };
@@ -373,22 +382,32 @@ const EditUnitsForm = ({ onClose }) => {
                           </Body>
                         </StyledLabelContainer>
                         <InputContainer>
-                          <StandardInput
-                            variant={errorInputVariant(
-                              'countryJurisdictionOfOwner',
-                            )}
-                            size={InputSizeEnum.large}
-                            placeholderText={intl.formatMessage({
-                              id: 'country-jurisdiction-of-owner',
-                            })}
-                            state={InputStateEnum.default}
-                            value={editedUnits.countryJurisdictionOfOwner}
-                            onChange={value =>
+                          <Select
+                            size={SelectSizeEnum.large}
+                            type={SelectTypeEnum.basic}
+                            options={selectCountriesOptions}
+                            selected={
+                              climatewarehouseUnits.countryJurisdictionOfOwner
+                                ? [
+                                    {
+                                      label:
+                                        climatewarehouseUnits.countryJurisdictionOfOwner,
+                                      value:
+                                        climatewarehouseUnits.countryJurisdictionOfOwner,
+                                    },
+                                  ]
+                                : undefined
+                            }
+                            onChange={selectedOptions =>
                               setEditUnits(prev => ({
                                 ...prev,
-                                countryJurisdictionOfOwner: value,
+                                countryJurisdictionOfOwner:
+                                  selectedOptions[0].value,
                               }))
                             }
+                            placeholder={intl.formatMessage({
+                              id: 'country-jurisdiction-of-owner',
+                            })}
                           />
                         </InputContainer>
                         {errorMessageAlert('countryJurisdictionOfOwner')}