3006 Add a news block with the day of the event / News support a List… (

#3055) * 3006 Add a news block with the day of the event / News support a List of programmed events * fix comment * Add code coverage * Fix predefined adoptiumNewsList
adoptium · Sep 6, 2024 · ecb80e2 · ecb80e2
1 parent f5e2584
commit ecb80e2
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 39 deletions.
diff --git a/src/components/AdoptiumNews/__tests__/__snapshots__/adoptiumNews.test.tsx.snap b/src/components/AdoptiumNews/__tests__/__snapshots__/adoptiumNews.test.tsx.snap
@@ -0,0 +1,56 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AdoptiumNews component > renders correctly with provided news 1`] = `
+<div>
+ <div
+ class="p-3 mt-4 mb-4 bg-light rounded-3 text-start"
+ >
+ <div
+ class="container py-5"
+ >
+ <h2
+ class="text-pink"
+ >
+ Mocked News 1
+ </h2>
+ <div>
+ <p
+ class="m-0 fw-bold"
+ >
+ September 10, 2024
+ </p>
+ <p
+ class="text-muted lh-sm"
+ >
+ Text
+ </p>
+ </div>
+ </div>
+ </div>
+ <div
+ class="p-3 mt-4 mb-4 bg-light rounded-3 text-start"
+ >
+ <div
+ class="container py-5"
+ >
+ <h2
+ class="text-pink"
+ >
+ Mocked News 2
+ </h2>
+ <div>
+ <p
+ class="m-0 fw-bold"
+ >
+ September 10, 2024
+ </p>
+ <p
+ class="text-muted lh-sm"
+ >
+ Text
+ </p>
+ </div>
+ </div>
+ </div>
+</div>
+`;
diff --git a/src/components/AdoptiumNews/__tests__/adoptiumNews.test.tsx b/src/components/AdoptiumNews/__tests__/adoptiumNews.test.tsx
@@ -3,10 +3,34 @@ import { render } from '@testing-library/react';
 import { describe, expect, it } from 'vitest'
 import AdoptiumNews from '..';
 
+const mockedItems = [
+ {
+ title: "Mocked News 1", 
+ body: "Be a part of the Adoptium", 
+ date: new Date('2024-09-10'),
+ startDisplayAt: new Date('2024-01-01'),
+ stopDisplayAfter: new Date('2050-12-31'),
+ },
+ {
+ title: "Mocked News 2", 
+ body: "I love Adoptium.<br/><callToActionLink>Go here</callToActionLink>", 
+ callToActionLink: 'https://adoptium.net/', 
+ date: new Date('2024-09-10'),
+ startDisplayAt: new Date('2024-01-01'),
+ stopDisplayAfter: new Date('2050-12-31'),
+ }
+]
+
 describe('AdoptiumNews component', () => {
  it('renders correctly', () => {
  const { container } = render(<AdoptiumNews />);
  // expect container to either be null or contain a div with the class of alert
  expect(container).toBeNull || expect(container.querySelector('div.text-pink')).toBeTruthy();
  });
+
+ it('renders correctly with provided news', () => {
+ const { container } = render(<AdoptiumNews adoptiumNewsList={mockedItems} />);
+
+ expect(container).toMatchSnapshot();
+ });
 });
diff --git a/src/components/AdoptiumNews/index.tsx b/src/components/AdoptiumNews/index.tsx
@@ -4,15 +4,25 @@ import LinkText from '../LinkText'
 
 // NOTES: 
 // - You can add a <callToActionLink /> tag to create a link in the body
-// - Dates must be with the format: "YYYY-MM-dd"
-const adoptiumNews = {
- title: "Adoptium Summit 2024", 
- body: "Be a part of the first-ever Adoptium Summit on September, 10.<br/>Connect with peers to exchange knowledge on Temurin, AQAvit and other Adoptium's projects.<br/><callToActionLink>Register here</callToActionLink>", 
- callToActionLink: 'https://www.eclipse.org/events/2024/adoptium-summit/', 
- date: new Date('2024-09-10'),
- startDisplayAt: new Date('2024-08-01'),
- stopDisplayAfter: new Date('2024-09-09'),
-}
+// - Dates must be with the format: "YYYY-MM-DD"
+const predefinedAdoptiumNewsList = [
+ {
+ title: "Adoptium Summit 2024", 
+ body: "Be a part of the first-ever Adoptium Summit on September, 10.<br/>Connect with peers to exchange knowledge on Temurin, AQAvit and other Adoptium's projects.<br/><callToActionLink>Register here</callToActionLink>", 
+ callToActionLink: 'https://www.eclipse.org/events/2024/adoptium-summit/', 
+ date: new Date('2024-09-10'),
+ startDisplayAt: new Date('2024-08-01'),
+ stopDisplayAfter: new Date('2024-09-10'),
+ },
+ {
+ title: "Adoptium Summit 2024", 
+ body: "Join us Today for the first-ever Adoptium Summit.<br/>An opportunity to connect with other Adoptium community members.<br/><callToActionLink>Register here</callToActionLink>", 
+ callToActionLink: 'https://www.eclipse.org/events/2024/adoptium-summit/', 
+ date: new Date('2024-09-10'),
+ startDisplayAt: new Date('2024-09-10'),
+ stopDisplayAfter: new Date('2024-09-11'),
+ }
+]
 
 const eventDateOptions = { 
  year: 'numeric', 
@@ -21,42 +31,56 @@ const eventDateOptions = {
  timeZone: "UTC"
 }
 
-const AdoptiumNews = () => {
+interface Props {
+ adoptiumNewsList?: AdoptiumNewsItem[];
+ }
+
+function compareNewsByStartDisplayAt(a: AdoptiumNewsItem, b: AdoptiumNewsItem) {
+ return a.startDisplayAt.getTime() - b.startDisplayAt.getTime();
+}
 
- const { language } = useI18next();
+const AdoptiumNews = ({ adoptiumNewsList }: Props) => {
 
- var eventDateUTC:Date|null = null;
- if(adoptiumNews.date) {
- eventDateUTC = new Date(Date.UTC(
- adoptiumNews.date.getUTCFullYear(), 
- adoptiumNews.date.getUTCMonth(),
- adoptiumNews.date.getUTCDate(), 
- adoptiumNews.date.getUTCHours(),
- adoptiumNews.date.getUTCMinutes(), 
- adoptiumNews.date.getUTCSeconds()));
-
- }
+ const adoptiumNewsListToDisplay = adoptiumNewsList ? adoptiumNewsList : predefinedAdoptiumNewsList;
+
+ const { language } = useI18next();
 
  const now = Date.now();
- if(!adoptiumNews || now < adoptiumNews.startDisplayAt.getTime() || now > adoptiumNews.stopDisplayAfter.getTime()) return;
 
  return (
- <div className='p-3 mt-4 mb-4 bg-light rounded-3 text-start'>
- <div className='container py-5'>
- <h2 className='text-pink'>{adoptiumNews.title}</h2>
- <div>
- {eventDateUTC && <p className='m-0 fw-bold'>{(eventDateUTC.toLocaleDateString(language, eventDateOptions))}</p>}
- <p className='text-muted lh-sm'>
- <Trans 
- defaults={adoptiumNews.body} 
- components={{
- callToActionLink: <LinkText href={adoptiumNews.callToActionLink||''} />
- }}
- />
- </p>
- </div>
- </div>
- </div>
+ adoptiumNewsListToDisplay
+ .filter(adoptiumNews => adoptiumNews.startDisplayAt.getTime() <= now && adoptiumNews.stopDisplayAfter.getTime() > now)
+ .sort(compareNewsByStartDisplayAt)
+ .map((adoptiumNews, index) => {
+ var eventDateUTC:Date|null = null;
+ if(adoptiumNews.date) {
+ eventDateUTC = new Date(Date.UTC(
+ adoptiumNews.date.getUTCFullYear(), 
+ adoptiumNews.date.getUTCMonth(),
+ adoptiumNews.date.getUTCDate(), 
+ adoptiumNews.date.getUTCHours(),
+ adoptiumNews.date.getUTCMinutes(), 
+ adoptiumNews.date.getUTCSeconds()));
+ }
+
+ return (
+ <div key={index} className='p-3 mt-4 mb-4 bg-light rounded-3 text-start'>
+ <div className='container py-5'>
+ <h2 className='text-pink'>{adoptiumNews.title}</h2>
+ <div>
+ {eventDateUTC && <p className='m-0 fw-bold'>{(eventDateUTC.toLocaleDateString(language, eventDateOptions))}</p>}
+ <p className='text-muted lh-sm'>
+ <Trans 
+ defaults={adoptiumNews.body} 
+ components={{
+ callToActionLink: <LinkText href={adoptiumNews.callToActionLink||''} />
+ }}
+ />
+ </p>
+ </div>
+ </div>
+ </div>)
+ })
  );
 };