Sources de données

L'inbox lit et écrit à travers une petite abstraction, que vous pouvez fournir de trois façons. Choisissez-en exactement une — source, store ou endpoint. Elles s'excluent mutuellement dans le type : aucune priorité à retenir, et aucun moyen d'en passer deux en se demandant laquelle l'emporte.

Mode endpoint (le défaut en production)

<InstaFixInbox projects="mon-projet" endpoint="/api/instafix" apiKey={KEY} />

Parle à votre endpoint d'adapter : GET pour les listes, PATCH pour les statuts, DELETE pour les suppressions, toujours avec cache: "no-store". Les erreurs arrivent typées par code (AUTH pour 401/403, VALIDATION pour les autres 4xx, SERVER pour les 5xx, NETWORK pour les échecs de fetch). Il n'y a volontairement aucun réessai — une interface de tri doit vous dire les choses tout de suite.

Mode store

<InstaFixInbox projects="ma-demo" store={new LocalStorageStore()} />

Fonctionne avec n'importe quel InstaFixStore en mémoire du processus — les mêmes stores que le mode côté client du widget. Les démos et prototypes n'ont jamais besoin de serveur.

Source personnalisée

Pour tRPC, GraphQL ou les server actions, implémentez le contrat InboxSource à trois méthodes et passez-le en source :

import type { InboxSource } from "@instafix/dashboard";

const source: InboxSource = {
  async list(query) {
    // query : projectName, page, limit, status?, type?, search?, url?, urlPattern?
    const { feedbacks, total } = await trpc.instafix.list.query(query);
    // Important : createdAt / updatedAt / resolvedAt doivent être de vrais objets Date
    return { feedbacks: feedbacks.map(reviveDates), total };
  },
  async setStatus(id, projectName, status) {
    return reviveDates(await trpc.instafix.setStatus.mutate({ id, projectName, status }));
  },
  async remove(id, projectName) {
    await trpc.instafix.remove.mutate({ id, projectName });
  },
};

Les deux briques qui sous-tendent les modes intégrés sont également exportées — createEndpointSource({ endpoint, apiKey, headers }) et createStoreSource(store) — pour que vous puissiez les envelopper, les composer ou les décorer (par exemple ajouter de la journalisation autour du client HTTP) plutôt que de repartir de zéro.

Des types sans dépendance supplémentaire

@instafix/dashboard réexporte tout ce qu'il faut pour typer un composant qui l'enrobe — vous n'installez jamais rien d'autre :