Frontend: Blog fetching improvements

frontend/package.json

@@ -22,10 +22,8 @@
 		"@mui/icons-material": "^5.16.7",
 		"@mui/material": "^5.16.7",
 		"@vitejs/plugin-react": "^4.3.2",
-		"axios": "^1.7.7",
-		"biome": "^0.3.3",
+		"biome": "^0.2.2",
 		"d3": "^7.8.5",
-		"d3-regression": "^1.3.10",
 		"data-forge": "^1.10.2",
 		"env-cmd": "^10.1.0",
 		"html2canvas": "^1.4.1",

frontend/src/cards/ui/SourcesHelpers.tsx

@@ -1,16 +1,17 @@
 import type { MapOfDatasetMetadata } from '../../data/utils/DatasetTypes'
-import { HET_URL } from '../../utils/internalRoutes'
 import { dataSourceMetadataMap } from '../../data/config/MetadataMap'
 import type { MetricQueryResponse } from '../../data/query/MetricQuery'
 import type {
   DatasetId,
   DatasetIdWithStateFIPSCode,
 } from '../../data/config/DatasetMetadata'
+import { HET_URL } from '../../utils/internalRoutes'
+
+export const CITATION_APA = `Health Equity Tracker. (${currentYear()}). Satcher Health Leadership Institute. Morehouse School of Medicine. ${HET_URL}.`
 
 export function currentYear(): number {
   return new Date().getFullYear()
 }
