From dfbdf0f567a77f87d8f9109499a5baa351092f52 Mon Sep 17 00:00:00 2001 From: Enieber Cunha <7907068+enieber@users.noreply.github.com> Date: Tue, 1 Apr 2025 16:42:32 -0300 Subject: [PATCH] refactor: prettier js code and render status --- assets/js/app.js | 216 +++++++++++++++++++++++++---------------------- 1 file changed, 113 insertions(+), 103 deletions(-) diff --git a/assets/js/app.js b/assets/js/app.js index 22aa78f..90b7a6d 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -1,31 +1,31 @@ let state = { - defaultList: [], - list: [], - filter: { - status: 'all', - lang: 'all', - }, + defaultList: [], + list: [], + filter: { + status: "all", + lang: "all", + }, }; function getPodcastList() { - return fetch('/podcasts.json') - .then((res) => res.json()) - .then((response) => { - return response; - }) - .catch((error) => { - console.log(error); - return []; - }); + return fetch("/podcasts.json") + .then((res) => res.json()) + .then((response) => { + return response; + }) + .catch((error) => { + console.log(error); + return []; + }); } function rendeTreinamento() { - const podcast = { - name: 'Procurando um mentor?', - website_link: 'https://github.com/training-center/mentoria', - }; + const podcast = { + name: "Procurando um mentor?", + website_link: "https://github.com/training-center/mentoria", + }; - return ` + return `
  • @@ -35,23 +35,23 @@ function rendeTreinamento() {

    @@ -62,38 +62,45 @@ function rendeTreinamento() { `; } +function renderStatusPodcast(podcst) { + return ` + ` +} + function renderPodcast(podcast) { - const data = ` + const data = `

  • + podcast.image ? podcast.image : "/assets/img/placeholder.png" + }" width="128" height="128">
    - + ${renderStatusPodcast(podcast)}

    ${podcast.name}

    @@ -102,23 +109,23 @@ function renderPodcast(podcast) {
    • `; - return data; + return data; } function clearList() { - const containerList = document.getElementById('list-podcast'); - containerList.innerHTML = ''; + const containerList = document.getElementById("list-podcast"); + containerList.innerHTML = ""; } function renderList(listPodcast) { - const containerList = document.getElementById('list-podcast'); - const ulList = document.createElement('ul'); - ulList.classList.add('list'); - const listPodcastString = listPodcast.reduce((acc, value) => { - return acc + renderPodcast(value); - }, ''); - ulList.innerHTML = rendeTreinamento() + listPodcastString; - containerList.appendChild(ulList); + const containerList = document.getElementById("list-podcast"); + const ulList = document.createElement("ul"); + ulList.classList.add("list"); + const listPodcastString = listPodcast.reduce((acc, value) => { + return acc + renderPodcast(value); + }, ""); + ulList.innerHTML = rendeTreinamento() + listPodcastString; + containerList.appendChild(ulList); } function searchList(word) { @@ -134,67 +141,70 @@ function searchList(word) { } function changeState(podcast, status) { - if (status === 'all') { - return true; - } - if (status === 'active') { - return podcast.status === true; - } - if (status === 'inactive') { - return podcast.status === false; - } - return false; + if (status === "all") { + return true; + } + if (status === "active") { + return podcast.status === true; + } + if (status === "inactive") { + return podcast.status === false; + } + return false; } function filterState(status) { - const newList = state.defaultList.filter((podcast) => changeState(podcast, status)); - state.filter.status = status - clearList(); - state.list = newList; - renderList(state.list) + const newList = state.defaultList.filter((podcast) => + changeState(podcast, status), + ); + state.filter.status = status; + clearList(); + state.list = newList; + renderList(state.list); } function changeLang(podcast, lang) { - if (lang === 'all') { - return true; - } - return podcast.language == lang; + if (lang === "all") { + return true; + } + return podcast.language == lang; } function filterLang(lang) { - const newList = state.defaultList.filter((podcast) => changeLang(podcast, lang)); - state.filter.lang = lang - clearList(); - state.list = newList; - renderList(state.list) + const newList = state.defaultList.filter((podcast) => + changeLang(podcast, lang), + ); + state.filter.lang = lang; + clearList(); + state.list = newList; + renderList(state.list); } -document.addEventListener('DOMContentLoaded', function (event) { - const input = document.getElementById('search-input'); - if (input) { - input.addEventListener('input', function (e) { - searchList(e.target.value); - }); +document.addEventListener("DOMContentLoaded", function (event) { + const input = document.getElementById("search-input"); + if (input) { + input.addEventListener("input", function (e) { + searchList(e.target.value); + }); } - const selectStatus = document.getElementById('status') + const selectStatus = document.getElementById("status"); if (selectStatus) { - selectStatus.addEventListener('change', function (e) { - filterState(e.target.value) + selectStatus.addEventListener("change", function (e) { + filterState(e.target.value); }); } - - const selectLang = document.getElementById('idioma') + const selectLang = document.getElementById("idioma"); if (selectLang) { - selectLang.addEventListener('change', function (e) { - filterLang(e.target.value) + selectLang.addEventListener("change", function (e) { + filterLang(e.target.value); }); } - getPodcastList().then((data) => { - state.list = data; - state.defaultList = data; - renderList(state.list); - }); + getPodcastList().then((data) => { + state.list = data; + state.defaultList = data; + renderList(state.list); + }); });