// look mah! No useEffect, isLoading, or isError!
export async function loader({ request }: DataFunctionArgs) {
	return json({ teamsInOrder: shuffle(teams) })
}

export default function NewAccount() {
	const data = useLoaderData<typeof loader>()

	return (
		// some UI stuff...

		<fieldset className="contents">
			<legend className="sr-only">Team</legend>
			{data.teamsInOrder.map(teamOption => (
				<TeamOption
					key={teamOption}
					team={teamOption}
					error={actionData?.errors.team}
					selected={formValues.team === teamOption}
				/>
			))}
		</fieldset>

		// more UI stuff
	)
}

// note filtering out the stuff we don't need and the declarative error handling

export async function loader({ params, request }: DataFunctionArgs) {
	// getSeasonListItems hits the simplecast API and filters out
	// all the extra stuff we don't need for this route
	const seasons = await getSeasonListItems({ request })
	const seasonNumber = Number(params.season)
	const season = seasons.find(s => s.seasonNumber === seasonNumber)
	if (!season) {
		throw new Response(`No season for ${params.season}`, { status: 404 })
	}

	return json(
		{ season },
		{
			headers: {
				'Cache-Control': 'public, max-age=600',
			},
		},
	)
}

export default function ChatsSeason() {
	const { season } = useLoaderData<typeof loader>() // <-- autocompleted
	return <stuff />
}

export function ErrorBoundary() {
	return (
		<GeneralErrorBoundary
			statusHandlers={{
				404: ({ params }) => (
					<Grid nested className="mt-3">
						<div className="col-span-full md:col-span-5">
							<H3>{`Season not found`}</H3>
							<Paragraph>{`Are you sure ${
								params.season ? `season ${params.season}` : 'this season'
							} exists?`}</Paragraph>
						</div>
						<div className="md:col-span-start-6 col-span-full md:col-span-5">
							<MissingSomething className="rounded-lg" aspectRatio="3:4" />
						</div>
					</Grid>
				),
			}}
		/>
	)
}

import type { LinksFunction } from 'remix'
import aboutStyles from '~/styles/routes/about.css'

export const links: LinksFunction = () => {
	return [{ rel: 'stylesheet', href: aboutStyles }]
}

export default function AboutScreen() {
	return <stuff />
}