news-articles.js

"use strict";

const { articles_url } = require("../../constants");
const objectHtmlRenderer = require("../lib/object-html-renderer");
const ImageCarousel = require("../generic-components/image-carousel");
const { loadArticles, getArticleDate, getArticleBody } = require("../lib/article-utils");

class NewsArticles {
    constructor() {
        this.id = performance.now().toString();
        this.state = {
            loading: true,
            articles: [],
            showArticleIndex: -1,
        };
        this.loadArticles();
    }

    loadArticles() {
        loadArticles(`${articles_url}/news`).then(articles => {
            this.state.articles = articles;
            this.state.showArticleIndex = this.state.articles.length - 1;
            this.refresh();
        });
    }

    refresh() {
        objectHtmlRenderer.subRender(this.render(), document.getElementById(this.id), {
            mode: "replace",
        });
    }

    renderArticle(articleData) {
        return {
            tag: "article",
            contents: [
                {
                    tag: "div",
                    class: "date",
                    contents: [{ tag: "span", contents: getArticleDate(articleData.date) }],
                },
                {
                    tag: "div",
                    class: "title",
                    contents: [
                        {
                            tag: "h3",
                            contents: articleData.title,
                        },
                    ],
                },
                {
                    tag: "div",
                    class: "subtitle",
                    contents: [
                        {
                            tag: "strong",
                            contents: articleData.subtitle,
                        },
                    ],
                },
                {
                    tag: "div",
                    class: "body",
                    contents: [
                        {
                            tag: "p",
                            contents: getArticleBody(articleData.body),
                        },
                    ],
                },
                new ImageCarousel({
                    images: articleData.images.map(img => `${articleData.path}/images/${img}`),
                }).render(),
            ],
        };
    }

    renderArticlePlaceholder() {
        return {
            tag: "article",
            class: "article-placeholder",
            contents: [
                { tag: "div", class: "date" },
                { tag: "div", class: "title" },
                { tag: "div", class: "subtitle" },
                { tag: "div", class: "body" },
                { tag: "div", class: "image-carousel" },
            ],
        };
    }

    handleChangeArticle(dir) {
        let { showArticleIndex, articles } = this.state;
        showArticleIndex =
            dir === "prev"
                ? showArticleIndex - 1 >= 0
                    ? showArticleIndex - 1
                    : 0
                : showArticleIndex + 1 <= articles.length - 1
                ? showArticleIndex + 1
                : articles.length - 1;
        this.state.showArticleIndex = showArticleIndex;
        this.refresh();
    }

    render() {
        const { articles, showArticleIndex } = this.state,
            showNext = showArticleIndex < articles.length - 1,
            showPrev = showArticleIndex > 0;
        return {
            tag: "div",
            id: this.id,
            class: "articles-displayer page-contents-center",
            contents:
                articles.length > 0
                    ? [
                          this.renderArticle(articles[showArticleIndex]),
                          {
                              tag: "div",
                              class: "prev-next-buttons",
                              contents: [
                                  {
                                      tag: "button",
                                      class: `prev-btn ${!showPrev ? "disabled" : "active"}`,
                                      contents: "Précédent",
                                      onclick: this.handleChangeArticle.bind(this, "prev"),
                                  },
                                  {
                                      tag: "button",
                                      class: `next-btn ${!showNext ? "disabled" : "active"}`,
                                      contents: "Suivant",
                                      onclick: this.handleChangeArticle.bind(this, "next"),
                                  },
                              ],
                          },
                      ]
                    : [this.renderArticlePlaceholder()],
        };
    }
}

module.exports = NewsArticles;