Any way to persist a nested class? what would be the right way to handle class like that with nano stores?

[rozenstein94]

export class Patient {
  id: number;
  name: string;
  medicalHistory: string[];
  constructor(
    id: number,
    name: string,
  ) {
    this.id = id;
    this.name = name;
    this.medicalHistory = [];
  }
}

[ai]

Yes, you can create map() store for every patient

[rozenstein94]

Would there be any way to persist it then? Because map doesn't produce an error, but persistentmap does.

export const patientStore = persistentMap<Patient>(samplePatient);

Type 'Patient' does not satisfy the constraint 'Record<string, string | undefined>'.
  Index signature for type 'string' is missing in type 'Patient'.

And it's very unclear from docs if (for example,) react will fire updates on second level nested objects. or I should update array like [...,]? Sorry for simple questions

[ai]

Tell me more about the app. Do you download this data from the server or it sort of client-side draft? Will you have many copies of patients?

[rozenstein94]

It's a draft, so for now its client side local storage for demo, but can be fetched from db. basically its GPT based demo app, and nanostores seems to be nice middleware since it allows logic inside store, so I plan to implement AI calls into store of patients, then react components will just call functions from store. Multiple, but not many

[ai]

Looks like you want to keep too many in a single store.

I suggest having 2 different stores. One for patients from the server. The second for the client-side draft. Just use the same type to share the keys between them.

interface Patient {
  id: number;
  name: string;
  medicalHistory: string[];
}

let patientDraft = persistentMap<Patient>(emptyPatient, {
  encode: JSON.stringify,
  decode: JSON.parse
})

To load data from server you can use Nano Store Query or write your own store:

type RemotePatient =
  | { id: string, isLoading: true }
  | { id: string, isLoading: false, error: 'notFound' | … }
  | { id: string, isLoading: false } & Patient

let cache = {}

function createPatient(id: string): RemotePatient {
  if (!cache[id]) {
    cache[id] = map<RemotePatient>({ id, isLoading: true })
    onMount(cache[id], () => {
      loadData(id).then(data => cache[id].set(data))
    })
  }
  return cache[id]
}

[rozenstein94]

//patientStore.ts 
import { Patient } from "../model/Patient";
import { persistentMap } from '@nanostores/persistent';
// interface Patient {
//   id: number;
//   name: string;
//   birthDate: string;
//   address: string;
//   phoneNumber: string;
//   email: string;
//   medicalHistory: string[];
//   allergies: string[];
//   labResults: string[];
//   diagnoses: string[];
//   prescriptions: string[];
// }
const iPatient: Patient = {
  id: 1,
  address: "",
  birthDate: "11.11.1991",
  diagnoses: [
    "12::12::12"
  ],
  email: '12',
  allergies: [
    "", "",
  ],
  labResults: [
    "12::12::12"
  ],
  medicalHistory: [
    "12::12::12"
  ],
  name: "John Doe",
  phoneNumber: "",
  prescriptions: [
    "12::12::12"
  ],
}
let patientStore = persistentMap<Patient>(iPatient,{
    encode: JSON.stringify,
    decode: JSON.parse
  });

/model/patient.ts
export class Patient {
  id: number;
  name: string;
  birthDate: string;
  address: string;
  phoneNumber: string;
  email: string;
  medicalHistory: string[];
  allergies: string[];
  labResults: string[];
  diagnoses: string[];
  prescriptions: string[];
  constructor(
    id: number,
    name: string,
    birthDate: string,
    address: string,
    phoneNumber: string,
    email: string,
  ) {
    this.id = id;
    this.name = name;
    this.birthDate = birthDate;
    this.address = address;
    this.phoneNumber = phoneNumber;
    this.email = email;
    this.medicalHistory = [];
    this.allergies = [];
    this.labResults = [];
    this.diagnoses = [];
    this.prescriptions = [];
  }
}

Type 'Patient' does not satisfy the constraint 'Record<string, string | undefined>'.
  Index signature for type 'string' is missing in type 'Patient'.

That's a type issue I get just at the start, moving it to Interface gives the same error

[ai]

let patientStore = persistentMap<Patient>('patientDraft', iPatient,{
    encode: JSON.stringify,
    decode: JSON.parse
  });

[rozenstein94]

Golden. Thanks for clarifying. Can't be more happy about state manager