fix: group other forest types by group

geops · May 1, 2020 · 6c2571a · 6c2571a
1 parent 115128e
commit 6c2571a
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 15 deletions.
diff --git a/lib/src/locate.js b/lib/src/locate.js
@@ -145,9 +145,17 @@ function locate(location = {}) {
   options.indicator = types.indicator.filter(byForestTypes).map((i) => i.code);
   options.treeType = types.treeType.filter(byForestTypes).map((tt) => tt.code);
 
+  const forestTypesByGroup = (group) =>
+    !location.groups || location.groups.includes(group)
+      ? forestTypes.filter((ft) => ft.group[group]).map((ft) => ft.code)
+      : [];
+
   forestTypes = {
-    main: forestTypes.filter((ft) => ft.group.main).map((ft) => ft.code),
-    other: forestTypes.filter((ft) => !ft.group.main).map((ft) => ft.code),
+    main: forestTypesByGroup('main'),
+    pioneer: forestTypesByGroup('pioneer'),
+    special: forestTypesByGroup('special'),
+    volatile: forestTypesByGroup('volatile'),
+    riverside: forestTypesByGroup('riverside'),
   };
   if (ecogram && (!location.groups || location.groups.includes('main'))) {
     ecogram = ecogram.map((e) => {

diff --git a/src/components/LocationResult.js b/src/components/LocationResult.js
@@ -13,6 +13,8 @@ import HelpModal from './HelpModal';
 import { setFormLocation } from '../store/actions';
 import styles from './LocationResult.module.css';
 
+const otherForestTypeGroups = ['special', 'volatile', 'riverside', 'pioneer'];
+
 function LocationResult() {
   const dispatch = useDispatch();
   const { t, i18n } = useTranslation();
@@ -60,21 +62,36 @@ function LocationResult() {
             </HelpModal>
           </div>
           <Dropdown
-            search
+            search={false}
             label={t('forestType.group.other')}
-            options={forestTypes.other.map((key) => ({
-              key,
-              content: (
-                <>
-                  <ForestTypeButton code={key} compact />
-                  {key} - {info('forestType', key)[i18n.language]}
-                </>
-              ),
-              text: `${key} - ${info('forestType', key)[i18n.language]}`,
-              value: key,
-            }))}
             value={formLocation.forestType}
-          />
+          >
+            <Dropdown.Menu>
+              {otherForestTypeGroups
+                .map((group) => (
+                  <>
+                    <Dropdown.Header content={t(`forestType.group.${group}`)} />
+                    {forestTypes[group].map((key) => {
+                      return (
+                        <Dropdown.Item
+                          content={
+                            <>
+                              <ForestTypeButton code={key} compact />
+                              {key} - {info('forestType', key)[i18n.language]}
+                            </>
+                          }
+                          value={key}
+                          onClick={(e, { value: forestType }) =>
+                            selectForestType(forestType)
+                          }
+                        />
+                      );
+                    })}
+                  </>
+                ))
+                .reduce((ttft, ft) => ttft.concat(ft), [])}
+            </Dropdown.Menu>
+          </Dropdown>
         </>
       )}
     </Form>