Millorant pobles

imports/ui/App.jsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect, useState, useRef } from 'react';
 import { Meteor } from 'meteor/meteor';
 import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
 import { Login } from './Login';
@@ -7,50 +7,56 @@ import { PoblesCollection } from '/imports/api/pobles.js';
 import { useSubscribe, useTracker, useFind } from 'meteor/react-meteor-data/suspense';
 
 
-const AfegirPoblacio = () => {
-  useSubscribe('pobles');
+const Pobles = () => {
 
+  const [pobleSeleccionat, setPobleSeleccionat] = useState(null);
+  useSubscribe('pobles');
   const pobles = useTracker("pobles", () => PoblesCollection.find().fetchAsync());
 
-  return <Suspense fallback={<>Carregant...</>} >
-    <form action={d => {
+  const QuadreInfo_Poble = () => {
+    
+    return <>
+      <h1>{pobleSeleccionat._id}</h1>
+      <form action={d => {
         try {
-          Meteor.callAsync('afigPoble',
+          Meteor.callAsync('editaOAfigPoble',
             {
               createdAt: new Date(),
               nomPoble: d.get('nomPoble'),
               cp: d.get('cp') || "",
               comarca: d.get('comarca') || "",
-            }
+            }, pobleSeleccionat
           ).catch(err => console.error(err));
         } catch (err) {
           alert(err);
           console.error(err);
         }
-      
     }}>
-      <label htmlFor="nomPoblacio">Població: </label><input name="nomPoble" type="text" /><br />
+      <label htmlFor="nomPoble">Població: </label><input name="nomPoble" type="text" defaultValue={pobleSeleccionat.nomPoble}/><br />
       <label htmlFor="comarca">Comarca: </label><input name="comarca" type="text" /><br />
       <label htmlFor="cp">Codi Postal: </label><input name="cp" type="text" /><br />
       <input type='submit' value="Crear la Població" />
-    </form>
+    </form></>;
+  };
+
+  return <Suspense fallback={<>Carregant...</>} >
+    {pobleSeleccionat && <QuadreInfo_Poble />}
 
     <ul>{
       pobles
         .sort((a,b) => a.nomPoble.toLowerCase() > b.nomPoble.toLowerCase())
-        .map(pob => <li key={`pob_${pob._id}`}>{pob.nomPoble}</li>)
+        .map(pob => <li key={`pob_${pob._id}`}>{pob.nomPoble}<button onClick={() => {setPobleSeleccionat(pob)}}>Edita</button><button>&times;</button></li>)
     }</ul>
   </Suspense>;
 };
 
 const Loguejat = () => {
-  const userId = useUserId();
 
-  // const user = await Meteor.userAsync();
+  const userId = useUserId();
   
   return userId ? <div>
     
-    <Link to="/afegir_poblacio" >Afegir Població</Link>
+    <Link to="/pobles" >Pobles</Link>
     
     <button onClick={() => Meteor.logout()} >Logout</button>
 
@@ -87,7 +93,7 @@ export const App = () => (
   <BrowserRouter>
     <Routes>
       <Route path="/" element={ <Loguejat /> } />
-      <Route path="/afegir_poblacio" element={ <AfegirPoblacio /> } />
+      <Route path="/pobles" element={ <Pobles /> } />
       <Route path="/login" element={ <Login /> } />
     </Routes>
   </BrowserRouter>

server/main.js

@@ -182,7 +182,7 @@ Meteor.startup(async () => {
 
   Meteor.methods({
 
-    'afigPoble': async function (poble) {
+    'editaOAfigPoble': async function (poble) {
       try {
         if (poble.nomPoble) {
           return await PoblesCollection.insertAsync({