-export const CITATION_APA = `Health Equity Tracker. (${currentYear()}). Satcher Health Leadership Institute. Morehouse School of Medicine. ${HET_URL}.`
 
 export function insertPunctuation(idx: number, numSources: number) {
   let punctuation = ''

frontend/src/custom.d.ts

@@ -1,6 +1 @@
-// declare module '*.mp4' {
-//   const src: string
-//   export default src
-// }
-
-declare module 'd3-regression'
+declare module 'dom-to-image-more'

frontend/src/pages/Landing/LandingPage.tsx

@@ -35,7 +35,7 @@ function LandingPage() {
   if (isMd) numberOfArticlePreviews = 3
   if (isLg) numberOfArticlePreviews = 4
 
-  const recentArticles = data?.data.slice(0, numberOfArticlePreviews)
+  const recentArticles = data?.data?.slice(0, numberOfArticlePreviews)
   const prefersReducedMotion = usePrefersReducedMotion()
 
   interface ListItemProps {

frontend/src/pages/Methodology/methodologyComponents/MethodologyPage.tsx

@@ -1,11 +1,8 @@
-import { HET_URL } from '../../../utils/internalRoutes'
 import { Helmet } from 'react-helmet-async'
-import { currentYear } from '../../../cards/ui/SourcesHelpers'
 import MethodologyCardMenu from './MethodologyCardMenu'
 import MethodologyPagination from './MethodologyPagination'
 import MethodologyCardMenuMobile from './MethodologyCardMenuMobile'
 import HetOnThisPageMenu from '../../../styles/HetComponents/HetOnThisPageMenu'
-export const CITATION_APA = `Health Equity Tracker. (${currentYear()}). Satcher Health Leadership Institute. Morehouse School of Medicine. ${HET_URL}.`
 import { Outlet, useLocation, useMatch } from 'react-router-dom'
 import methodologyRouteConfigs from '../methodologyContent/methodologyRouteConfigs'
 

frontend/src/pages/Methodology/methodologyContent/methodologyRouteConfigs.tsx

@@ -1,3 +1,6 @@
+import { raceAndEthnicitySublinks } from './RacesAndEthnicitiesDefinitions'
+import type { RouteConfig } from '../../sharedTypes'
+import { lazy } from 'react'
 import {
   BEHAVIORAL_HEALTH_LINK,
   CHRONIC_DISEASE_LINK,
@@ -19,27 +22,52 @@ import {
   LIMITATIONS_LINK,
   COMMUNITY_SAFETY_LINK,
 } from '../../../utils/internalRoutes'
-import AgeAdjustmentLink from '../methodologySections/AgeAdjustmentLink'
-import BehavioralHealthLink from '../methodologySections/BehavioralHealthLink'
-import ChronicDiseaseLink from '../methodologySections/ChronicDiseaseLink'
-import TopicDefinitionsLink from '../methodologySections/TopicDefinitionsLink'
-import DataMethodDefinitionsLink from '../methodologySections/DataMethodDefinitionsLink'
-import Covid19Link from '../methodologySections/Covid19Link'
-import HivLink from '../methodologySections/HivLink'
-import MetricsLink from '../methodologySections/MetricsLink'
-import PdohLink from '../methodologySections/PdohLink'
-import MedicationUtilizationLink from '../methodologySections/MedicationUtilizationLink'
-import RacesAndEthnicitiesLink from '../methodologySections/RacesAndEthnicitiesLink'
-import RecommendedCitationLink from '../methodologySections/RecommendedCitationLink'
-import SdohLink from '../methodologySections/SdohLink'
-import DataSourcesLink from '../methodologySections/DataSourcesLink'
-import TopicCategoriesLink from '../methodologySections/TopicCategoriesLink'
-import LimitationsLink from '../methodologySections/LimitationsLink'
-import MethodologyHomeLink from '../methodologySections/MethodologyHomeLink'
-import GlossaryLink from '../methodologySections/GlossaryLink'
-import { raceAndEthnicitySublinks } from './RacesAndEthnicitiesDefinitions'
-import CommunitySafetyLink from '../methodologySections/CommunitySafetyLink'
-import type { RouteConfig } from '../../sharedTypes'
+
+const AgeAdjustmentLink = lazy(
+  () => import('../methodologySections/AgeAdjustmentLink'),
+)
+const BehavioralHealthLink = lazy(
+  () => import('../methodologySections/BehavioralHealthLink'),
+)
+const ChronicDiseaseLink = lazy(
+  () => import('../methodologySections/ChronicDiseaseLink'),
+)
+const TopicDefinitionsLink = lazy(
+  () => import('../methodologySections/TopicDefinitionsLink'),
+)
+const DataMethodDefinitionsLink = lazy(
+  () => import('../methodologySections/DataMethodDefinitionsLink'),
+)
+const Covid19Link = lazy(() => import('../methodologySections/Covid19Link'))
+const HivLink = lazy(() => import('../methodologySections/HivLink'))
+const MetricsLink = lazy(() => import('../methodologySections/MetricsLink'))
+const PdohLink = lazy(() => import('../methodologySections/PdohLink'))
+const MedicationUtilizationLink = lazy(
+  () => import('../methodologySections/MedicationUtilizationLink'),
+)
+const RacesAndEthnicitiesLink = lazy(
+  () => import('../methodologySections/RacesAndEthnicitiesLink'),
+)
+const RecommendedCitationLink = lazy(
+  () => import('../methodologySections/RecommendedCitationLink'),
+)
+const SdohLink = lazy(() => import('../methodologySections/SdohLink'))
+const DataSourcesLink = lazy(
+  () => import('../methodologySections/DataSourcesLink'),
+)
+const TopicCategoriesLink = lazy(
+  () => import('../methodologySections/TopicCategoriesLink'),
+)
+const LimitationsLink = lazy(
+  () => import('../methodologySections/LimitationsLink'),
+)
+const MethodologyHomeLink = lazy(
+  () => import('../methodologySections/MethodologyHomeLink'),
+)
+const GlossaryLink = lazy(() => import('../methodologySections/GlossaryLink'))
+const CommunitySafetyLink = lazy(
+  () => import('../methodologySections/CommunitySafetyLink'),
+)
 
 export const methodologyRouteConfigs: RouteConfig[] = [
   {

frontend/src/pages/Methodology/methodologySections/RecommendedCitationLink.tsx

@@ -1,6 +1,6 @@
 import Card from '@mui/material/Card'
-import { CITATION_APA } from '../methodologyComponents/MethodologyPage'
 import { Helmet } from 'react-helmet-async'
+import { CITATION_APA } from '../../../cards/ui/SourcesHelpers'
 
 export default function RecommendedCitationLink() {
   return (

frontend/src/pages/News/AllPosts.tsx

@@ -99,7 +99,7 @@ function AllPosts() {
   useEffect(() => {
     const allAuthorsSet = new Set()
 
-    data?.data.forEach(
+    data?.data?.forEach(
       (article: Article) =>
         article.acf.contributing_author &&
         allAuthorsSet.add(article.acf.contributing_author),
@@ -112,7 +112,7 @@ function AllPosts() {
   useEffect(() => {
     const allCategoriesSet = new Set()
 
-    data?.data.forEach((article: Article) => {
+    data?.data?.forEach((article: Article) => {
       if (article._embedded['wp:term'] !== undefined) {
         article._embedded['wp:term'][0].forEach((term: { name: string }) =>
           allCategoriesSet.add(term.name),
@@ -126,8 +126,6 @@ function AllPosts() {
   // featured "sticky" articles
   const pinnedArticles = data?.data?.filter((post: Article) => post?.sticky)
 
-  if (data?.data.length === 0) return <></>
-
   return (
     <div className='flex w-full flex-wrap justify-center'>
       <Helmet>

frontend/src/pages/WhatIsHealthEquity/FaqTab.tsx

@@ -1,8 +1,8 @@
 import { ABOUT_US_PAGE_LINK } from '../../utils/internalRoutes'
 import { Helmet } from 'react-helmet-async'
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
-import { CITATION_APA } from '../../cards/ui/SourcesHelpers'
 import { selectFAQs } from './FaqData'
+import { CITATION_APA } from '../../cards/ui/SourcesHelpers'
 
 function FaqTab() {
   return (

frontend/src/styles/HetComponents/HetPostsLoading.tsx

@@ -19,17 +19,32 @@ export default function HetPostsLoading(props: HetPostsLoadingProps) {
       {[...Array(numberLoadingSkeletons)].map((_, i) => {
         return (
           <div
-            className={`flex flex-wrap place-content-center content-center items-center justify-center gap-x-20 ${
-              props.className ?? ''
-            }`}
+            className={`flex flex-wrap  gap-x-20 ${props.className ?? ''}`}
             key={i}
           >
+            {/* IMG PLACEHOLDER */}
             <Skeleton
               animation={props.doPulse && 'wave'}
               variant='rectangular'
-              height={100}
-              width={150}
+              height={200}
+              width={300}
             ></Skeleton>
+            {/* TAGS PLACEHOLDER */}
+            <div className='my-3 w-full flex justify-start gap-5'>
+              <Skeleton
+                animation={false}
+                variant='text'
+                height={24}
+                width={60}
+              ></Skeleton>
+              <Skeleton
+                animation={false}
+                variant='text'
+                height={24}
+                width={80}
+              ></Skeleton>
+            </div>
+            {/* TITLE PLACEHOLDER */}
             <Skeleton
               animation={false}
               variant='text'

frontend/src/utils/blogUtils.ts

@@ -1,5 +1,3 @@
-import axios from 'axios'
-
 // WORDPRESS CONFIG
 export const NEWS_URL = 'https://hetblog.dreamhosters.com/'
 export const WP_API = 'wp-json/wp/v2/' // "?rest_route=/wp/v2/"
@@ -19,18 +17,25 @@ export const REACT_QUERY_OPTIONS = {
   staleTime: 1000 * 30, // treat cache data as fresh and don't refetch
 }
 
+// Helper function to handle fetch responses
+async function handleFetchResponse(response: Response) {
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`)
+  }
+  const data = await response.json()
+  return { data } // Mimicking Axios response structure
+}
+
 export async function fetchNewsData() {
-  return await axios.get(
-    `${
-      NEWS_URL + WP_API + ALL_POSTS
-    }?${WP_EMBED_PARAM}&${WP_PER_PAGE_PARAM}${MAX_FETCH}`,
+  const response = await fetch(
+    `${NEWS_URL + WP_API + ALL_POSTS}?${WP_EMBED_PARAM}&${WP_PER_PAGE_PARAM}${MAX_FETCH}`,
   )
+  return handleFetchResponse(response)
 }
 
 export async function fetchLandingPageNewsData() {
-  return await axios.get(
-    `${
-      NEWS_URL + WP_API + ALL_POSTS
-    }?${WP_EMBED_PARAM}&${WP_PER_PAGE_PARAM}${4}`,
+  const response = await fetch(
+    `${NEWS_URL + WP_API + ALL_POSTS}?${WP_EMBED_PARAM}&${WP_PER_PAGE_PARAM}4`,
   )
+  return handleFetchResponse(response)
 }