From 9ff9abacc3adec08202a4141437c9e82c8be04c0 Mon Sep 17 00:00:00 2001
From: vjrj <vjrj@comunes.org>
Date: Wed, 22 Jul 2026 01:01:59 +0200
Subject: [PATCH] bootstrap: lang/type dropdowns jQuery -> react-bootstrap
 <Dropdown>

The false-positive-type selector (Fires.js) and the language selector
(Profile.js) used Bootstrap's jQuery dropdown (`data-toggle="dropdown"`), the
last widgets depending on the BS4 jQuery JS that goes away with the CSS swap.
Replace both with react-bootstrap <Dropdown>/<Dropdown.Toggle>/<Dropdown.Item>
(open/close in React, no jQuery). Keeps the `.lang-selector` hook and `.btn-group`
layout; works on the current BS4 CSS.

Full-app build boots clean.
---
 imports/ui/pages/Fires/Fires.js     | 25 ++++++++++---------------
 imports/ui/pages/Profile/Profile.js | 23 +++++++++--------------
 2 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/imports/ui/pages/Fires/Fires.js b/imports/ui/pages/Fires/Fires.js
index 12da3be..7406935 100644
--- a/imports/ui/pages/Fires/Fires.js
+++ b/imports/ui/pages/Fires/Fires.js
@@ -6,7 +6,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTracker } from 'meteor/react-meteor-data';
 import { withTranslation, Trans } from 'react-i18next';
-import { Row, Col, Alert, Form } from 'react-bootstrap';
+import { Row, Col, Alert, Form, Dropdown } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { Helmet } from 'react-helmet-async';
@@ -204,24 +204,19 @@ class Fire extends React.Component {
                   <Trans>Indícanos de que tipo de fuego se trata y ayúdanos así a mejorar nuestras notificaciones:</Trans>
                 </div>
                 <Form.Group>
-                  <div className="btn-group">
-                    <button className="btn btn-secondary btn-sm dropdown-toggle lang-selector" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  <Dropdown className="btn-group">
+                    <Dropdown.Toggle variant="secondary" size="sm" className="lang-selector">
                       {t('Elige un tipo')}
-                    </button>
-                    <div className="dropdown-menu">
+                    </Dropdown.Toggle>
+                    <Dropdown.Menu>
                       {Object.keys(FalsePositiveTypes).map(key => (
-                         <button
-                             className="dropdown-item"
-                           onClick={() => this.onTypeSelect(key)}
-                             key={key}
-                             type="button"
-                         >
-                           <Trans>{FalsePositiveTypes[key]}</Trans>
-                         </button>
+                        <Dropdown.Item as="button" key={key} onClick={() => this.onTypeSelect(key)}>
+                          <Trans>{FalsePositiveTypes[key]}</Trans>
+                        </Dropdown.Item>
                        ))
                       }
-                    </div>
-                  </div>
+                    </Dropdown.Menu>
+                  </Dropdown>
                 </Form.Group>
               </Fragment> }
 
diff --git a/imports/ui/pages/Profile/Profile.js b/imports/ui/pages/Profile/Profile.js
index e381bda..02faada 100644
--- a/imports/ui/pages/Profile/Profile.js
+++ b/imports/ui/pages/Profile/Profile.js
@@ -3,7 +3,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Form, Button } from 'react-bootstrap';
+import { Row, Form, Button, Dropdown } from 'react-bootstrap';
 import _ from 'lodash';
 import { Meteor } from 'meteor/meteor';
 import { Accounts } from 'meteor/accounts-base';
@@ -200,24 +200,19 @@ class Profile extends React.Component {
       </Form.Group>
       <Form.Group>
         <Form.Label>{this.t('Idioma')}</Form.Label>
-        <div className="btn-group">
-          <button className="btn btn-secondary btn-sm dropdown-toggle lang-selector" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <Dropdown className="btn-group">
+          <Dropdown.Toggle variant="secondary" size="sm" className="lang-selector">
             {langName[i18n.language]}
-          </button>
-          <div className="dropdown-menu">
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
             {enabledLangs.map(lang => (
-              <button
-                className="dropdown-item"
-                onClick={() => this.onLangSelect(lang)}
-                key={lang}
-                type="button"
-              >
+              <Dropdown.Item as="button" key={lang} onClick={() => this.onLangSelect(lang)}>
                 {langName[lang]}
-              </button>
+              </Dropdown.Item>
            ))
           }
-          </div>
-        </div>
+          </Dropdown.Menu>
+        </Dropdown>
         <InputHint><i className="fa fa-language"></i> <a href="https://translate.comunes.org/projects/todos-contra-el-fuego/" rel="noopener noreferrer" target="_blank">{this.t('Puedes participar en las traducciones')}</a></InputHint>
       </Form.Group>
       <Form.Group>