AuthorPage.tsx

import { Component, Fragment, createElement } from 'cortex'
import { useRoute } from 'cortex-router'

import { useArticles } from '~/hooks/useArticles'
import { useAuthor } from '~/hooks/useAuthor'

import { Avatar } from '~/views/components/Avatar'
import { Card } from '~/views/components/Card'
import { Container } from '~/views/components/Container'
import { Flexbox } from '~/views/components/Flexbox'
import { Footer } from '~/views/components/Footer'
import { Grid } from '~/views/components/Grid'
import { Header } from '~/views/components/Header'
import { Indicator } from '~/views/components/Indicator'
import { Section } from '~/views/components/Section'
import { Spacer } from '~/views/components/Spacer'
import { Typography } from '~/views/components/Typography'
import { Transition } from '~/views/components/Transition'

import { FeaturedExcerpt } from '~/views/templates/FeaturedExcerpt'

export const AuthorPage: Component.Fn = () => {
    const route = useRoute()
    const author = useAuthor(route.parameters.authorId)
    const articles = useArticles()

    if (author.error) return [
        <Typography color='red'>
            Error: { author.error.message }
        </Typography>
    ]

    if (author.pending || articles.pending) return [
        <Flexbox align={ Flexbox.Alignment.Center } grow justify={ Flexbox.Alignment.Center }>
            <Indicator/>
        </Flexbox>
    ]

    return [
        <Transition>
            <Header style={ { zIndex: '0' } } variant={ Header.Variant.Short }/>
            <Container id='contents' style={ { marginTop: '-64px', zIndex: '1' } } padding={ 24 } width='100%'>
                <Spacer height={ 64 }/>
                <Grid columns={ 4 } gap={ 80 }>
                    <Grid.Tile span={ 1 }/>
                    <Grid.Tile span={ 2 }>
                        <Flexbox direction={ Flexbox.Direction.Column } grow justify={ Flexbox.Alignment.Center }>
                            <Flexbox align={ Flexbox.Alignment.Center } grow justify={ Flexbox.Alignment.Center }>
                                <Avatar size={ 128 } src={ author.data.avatar.url }/>
                                <Spacer width={ 16 }/>
                                <Flexbox direction={ Flexbox.Direction.Column } justify={ Flexbox.Alignment.Center }>
                                    <Typography id='author_title' case={ Typography.Case.Upper } size={ 0.8 }>
                                        Author
                                    </Typography>
                                    <Spacer height={ 4 }/>
                                    <Typography size={ 3 } variant={ Typography.Variant.Heading }>
                                        { author.data.name }
                                    </Typography>
                                </Flexbox>
                            </Flexbox>
                            <Spacer height={ 40 }/>
                            <Card style={ { flexGrow: '0', height: 'auto' } }>
                                <Container padding={ 64 }>
                                    <Typography lineHeight={ 1.75 } size={ 1.33 } style={ { marginBottom: '0' } } variant={ Typography.Variant.Paragraph }>
                                        { author.data.biography }
                                    </Typography>
                                </Container>
                            </Card>
                        </Flexbox>
                    </Grid.Tile>
                </Grid>
                <Spacer height={ 40 }/>
                <Section heading='Author_Content'>
                    <Grid columns={ 3 } gap={ 40 }>
                        <Fragment>
                            { articles.data.map(article => (
                                <FeaturedExcerpt article={ article }/>
                            ))}
                        </Fragment>
                    </Grid>
                </Section>
            </Container>
            <Footer/>
        </Transition>
    ]
}

IndexPage.tsx

import { Component, Fragment, createElement } from 'cortex'
import { createStyleSheet } from 'cortex-css'
import { Router, useRouter } from 'cortex-router'

import { useArticles } from '~/hooks/useArticles'
import { useVideos } from '~/hooks/useVideos'

import { Article } from '~/models/Article'
import { Video } from '~/models/Video'

import { mapTitleToSlug } from '~/utilities/mapTitleToSlug'

import { Container } from '~/views/components/Container'
import { Flexbox } from '~/views/components/Flexbox'
import { Footer } from '~/views/components/Footer'
import { Grid } from '~/views/components/Grid'
import { Header } from '~/views/components/Header'
import { Indicator } from '~/views/components/Indicator'
import { Section } from '~/views/components/Section'
import { Spacer } from '~/views/components/Spacer'
import { Typography } from '~/views/components/Typography'

