Working getCollection example for custom preview template

[pa-nic]

The getCollection example for custom preview templates seems not to be working;
Incorrect syntax and getCollection not available...

Can someone please provide a working example?

<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
<script>
  var CollectionPreview = createClass({
    render: function() {
      var entries = await getCollection('my_collection');
      var arr = [];
      entries((t) => {
        const getingData = t.get('data');
        console.log(getingData);
      });
      return null;
    }
  });

  CMS.registerPreviewTemplate("my_collection", CollectionPreview);
</script>

The goal is to display complete entries (posts) selected by a relation widget. But I can not get this basic example to work to get the entries.

Any help is appreciated. Thanks.

[JerHowden]

Hey, I'm very new to decap and this feels very jank but I got it working using good old lifecycle methods. If someone knows a better way of doing this for an astro project I'm all ears.

Here I'm grabbing the authors collection when the component mounts and storing that list in state. If the post data has an author (which for me is identified by name) it will store the author data in state as author.

When the component updates, i.e. when the user selects a different author from the dropdown, it checks if the state author matches the new props author. If it doesn't or if the state's empty it will overwrite author with the new data from props.

    <script>
      var BlogPreview = createClass({
        getInitialState: function () {
          return { author: {}, authors: [] };
        },

        componentDidMount: function () {
          this.props.getCollection("authors").then((authors) => {
            const authorsData = authors.map((a) => a.getIn(["data"]));
            const postAuthor = this.props.entry.getIn(["data", "author"]);
            const author = authorsData.find((a) => a.name === postAuthor);
            this.setState({ author, authors: authorsData });
          });
        },

        componentDidUpdate: function () {
          const postAuthor = this.props.entry.getIn(["data", "author"]);
          if (
            this.state.author &&
            Object.keys(this.state.author).length &&
            this.state.author.name === postAuthor
          ) {
            return;
          }
          if (postAuthor && this.state.authors.length) {
            const author = this.state.authors.find((a) => a.name === postAuthor);
            this.setState({ author });
          }
        },

        render: function () {
          const data = this.props.entry.get("data").toJS();

          const coverImage = data.image;
          const cover = this.props.getAsset(coverImage);
          const title = data.title;
          const author = data.author;
          const date = typeof data.date === "string" ? new Date(data.date) : data.date;
          let formattedDate = "";
          if (date) {
            formattedDate = Intl.DateTimeFormat("en-US", {
              month: "short",
              day: "numeric",
              year: "numeric",
            }).format(date);
          }
          const tags = data.tags ?? [];

          let avatar = "";
          let job = "";

          if (this.state.author && Object.keys(this.state.author).length) {
            avatar = this.props.getAsset(this.state.author.avatar);
            job = this.state.author.job;
          }

          return h(
            "div",
            { className: "blog" },
            h(
              "div",
              { className: "metadata" },
              h(
                "div",
                { className: "tags" },
                tags.map((tag) => h("span", { className: "tag" }, tag)),
              ),
              h("span", { className: "date" }, formattedDate),
            ),
            h("img", { src: cover.toString(), className: "cover" }),
            h("h1", {}, title),
            h(
              "span",
              { className: "author" },
              h("div", { className: "avatar" }, h("img", { src: avatar.toString() })),
              h("div", {}, h("strong", {}, author), h("p", {}, job)),
            ),
            h("div", { className: "markdown" }, this.props.widgetFor("body")),
          );
        },
      });

      var AuthorsPreview = createClass({
        render: function () {
          var entry = this.props.entry;
          var image = entry.getIn(["data", "avatar"]);
          var avatar = this.props.getAsset(image);
          var author = entry.getIn(["data", "name"]);
          var job = entry.getIn(["data", "job"]);
          return h(
            "span",
            { className: "author" },
            h("div", { className: "avatar" }, h("img", { src: avatar.toString() })),
            h("div", {}, h("strong", {}, author), h("p", {}, job)),
          );
        },
      });

      CMS.registerPreviewTemplate("blog", BlogPreview);
      CMS.registerPreviewTemplate("authors", AuthorsPreview);
      CMS.registerPreviewStyle("/admin/styles.css");
    </script>