Pouvoir avoir sa propre implémentation de récupération / d'interaction avec les données

[SirMishaa]

Hello !

Déjà très bonne librairie, c'est très cool. Je ne sais pas si c'est possible, mais le problème, c'est que la librairie est finalement assez couplée avec le backend et avec la nécessité d'avoir une API qui suit une structure spécifique, ce qui n'est pas forcément pertinent.

Je propose de pouvoir réimplémenter les méthodes comme getFiles, getFolder, etc... La librairie n'a pas besoin de savoir si c'est une API derrière, ou juste un passage en props via un autre script JS

L'idée serait de pouvoir passer un adapter qui implémenterait une interface lors de l'enregistrement du custom component. Si c'est le cas, la librairie utiliserait les méthodes de l'adapter, pour récupérer et interagir avec les données.

L'énorme avantage c'est que du coup, nous ne devons plus forcément suivre un schéma spécifique au niveau de l'API, le temps qu'on retourne ce qu'il faut au niveau de l'adapter, c'est bon. On peut également intégrer le client http que l'on souhaite, par exemple un client GraphQL au lieu de se limiter à une API REST.

import { FileManager, FileManagerActionsInterface } from 'filemanager-element'
import 'filemanager-element/FileManager.css'

class CustomFileManagerAdapter implements FileManagerActionsInterface {
  public async getFiles() {
    // Custom code here to fetch files from anything I want
    // I can even use a GraphQL client here ! 
    return myHttpClient.fetch("/api/something");
  }

  public async getFolders() {}
  // Other methods....
}

// Here, we register the FileManager component with our custom adapter
FileManager.register({
    adapter: new CustomFileManagerAdapter()
});

CustomFileManagerInterface.ts : (Should be provided by the library)

interface File {
  id: string;
  name: string;
  url: string;
  size: number;
  folder: string;
  thumbnail: string;
}

interface Folder {
  id: string;
  name: string;
  parent: string | null;
}

interface FileManagerActionsInterface {
  getFiles(): Promise<Array<number, File>>;
  getFolders(): Promise<Array<number, Folder>>;
  // Other methods ....
}

Vous en pensez quoi ?

[Grafikart]

Je pense que c'est une bonne idée. Il faut que je vois comment caler la logique.

[Grafikart]

Les options pour mocker les différentes méthodes sont maintenant dispo sur la fonction register(), j'ai mis à jour la doc en fonction de ça, n'hésite pas à me dire si ce n'est pas clair.