feat(coscrad-frontend): support a presenter for the term of the day (#…

…323)

* WIP - term of the day component

* WIP - changes from PR 323

* WIP - added term-of-the-day component

* WIP - updated term of the day with prettier

* Use term of day container in home

* complete data flow for term of the day

* style(coscrad-frontend): add mui styled component for term of the day

* style(coscrad-frontend): update styled component from suggestions on PR

---------

Co-authored-by: Aaron Plahn <[email protected]>

.prettierrc

@@ -2,4 +2,4 @@
   "trailingComma": "es5",
   "tabWidth": 4,
   "singleQuote": true
-}
+}

apps/coscrad-frontend/src/components/home/home.tsx

@@ -1,17 +1,22 @@
 import { useAuth0 } from '@auth0/auth0-react';
+import { isNullOrUndefined } from '@coscrad/validation-constraints';
 import { Typography } from '@mui/material';
 import { useContext, useEffect } from 'react';
 import { useAppDispatch } from '../../app/hooks';
 import { ConfigurableContentContext } from '../../configurable-front-matter/configurable-content-provider';
 import { userLoginSucceeded } from '../../store/slices/auth';
 import { ImageInContent } from '../../utils/generic-components/presenters/image-in-content';
 import { CoscradMainContentContainer } from '../../utils/generic-components/style-components/coscrad-main-content-container';
+import { TermOfTheDayContainer } from '../term-of-the-day/term-of-the-day.container';
 
 export const Home = (): JSX.Element => {
     /**
      * TODO: Move data (ConfigurableContentContext, auth, and dispatch) out of presenter
      */
-    const { siteDescription, siteHomeImageUrl } = useContext(ConfigurableContentContext);
+
+    const { siteDescription, siteHomeImageUrl, termOfTheDayConfig } = useContext(
+        ConfigurableContentContext
+    );
 
     const { isAuthenticated, getAccessTokenSilently, user } = useAuth0();
 
@@ -43,9 +48,9 @@ export const Home = (): JSX.Element => {
             {/**
              * TODO: consider using a photograph detail presenter for this
              */}
-
             <ImageInContent image={image} alignment="left" displayWidth="45%" />
             <Typography variant="body1">{siteDescription}</Typography>
+            {isNullOrUndefined(termOfTheDayConfig) ? null : <TermOfTheDayContainer />}
         </CoscradMainContentContainer>
     );
 };

apps/coscrad-frontend/src/components/term-of-the-day/term-of-the-day-styled.tsx

@@ -0,0 +1,9 @@
+import { styled } from '@mui/material';
+
+export const StyledTermOfTheDay = styled('div')({
+    textAlign: 'center',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    width: '100%',
+    padding: '20px 0 20px 0',
+});

apps/coscrad-frontend/src/components/term-of-the-day/term-of-the-day.container.tsx

@@ -0,0 +1,26 @@
+import { useContext } from 'react';
+import { ConfigurableContentContext } from '../../configurable-front-matter/configurable-content-provider';
+import { useLoadableTermById } from '../../store/slices/resources';
+import { displayLoadableSearchResult } from '../higher-order-components/display-loadable-search-result';
+import { TermOfTheDayPresenter } from './term-of-the-day.presenter';
+import { useDate } from './use-date';
+
+export const TermOfTheDayContainer = (): JSX.Element => {
+    const { termOfTheDayConfig } = useContext(ConfigurableContentContext);
+
+    const monthAndDate = useDate();
+
+    const termOfTheDayId = termOfTheDayConfig[monthAndDate.date.toString()];
+
+    const loadableTermSearchResult = useLoadableTermById(termOfTheDayId);
+
+    const Presenter = displayLoadableSearchResult(
+        TermOfTheDayPresenter,
+        (loadableTermSearchResult) => ({
+            termProps: loadableTermSearchResult,
+            monthAndDate,
+        })
+    );
+
+    return <Presenter {...loadableTermSearchResult} />;
+};

apps/coscrad-frontend/src/components/term-of-the-day/term-of-the-day.presenter.tsx

