Filtering data on the backend

By default data is filtered on the client side. To make the server-side filtering possible, in the example below, we do the following:

• listen to the filter-files action and block it using the api.intercept method (and return false)
• send the request for data to the /files?text route using the native fetch method
• parse the received data via the provide-data action which is triggered by the api.exec method
• set the mode value to search to parse data in this mode and return to the cards mode if there's no input

<script>
  import { Filemanager } from "@wx/svelte-filemanager";

  const server = "https://some-backend-url";

  let rawData = [];
  let api;

  function parseDates(data) {
    data.forEach((item) => {
      if (item.date) item.date = new Date(item.date * 1000);
    });
    return data;
  }

  function init(api) {
    fetch(server + "/files")
      .then((data) => data.json())
      .then((data) => (rawData = data));

    api.intercept("filter-files", ({ text }) => {
      const { panels, activePanel } = api.getState();
      const id = panels[activePanel].path;
      fetch(server + "/files" + (id == "/" ? "" : `/${encodeURIComponent(id)}`) + `?text=${text || ""}`)
        .then((data) => data.json())
        .then((data) => {
          api.exec("set-mode", { mode: text ? "search" : "cards" });
          api.exec("provide-data", {
            id,
            data: parseDates(data),
          });
        });
      return false;
    });
  }
</script>

<Filemanager {init} data="{rawData}" />

---

Related sample: Filtering on backend