Camps de pobles reactius al canviar la selecció

client/main.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {StrictMode} from 'react';
 import { createRoot } from 'react-dom/client';
 import { Meteor } from 'meteor/meteor';
 import { App } from '/imports/ui/App';
@@ -6,5 +6,7 @@ import { App } from '/imports/ui/App';
 Meteor.startup(() => {
   const container = document.getElementById('react-target');
   const root = createRoot(container);
-  root.render(<App />);
+  root.render(<StrictMode>
+    <App />
+  </StrictMode>);
 });

imports/ui/Pobles.jsx

@@ -10,33 +10,73 @@ import { Link } from 'react-router-dom';
 import { NecessitatsCollection } from '../api/necessitats';
 
 
+const QuadreInfo_Poble = ({esEditor, pobleSeleccionat, setPobleSeleccionat}) => {
           
+     const refInAmbitAssignat = useRef();
 
-export const Pobles = () => {
+     return <div style={{
+          display: `inline-block`,
+          border: `1px solid #6666`,
+          padding: `.5rem`,
+          borderRadius: `.3em`,
+          backgroundColor: `lightcyan`
+     }}>
           
-     const [pobleSeleccionat, setPobleSeleccionat] = useState(null);
+          {pobleSeleccionat && <h2>{pobleSeleccionat._id}</h2>}
-     const [creantPoble, setCreantPoble] = useState(false);
-     useSubscribe('pobles');
-     useSubscribe('usuaris');
 
-     // const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
+          <form
-     const pobles = useFind(PoblesCollection, [{}, {sort: {nomPoble: 1}}]);
+               action={d => {
+                    try {
+                         Meteor.callAsync('editaOAfigPoble',
+                         {
+                              ...pobleSeleccionat || [],
+                              nomPoble: d.get('nomPoble'),
+                              cp: d.get('cp') || "",
+                              comarca: d.get('comarca') || "",
+                              ambitAssociat: d.get('ambit-associat')
+                         }).then(() => setPobleSeleccionat(null))
+                         .catch(err => console.error(err));
+                    } catch (err) {
+                         alert(err);
+                         console.error(err);
+                    }
+               }}
+          >
+               <label htmlFor="nomPoble">Població: </label>
+               <input
+                    name="nomPoble"
+                    key={`inNom_${pobleSeleccionat._id}`}
+                    type="text"
+                    defaultValue={ pobleSeleccionat ? pobleSeleccionat.nomPoble : ""}
+                    // value={ pobleSeleccionat ? pobleSeleccionat.nomPoble : ""}
+                    onChange={ev => refInAmbitAssignat.current.value = ev.target.value.replace(/ +/g, '-').toLowerCase()}
+               /><br />
+               <label htmlFor="comarca">Comarca: </label><input name="comarca" type="text" /><br />
+               <label htmlFor="cp">Codi Postal: </label><input name="cp" type="text" /><br />
                
-     const [esEditor, setEsEditor] = useState(false);
+               { esEditor && <>
-     const userId = Meteor.userId();
+               <br /><br />
+               Àmbit associat:
 
-     // console.log("isAdmin: ", isAdmin) ;
+               <input type="text" name="ambit-associat" id="ambit-associat" key={`inAmbit_${pobleSeleccionat._id}`} defaultValue={pobleSeleccionat?.ambitAssociat} ref={refInAmbitAssignat} />
+               {/* // nomPoble.replace(/ +/g, '-').toLowerCase()}/> */}
+               <br /><br />
+               </>}
 
-     // (async () => {
+               <input type='submit' value="Actualitzar la Població" />
-          useEffect(() => {
+               <button onClick={ev => {
-               (async () => {
+               ev.preventDefault();
-                    const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
+               if (confirm(`Vas a eliminar el poble "${pobleSeleccionat.nomPoble}". És una operació irreversible. Procedir?`)) {
-                    setEsEditor(comprovaAdmin);
+                    Meteor.callAsync('eliminaPoble', pobleSeleccionat._id).catch(err => console.error(err));
-               })();
+                         setPobleSeleccionat(null);
-          }, []);
+                    }
-     // })();
+               }}>Elimina</button>
+          </form>
+     </div>;
+};
 
-     const BotoPobleAmbIndicadors = ({pob}) => {
+const BotoPobleAmbIndicadors = ({pob, pobleSeleccionat, setPobleSeleccionat, esEditor}) => {
+     // let pob = pobleSeleccionat;
      useSubscribe('necessitats', pob.ambitAssociat);
      const necessitats = useFind(NecessitatsCollection, [{"poble.ambitAssociat": pob.ambitAssociat}]);
      const [monitors, setMonitors] = useState(false);
@@ -168,69 +208,34 @@ export const Pobles = () => {
      </li>;
 }
 
+export const Pobles = () => {
      
-     const QuadreInfo_Poble = () => {
+     const [pobleSeleccionat, setPobleSeleccionat] = useState(null);
+     const [creantPoble, setCreantPoble] = useState(false);
+     useSubscribe('pobles');
+     useSubscribe('usuaris');
 
-          const refInAmbitAssignat = useRef();
+     // const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
+     const pobles = useFind(PoblesCollection, [{}, {sort: {nomPoble: 1}}]);
      
-          return <div style={{
+     const [esEditor, setEsEditor] = useState(false);
-               display: `inline-block`,
+     const userId = Meteor.userId();
-               border: `1px solid #6666`,
+     
-               padding: `.5rem`,
+     // console.log("isAdmin: ", isAdmin) ;
-               borderRadius: `.3em`,
+     
-               backgroundColor: `lightcyan`
+     // (async () => {
-          }}>
+          useEffect(() => {
+               (async () => {
+                    const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
+                    setEsEditor(comprovaAdmin);
+               })();
+          }, []);
+     // })();
 
-               {pobleSeleccionat && <h2>{pobleSeleccionat._id}</h2>}
      
-               <form
-                    action={d => {
-                         try {
-                              Meteor.callAsync('editaOAfigPoble',
-                              {
-                                   ...pobleSeleccionat || [],
-                                   nomPoble: d.get('nomPoble'),
-                                   cp: d.get('cp') || "",
-                                   comarca: d.get('comarca') || "",
-                                   ambitAssociat: d.get('ambit-associat')
-                              }).then(() => setPobleSeleccionat(null))
-                              .catch(err => console.error(err));
-                         } catch (err) {
-                              alert(err);
-                              console.error(err);
-                         }
-                    }}
-               >
-                    <label htmlFor="nomPoble">Població: </label>
-                    <input
-                         name="nomPoble"
-                         type="text"
-                         defaultValue={ pobleSeleccionat ? pobleSeleccionat.nomPoble : ""}
-                         onChange={ev => refInAmbitAssignat.current.value = ev.target.value.replace(/ +/g, '-').toLowerCase()}
-                    /><br />
-                    <label htmlFor="comarca">Comarca: </label><input name="comarca" type="text" /><br />
-                    <label htmlFor="cp">Codi Postal: </label><input name="cp" type="text" /><br />
      
-                    { esEditor && <>
-                    <br /><br />
-                    Àmbit associat:
      
-                    <input type="text" name="ambit-associat" id="ambit-associat" defaultValue={pobleSeleccionat?.ambitAssociat} ref={refInAmbitAssignat} />
-                    {/* // nomPoble.replace(/ +/g, '-').toLowerCase()}/> */}
-                    <br /><br />
-                    </>}
      
-                    <input type='submit' value="Actualitzar la Població" />
-                    <button onClick={ev => {
-                    ev.preventDefault();
-                    if (confirm(`Vas a eliminar el poble "${pobleSeleccionat.nomPoble}". És una operació irreversible. Procedir?`)) {
-                         Meteor.callAsync('eliminaPoble', pobleSeleccionat._id).catch(err => console.error(err));
-                              setPobleSeleccionat(null);
-                         }
-                    }}>Elimina</button>
-               </form>
-          </div>;
-     };
 
      // const Indicador = ({valor, ambit, }) => {
 
@@ -240,7 +245,7 @@ export const Pobles = () => {
           
           <h1>Pobles</h1>
 
-          { esEditor && (pobleSeleccionat || creantPoble) && <QuadreInfo_Poble /> }
+          { esEditor && (pobleSeleccionat || creantPoble) && <QuadreInfo_Poble {... {pobleSeleccionat, setPobleSeleccionat, esEditor} } /> }
           
           <ul style={{
                display: `flex`,
@@ -252,7 +257,7 @@ export const Pobles = () => {
           pobles
                .sort((a,b) => a.nomPoble?.toLowerCase() > b.nomPoble?.toLowerCase())
                .map(pob => {
-                    return <BotoPobleAmbIndicadors pob={pob} key={`pob_${pob.ambitAssociat}`} />
+                    return <BotoPobleAmbIndicadors {... {pobleSeleccionat, setPobleSeleccionat, pob, esEditor, key: `pob_${pob.ambitAssociat}`} } />
                })
           }</ul>