From e228154386aa987ef719810a470243f15f6f8ffc Mon Sep 17 00:00:00 2001 From: Kailas Nadh U <53608019+kailasnadh790@users.noreply.github.com> Date: Tue, 16 Jan 2024 07:51:56 -0500 Subject: [PATCH] Refactoring articleTeaser and authorCard blocks to fetch data from index files (#68) * article-teaser fix * Update authorcard.js --- .../blocks/article-teaser/article-teaser.js | 30 ++++---- .../blocks/articleheader/articleheader.js | 13 +--- cigaradvisor/blocks/authorcard/authorcard.js | 55 ++++++-------- cigaradvisor/scripts/scripts.js | 75 ++++++++++++++++--- 4 files changed, 101 insertions(+), 72 deletions(-) diff --git a/cigaradvisor/blocks/article-teaser/article-teaser.js b/cigaradvisor/blocks/article-teaser/article-teaser.js index 26a57d34..3897deac 100644 --- a/cigaradvisor/blocks/article-teaser/article-teaser.js +++ b/cigaradvisor/blocks/article-teaser/article-teaser.js @@ -1,8 +1,8 @@ import { createOptimizedPicture } from '../../scripts/aem.js'; -import { fetchData } from '../../scripts/scripts.js'; +import { fetchData, getRelativePath } from '../../scripts/scripts.js'; function formatDate(originalDateString) { - const utcDateString = new Date((originalDateString - 25569) * 86400 * 1000); + const utcDateString = new Date(originalDateString * 1000); const utcDate = new Date(utcDateString); const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; const day = utcDate.getUTCDate(); @@ -16,20 +16,18 @@ function formatDate(originalDateString) { export default async function decorate(block) { const filterPath = block.querySelector('a').getAttribute('href'); block.classList.add('article-teaser'); - const fetchUrl = `${window.hlx.codeBasePath}/drafts/Kailas/pagemeta.json`; - const teaserContent = await fetchData(fetchUrl); - const articleInfo = teaserContent.find((obj) => obj.path === filterPath); - const categoryListUrl = `${window.hlx.codeBasePath}/drafts/Kailas/category/category-list.json`; - const categoryListData = await fetchData(categoryListUrl); - const articleCategory = articleInfo.category; - const articleCategoryInfo = categoryListData.find((obj) => obj.category === articleCategory); - const articleCategoryLink = articleCategoryInfo.categoryLink; - const [formattedDate, datetimeAttr] = formatDate(articleInfo.publishedDate).split('|'); - const authorNameHyphenSeparated = articleInfo.author.split(' ').join('-'); - const authorLink = `${window.hlx.codeBasePath}/author/drafts/${authorNameHyphenSeparated.toLowerCase()}`; + const articleInfo = await fetchData(getRelativePath(filterPath), '/cigaradvisor/posts/query-index.json'); + if (!articleInfo) { + return; + } + const articleCategoryLink = articleInfo.category; + const articleCategoryInfo = await fetchData(getRelativePath(articleCategoryLink)); + const [formattedDate, datetimeAttr] = formatDate(articleInfo.published).split('|'); + const articleAuthorLink = articleInfo.author; + const articleAuthorInfo = await fetchData(getRelativePath(articleAuthorLink), '/cigaradvisor/author/query-index.json'); block.innerHTML = `
- ${articleCategory} + ${(articleCategoryInfo && articleCategoryInfo.title) ? articleCategoryInfo.title : ''}
${createOptimizedPicture(articleInfo.image).outerHTML}
@@ -39,13 +37,13 @@ export default async function decorate(block) { ${articleInfo.title}
- By ${articleInfo.author} + By ${(articleAuthorInfo && articleAuthorInfo.name) ? articleAuthorInfo.name : ''}
-

Reading Time: ${articleInfo.readingTime} ${articleInfo.articleBlurb}

+

Reading Time: ${articleInfo.readingTime} ${articleInfo.description}

Read More
diff --git a/cigaradvisor/blocks/articleheader/articleheader.js b/cigaradvisor/blocks/articleheader/articleheader.js index 10dc534f..babbe6a6 100644 --- a/cigaradvisor/blocks/articleheader/articleheader.js +++ b/cigaradvisor/blocks/articleheader/articleheader.js @@ -1,15 +1,4 @@ -import { fetchData } from '../../scripts/scripts.js'; - -function getRelativePath(path) { - let relPath = path; - try { - const url = new URL(path); - relPath = url.pathname; - } catch (error) { - // do nothing - } - return relPath; -} +import { fetchData, getRelativePath } from '../../scripts/scripts.js'; export default async function decorate(block) { const section = document.createElement('section'); diff --git a/cigaradvisor/blocks/authorcard/authorcard.js b/cigaradvisor/blocks/authorcard/authorcard.js index 6f7ee276..8483f265 100644 --- a/cigaradvisor/blocks/authorcard/authorcard.js +++ b/cigaradvisor/blocks/authorcard/authorcard.js @@ -1,5 +1,5 @@ import { readBlockConfig, createOptimizedPicture } from '../../scripts/aem.js'; -import { isExternal, fetchData } from '../../scripts/scripts.js'; +import { isExternal, fetchData, getRelativePath } from '../../scripts/scripts.js'; export default async function decorate(block) { const configs = readBlockConfig(block); @@ -30,42 +30,31 @@ export default async function decorate(block) { const rightDiv = document.createElement('div'); rightDiv.classList.add('right-column'); - // TODO: fetch author details from query-index.xlsx - const fetchUrl = `${window.hlx.codeBasePath}/drafts/Kailas/pagemeta.json`; - const authorContent = await fetchData(fetchUrl); - const authorsObj = []; - [...authors].forEach((authorPage) => { - let authorPath; - try { - const url = new URL(authorPage); - authorPath = url.pathname; - } catch (error) { - authorPath = authorPage; - } - const authorInfo = authorContent.find((obj) => obj.path === authorPath); - if (authorInfo) { - const authorDetails = { - page: authorInfo.path, - name: authorInfo.authorName, - image: authorInfo.authorImage, - }; - authorsObj.push(authorDetails); - } - }); const authorWrapperSection = document.createElement('section'); authorWrapperSection.classList.add('author-wrapper'); authorWrapperSection.innerHTML = ''; - [...authorsObj].forEach((author) => { - authorWrapperSection.innerHTML - += `
-
- ${createOptimizedPicture(author.image).outerHTML} -
-

${author.name}

-
-
-
`; + const authorPromises = [...authors].map(async (authorPage) => { + const authorInfo = await fetchData(getRelativePath(authorPage), '/cigaradvisor/author/query-index.json'); + if (authorInfo) { + return `
+
+ ${createOptimizedPicture(authorInfo.image).outerHTML} +
+

${authorInfo.name}

+
+
+
`; + } + return ''; // return an empty string if there's no authorInfo }); + + Promise.all(authorPromises) + .then((authorContents) => { + authorWrapperSection.innerHTML += authorContents.join(''); + }) + .catch((error) => { + console.error('Error fetching author info:', error); + }); rightDiv.replaceChildren(authorWrapperSection); block.append(rightDiv); } diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js index 32bc3724..aabc9398 100644 --- a/cigaradvisor/scripts/scripts.js +++ b/cigaradvisor/scripts/scripts.js @@ -208,19 +208,72 @@ export function decorateExternalLink(element) { } /** - * Simple funtion to fetch json data from query-index.json - * @param {*} url - * @returns jsonData + * Returns the relative path from a given path. + * If the path is a URL, it extracts the pathname. + * @param {string} path - The path to get the relative path from. + * @returns {string} - The relative path. */ -export async function fetchData(filterPath) { - const fetchUrl = '/query-index.json'; - const resp = await fetch(fetchUrl); - let jsonData = ''; - if (resp.ok) { - jsonData = await resp.json(); +export function getRelativePath(path) { + let relPath = path; + try { + const url = new URL(path); + relPath = url.pathname; + } catch (error) { + // do nothing + } + return relPath; +} + +let indexData = ''; +let authorIndexData = ''; +let articleIndexData = ''; +/** + * Fetches data from a specified URL and returns the filtered + * data based on the provided filter path. + * @param {string} filterPath - The path used to filter the data. + * @param {string} [fetchUrl='/query-index.json'] - The URL to fetch the data + * from. Defaults to '/query-index.json'. + * @returns {Promise} - A promise that resolves to the filtered data object. + */ +export async function fetchData(filterPath, fetchUrl = '/query-index.json') { + let responeData = ''; + if (fetchUrl === '/query-index.json') { + if (!indexData) { + const resp = await fetch(fetchUrl); + let jsonData = ''; + if (resp.ok) { + jsonData = await resp.json(); + } + indexData = jsonData.data; + } + responeData = indexData; + } + if (fetchUrl === '/cigaradvisor/posts/query-index.json') { + if (!articleIndexData) { + const resp = await fetch(fetchUrl); + let jsonData = ''; + if (resp.ok) { + jsonData = await resp.json(); + } + articleIndexData = jsonData.data; + } + responeData = articleIndexData; + } + if (fetchUrl === '/cigaradvisor/author/query-index.json') { + if (!authorIndexData) { + const resp = await fetch(fetchUrl); + let jsonData = ''; + if (resp.ok) { + jsonData = await resp.json(); + } + authorIndexData = jsonData.data; + } + responeData = authorIndexData; + } + let filteredData = ''; + if (responeData) { + filteredData = responeData.find((obj) => obj.path === filterPath); } - const responseData = jsonData.data; - const filteredData = responseData.find((obj) => obj.path === filterPath); return filteredData; }