import { FeaturedArticle } from '~/views/templates/FeaturedArticle'
import { FeaturedExcerpt } from '~/views/templates/FeaturedExcerpt'
import { FeaturedVideo } from '~/views/templates/FeaturedVideo'

const GAP_PX = 40
const LATEST_FINDINGS = 'Latest_Findings'
const LATEST_FINDINGS_GLYPH = 'base-station-fill'
const ON_DEMAND = 'On_Demand'
const ON_DEMAND_GLYPH = 'play-circle-fill'
const ON_DEMAND_ID = 'on_demand'

export class IndexPage extends Component {

    protected routeToArticlePage(router: Router.Context, article: Article) {
        router.navigate(`/news/${ article.id }/${ mapTitleToSlug(article.title) }`)
    }

    protected routeToVideoPage(router: Router.Context, video: Video) {
        router.navigate(`/videos/${ video.id }/${ mapTitleToSlug(video.title) }`)
    }

    protected render() {
        const router = useRouter()
        const articles = useArticles(10, 0)
        const videos = useVideos(10, 0)
        
        if ([ articles, videos ].some(req => req.pending)) return [
            <Flexbox align={ Flexbox.Alignment.Center } grow justify={ Flexbox.Alignment.Center }>
                <Indicator/>
            </Flexbox>
        ]

        if ([ articles, videos ].some(req => req.error)) return [
            <Flexbox align={ Flexbox.Alignment.Center } grow justify={ Flexbox.Alignment.Center }>
                <Typography variant={ Typography.Variant.Heading }>
                    { [ articles, videos ].filter(req => req.error).map(req => req.error.message) }
                </Typography>
            </Flexbox>
        ]

        return [
            <Container padding={ 24 }>
                <Section glyph={ LATEST_FINDINGS_GLYPH } heading={ LATEST_FINDINGS }>
                    <Grid columns={ 3 } gap={ GAP_PX }>
                        <Fragment>
                            { articles.data.slice(0, 3).map(article => (
                                <FeaturedArticle 
                                    article={ article } 
                                    onclick={ () => this.routeToArticlePage(router, article) }/>
                            )) }
                        </Fragment>
                    </Grid>
                    <Spacer height={ GAP_PX }/>
                    <Grid columns={ 4 } gap={ GAP_PX }>
                    <Fragment>
                        { articles.data.slice(0, 4).map(article => (
                            <FeaturedArticle 
                                article={ article } 
                                onclick={ () => this.routeToArticlePage(router, article) }
                            />
                        )) }
                    </Fragment>
                    </Grid>
                    <Spacer height={ GAP_PX }/>
                    <Grid columns={ 2 } gap={ GAP_PX }>
                        { articles.data.slice(0, 2).map(article => (
                            <FeaturedArticle 
                                article={ article } 
                                listing 
                                onclick={ () => this.routeToArticlePage(router, article) }/>
                        )) }
                    </Grid> 
                    <Spacer height={ GAP_PX }/>
                    <Grid columns={ 3 } gap={ GAP_PX }>
                        <Container>
                            <Grid columns={ 1 } gap={ GAP_PX }>
                                <Fragment>
                                    { articles.data.slice(0, 3).map(article => (
                                        <FeaturedExcerpt article={ article }/>
                                    )) }
                                </Fragment>
                            </Grid>
                        </Container>
                        <Section glyph={ ON_DEMAND_GLYPH } heading={ ON_DEMAND } id={ ON_DEMAND_ID }>
                            <Grid columns={ 2 } gap={ GAP_PX }>
                                <Fragment>
                                    { videos.data.slice(0, 4).map(video => (
                                        <FeaturedVideo 
                                            landscape 
                                            onclick={ () => this.routeToVideoPage(router, video) } 
                                            video={ video }/>
                                    )) }
                                </Fragment>
                            </Grid>
                        </Section>
                    </Grid>
                </Section>
            </Container>
        ]
    }

    protected theme() {
        return createStyleSheet(css => {

            css.selectHost(css => {
                css.write(`
                    display: contents;
                `)
            })

            css.selectId(ON_DEMAND_ID, css => {
                css.write(`
                    grid-column-end: span 2;
                    grid-column-start: 2;
                    grid-row-end: span;
                `)
            })
        })
    }
}