From ac4067ff0ce571232ca2750ae53fd284bb668bc6 Mon Sep 17 00:00:00 2001 From: suejinkim20 Date: Tue, 5 Dec 2023 16:31:30 -0500 Subject: [PATCH 1/8] create simplified version of article preview component for home page --- components/news/article-preview.js | 69 +++++++++++++++++++++++++++++- 1 file changed, 68 insertions(+), 1 deletion(-) diff --git a/components/news/article-preview.js b/components/news/article-preview.js index 98d57130..53942dab 100644 --- a/components/news/article-preview.js +++ b/components/news/article-preview.js @@ -84,7 +84,6 @@ export const ArticlePreview = ({ } - Read more → +} + +export const HomePageArticlePreview = ({article }) => { + const date = new Date(article.publishDate) + const [day, month, year] = [ + date.getUTCDate(), + date.getUTCMonth() + 1, + date.getUTCFullYear(), + ] + const dateString = date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }); + + const articleLink = `news/${year}/${month}/${day}/${article.slug}`; + + return + + + + {dateString} + + { + article.newsOrBlog === 'blog' ? 'Blog' : 'Feature' + } + + + + {article.title} + + + + + .hover-link': { + position: 'absolute', + bottom: 0, + right: 0, + }, + position: 'relative', + maxHeight: 'var(--maxHeight)', + overflow: 'hidden', + }}> + {article.excerpt} + Read more → + + } \ No newline at end of file From f7dea2183d2980db45c3933fe4db1d9d3f69bf43 Mon Sep 17 00:00:00 2001 From: suejinkim20 Date: Tue, 5 Dec 2023 16:33:26 -0500 Subject: [PATCH 2/8] fetch 3 most recent news articles --- pages/index.js | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/pages/index.js b/pages/index.js index 8b62fdac..a54d10bb 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,4 +1,4 @@ -import { Fragment } from 'react' +import { Fragment, useEffect, useState } from 'react' import Head from 'next/head' import Image from 'next/image' import { Typography } from '@mui/material' @@ -8,6 +8,36 @@ import { ProjectSpotlight } from '../components/projectSpotlight' import { fetchActiveStrapiProjects } from '../lib/strapi' export default function Home({ selectedProjects}) { + const [newsArray, setNewsArray] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const fetchData = async () => { + try { + const response = await fetch('https://api.renci.org/api/post-list', { + method: "POST", + headers: { + 'Content-Type': 'application/json', + 'Accept': 'application/json', + }, + }); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + + const result = await response.json(); + setNewsArray(result.results.slice(0, 3)); + } catch (error) { + setError(error); + } finally { + setLoading(false); + } + }; + + // Call the fetchData function + fetchData(); + }, [setNewsArray, setLoading, setError]) return ( Date: Tue, 5 Dec 2023 16:34:25 -0500 Subject: [PATCH 3/8] render news article previews for 3 articles --- pages/index.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/pages/index.js b/pages/index.js index a54d10bb..a86c94ef 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,11 +1,12 @@ import { Fragment, useEffect, useState } from 'react' import Head from 'next/head' import Image from 'next/image' -import { Typography } from '@mui/material' +import { Typography, Stack } from '@mui/material' import { Link, Page } from '../components' import homeHero from '../images/racks.jpg' import { ProjectSpotlight } from '../components/projectSpotlight' import { fetchActiveStrapiProjects } from '../lib/strapi' +import { HomePageArticlePreview } from "../components/news/article-preview"; export default function Home({ selectedProjects}) { const [newsArray, setNewsArray] = useState(null); @@ -35,7 +36,6 @@ export default function Home({ selectedProjects}) { } }; - // Call the fetchData function fetchData(); }, [setNewsArray, setLoading, setError]) return ( @@ -54,6 +54,22 @@ export default function Home({ selectedProjects}) { + { + newsArray && ( + + Recent News + + { newsArray.map((article, i) => ( + + ))} + + + ) + } + ) } From 6681507df61ac63a998eff5fd08db0b329271c2c Mon Sep 17 00:00:00 2001 From: suejinkim20 Date: Tue, 5 Dec 2023 16:44:25 -0500 Subject: [PATCH 4/8] update h2 styling --- components/projectSpotlight.js | 2 +- pages/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/projectSpotlight.js b/components/projectSpotlight.js index 763e84c4..042f177a 100644 --- a/components/projectSpotlight.js +++ b/components/projectSpotlight.js @@ -93,7 +93,7 @@ export const ProjectSpotlight = ({ selectedProjects }) => { return ( - Project Spotlight + Project Spotlight - Recent News + Recent News { newsArray.map((article, i) => ( Date: Wed, 6 Dec 2023 10:35:49 -0500 Subject: [PATCH 5/8] return 3 most recent articles --- pages/index.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/pages/index.js b/pages/index.js index 3dbc0c58..872e6b5d 100644 --- a/pages/index.js +++ b/pages/index.js @@ -16,19 +16,26 @@ export default function Home({ selectedProjects}) { useEffect(() => { const fetchData = async () => { try { + let bodyContent = JSON.stringify({ + "pagination": { + "pageSize": 3, + "page": 1 + } + }); const response = await fetch('https://api.renci.org/api/post-list', { method: "POST", headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', }, + body: bodyContent }); if (!response.ok) { throw new Error('Network response was not ok'); } const result = await response.json(); - setNewsArray(result.results.slice(0, 3)); + setNewsArray(result.results); } catch (error) { setError(error); } finally { From 0396279ae6ff42fa12e9b887f5362b036f7f22ae Mon Sep 17 00:00:00 2001 From: suejinkim20 Date: Tue, 12 Dec 2023 13:59:17 -0500 Subject: [PATCH 6/8] pull out fetchHomeNews query and use getServerSide props instead of useEffect --- lib/strapi/fetchHomeNews.js | 29 +++++++++++++ lib/strapi/index.js | 3 +- pages/index.js | 86 +++++++++++++------------------------ 3 files changed, 62 insertions(+), 56 deletions(-) create mode 100644 lib/strapi/fetchHomeNews.js diff --git a/lib/strapi/fetchHomeNews.js b/lib/strapi/fetchHomeNews.js new file mode 100644 index 00000000..85c35799 --- /dev/null +++ b/lib/strapi/fetchHomeNews.js @@ -0,0 +1,29 @@ +export const fetchHomeNews = async (preview = false) => { + try { + let bodyContent = JSON.stringify({ + "pagination": { + "pageSize": 3, + "page": 1 + } + }); + + const response = await fetch('https://api.renci.org/api/post-list', { + method: "POST", + headers: { + 'Content-Type': 'application/json', + 'Accept': 'application/json', + }, + body: bodyContent + }); + + if (!response.ok) { + throw new Error('Network response was not ok'); + } + + const result = await response.json(); + return result.results + + } catch (error) { + console.log(error); + } +} \ No newline at end of file diff --git a/lib/strapi/index.js b/lib/strapi/index.js index 1806cd03..99d5120d 100644 --- a/lib/strapi/index.js +++ b/lib/strapi/index.js @@ -8,4 +8,5 @@ export * from './peopleGraphQL' export * from './fetchOurWorkTrayItems' export * from './newsAppearancesGraphQL' export * from './newsSWR' -export * from './newsGraphQL' \ No newline at end of file +export * from './newsGraphQL' +export * from './fetchHomeNews' \ No newline at end of file diff --git a/pages/index.js b/pages/index.js index 872e6b5d..28709ace 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,50 +1,15 @@ -import { Fragment, useEffect, useState } from 'react' +import { Fragment } from 'react' import Head from 'next/head' import Image from 'next/image' import { Typography, Stack } from '@mui/material' import { Link, Page } from '../components' import homeHero from '../images/racks.jpg' import { ProjectSpotlight } from '../components/projectSpotlight' -import { fetchActiveStrapiProjects } from '../lib/strapi' +import { fetchActiveStrapiProjects, fetchHomeNews } from '../lib/strapi' import { HomePageArticlePreview } from "../components/news/article-preview"; -export default function Home({ selectedProjects}) { - const [newsArray, setNewsArray] = useState(null); - const [loading, setLoading] = useState(true); - const [error, setError] = useState(null); +export default function Home({ selectedProjects, newsArray }) { - useEffect(() => { - const fetchData = async () => { - try { - let bodyContent = JSON.stringify({ - "pagination": { - "pageSize": 3, - "page": 1 - } - }); - const response = await fetch('https://api.renci.org/api/post-list', { - method: "POST", - headers: { - 'Content-Type': 'application/json', - 'Accept': 'application/json', - }, - body: bodyContent - }); - if (!response.ok) { - throw new Error('Network response was not ok'); - } - - const result = await response.json(); - setNewsArray(result.results); - } catch (error) { - setError(error); - } finally { - setLoading(false); - } - }; - - fetchData(); - }, [setNewsArray, setLoading, setError]) return ( Date: Tue, 12 Dec 2023 14:40:19 -0500 Subject: [PATCH 7/8] use Promise.all() to fetch the projects and articles in parallel --- pages/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/pages/index.js b/pages/index.js index 28709ace..43af24a2 100644 --- a/pages/index.js +++ b/pages/index.js @@ -53,9 +53,11 @@ export async function getServerSideProps({ res }) { 'no-cache, no-store, must-revalidate' ) - const newsArray = await fetchHomeNews() - const projects = await fetchActiveStrapiProjects() - + const [newsArray, projects] = await Promise.all([ + fetchHomeNews(), + fetchActiveStrapiProjects(), + ]); + let projectsCopy = [...projects] let projectSelection = [] for (let i = 0; i < 3; i += 1) { From 3b076c3908b96286d4ed2445273b98f1782e266b Mon Sep 17 00:00:00 2001 From: suejinkim20 Date: Tue, 12 Dec 2023 14:42:09 -0500 Subject: [PATCH 8/8] fix error where href for article link was not matching between server and client --- components/news/article-preview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/news/article-preview.js b/components/news/article-preview.js index 53942dab..46725c7e 100644 --- a/components/news/article-preview.js +++ b/components/news/article-preview.js @@ -121,7 +121,7 @@ export const HomePageArticlePreview = ({article }) => { ] const dateString = date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }); - const articleLink = `news/${year}/${month}/${day}/${article.slug}`; + const articleLink = `/news/${year}/${month}/${day}/${article.slug}`; return