Salvare e leggere prestiti da localStorage

Dopo gli strumenti, salviamo anche i prestiti.

Il caso d’uso RegistraPrestito crea un prestito aperto.

Il caso d’uso ChiudiPrestito aggiorna un prestito esistente.

Quindi l’archivio prestiti deve supportare:

salva(prestito)
trovaPerId(id)
tutti()

Obiettivo

Alla fine devi avere:

• un archivio prestiti basato su localStorage;
• prestiti che restano dopo refresh;
• stesso contratto dell’archivio in memoria;
• casi d’uso non modificati.

Chiave localStorage

Usiamo una chiave dedicata:

const CHIAVE_PRESTITI = "registro-laboratorio:prestiti";

Strumenti e prestiti devono avere chiavi separate.

Questo rende piu facile leggere, cancellare e verificare i dati.

Implementazione

File:

src/infrastructure/archivioPrestitiLocalStorage.js

Codice:

const CHIAVE_PRESTITI = "registro-laboratorio:prestiti";

function leggiPrestiti() {
  const testo = localStorage.getItem(CHIAVE_PRESTITI);
  return testo ? JSON.parse(testo) : [];
}

function scriviPrestiti(prestiti) {
  localStorage.setItem(CHIAVE_PRESTITI, JSON.stringify(prestiti));
}

export function creaArchivioPrestitiLocalStorage() {
  return {
    tutti() {
      return leggiPrestiti();
    },

    trovaPerId(id) {
      return leggiPrestiti().find((prestito) => prestito.id === id) ?? null;
    },

    salva(prestito) {
      const prestiti = leggiPrestiti();
      const indice = prestiti.findIndex((item) => item.id === prestito.id);

      if (indice === -1) {
        prestiti.push(prestito);
      } else {
        prestiti[indice] = prestito;
      }

      scriviPrestiti(prestiti);
      return prestito;
    },
  };
}

La forma e quasi uguale a quella degli strumenti.

Per ora va bene.

Collegamento nel punto di composizione

Prima:

const archivioPrestiti = creaArchivioPrestitiInMemoria();

Dopo:

const archivioPrestiti = creaArchivioPrestitiLocalStorage();

Il caso d’uso:

creaRegistraPrestito({
  archivioStrumenti,
  archivioPrestiti,
});

non deve cambiare.

Verifica con RegistraPrestito

Scenario:

Dato uno strumento disponibile salvato in localStorage,
quando registro un prestito,
allora il prestito viene salvato in localStorage e lo strumento diventa in_prestito.

Verifica manuale:

1. registra uno strumento;
2. registra un prestito;
3. ricarica la pagina;
4. controlla che il prestito esista ancora;
5. controlla che lo strumento non risulti disponibile.

Verifica con ChiudiPrestito

Scenario:

Dato un prestito aperto salvato in localStorage,
quando chiudo il prestito,
allora il prestito viene aggiornato e resta chiuso dopo il refresh.

Questo verifica che salva aggiorni e non crei duplicati.

Duplicati

Attenzione:

salva(prestito)

deve aggiornare se l’id esiste gia.

Se ogni salvataggio fa solo push, rischiamo:

prestito p-001 aperto
prestito p-001 chiuso

due copie dello stesso prestito.

Il registro diventa incoerente.

Esercizio

Implementa archivioPrestitiLocalStorage.

Poi verifica:

• tutti() con archivio vuoto;
• salva() con nuovo prestito;
• trovaPerId() con id esistente;
• salva() con stesso id ma stato cambiato;
• refresh della pagina;
• assenza di duplicati.

Cosa produrre

Alla fine della lezione devi avere:

• file archivioPrestitiLocalStorage.js;
• chiave localStorage dedicata;
• metodi tutti, trovaPerId, salva;
• verifica con registrazione prestito;
• verifica con chiusura prestito;
• nota sui duplicati.

Spiegazione guidata per studiare

Questa lezione va studiata su due piani. Il primo è il comportamento visibile del Registro del laboratorio: che cosa vede o fa l’utente quando registra uno strumento, cerca un dispositivo, apre un prestito o segnala un guasto. Il secondo è il confine architetturale: dove deve stare il codice che rende possibile quel comportamento.

Per salvare e leggere prestiti da localStorage, il punto centrale è questo: L’infrastruttura è il bordo tecnico: salva, legge, chiama API, usa localStorage o file JSON. È importante, ma deve restare sostituibile.

Il rischio tipico è far entrare il formato salvato dentro il dominio. Un oggetto comodo per localStorage non è automaticamente il modello con cui ragiona il progetto. Per evitarlo, non partire dal file che hai già aperto nell’editor. Parti dalla domanda: “quale responsabilità sto modificando?”. Se la risposta riguarda una regola del laboratorio, guarda il dominio. Se riguarda una sequenza di operazioni, guarda i casi d’uso. Se riguarda salvataggio, file, localStorage, API o database, guarda l’infrastruttura. Se riguarda input, pulsanti, form e messaggi, guarda la Presentation.

Il tempo è sufficiente per alternare spiegazione, modifica guidata e revisione. Alla fine della lezione lo studente non deve ricordare una definizione a memoria: deve saper indicare un punto del progetto, spiegare perché quel codice sta lì e mostrare una verifica del comportamento.

Passo per passo nel progetto

1. Rileggi il titolo della lezione e riscrivilo come domanda pratica. Per esempio: “dove deve stare questa regola?”, “chi deve salvare questo dato?”, “come verifico questo errore?”.
2. Apri solo i file necessari. Se devi toccare più di tre file, fermati e scrivi prima una mini-mappa.
3. Distingui modello di dominio e formato salvato.
4. Crea una funzione di mapping leggibile.
5. Gestisci dati mancanti o non validi.
6. Verifica che i casi d’uso non cambino quando cambi archivio.
7. Aggiorna una nota breve nel README o negli appunti se hai cambiato un confine del progetto.

Esempio da leggere lentamente

Questo esempio serve a ragionare, non a incollare codice senza capire:

function strumentoToDTO(strumento) {
  return {
    id: strumento.id,
    name: strumento.nome,
    category: strumento.categoria,
    status: strumento.stato
  };
}

Leggilo chiedendoti che cosa cambierebbe se domani sostituissimo la pagina web con una CLI, oppure localStorage con un’API. Se l’esempio continua ad avere senso senza riscrivere tutto, il confine è probabilmente buono. Se invece un dettaglio tecnico si propaga in molti file, il progetto sta tornando fragile.

Prova di comprensione

Prima di chiudere la lezione, rispondi per iscritto a queste domande:

• Qual è la responsabilità principale trattata in questa lezione?
• In quale livello del progetto dovrebbe stare?
• Quale errore faresti se cercassi la soluzione più veloce?
• Quale piccolo test, controllo manuale o esempio dimostra che hai capito?
• Che cosa deve restare facile da cambiare dopo questa lezione?

Una risposta accettabile non deve essere lunga. Deve però usare parole concrete del Registro: strumento, prestito, stato, archivio, caso d’uso, messaggio, test.

Controllo finale

La lezione e completata quando puoi rispondere si:

• i prestiti vengono salvati in localStorage;
• i prestiti restano dopo refresh;
• salva aggiorna un prestito esistente;
• RegistraPrestito non e stato modificato;
• ChiudiPrestito non e stato modificato;
• localStorage resta in Infrastructure.

Nella prossima lezione diamo un nome al formato esterno: DTO.