refactor(media): remove payload param from resolveMedia and use global payload

refactor(homepage): simplify CommonHomePage and TenantList components
- Remove unused imports and simplify component logic
- Move tenant selector settings to global payload

feat(homepage): add entity selector settings and empty state labels
- Add emptyListLabel for tenant selector
- Add emptyTitle and EmptySubtitle for entity selector

chore: remove LocalhostWarning component and related checks

Author: kelvinkipruto

src/app/(frontend)/[...slugs]/page.tsx

@@ -3,7 +3,6 @@ import React, { Suspense } from "react";
 import { queryPageBySlug } from "@/lib/payload";
 import { notFound } from "next/navigation";
 import { getDomain } from "@/lib/domain";
-import { LocalhostWarning } from "@/components/LocalhostWarning";
 import { CommonHomePage } from "@/components/CommonHomePage";
 import { BlockRenderer } from "@/components/BlockRenderer";
 import Navigation from "@/components/Navigation";
@@ -22,11 +21,7 @@ type Args = {
 };
 
 export default async function Page(params: Args) {
-  const { isLocalhost, subdomain } = await getDomain();
-
-  if (isLocalhost) {
-    return <LocalhostWarning />;
-  }
+  const { subdomain } = await getDomain();
 
   const tenant = await getTenantBySubDomain(subdomain);
 
@@ -44,13 +39,13 @@ export default async function Page(params: Args) {
   const politicalEntities = await getPoliticalEntitiesByTenant(tenant);
 
   const politicalEntity = politicalEntities.find(
-    (entity) => entity.slug === maybePoliticalEntitySlug,
+    (entity) => entity.slug === maybePoliticalEntitySlug
   );
 
   if (!politicalEntity) {
     const fallbackPageSlugs = slugs.length > 0 ? slugs : ["index"];
     const extractionCounts = await getExtractionCountsForEntities(
-      politicalEntities.map((entity) => entity.id),
+      politicalEntities.map((entity) => entity.id)
     );
 
     return (

src/components/CommonHomePage.tsx

@@ -1,38 +1,11 @@
-import { TenantList, getTenantLinks } from "./TenantList";
-import { getGlobalPayload } from "@/lib/payload";
-import type { HomePage as HomePageSettings } from "@/payload-types";
-import { Box, Card, CardContent, Container, Typography } from "@mui/material";
+import { TenantList } from "./TenantList";
+import { Box, Container } from "@mui/material";
 
 export const CommonHomePage = async () => {
-  const payload = await getGlobalPayload();
-
-  const settings = await payload.findGlobal({
-    slug: "home-page",
-  });
-
-  const tenantLinks = await getTenantLinks();
-
   return (
     <Box component="main" sx={{ bgcolor: "background.default" }}>
       <Container maxWidth="lg" sx={{ py: { xs: 6, md: 10 } }}>
-        {tenantLinks.length === 0 ? (
-          <Card variant="outlined">
-            <CardContent>
-              <Typography variant="h6" sx={{ fontWeight: 600 }}>
-                No tenants available yet
-              </Typography>
-              <Typography variant="body2">
-                Once tenants are published they will appear here automatically.
-              </Typography>
-            </CardContent>
-          </Card>
-        ) : (
-          <TenantList
-            items={tenantLinks}
-            title={settings.tenantSelector.title}
-            subtitle={settings.tenantSelector.subtitle}
-          />
-        )}
+        <TenantList />
       </Container>
     </Box>
   );

src/components/Hero/index.tsx

@@ -263,11 +263,11 @@ export const Hero = async ({ entitySlug, ...block }: HeroProps) => {
 
   const groups = buildChartGroups(block.chartGroups, statusSummaries);
 
-  const summaries: HeroStatusSummary[] = Array.from(statusSummaries.values()).map(
-    (summary) => ({ ...summary })
-  );
+  const summaries: HeroStatusSummary[] = Array.from(
+    statusSummaries.values()
+  ).map((summary) => ({ ...summary }));
 
-  const entityImage = await resolveMedia(payload, entity.image);
+  const entityImage = await resolveMedia(entity.image);
 
   const taglineText = block.tagline?.trim();
   const headline = {
@@ -283,7 +283,8 @@ export const Hero = async ({ entitySlug, ...block }: HeroProps) => {
 
   const copyPromiseLabel = block.promiseLabel?.trim() || "promises tracked";
   const copyTrailText = block.trailText?.trim() || "tracked on PromiseTracker.";
-  const statusListTitle = block.statusListTitle?.trim() || "Promise status definitions";
+  const statusListTitle =
+    block.statusListTitle?.trim() || "Promise status definitions";
   const updatedAtLabel = block.updatedAtLabel?.trim() || "Last updated";
 
   const resolvedData: HeroResolvedData = {

src/components/LocalhostWarning.tsx

@@ -14,7 +14,9 @@ import {
   Stack,
   Typography,
 } from "@mui/material";
-import type { Media, PoliticalEntity, Tenant } from "@/payload-types";
+import type { PoliticalEntity, Tenant } from "@/payload-types";
+import { getGlobalPayload } from "@/lib/payload";
+import { resolveMedia } from "@/lib/data/media";
 
 type PoliticalEntityListProps = {
   tenant: Tenant;
@@ -36,36 +38,28 @@ const buildHref = (entity: PoliticalEntity, pageSlugs: string[] = []) => {
   return `/${segments.join("/")}`;
 };
 
-const resolveImage = (image: PoliticalEntity["image"]): Media | null => {
-  if (!image || typeof image === "string") return null;
-  return image as Media;
-};
-
-export const PoliticalEntityList = ({
-  tenant,
+export const PoliticalEntityList = async ({
   politicalEntities,
   pageSlugs = [],
   extractionCounts = {},
 }: PoliticalEntityListProps) => {
   const hasEntities = politicalEntities.length > 0;
 
+  const payload = await getGlobalPayload();
+
+  const { entitySelector } = await payload.findGlobal({
+    slug: "home-page",
+  });
+
   return (
     <Container component="section" sx={{ py: { xs: 6, md: 8 } }}>
-      <Stack spacing={2} sx={{ mb: { xs: 4, md: 5 } }}>
-        <Typography variant="body1">
-          {hasEntities
-            ? "Choose a political entity to explore their campaign promises."
-            : "No political entities are available for this tenant yet."}
-        </Typography>
-      </Stack>
-
       {hasEntities ? (
         <Card variant="outlined" sx={{ borderRadius: 2 }}>
           <CardContent sx={{ p: { xs: 2, md: 3 } }}>
             <List disablePadding sx={{ "& > * + *": { mt: 1 } }}>
-              {politicalEntities.map((entity, index) => {
+              {politicalEntities.map(async (entity, index) => {
                 const href = buildHref(entity, pageSlugs);
-                const media = resolveImage(entity.image);
+                const media = await resolveMedia(entity.image);
                 const extractionCount = extractionCounts[entity.id] ?? 0;
                 const initials = entity.name
                   .split(" ")
@@ -154,10 +148,10 @@ export const PoliticalEntityList = ({
         <Card variant="outlined">
           <CardContent>
             <Typography variant="h6" sx={{ fontWeight: 600 }}>
-              No political entities have been published yet
+              {entitySelector.emptyTitle}
             </Typography>
             <Typography variant="body2">
-              Check back soon for newly tracked leaders and their promises.
+              {entitySelector.EmptySubtitle}
             </Typography>
           </CardContent>
         </Card>

src/components/PoliticalEntityList.tsx

@@ -15,6 +15,7 @@ import {
   ListItemText,
   Typography,
 } from "@mui/material";
+import { getGlobalPayload } from "@/lib/payload";
 
 export type TenantLink = {
   id: string;
@@ -88,32 +89,37 @@ export const getTenantLinks = async (): Promise<TenantLink[]> => {
 };
 
 type TenantListProps = {
-  items?: TenantLink[];
   dense?: boolean;
-  title?: string;
-  subtitle?: string;
 };
 
-export const TenantList = async ({
-  items,
-  dense = false,
-  title = "Available Tenants",
-  subtitle = "Open a tenant site to explore its promises",
-}: TenantListProps) => {
-  const tenantLinks = items ?? (await getTenantLinks());
+export const TenantList = async ({ dense = false }: TenantListProps) => {
+  const tenantLinks = await getTenantLinks();
+  const payload = await getGlobalPayload();
+
+  const { tenantSelector } = await payload.findGlobal({
+    slug: "home-page",
+  });
 
   if (tenantLinks.length === 0) {
-    return null;
+    return (
+      <Card>
+        <CardContent sx={{ p: { xs: 2, md: 3 } }}>
+          <Typography variant="body1">
+            {tenantSelector.emptyListLabel}
+          </Typography>
+        </CardContent>
+      </Card>
+    );
   }
 
   return (
     <Card variant="outlined" sx={{ borderRadius: 2 }}>
       <CardContent sx={{ p: { xs: 2, md: 3 } }}>
         <Typography variant="h5" sx={{ fontWeight: 600 }}>
-          {title}
+          {tenantSelector.title}
         </Typography>
         <Typography variant="body2" sx={{ mb: 3 }}>
-          {subtitle}
+          {tenantSelector.subtitle}
         </Typography>
         <List disablePadding dense={dense}>
           {tenantLinks.map((tenant, index) => {
@@ -156,7 +162,7 @@ export const TenantList = async ({
                     href={tenant.url}
                     target="_blank"
                     rel="noopener noreferrer"
-                    label="Visit"
+                    label={tenantSelector.ctaLabel}
                     clickable
                     color="primary"
                     sx={{ ml: 2 }}

src/components/TenantList.tsx

@@ -13,6 +13,13 @@ export const HomePage: GlobalConfig = {
     },
   },
   fields: [
+    {
+      name: "title",
+      type: "text",
+      admin: {
+        hidden: true,
+      },
+    },
     {
       type: "tabs",
       tabs: [
@@ -61,6 +68,52 @@ export const HomePage: GlobalConfig = {
                   },
                   defaultValue: "Open tenant site",
                 },
+                {
+                  name: "emptyListLabel",
+                  type: "text",
+                  required: true,
+                  label: {
+                    en: "Empty Tenant List Label",
+                    fr: "Étiquette de liste de locataires vide",
+                  },
+                  defaultValue: "No tenants created yet",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: {
+            en: "Entity Selector",
+            fr: "Sélecteur d'entité",
+          },
+          fields: [
+            {
+              name: "entitySelector",
+              type: "group",
+              fields: [
+                {
+                  name: "emptyTitle",
+                  type: "text",
+                  required: true,
+                  label: {
+                    en: "Empty List Title",
+                    fr: "Titre de la liste vide",
+                  },
+                  defaultValue:
+                    "No political entities have been published yet for this tenant",
+                },
+                {
+                  name: "EmptySubtitle",
+                  type: "textarea",
+                  required: true,
+                  label: {
+                    en: "Empty List Subtitle",
+                    fr: "Sous-titre de la liste vide",
+                  },
+                  defaultValue:
+                    "Check back soon for newly tracked leaders and their promises.",
+                },
               ],
             },
           ],

src/globals/HomePage.ts

@@ -1,20 +1,17 @@
 "use server";
 import type { Media } from "@/payload-types";
-import type { BasePayload } from "payload";
+import { getGlobalPayload } from "@/lib/payload";
 
 type ResolvedMedia = {
   url: string;
   alt: string;
 };
 
-/**
- * Resolve a media relationship into a usable URL + alt pair.
- * Returns null when the media record cannot be found or is missing a URL.
- */
 export const resolveMedia = async (
-  payload: BasePayload,
   media: string | Media | null | undefined
 ): Promise<ResolvedMedia | null> => {
+  const payload = await getGlobalPayload();
+
   if (!media) {
     return null;
   }