Port details page to ts 2

src/app/models/book-toc.ts

@@ -5,11 +5,9 @@ import memoize from 'lodash/memoize';
 export function bookToc(slug: string) {
     return cmsFetch(slug)
         .then((bi) => {
-            const isRex = true;
             const webviewLink = bi.webview_rex_link;
 
             return {
-                isRex,
                 webviewLink,
                 cnxId: bi.cnx_id
             };

src/app/models/table-of-contents-html.js

@@ -1,22 +1,14 @@
 import fetchRexRelease from '~/models/rex-release';
 
-export function cnxFetch({isRex, cnxId, webviewLink}) {
-    if (isRex) {
-        return fetchRexRelease(webviewLink, cnxId);
-    }
-    return fetch(`${process.env.API_ORIGIN}/contents/${cnxId}.json`)
-        .then((r) => r.json())
-        .catch((err) => {throw new Error(`Fetching table of contents: ${err}`);})
-    ;
+export function cnxFetch({cnxId, webviewLink}) {
+    return fetchRexRelease(webviewLink, cnxId);
 }
 
-export default function tableOfContentsHtml({isRex, cnxId, webviewLink}) {
+export default function tableOfContentsHtml({cnxId, webviewLink}) {
     function pageLink(entry) {
         const rexRoot = webviewLink.replace(/\/pages\/.*/, '');
 
-        return isRex ?
-            `${rexRoot}/pages/${entry.slug || entry.shortId}` :
-            `${webviewLink}:${entry.shortId}`;
+        return `${rexRoot}/pages/${entry.slug || entry.shortId}`;
     }
 
     function buildTableOfContents(contents, tag) {
@@ -25,24 +17,27 @@ export default function tableOfContentsHtml({isRex, cnxId, webviewLink}) {
         contents.forEach((entry) => {
             if (entry.contents) {
                 htmlEntities.push(`${entry.title}<ul class="no-bullets">`);
-                buildTableOfContents(entry.contents, 'li')
-                    .forEach((e) => {
-                        htmlEntities.push(e);
-                    });
+                buildTableOfContents(entry.contents, 'li').forEach((e) => {
+                    htmlEntities.push(e);
+                });
                 htmlEntities.push('</ul>');
             } else {
                 htmlEntities.push(
-                    `<${tag}><a href="${pageLink(entry)}">${entry.title}</a></${tag}>`
+                    `<${tag}><a href="${pageLink(entry)}">${
+                        entry.title
+                    }</a></${tag}>`
                 );
             }
         });
         return htmlEntities;
     }
 
-    return cnxFetch({isRex, cnxId, webviewLink}).then(
-        (cnxData) => buildTableOfContents(cnxData.tree.contents, 'div').join(''),
+    return cnxFetch({cnxId, webviewLink}).then(
+        (cnxData) =>
+            buildTableOfContents(cnxData.tree.contents, 'div').join(''),
         (err) => {
             console.warn(`Error fetching TOC for ${cnxId}: ${err}`);
+            return '';
         }
     );
 }

src/app/pages/details/common/authors.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {useIntl} from 'react-intl';
+import groupBy from 'lodash/groupBy';
+import useDetailsContext from '../context';
+import $ from '~/helpers/$';
+
+function Authors({
+    heading,
+    className,
+    authors = []
+}: {
+    heading: string;
+    className: string;
+    authors: ReturnType<typeof useDetailsContext>['authors'];
+}) {
+    if (authors.length === 0) {
+        return null;
+    }
+    return (
+        <div>
+            <h3 className="author-heading">{heading}</h3>
+            {authors.map((author) => (
+                <div className={className} key={author.name}>
+                    {author.name}
+                    {author.university ? `, ${author.university}` : ''}
+                </div>
+            ))}
+        </div>
+    );
+}
+
+export default function AuthorsSection() {
+    const {authors, title} = useDetailsContext();
+    const polish = $.isPolish(title);
+    const intl = useIntl();
+    const headings = polish
+        ? ['Główni autorzy', 'Autorzy współpracujący']
+        : [
+              intl.formatMessage({id: 'authors.senior'}),
+              intl.formatMessage({id: 'authors.contributing'})
+          ];
+    const groupFn = (author: (typeof authors)[0]) =>
+        author.seniorAuthor ? 'senior' : 'regular';
+    const groupedAuthors = groupBy(authors, groupFn);
+
+    return (
+        <React.Fragment>
+            <Authors
+                heading={headings[0]}
+                className="loc-senior-author"
+                authors={groupedAuthors.senior}
+            />
+            <Authors
+                heading={headings[1]}
+                className="loc-nonsenior-author"
+                authors={groupedAuthors.regular}
+            />
+        </React.Fragment>
+    );
+}

src/app/pages/details/common/errata.js → src/app/pages/details/common/errata.tsx

@@ -1,57 +1,69 @@
 import React from 'react';
 import RawHTML from '~/components/jsx-helpers/raw-html';
 import {FormattedMessage, useIntl} from 'react-intl';
+import useDetailsContext from '../context';
+import $ from '~/helpers/$';
 
-function EnglishButtonGroup({title}) {
+function EnglishButtonGroup({title}: {title: string}) {
     return (
         <div className="button-group">
             <a
                 href={`/errata/form?book=${encodeURIComponent(title)}`}
                 className="btn secondary medium"
             >
-                <FormattedMessage id="errata.suggest" defaultMessage="Suggest a correction" />
+                <FormattedMessage
+                    id="errata.suggest"
+                    defaultMessage="Suggest a correction"
+                />
             </a>
             <a
                 href={`/errata/?book=${encodeURIComponent(title)}`}
                 className="btn default medium"
             >
-                <FormattedMessage id="errata.list" defaultMessage="Errata list" />
+                <FormattedMessage
+                    id="errata.list"
+                    defaultMessage="Errata list"
+                />
             </a>
         </div>
     );
 }
 
-function ButtonGroup({polish, title}) {
+function ButtonGroup({title}: {title: string}) {
     const PolishButtonGroup = () => (
         <div className="button-group">
             <a
                 href="https://openstax.pl/pl/errata"
-                className="btn secondary medium">Zgłoś poprawkę</a>
+                className="btn secondary medium"
+            >
+                Zgłoś poprawkę
+            </a>
         </div>
     );
 
-    return polish ? <PolishButtonGroup /> : <EnglishButtonGroup title={title} />;
+    return $.isPolish(title) ? (
+        <PolishButtonGroup />
+    ) : (
+        <EnglishButtonGroup title={title} />
+    );
 }
 
-export function ErrataContents({model, polish}) {
-    const title = model.title;
-    const blurb = model.errataContent;
+export function ErrataContents() {
+    const {title, errataContent: blurb, bookState} = useDetailsContext();
 
     return (
         <React.Fragment>
             <RawHTML Tag="p" html={blurb} />
-            {
-                model.bookState !== 'deprecated' &&
-                    <ButtonGroup polish={polish} title={title} />
-            }
+            {bookState !== 'deprecated' && <ButtonGroup title={title} />}
         </React.Fragment>
     );
 }
 
-export default function ErrataSection({model, polish=false}) {
+export default function ErrataSection() {
     const intl = useIntl();
+    const {bookState} = useDetailsContext();
 
-    if (!['live', 'new_edition_available', 'deprecated'].includes(model.bookState)) {
+    if (!['live', 'new_edition_available', 'deprecated'].includes(bookState)) {
         return null;
     }
 
@@ -64,7 +76,7 @@ export default function ErrataSection({model, polish=false}) {
             <h3>
                 <FormattedMessage id="errata.header" defaultMessage="Errata" />
             </h3>
-            <ErrataContents model={model} polish={polish} />
+            <ErrataContents />
         </div>
     );
 }

src/app/pages/details/common/hooks.js → src/app/pages/details/common/hooks.tsx

@@ -3,28 +3,26 @@ import tableOfContentsHtml from '~/models/table-of-contents-html';
 import partnerFeaturePromise, {tooltipText} from '~/models/salesforce-partners';
 import shuffle from 'lodash/shuffle';
 import {camelCaseKeys} from '~/helpers/page-data-utils';
+import useDetailsContext from '../context';
 
-export function useTableOfContents(model) {
-    const webviewLink = model.webviewRexLink || model.webviewLink;
-    const isRex = Boolean(model.webviewRexLink);
-    const [tocHtml, setTocHtml] = useState('');
+export function useTableOfContents() {
+    const model = useDetailsContext();
+    const webviewLink = model.webviewRexLink;
+    const [tocHtml, setTocHtml] = useState<string>('');
 
     tableOfContentsHtml({
-        isRex,
         cnxId: model.cnxId,
-        bookSlug: model.slug,
         webviewLink
-    }).then(
-        setTocHtml,
-        (err) => {
-            console.warn(`Failed to generate table of contents HTML for ${model.cnxId}: ${err}`);
-        }
-    );
+    }).then(setTocHtml, (err) => {
+        console.warn(
+            `Failed to generate table of contents HTML for ${model.cnxId}: ${err}`
+        );
+    });
 
-    return tocHtml;
+    return tocHtml as string;
 }
 
-function toBlurb(partner) {
+function toBlurb(partner: PartnerData) {
     const pData = camelCaseKeys(partner);
 
     return {
@@ -36,28 +34,32 @@ function toBlurb(partner) {
         type: pData.partnerType,
         url: `/partners?${pData.partnerName}`,
         verifiedFeatures: pData.verifiedByInstructor ? tooltipText : false,
-        rating: pData.averageRating.ratingAvg,
+        rating: pData.averageRating?.ratingAvg,
         ratingCount: pData.ratingCount
     };
 }
 
-export function usePartnerFeatures(bookAbbreviation) {
-    const [blurbs, setBlurbs] = useState([]);
+type PartnerData = {
+    books: string;
+}
+
+export function usePartnerFeatures(bookAbbreviation: string) {
+    const [blurbs, setBlurbs] = useState<object[]>([]);
     const [includePartners, setIncludePartners] = useState('');
 
     useEffect(() => {
-        partnerFeaturePromise.then((pd) =>
-            pd.filter((p) => {
+        partnerFeaturePromise
+            .then((pd: PartnerData[]) => pd.filter((p) => {
                 const books = (p.books || '').split(';');
 
                 return books.includes(bookAbbreviation);
-            })
-        ).then((pd) => {
-            if (pd.length > 0) {
-                setIncludePartners('include-partners');
-            }
-            setBlurbs(shuffle(pd).map(toBlurb));
-        });
+            }))
+            .then((pd) => {
+                if (pd.length > 0) {
+                    setIncludePartners('include-partners');
+                }
+                setBlurbs(shuffle(pd).map(toBlurb));
+            });
     }, [bookAbbreviation]);
 
     return [blurbs, includePartners];