@@ -0,0 +1,25 @@
+import { ICategorizableDetailQueryResult, ITermViewModel } from '@coscrad/api-interfaces';
+import { Typography } from '@mui/material';
+import { TermDetailFullViewPresenter } from '../resources/terms/term-detail.full-view.presenter';
+import { StyledTermOfTheDay } from './term-of-the-day-styled';
+import { MonthAndDate } from './use-date';
+
+interface TermOfTheDayPresenterProps {
+    termProps: ICategorizableDetailQueryResult<ITermViewModel>;
+    monthAndDate: MonthAndDate;
+}
+
+export const TermOfTheDayPresenter = ({
+    monthAndDate: { month, date },
+    termProps,
+}: TermOfTheDayPresenterProps): JSX.Element => {
+    return (
+        <StyledTermOfTheDay>
+            <Typography variant="h3">Term of the day</Typography>
+            <TermDetailFullViewPresenter {...termProps} />
+            <Typography variant="h4">
+                {month} {date}
+            </Typography>
+        </StyledTermOfTheDay>
+    );
+};

apps/coscrad-frontend/src/components/term-of-the-day/use-date.tsx

@@ -0,0 +1,30 @@
+const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+] as const;
+
+export type Month = typeof months[number];
+
+export type MonthAndDate = {
+    month: Month;
+    date: number;
+};
+
+export function useDate(): MonthAndDate {
+    const currentDate = new Date();
+
+    return {
+        month: months[currentDate.getMonth()],
+        date: currentDate.getDate(),
+    };
+}

apps/coscrad-frontend/src/configurable-front-matter/data/configurable-content-schema.ts

@@ -34,6 +34,7 @@ export type ConfigurableContent<T extends CategorizableType = CategorizableType>
     siteCredits: string;
     simulatedKeyboard?: SimulatedKeyboardConfig;
     listenLive?: ListenLivePageConfiguration;
+    termOfTheDayConfig?: Record<string, string>;
 };
 
 export const configurableContentPropertiesAndConstraints: {
@@ -55,6 +56,7 @@ export const configurableContentPropertiesAndConstraints: {
     siteCredits: [CoscradConstraint.isNonEmptyString, CoscradConstraint.isRequired],
     simulatedKeyboard: [CoscradConstraint.isObject],
     listenLive: [CoscradConstraint.isObject],
+    termOfTheDayConfig: [CoscradConstraint.isObject],
 };
 
 export type ConfigurableContentSchema = typeof configurableContentPropertiesAndConstraints;

apps/coscrad-frontend/src/configurable-front-matter/data/content.config.SAMPLE.ts

@@ -47,4 +47,37 @@ export const contentConfig: ConfigurableContent = {
             'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
         ].join(' '),
     },
+    termOfTheDayConfig: {
+        '01': '123',
+        '02': '124',
+        '03': '125',
+        '04': '126',
+        '05': '127',
+        '06': '128',
+        '07': '129',
+        '08': '130',
+        '09': '131',
+        '10': '132',
+        '11': '133',
+        '12': '134',
+        '13': '135',
+        '14': '136',
+        '15': '137',
+        '16': '138',
+        '17': '139',
+        '18': '140',
+        '19': '141',
+        '20': '142',
+        '21': '143',
+        '22': '144',
+        '23': '145',
+        '24': '146',
+        '25': '147',
+        '26': '148',
+        '27': '149',
+        '28': '150',
+        '29': '151',
+        '30': '152',
+        '31': '153',
+    },
 };

apps/tsilhqotin-language-hub/src/Configs/global.config.ts

@@ -20,13 +20,16 @@ export type SongIdToCredits = Record<string, string>;
 
 export type VideoIdtoCredits = Record<string, string>;
 
+export type TermOfTheDay = Record<string, string>;
+
 export type GlobalConfig = {
     siteTitle: string;
     funderInfos: FunderInfo[];
     // TODO Use this in the component
     linkInfos: LinkInfo[];
     songIdToCredits: SongIdToCredits;
     videoIdToCredits: VideoIdtoCredits;
+    termOfTheDay: TermOfTheDay;
 };
 
 export function getGlobalConfig(): GlobalConfig {