angrybeanie-front-end/pages/podcasts/archived.js

import "../../components/main.js"
import Layout from "../../components/main.js"
import Link from 'next/link'
import getConfig from 'next/config'
import Image from "next/image"

export async function getServerSideProps(context) {
    const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
    const secres = await fetch(serverRuntimeConfig.base_path + `/api/sections`)
    const secdata = await secres.json()

    const podcastres = await fetch(serverRuntimeConfig.base_path + `/api/podcasts/bystatus/0`)
    const podcastdata = await podcastres.json()

    const pagedata = {'title': 'Angry Beanie - Archived Podcast Projects'}

    return {
        props: { sections : secdata, podcastdata, pagedata }, // will be passed to the page component as props
    }
}

const PodcastArchived = ({sections, podcastdata, pagedata}) => (
    <Layout sections={sections} pagedata={pagedata}>
        <h1>Archived Podcasts</h1>
        {podcastdata.shows.map((podcast) => (
            <h1><Image
            src="https://www.angrybeanie.com/uploads/media/default/0001/01/thumb_185_default_small.png"
            height=""
            width=""
            ></Image><Link href={"/podcasts/shows/" + podcast.slug}>{podcast.title}</Link></h1>
        ))}

    </Layout>
)

export default PodcastArchived