feat: implement and use forest type button

src/components/EcogramPopup.js

@@ -6,9 +6,7 @@ import { List, Popup } from 'semantic-ui-react';
 import { info } from 'lib/src';
 
 import Button from './Button';
-
-const { REACT_APP_VECTOR_TILES_ENDPOINT } = process.env;
-const endpoint = `${REACT_APP_VECTOR_TILES_ENDPOINT}/forest-type`;
+import ForestTypeButton from './ForestTypeButton';
 
 function EcogramPopup({ target, forestTypes, onClose, selectForestType }) {
   const { t, i18n } = useTranslation();
@@ -18,11 +16,7 @@ function EcogramPopup({ target, forestTypes, onClose, selectForestType }) {
       <List>
         {forestTypes.map((f) => (
           <List.Item style={{ whiteSpace: 'nowrap' }}>
-            <Button
-              active
-              icon="file pdf"
-              onClick={() => window.open(`${endpoint}/${f}.pdf`, '_blank')}
-            />
+            <ForestTypeButton code={f} />
             <Button active onClick={() => selectForestType(f)}>
               {f} - {info('forestType', f)[i18n.language]}
             </Button>

src/components/ForestTypeButton.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Button from './Button';
+
+const { REACT_APP_VECTOR_TILES_ENDPOINT } = process.env;
+const endpoint = `${REACT_APP_VECTOR_TILES_ENDPOINT}/forest-type`;
+
+function ForestTypeButton({ code, ...props }) {
+  return (
+    <Button
+      active
+      icon="file pdf"
+      onClick={(e) => {
+        e.stopPropagation();
+        window.open(`${endpoint}/${code}.pdf`, '_blank');
+      }}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    />
+  );
+}
+
+ForestTypeButton.propTypes = {
+  code: PropTypes.string.isRequired,
+};
+
+export default ForestTypeButton;

src/components/LocationResult.js

@@ -8,11 +8,10 @@ import { info } from 'lib/src';
 
 import Dropdown from './Dropdown';
 import Ecogram from './Ecogram';
+import ForestTypeButton from './ForestTypeButton';
 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();
@@ -47,31 +46,19 @@ function LocationResult() {
         <Dropdown
           search
           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) => {
-                    const label = info('forestType', key)[i18n.language];
-                    const text = label ? `${key} - ${label}` : key;
-                    return (
-                      <Dropdown.Item
-                        text={text}
-                        value={key}
-                        onClick={(e, { value: forestType }) =>
-                          selectForestType(forestType)
-                        }
-                      />
-                    );
-                  })}
-                </>
-              ))
-              .reduce((ttft, ft) => ttft.concat(ft), [])}
-          </Dropdown.Menu>
-        </Dropdown>
+        />
       )}
     </Form>
   ) : null;

src/components/ProjectionForm.js

@@ -9,6 +9,7 @@ import { info } from 'lib/src';
 
 import ChoiceButton from './ChoiceButton';
 import Dropdown from './Dropdown';
+import ForestTypeButton from './ForestTypeButton';
 import { setFormLocation } from '../store/actions';
 import styles from './ProjectionForm.module.css';
 
@@ -19,6 +20,14 @@ const getButtonOptions = (type, lng) => (key) => ({
 });
 const getDropdownOptions = (type, lng, includeKey = false) => (key) => ({
   key,
+  content: includeKey ? (
+    <>
+      <ForestTypeButton code={key} compact />
+      {key} - {info(type, key)[lng]}
+    </>
+  ) : (
+    info(type, key)[lng]
+  ),
   text: includeKey ? `${key} - ${info(type, key)[lng]}` : info(type, key)[lng],
   value: key,
 });