Intent ESlint

eslint.config.mjs

@@ -0,0 +1,12 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginReact from "eslint-plugin-react";
+
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {files: ["**/*.{js,mjs,cjs,jsx}"]},
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];

imports/ui/Poble.jsx

@@ -30,10 +30,10 @@ export const Poble = () => {
      const userId = Meteor.userId();
      let pob;
 
-     console.log("ambitPoble: ", ambitPoble);
+     // console.log("ambitPoble: ", ambitPoble);
-     console.log("pobles: ", pobles);
+     // console.log("pobles: ", pobles);
      pob = pobles.find(p => p.ambitAssociat === ambitPoble);
-     console.log("pob: ", pob);
+     // console.log("pob: ", pob);
 
      // console.log("isAdmin: ", isAdmin) ;
      
@@ -121,7 +121,7 @@ export const Poble = () => {
                {
                     (async () => {
                          const monitors = await Roles.getUsersInRoleAsync("monitor_de_poble", pob?.ambitAssociat);
-                         console.log("monitors: ", monitors);
+                         // console.log("monitors: ", monitors);
                          return monitors?.map( (u) => <li style={{
                               display: `block`,
                               border: `1px solid #6666`,
@@ -139,7 +139,7 @@ export const Poble = () => {
                {
                     (async () => {
                          const encarregats = await Roles.getUsersInRoleAsync("encarregat_de_tasques", pob?.ambitAssociat);
-                         console.log("encarregats: ", encarregats);
+                         // console.log("encarregats: ", encarregats);
                          return encarregats?.map( (u) => <li style={{
                               display: `block`,
                               border: `1px solid #6666`,
@@ -157,7 +157,7 @@ export const Poble = () => {
                {
                     (async () => {
                          const voluntaris = await Roles.getUsersInRoleAsync("voluntari_de_poble", pob?.ambitAssociat);
-                         console.log("voluntaris: ", voluntaris);
+                         // console.log("voluntaris: ", voluntaris);
                          return voluntaris?.map( (u) => <li style={{
                               display: `block`,
                               border: `1px solid #6666`,

imports/ui/Pobles.jsx

@@ -17,6 +17,8 @@ export const Pobles = () => {
      const [pobleSeleccionat, setPobleSeleccionat] = useState(null);
      const [creantPoble, setCreantPoble] = useState(false);
      useSubscribe('pobles');
+     useSubscribe('usuaris');
+
      // const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
      const pobles = useFind(PoblesCollection, [{}, {sort: {nomPoble: 1}}]);
      
@@ -38,17 +40,24 @@ export const Pobles = () => {
           useSubscribe('necessitats', pob.ambitAssociat);
           const necessitats = useFind(NecessitatsCollection, [{"poble.ambitAssociat": pob.ambitAssociat}]);
           const [monitors, setMonitors] = useState(false);
+          const [encarregats, setEncarregats] = useState(false);
+          const [voluntaris, setVoluntaris] = useState(false);
           
+          // let mon, mons, enc, encs, vol, vols;
 
-          useEffect(() => {
           (async () => {
-                    const mon = await Roles.getUsersInRoleAsync('monitor_de_poble', pob.ambitAssociat);
+               const mons = await Roles.getUsersInRoleAsync("monitor_de_poble", pob?.ambitAssociat);
-                    setMonitors(mon.map(m => m).length);
+               // console.log("monitors: ", monitors);
+               setMonitors(mons?.fetch().length || false);
+
+               const encs = await Roles.getUsersInRoleAsync("encarregat_de_tasques", pob?.ambitAssociat);
+               // console.log("monitors: ", monitors);
+               setEncarregats(encs?.fetch().length || false);
+
+               const vols = await Roles.getUsersInRoleAsync("voluntari_de_poble", pob?.ambitAssociat);
+               // console.log("monitors: ", monitors);
+               setVoluntaris(vols?.fetch().length || false);
           })();
-          }, [pob]);
-          
-          
-          // console.log("mon: ", monitors);
 
           return <li
                key={`pob_${pob._id}`}
@@ -67,14 +76,16 @@ export const Pobles = () => {
                     <div style={{
                          position: `absolute`,
                          // display: `inline-block`,
-                         display: `flex`,
+                         display: `grid`,
+                         gridTemplateAreas: `"mons encs vols"`,
                          justifyContent: `space-around`,
                          left: `0`,
                          top: `-.8em`,
                          width: `100%`,
                          fontSize: `60%`,
                          textAlign: `center`,
-                         pointerEvents: `none`
+                         pointerEvents: `none`,
+                         alignItems: `center`
                     }}>
                          {
                               monitors
@@ -82,22 +93,34 @@ export const Pobles = () => {
                                    border: `1px solid #6666`,
                                    borderRadius: `50%`,
                                    minWidth: `1rem`,
-                                   backgroundColor: `#ff0a`
+                                   minHeight: `1rem`,
+                                   backgroundColor: `#f006`,
+                                   gridArea: `mons`
                               }}>{monitors}</span>
                               : false
                          }
-                         <span style={{
+                         {    encarregats
+                              ? <span style={{
                                    border: `1px solid #6666`,
                                    borderRadius: `50%`,
                                    minWidth: `1rem`,
-                              backgroundColor: `#fffa`
+                                   minHeight: `1rem`,
-                         }}>2</span>
+                                   backgroundColor: `#fa0a`,
-                         <span style={{
+                                   gridArea: `encs`
+                              }}>{encarregats}</span>
+                              : false
+                         }
+                         {    voluntaris
+                              ? <span style={{
                                    border: `1px solid #6666`,
                                    borderRadius: `50%`,
                                    minWidth: `1rem`,
-                              backgroundColor: `#fffa`
+                                   minHeight: `1rem`,
-                         }}>3</span>
+                                   backgroundColor: `#ff06`,
+                                   gridArea: `vols`
+                              }}>{voluntaris}</span>
+                              : false
+                         }
                     </div>
                }
 
@@ -123,7 +146,7 @@ export const Pobles = () => {
                                         border: `1px solid #6666`,
                                         borderRadius: `50%`,
                                         minWidth: `1rem`,
-                                        backgroundColor: `#f006`
+                                        backgroundColor: `#00a6`
                                    }}>{necessitats.length }</span>
                               : false
                          }
@@ -229,7 +252,7 @@ export const Pobles = () => {
           pobles
                .sort((a,b) => a.nomPoble?.toLowerCase() > b.nomPoble?.toLowerCase())
                .map(pob => {
-                    return <BotoPobleAmbIndicadors pob={pob} />
+                    return <BotoPobleAmbIndicadors pob={pob} key={`pob_${pob.ambitAssociat}`} />
                })
           }</ul>
 

imports/ui/Usuaris.jsx

@@ -169,10 +169,10 @@ export const Usuaris = () => {
           return await Roles.getRolesForUserAsync(usrSeleccionat?._id);
      });
 
-     console.log("rols: ", rols);
+     // console.log("rols: ", rols);
      
      // console.log("isAdmin: ", isAdmin) ;
-     console.log("usuaris: ", usuaris);
+     // console.log("usuaris: ", usuaris);
      // (async () => {
           useEffect(() => {
                (async () => {

package.json

@@ -23,5 +23,9 @@
       "server": "server/main.js"
     },
     "testModule": "tests/main.js"
+  },
+  "devDependencies": {
+    "babel-plugin-react-compiler": "^19.0.0-beta-55955c9-20241229",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-55955c9-20241229"
   }
 }