5.12: Correction

app.js
import express from 'express';
import fs from "node:fs/promises";

const app = express();

app.use(express.static('public'));
app.use(express.urlencoded({extended:false}));

app.listen(3000, () => {
  console.log('Notre app « profils » écoute sur le port 3000')
});

app.get('/profil', async (requete, reponse) => {
  console.log('Requete GET /profil reçue');
  let profilsTexte=await fs.readFile('profils.json','utf8');
  let profils=JSON.parse(profilsTexte);
  let noms={};
  for(let profil of Object.values(profils)){
    noms[profil.id]=profil.nom;
  }
  reponse.send(noms);
})

app.get('/profil/:id', async (requete, reponse) => {
  console.log('Requete GET /profil/:id reçue');
  let id=requete.params.id;
  let profilsTexte=await fs.readFile('profils.json','utf8');
  let profils=JSON.parse(profilsTexte);
  reponse.send(profils[id]);
})

app.post('/profil/:id', async (requete, reponse) => {
  console.log('Requete POST /profil/:id reçue');
  let id=requete.params.id;
  let profilsTexte=await fs.readFile('profils.json','utf8');
  let profils=JSON.parse(profilsTexte);
  // Attention: ici on ne fait aucune validation.
  // Il faudrait valider les données (nottament "portrait" et les nombres) et vérifier les noms des champs.
  profils[id]=requete.body;
  await fs.writeFile('profils.json',JSON.stringify(profils));
  reponse.send({message:'ok'});
})
profils.js
const principal     =document.getElementById('profil-principal');
const formulaire    =document.getElementById('formulaire');
const liste         =document.getElementById('liste');


// Chercher les noms pour créer la liste en haut de la page
const noms=await simple_fetch('profil');
for(const [id,nom] of Object.entries(noms)){
  const li=document.createElement('li');
  li.setAttribute('data-id',id);
  li.textContent=nom;
  liste.append(li);
}

// Afficher le profil quand l'utilisateur clique sur un nom
liste.addEventListener('click',(event)=>{
  if(event.target.nodeName!=='LI'){return;}
  const id=event.target.getAttribute('data-id');
  afficher_profil(id);
});

async function afficher_profil(id){
  const profil=await simple_fetch('profil/'+id);
  principal.setAttribute('data-id',id);
  principal.querySelector('.nom'        ).textContent=profil.nom;
  principal.querySelector('.portrait'   ).src=profil.portrait;
  principal.querySelector('.portrait'   ).className='portrait '+profil.sexe;
  principal.querySelector('.messages'   ).textContent=profil.messages+' messages';
  principal.querySelector('.likes'      ).textContent=profil.likes+' likes';
  principal.querySelector('.description').textContent=profil.description;
}

// Afficher et remplir le formulaire quand l'utilisateur clique sur editer
document.getElementById('editer').addEventListener('click',async ()=>{
  const id=principal.getAttribute('data-id');
  const profil=await simple_fetch('profil/'+id);
  formulaire.style.display='block';
  formulaire.setAttribute('data-id',id);
  document.getElementById('edit-nom'        ).value=profil.nom;
  document.getElementById('edit-sexe'       ).value=profil.sexe;
  document.getElementById('edit-portrait'   ).value=profil.portrait;
  document.getElementById('edit-messages'   ).value=profil.messages;
  document.getElementById('edit-likes'      ).value=profil.likes;
  document.getElementById('edit-description').value=profil.description;
});

// Envoyer le profil edit par POST au serveur quand l'utilisateur clique sur enregistrer
document.getElementById('enregistrer').addEventListener('click',async ()=>{
  const id=formulaire.getAttribute('data-id');
  const profil={id};
  profil.nom        =document.getElementById('edit-nom'        ).value;
  profil.sexe       =document.getElementById('edit-sexe'       ).value;
  profil.portrait   =document.getElementById('edit-portrait'   ).value;
  profil.messages   =document.getElementById('edit-messages'   ).value;
  profil.likes      =document.getElementById('edit-likes'      ).value;
  profil.description=document.getElementById('edit-description').value;
  await simple_fetch('profil/'+id,{post:profil});  
  formulaire.style.display='none';
  afficher_profil(id);  
});