How to bring in Latest topics when using category boxes

Dev
23

Eu estava quase desistindo, então usei este código.

https://meta.discourse.org/t/add-a-featured-topic-list-to-your-discourse-homepage/132949

E alterei o caminho do json para /latest.json

<script type="text/discourse-plugin" version="0.8">
  const ajax = require('discourse/lib/ajax').ajax;
  const Topic = require('discourse/models/topic').default;
  // Estamos usando ajax e o modelo Topic do Discourse

  api.registerConnectorClass('below-discovery-categories', 'featured-topics', {
    // above-main-container é o plugin outlet,
    // featured-topics é o nome do seu componente personalizado

    setupComponent(args, component) {

      api.onPageChange((url, title) => {
        if ((url == "/") || (url == "/categories") ) {
        // na mudança de página, verifica se a url corresponde
        // se a sua página inicial não for /latest, mude para /categories
        
          $('html').addClass('custom-featured-topics');
          // adiciona uma classe à tag HTML para fácil direcionamento CSS
          
          component.set('displayfeaturedTopics', true);
          // usaremos isso mais tarde para mostrar nosso template
          
          component.set("loadingTopics", true);
          // ajuda a mostrar um spinner de carregamento até que os tópicos estejam prontos
          
          ajax("/latest.json").then (function(result){
          // Obtém posts da tag "featured" usando AJAX
          // se fosse uma categoria, você usaria /c/featured.json
          
            let featuredTopics = [];
            // Cria um array vazio, adicionaremos tópicos a ele
            
            var featuredUsers = result.users;
            // Obtém os usuários relevantes
            
            result.topic_list.topics.slice(0,4).forEach(function(topic){
            // Estamos extraindo os tópicos começando em 0 e terminando em 4
            // Isso significa que mostraremos 3 no total. Aumente 4 para ver mais.
            
              topic.posters.forEach(function(poster){
                poster.user = $.grep(featuredUsers, function(e){ return e.id == poster.user_id; })[0];
              });
              // Associa usuários ao nosso tópico
              
              featuredTopics.push(Topic.create(topic));
              // Adiciona nossos tópicos ao array featuredTopics
            });
            
            component.set("loadingTopics", false);
            // Tópicos carregados, pare de mostrar o spinner de carregamento
            
            component.set('featuredTopics', featuredTopics);
            // Configura nosso componente com os tópicos do array
          });
          
        } else {
        // Se a página não corresponder às urls acima, faça isto:
        
          $('html').removeClass('custom-featured-topics');
          // Remove nossa classe personalizada
          
          component.set('displayfeaturedTopics', false);
          // Não exibe nossa personalização
        }
      });
    }
  });
</script>

<script type="text/x-handlebars" data-template-name="/connectors/below-discovery-categories/featured-topics">

  {{#if displayfeaturedTopics}}
  <!-- Se o nosso componente for verdadeiro, mostre este conteúdo: -->

      <div class="custom-featured-topics-wrapper">
        {{conditional-loading-spinner condition=loadingTopics}}
        <!-- Mostra um spinner de carregamento se os tópicos estiverem carregando -->

        {{#unless loadingTopics}}
        <!-- A menos que os tópicos ainda estejam carregando... -->
          {{topic-list topics=featuredTopics showPosters=true}}
          <!-- Mostra a lista de tópicos -->
        {{/unless}}

      </div>

  {{/if}}
</script>