Abans d'actualitzar la versió de React a 19

imports/ui/App.jsx

@@ -10,13 +10,29 @@ import { Tipus } from './Tipus';
 import { BarraNav } from './BarraNav/BarraNav';
 
 import { UserStat } from './BarraNav/UserStat';
+import { Usuaris } from './Usuaris';
 
 const Loguejat = lazy(async () => await import('/imports/ui/Loguejat.jsx'));
 
 
+
+
 export const App = () => {
 
   const user = useTracker("user", async () => await Meteor.userAsync());
+
+  const [esAdministrador, setEsAdministrador] = useState(false);
+
+  const u = useTracker("user", async () => await Meteor.userAsync());
+  const userId = Meteor.userId();
+
+
+  useEffect(() => {
+    (async () => {
+        const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
+        setEsAdministrador(comprovaAdmin);
+    })();
+}, []);
   // const userId = await Meteor.userAsync();
   
   return <BrowserRouter>
@@ -26,6 +42,7 @@ export const App = () => {
 
     <Routes>
       <Route path="/" element={ <Suspense fallback={<>Carregant...</>}>{user ? <Loguejat /> : <Login/>}</Suspense> } />
+      <Route path="/usuaris" element={ <Usuaris /> } />
       <Route path="/pobles" element={ <Pobles /> } />
       <Route path="/necessitats" element={ <Necessitats /> } />
       <Route path="/tipus" element={ <Tipus /> } />

imports/ui/BarraNav/BarraNav.jsx

@@ -1,50 +1,11 @@
-import React, {useState, useEffect} from "react";
+import React, {useState, useEffect, lazy} from "react";
 import { Link } from 'react-router-dom';
 import { Roles } from 'meteor/roles';
+import { PanellSeccions } from "./PanellSeccions/PanellSeccions";
 
-const BotóSecció = ({titol, linkto}) => {
+const SeccióPobles = lazy(async () => await import('/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx'));
-     return <div style={{
+const SeccióNecessitats = lazy(async () => await import('/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx'));
-          border: `1px solid #aaaa`,
+const SeccióTipus = lazy(async () => await import('/imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx'));
-          borderRadius: `.3rem`,
-          padding: `.2rem`,
-          backgroundColor: `lightblue`,
-          margin: `.5rem`
-     }}>
-          <Link to={linkto} >{titol}</Link>
-     </div>;
-};
-
-const SeccióPobles = () => <BotóSecció
-     titol="Pobles"
-     linkto="/pobles"
-/>;
-
-const SeccióNecessitats = () => <BotóSecció
-     titol="Necessitats"
-     linkto="/necessitats"
-/>;
-
-const SeccióTipus = () => <BotóSecció
-     titol="Tipus"
-     linkto="/tipus"
-/>;
-
-const SeccióUsuaris = () => <BotóSecció
-     titol="Usuaris"
-     linkto="/usuaris"
-/>;
-
-const PanellSeccions = ({children}) => {
-     return <><div style={{
-          display: `flex`,
-          border: `1px solid #cccc`,
-          padding: `.5rem`,
-          borderRadius: `.5rem`,
-          backgroundColor: `lightslategray`
-     }}>{children}</div>
-     <br />
-     </>;
-};
 
 const BarraNav = () => {
      const [esAdministrador, setEsAdministrador] = useState(false);

imports/ui/BarraNav/PanellSeccions/PanellSeccions.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+
+export const BotóSecció = ({titol, linkto}) => {
+     return <div style={{
+          border: `1px solid #aaaa`,
+          borderRadius: `.3rem`,
+          padding: `.2rem`,
+          backgroundColor: `lightblue`,
+          margin: `.5rem`
+     }}>
+          <Link to={linkto} >{titol}</Link>
+     </div>;
+};
+
+export const SeccióPobles = () => <BotóSecció
+     titol="Pobles"
+     linkto="/pobles"
+/>;
+
+export const SeccióNecessitats = () => <BotóSecció
+     titol="Necessitats"
+     linkto="/necessitats"
+/>;
+
+export const SeccióTipus = () => <BotóSecció
+     titol="Tipus"
+     linkto="/tipus"
+/>;
+
+export const SeccióUsuaris = () => <BotóSecció
+     titol="Usuaris"
+     linkto="/usuaris"
+/>;
+
+export const PanellSeccions = ({children}) => {
+     return <><div style={{
+          display: `flex`,
+          border: `1px solid #cccc`,
+          padding: `.5rem`,
+          borderRadius: `.5rem`,
+          backgroundColor: `lightslategray`
+     }}>{children}</div>
+     <br />
+     </>;
+};
+

imports/ui/BarraNav/UserStat.jsx

@@ -1,6 +1,6 @@
 import { Meteor } from 'meteor/meteor';
-import React, {useState, useEffect} from 'react';
+import React, {useState, useEffect, Suspense} from 'react';
-import { useTracker } from 'meteor/react-meteor-data/suspense';
+import { useTracker, useFind } from 'meteor/react-meteor-data/suspense';
 
 // import { FilesCol } from '/imports/api/files.js';
 import { useNavigate, Link } from 'react-router-dom';
@@ -36,11 +36,11 @@ const UserStat = ({setEditaPerfil}) => {
 
 
   useEffect(() => {
-    (async () => {
+    // (async () => {
-        const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
+        const comprovaAdmin = Roles.userIsInRole(userId, ["admin"]);
         setEsAdministrador(comprovaAdmin);
-    })();
+    // })()1
-}, []);
+  }, []);
 
   // const u = useUserContext();
 
@@ -64,7 +64,7 @@ const UserStat = ({setEditaPerfil}) => {
 
   // alert("avLnk: ", u.profile.avatarLink);
   
-  return <>
+  return <Suspense fallback="Carregant...">
     <div
       style={{
         // color: `lightblue`,
@@ -96,7 +96,7 @@ const UserStat = ({setEditaPerfil}) => {
 
       }}
     >
-      { esAdministrador && <div style={{
+      { u && esAdministrador && <div style={{
           color: `red`,
           fontSize: `xx-small`,
           // textAlign: `right`
@@ -185,7 +185,7 @@ const UserStat = ({setEditaPerfil}) => {
       </div>
     }
     <br /><br />
-  </>;
+  </Suspense>;
 };
 
 export { UserStat };

imports/ui/Pobles.jsx

@@ -14,7 +14,8 @@ export const Pobles = () => {
      
      const [pobleSeleccionat, setPobleSeleccionat] = useState(null);
      useSubscribe('pobles');
-     const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
+     // const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
+     const pobles = useFind(PoblesCollection, [{}, {sort: {nomPoble: 1}}]);
      
      const [esEditor, setEsEditor] = useState(false);
      const userId = Meteor.userId();

imports/ui/Usuaris.jsx

@@ -0,0 +1,110 @@
+import React, { Suspense, useEffect, useState, useRef, lazy } from 'react';
+import { Meteor } from 'meteor/meteor';
+import { PoblesCollection } from '/imports/api/pobles.js';
+import { useSubscribe, useTracker, useFind } from 'meteor/react-meteor-data/suspense';
+
+import { Roles } from 'meteor/roles';
+// import { useUserId } from 'meteor/react-meteor-accounts';
+import { BarraNav } from "./BarraNav/BarraNav";
+
+
+
+
+export const Usuaris = () => {
+     
+     const [usrSeleccionat, setUsrSeleccionat] = useState(null);
+     useSubscribe('pobles');
+     const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
+     
+     const [esEditor, setEsEditor] = useState(false);
+     const userId = Meteor.userId();
+     
+     const usuaris = useTracker("usuaris", () => {
+          Meteor.subscribe('usuaris');
+          return Meteor.users.find().fetch().filter(u => u._id !== Meteor.userId());
+     });
+     // console.log("isAdmin: ", isAdmin) ;
+     console.log("usuaris: ", usuaris);
+     // (async () => {
+          useEffect(() => {
+               (async () => {
+                    const comprovaAdmin = await Roles.userIsInRoleAsync(userId, ["admin"]);
+                    setEsEditor(comprovaAdmin);
+               })();
+               
+          }, []);
+     // })();
+
+     const QuadreInfo_Usuari = () => {
+          
+          return <div style={{
+               display: `inline-block`,
+               border: `1px solid #6666`,
+               padding: `.5rem`,
+               borderRadius: `.3em`,
+               backgroundColor: `lightcyan`
+          }}>
+               
+               {usrSeleccionat && <h2>{usrSeleccionat._id}</h2>}
+               
+               <form
+                    action={d => {
+                         try {
+                              Meteor.callAsync('editaOAfigPoble',
+                              {
+                                   ...usrSeleccionat || [],
+                                   nomPoble: d.get('nomPoble'),
+                                   cp: d.get('cp') || "",
+                                   comarca: d.get('comarca') || "",
+                              }).then(() => setUsrSeleccionat(null))
+                              .catch(err => console.error(err));
+                         } catch (err) {
+                              alert(err);
+                              console.error(err);
+                         }
+                    }}
+               >
+                    <label htmlFor="inUsername">Nom d'usuari: </label><input name="inUsername" type="text" defaultValue={ usrSeleccionat ? usrSeleccionat.username : ""}/><br />
+                    <label htmlFor="inTel">Telèfon: </label><input name="inTel" type="tel" /><br />
+                    <label htmlFor="inEmail">Correu Electrònic: </label><input name="inEmail" type="email" /><br />
+                    <input type='submit' value="Actualitzar la Població" />
+                    <button onClick={ev => {
+                    ev.preventDefault();
+                    if (confirm(`Vas a eliminar el poble "${usrSeleccionat.nomPoble}". És una operació irreversible. Procedir?`)) {
+                         Meteor.callAsync('eliminaPoble', usrSeleccionat._id).catch(err => console.error(err));
+                              setUsrSeleccionat(null);
+                         }
+                    }}>Elimina</button>
+               </form>
+          </div>;
+     };
+
+     return <Suspense fallback={<>Carregant...</>} >
+          <h1>Usuaris</h1>
+
+          { esEditor && <QuadreInfo_Usuari /> }
+          
+          <ul style={{
+               display: `flex`,
+               flexWrap: `wrap`,
+               justifyContent: `space-evenly`,
+               rowGap: `.3em`,
+               alignContent: `space-around`
+          }}>{
+          usuaris
+               .sort((a,b) => a.username?.toLowerCase() > b.username?.toLowerCase())
+               .map(usr => <li
+                    key={`usr_${usr._id}`}
+                    style={{
+                         display: `block`,
+                         border: `1px solid #6666`,
+                         borderRadius: `.4em`,
+                         padding: `4px`,
+                         listStyle: `none`,
+                         backgroundColor: `${'lightgreen' || 'lightcoral'}`
+                    }}
+               >
+                         {usr.username}{esEditor && <button onClick={() => {setUsrSeleccionat(usr)}}>Edita</button>}</li>)
+          }</ul>
+     </Suspense>;
+};

server/main.js

@@ -192,6 +192,17 @@ Meteor.startup(async () => {
     return TipusCollection.find();
   });
 
+  Meteor.publish('usuaris', async function (uid) {
+
+    const esAdmin = await Roles.userIsInRoleAsync(Meteor.userId(), "admin");
+    const userRoles = await Roles.getRolesForUserAsync(Meteor.userId());
+
+    console.log("userRoles: ", userRoles);
+    if (uid) {
+      return Meteor.users.find({_id: uid},{fields: {username: 1, avatarId: 1, avatarLink: 1}});
+    }
+    return Meteor.users.find({},{fields: {username: 1, avatarId: 1, avatarLink: 1}});
+  });
   ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
   try {