Calcolo successione legittima e patrimonio

Sono stato contattato da un’impresa di onoranze funebri per realizzare un modulo che si potesse integrare nel loro sito.

Volevano dare la possibilità ad un utente di capire, in modo generale, come si sarebbe divisa l’eredità di un membro della loro famiglia e poi avere la possibilità di contattare un esperto per dare loro la panoramica completa.

Il modulo è diviso in due parti, il calcolo dell’eredità per successione legittima e il calcolo del patrimonio.

Per capire quali sono le quote corrette bisogna attenersi al codice civile seguendo una lunga serie di articoli (successione legittima, patrimonio) che contengono più regole speciali di quanto potessi immaginare.

Tech stack e le ragioni

Il framework che preferisco usare per app React è senza dubbi Next.js.

Negli anni è diventato la mia scelta predefinita perché mi permette di fornire pagine HTML generate dal server così che siano già complete di tutti i dati necessari a un ottimo Search Engine Optimization (SEO) e First Contentful Paint (FCP) senza dover aspettare che tutti i contenuti vengano generati da JavaScript Client Side.

Next, inoltre, mi da possibilità di avere degli API endpoint Server Side, quindi non distribuiti all'utente, che mi permettono di non rivelare i dettagli dell’implementazione del calcolo.

L’app è realizzata pienamente in Typescript il quale mi fa sentire molto più sicuro del corretto funzionamento della logica. Jest viene poi utilizzato per gli Unit Test per fornirmi ancora più sicurezza.

I test vengono eseguiti ogni volta che eseguo una pull request grazie alla Continuous Integration con Github Actions.

Nel front-end utilizzo TailwindCSS per gli stili, lo trovo fantastico perché mi fornisce di un buonissimo Design System e mi rende veloce nell'applicare gli stili che voglio ad ogni elemento.

Framer Motion rende semplice creare animazioni che sarebbe impossibili con solo CSS, come andare da height: 0 a height: auto.

Come ho risolto le difficoltà incontrate

L’impresa principale è stata quella di dover sviluppare un form ricorsivo. Una persona può non essere disponibile ad ereditare la propria quota e perciò lasciarla ai propri figli o genitori che a loro volta possono fare lo stesso.

Dovevo quindi essere in grado di rappresentarlo nella pagina.

Il mio primo tentativo è stato quello di organizzare i parenti di qualcuno come un elenco rientrato il che funzionava bene nella vista desktop ma creava problemi per dispositivi con uno schermo più stretto come uno smartphone.

La mia soluzione è stata suddividere il form in pagine dove ogni pagina permette di modificare le informazioni dei parenti di solo questa persona rendendo così più intuitivo il processo.

Quando un parente non è disponibile a ricevere l’eredità, per precedente morte o rinunzia, appare un link che reindirizza alla sua pagina dove si possono specificare i parenti.

Per tornare indietro si può utilizzare l’apposito bottone o usare i “breadcrumbs” situati al di sopra del form.

Cosa ho imparato nel percorso

Il concetto più importante che ho imparato durante questo progetto è l’uso di una struttura dei dati piatta quando si lavora con React perché semplifica la modifica dello stato.

È imperativo non modificare mai direttamente lo stato. Si deve passare una copia dei dati con le modifiche che si voglio apportare.

Per capire se qualcosa è cambiato confronta React l’indirizzo della struttura in memoria (il quale non cambia mutando un oggetto).

Questo è molto meno dispendioso rispetto a controllare che ogni proprietà sia uguale una per una.

Una struttura dei dati annidata può sembrare il modo naturale per strutturare un albero genealogico così da poter accedere ai figli direttamente dal genitore.

const [deepTree, setDeepTree] = useState({
  // Primo livello
  id: 0,
  name: "Root",
  children: [
    {
      // Second livello
      id: 1,
      name: "Figlia",
      children: [
        {
          // Terzo livello
          id: 2,
          name: "Nipote",
          children: [],
// (parentesi di chiusura omesse per brevità)

Questo però crea problemi nell’aggiornare le proprietà di una singola persona, per cambiare il nome di “Nipote” dovrei passare per ogni suo ascendente e creare copie di ogni oggetto per non violare le norme di React.

const nextChild = { ...deepTree.children[0].children[0] };
nextChild.name = "Nuovo nome";

const nextParent = { ...deepTree.children[0] };
const parentChildren = { ...nextParent.children };
parentChildren[0] = nextChild;
nextParent.children = parentChildren;

const nextTree = { ...deepTree };
const nextTreeChildren = { ...nextTree.children };
nextTreeChildren[0] = nextParent;
nextTree.children = nextTreeChildren;

setDeepTree(nextTree);

Nel primo blocco è lecito riassegnare la proprietà name di nextChild perché punto ad un valore di tipo string che è uno dei tipi primitivi di JavaScript, i quali sono immutabili.

Tutti i valori di tipo object, come nel caso delle liste invece, sono mutabili. Il che significa che se due variabili puntano allo stesso oggetto, riassegnando una proprietà dell'oggetto da una di queste variabili cambierà il valore anche per l'altra.

Questo vuol dire copiare non solo il valore di un parente ma anche dei suoi children perché modificando direttamente nextParent.children[0] modificherebbe anche il valore dello stato attuale, che è sbagliato in React.

Per poi ripeterlo per ogni parente fino ad arrivare a quello di base. È facile capire che più si va a fondo più ardua è un’impresa che dovrebbe essere semplice.

Usando una struttura piatta, invece, posso accedere a qualsiasi persona in modo facile e veloce.

const [flatTree, setFlatTree] = useState({
  // Tutto lo stesso livello
  0: {
    id: 0,
    name: "Defunto",
    children: [1],
  },
  1: {
    id: 1,
    name: "Figlia",
    children: [2],
  },
  2: {
    id: 2,
    name: "Nipote",
    children: [],
  },
});

// id della persona che voglio mutare
const id = 2;
setFlatTree({
  ...flatTree,
  // modifica direttamente quella persona
  // senza toccare nessun altro
  [id]: {
    ...flatTree[id],
    name: "Nuovo nome",
  },
});

Ho ripensato il mio approccio quando sono capitato su una sezione centrata su questo concetto mentre leggevo la nuova documentazione di React, attualmente in beta.

La nuova documentazione è piena di consigli e “best practices” che sono riuscito ad utilizzare nei miei progetti rendendomi, a mio modo di vedere, un developer migliore.