Core 1061 port press page to ts (#2751)

* CORE-1061: Port Press page to TypeScript

[CORE-1061]

* Prettier

Author: RoyEJohnson

src/app/components/byline/byline.tsx

@@ -2,15 +2,13 @@ import React from 'react';
 import './byline.scss';
 import {formatDateForBlog} from '~/helpers/data';
 
-export default function Byline({
-    date,
-    author,
-    source
-}: {
+type BylineArgs = {
     date: string;
-    author: string;
+    author?: string;
     source?: string;
-}) {
+};
+
+export default function Byline({date, source, author}: BylineArgs) {
     return (
         <div className="byline">
             {source ? (

src/app/pages/press/about-openstax/about-openstax.js renamed to src/app/pages/press/about-openstax/about-openstax.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import usePageContext from '../page-context';
 import RawHTML from '~/components/jsx-helpers/raw-html';
+import {ContentBlock} from '../helpers';
+import {assertDefined} from '~/helpers/data';
 
 export default function AboutOpenStax() {
-    const {about} = usePageContext();
+    const {about} = assertDefined(usePageContext());
 
     return (
-        <div className='content-block'>
-            <h2>About OpenStax</h2>
+        <ContentBlock title="About OpenStax">
             <RawHTML html={about} />
-        </div>
+        </ContentBlock>
     );
 }

src/app/pages/press/article/article.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import BodyUnit, {UnitType} from '~/components/body-units/body-units';
+import Byline from '~/components/byline/byline';
+import {formatDateForBlog as formatDate, assertNotNull} from '~/helpers/data';
+import '~/pages/blog/article/article.scss';
+import usePageData from '~/helpers/use-page-data';
+import './article.scss';
+
+function Hero({coverUrl}: {coverUrl: string}) {
+    return (
+        <div className="hero" style={{backgroundImage: `url(${coverUrl})`}}>
+            <img
+                className="strips"
+                src="/dist/images/components/strips.svg"
+                height="10"
+                alt=""
+                role="presentation"
+            />
+        </div>
+    );
+}
+
+type ArticleData = {
+    articleImage: string | null;
+    subheading: string;
+    title: string;
+    author: string;
+    date: string;
+    body: UnitType[];
+};
+
+function Article({data}: {data: ArticleData}) {
+    const {
+        articleImage: coverUrl,
+        subheading,
+        title,
+        author,
+        date: rawDate,
+        body: bodyData
+    } = data;
+    const date = assertNotNull(formatDate(rawDate));
+
+    return (
+        <div className="article">
+            {coverUrl !== null && <Hero coverUrl={coverUrl} />}
+            <article className="text-content">
+                <h1>{title}</h1>
+                {Boolean(subheading) && <h2>{subheading}</h2>}
+                <Byline author={author} date={date} />
+                <div className="body">
+                    {bodyData.map((unit) => (
+                        <BodyUnit unit={unit} key={unit.value as string} />
+                    ))}
+                </div>
+            </article>
+        </div>
+    );
+}
+
+type PageData =
+    | ArticleData
+    | {
+          error: {message: string};
+      };
+
+export default function ArticleLoader({slug}: {slug: string}) {
+    const data = usePageData<PageData>(slug, true);
+
+    if (!data) {
+        return null;
+    }
+    if ('error' in data) {
+        return (
+            <div className="text-content">
+                <h1>[Article not found]</h1>
+                <pre>
+                    {data.error.message} {slug}
+                </pre>
+            </div>
+        );
+    }
+
+    return <Article data={data} />;
+}

src/app/pages/press/article/article.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import usePageContext from '../page-context';
+import {assertDefined} from '~/helpers/data';
 import './banner.scss';
 
 export default function Banner() {
-    const {title} = usePageContext();
+    const {title} = assertDefined(usePageContext());
 
     return (
-        <div className='content-block'>
-            <div className='hero'>
+        <div className="content-block">
+            <div className="hero">
                 <h1>{title}</h1>
             </div>
         </div>

src/app/pages/press/banner/banner.js renamed to src/app/pages/press/banner/banner.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
+import {ContentBlock} from '../helpers';
 import usePageContext from '../page-context';
 import AccordionGroup from '~/components/accordion-group/accordion-group';
-import {htmlToText} from '~/helpers/data';
+import {htmlToText, assertDefined} from '~/helpers/data';
 import RawHTML from '~/components/jsx-helpers/raw-html';
 import './faq.scss';
 
 export default function FAQ() {
-    const {faqs} = usePageContext();
+    const {faqs} = assertDefined(usePageContext());
 
     const accordionItems = React.useMemo(
         () =>
@@ -18,11 +19,10 @@ export default function FAQ() {
     );
 
     return (
-        <div className='content-block'>
-            <h2>Frequently asked questions</h2>
-            <div className='articles'>
+        <ContentBlock title="Frequently asked questions">
+            <div className="articles">
                 <AccordionGroup items={accordionItems} noScroll />
             </div>
-        </div>
+        </ContentBlock>
     );
 }

src/app/pages/press/faq/faq.js renamed to src/app/pages/press/faq/faq.tsx

@@ -1,20 +1,21 @@
 import React from 'react';
 import usePageContext from '../page-context';
+import {assertDefined} from '~/helpers/data';
+import {ContentBlock} from '../helpers';
 import './featured-in.scss';
 
 export default function FeaturedIn() {
-    const {featuredIn} = usePageContext();
+    const {featuredIn} = assertDefined(usePageContext());
 
     return (
-        <div className='content-block'>
-            <h2>Featured in</h2>
-            <div className='link-grid'>
+        <ContentBlock title="Featured in">
+            <div className="link-grid">
                 {featuredIn.map((obj) => (
                     <a key={obj.image} href={obj.url}>
                         <img src={obj.image} alt={obj.name} />
                     </a>
                 ))}
             </div>
-        </div>
+        </ContentBlock>
     );
 }

src/app/pages/press/featured-in/featured-in.js renamed to src/app/pages/press/featured-in/featured-in.tsx

@@ -3,33 +3,36 @@ import Byline from '~/components/byline/byline';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons/faExternalLinkAlt';
 
-export function ContentBlock({title, children}) {
+export function ContentBlock({
+    title,
+    children
+}: React.PropsWithChildren<{title: string}>) {
     return (
-        <div className='content-block'>
+        <div className="content-block">
             <h2>{title}</h2>
             {children}
         </div>
     );
 }
 
-export function asDate(dateStr) {
+export function asDate(dateStr: string) {
     const [year, month, day] = dateStr.split('-');
 
-    return new Date(year, month - 1, day);
+    return new Date(+year, +month - 1, +day);
 }
 
-export function convertedDate(dateStr) {
+export function convertedDate(dateStr: string) {
     return asDate(dateStr).toLocaleString('en-US', {
         month: 'short',
         day: 'numeric',
         year: 'numeric'
     });
 }
 
-function OptionalExcerpt({excerpt, url}) {
+function OptionalExcerpt({excerpt, url}: {excerpt?: string; url: string}) {
     return (
         excerpt && (
-            <div className='excerpt'>
+            <div className="excerpt">
                 {excerpt}… <a href={url}>Continue reading</a>
             </div>
         )
@@ -44,6 +47,11 @@ export function PressExcerpt({
     url,
     headline,
     excerpt
+}: Parameters<typeof Byline>[0] & {
+    iconUrl?: string;
+    url: string;
+    headline: string;
+    excerpt?: string;
 }) {
     const classList = ['press-excerpt'];
 
@@ -53,9 +61,9 @@ export function PressExcerpt({
 
     return (
         <div className={classList.join(' ')}>
-            {iconUrl && <img src={iconUrl} alt='' />}
+            {iconUrl && <img src={iconUrl} alt="" />}
             <Byline author={author} date={date} source={source} />
-            <div className='headline'>
+            <div className="headline">
                 <a href={url}>
                     {headline}{' '}
                     {source && <FontAwesomeIcon icon={faExternalLinkAlt} />}

src/app/pages/press/helpers.js renamed to src/app/pages/press/helpers.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
+import {assertDefined} from '~/helpers/data';
 import usePageContext from '../page-context';
+import {ContentBlock} from '../helpers';
 
 export default function Infographic() {
-    const {infographicText, infographicImage} = usePageContext();
+    const {infographicText, infographicImage} = assertDefined(usePageContext());
 
     return (
-        <div className='content-block'>
-            <h2>{infographicText}</h2>
+        <ContentBlock title={infographicText}>
             <img
                 src={infographicImage.meta.downloadUrl}
                 alt={infographicImage.title}
             />
-        </div>
+        </ContentBlock>
     );
 }