From 4b577f90940c9ddac2d6ae101af81a5060bc37d1 Mon Sep 17 00:00:00 2001
From: Pasq G <pasq@riseup.net>
Date: Fri, 22 Nov 2024 13:45:03 +0100
Subject: [PATCH] Millorant pobles

---
 imports/ui/App.jsx | 36 +++++++++++++++++++++---------------
 server/main.js     |  2 +-
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/imports/ui/App.jsx b/imports/ui/App.jsx
index 7c61d62..3ad9b1f 100644
--- a/imports/ui/App.jsx
+++ b/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();
-
   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>
diff --git a/server/main.js b/server/main.js
index b79a9e1..eb029eb 100644
--- a/server/main.js
+++ b/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({