Port blog page to ts (#2676)

* port blog-context (coverage incomplete) * mv article and use-progress * Update article and use-progress * pinned-article * explore-page * gated-content-dialog (wip) * latest-blog-posts and more-stories * mv use-all-articles * Update use-all-articles * rename blog test * blog-pages * Fix sticky bit not being sticky The article progress indicator is supposed to be sticky. The positioning got broken by some overflow on the page. * Clean up leftovers (code review)
openstax · Nov 6, 2024 · c875d12 · c875d12
1 parent 4c923c6
commit c875d12
Show file tree

Hide file tree

Showing 35 changed files with 1,954 additions and 788 deletions.
diff --git a/src/app/components/dialog/dialog.d.ts b/src/app/components/dialog/dialog.d.ts
@@ -1,27 +1,29 @@
 import React from 'react';
 import ReactModal from 'react-modal';
 
+type DialogProps = React.PropsWithChildren<{
+    isOpen?: boolean;
+    title?: string;
+    onPutAway?: () => void;
+    className?: string;
+    closeOnOutsideClick?: boolean;
+}>
+
 export default function Dialog({
     isOpen,
     title,
     onPutAway,
     children,
     className,
     closeOnOutsideClick
-}: React.PropsWithChildren<{
-    isOpen: boolean;
-    title: string;
-    onPutAway: () => void;
-    className?: string;
-    closeOnOutsideClick?: boolean;
-}>): React.ReactNode;
+}: DialogProps): React.ReactNode;
 
 export function useDialog(
     initallyOpen?: boolean
 ): [
     BoundDialog: ({
         children
-    }: React.PropsWithChildren<object & {aria: ReactModal.Aria}>) => React.ReactNode,
+    }: DialogProps & {aria?: ReactModal.Aria}) => React.ReactNode,
     open: () => void,
     close: () => void,
     showDialog: boolean

diff --git a/src/app/components/explore-by-subject/types.ts b/src/app/components/explore-by-subject/types.ts
@@ -1,5 +1,5 @@
 export type Category = {
-    id: string;
+    id: number;
     name: string;
     subjectIcon?: string;
 };
diff --git a/src/app/components/form-input/form-input.d.ts b/src/app/components/form-input/form-input.d.ts
@@ -0,0 +1,8 @@
+export default function FormInput({label, longLabel, inputProps, suggestions}:
+    {
+        label: string;
+        longLabel?: string;
+        inputProps: object;
+        suggestions?: boolean;
+    }
+): React.ReactNode;
diff --git a/src/app/components/toggle/toggle-control-bar.js b/src/app/components/toggle/toggle-control-bar.js
@@ -17,6 +17,7 @@ export default function ToggleControlBar({ Indicator, children }) {
         [isOpen]
     );
     const focusRef = useRefToFocusAfterClose();
+    const listboxId = `lbid-${Math.floor(Math.random() * 1010101)}`;
 
     React.useEffect(() => {
         if (isOpen) {
@@ -41,8 +42,11 @@ export default function ToggleControlBar({ Indicator, children }) {
             onClick={() => toggle()}
             onKeyDown={onKeyDown}
             ref={focusRef}
+            role="combobox"
+            aria-controls={listboxId}
+            aria-haspopup={listboxId}
         >
-            <div>{children}</div>
+            <div role="listbox" id={listboxId}>{children}</div>
             <Indicator isOpen={isOpen} />
         </div>
     );

diff --git a/src/app/helpers/use-document-head.ts b/src/app/helpers/use-document-head.ts
@@ -76,14 +76,17 @@ type ArticleSubject = {name: string} | {value: {subject: {name: string}}[]};
 
 type Collection = {name: string} | {value: {collection: {name: string}}[]};
 
-type BookData = {
+export type BookData = {
     meta?: object;
     description?: string;
     bookSubjects?: Subject[];
     bookCategories?: Category[];
     title?: string;
     articleSubjects?: ArticleSubject[];
     collections?: Collection[];
+    error?: {
+        message: string;
+    }
 };
 
 // eslint-disable-next-line complexity

diff --git a/src/app/pages/blog/article-summary/article-summary.tsx b/src/app/pages/blog/article-summary/article-summary.tsx
@@ -2,35 +2,53 @@ import React from 'react';
 import RawHTML from '~/components/jsx-helpers/raw-html';
 import Byline from '~/components/byline/byline';
 import ClippedImage from '~/components/clipped-image/clipped-image';
+import type {
+    ArticleSummary as BlurbDataBase,
+    CollectionEntry,
+    SubjectEntry
+} from '~/pages/blog/blog-context';
 
-type Collection = {
-    name?: string;
-    value: {collection: Collection}[];
-};
+type CollectionVariant =
+    | CollectionEntry
+    | {
+          value: {collection: CollectionEntry}[];
+      };
+
+type ArticleSubjectVariant =
+    | SubjectEntry
+    | {
+          value: {subject: SubjectEntry}[];
+      };
+
+type BlurbData =
+    | null
+    | (Omit<BlurbDataBase, 'collections' | 'articleSubjects'> & {
+          meta?: {slug: string};
+          collections: CollectionVariant[];
+          articleSubjects: ArticleSubjectVariant[];
+      });
 
-type ArticleSubject = {
-    name?: string;
-    value: {subject: ArticleSubject}[];
-};
 
-type BlurbData = null | {
-    id: string;
-    collections: Collection[];
-    articleSubjects: ArticleSubject[];
-    heading: string;
+export type ArticleSummaryData = {
+    id?: number;
+    articleSlug: string;
+    image: string;
+    altText?: string;
+    headline: string;
     subheading: string;
-    articleImage: string;
-    articleImageAlt: string;
-    bodyBlurb: string;
-    author: string;
+    body: string;
     date: string;
-    slug?: string;
-    meta: {slug: string};
+    author: string;
+    collectionNames: string[];
+    articleSubjectNames: string[];
+    openInNewWindow?: boolean;
+    HeadTag?: keyof JSX.IntrinsicElements;
+    setPath?: (href: string) => void;
 };
 
-export function blurbModel(data: BlurbData) {
+export function blurbModel(data: BlurbData): ArticleSummaryData | Record<string, never> {
     if (!data) {
-        return {};
+        return {} as Record<string, never>;
     }
 
     return {
@@ -56,24 +74,14 @@ export function blurbModel(data: BlurbData) {
         body: data.bodyBlurb,
         author: data.author,
         date: data.date,
-        articleSlug: data.slug || data.meta.slug
+        articleSlug: data.slug || (data.meta?.slug as string)
     };
 }
 
-export type ArticleSummaryData = {
-    articleSlug: string;
-    image: string;
-    headline: string;
-    subheading: string;
-    body: string;
-    date: string;
-    author: string;
-    collectionNames: string[];
-    articleSubjectNames: string[];
-    setPath: (href: string) => void;
-    openInNewWindow: boolean;
-    HeadTag?: keyof JSX.IntrinsicElements;
-};
+export type PopulatedBlurbModel = Exclude<
+    ReturnType<typeof blurbModel>,
+    Record<string, never>
+>;
 
 export default function ArticleSummary({
     articleSlug,
@@ -100,8 +108,10 @@ export default function ArticleSummary({
             if (target.getAttribute('target') === '_blank') {
                 return;
             }
-            event.preventDefault();
-            setPath(target.href);
+            if (setPath) {
+                event.preventDefault();
+                setPath(target.href);
+            }
         },
         [setPath]
     );