refactor(promises): improve promise components and types

- Add interfaceName to PromiseList block
- Update styling in Profile and DesktopMenu components
- Fix children rendering order in PostCard
- Comment out unused originalArticleUrl button
- Improve key usage and props handling in PromiseCard and related components
- Refactor Promises component with better typing and status handling
- Extract PromiseListBlock type and update related interfaces

Author: kelvinkipruto

src/app/(frontend)/[entitySlug]/promises/[promiseId]/page.tsx

@@ -369,7 +369,7 @@ export default async function PromiseDetailPage({
                   {descriptionText}
                 </Typography>
               ) : null}
-              {originalArticleUrl ? (
+              {/* {originalArticleUrl ? (
                 <Button
                   component="a"
                   href={originalArticleUrl}
@@ -384,7 +384,7 @@ export default async function PromiseDetailPage({
                 >
                   Read the full report
                 </Button>
-              ) : null}
+              ) : null} */}
             </Grid>
             <Grid size={{ xs: 12, lg: 4 }}>
               {statusDoc ? (

src/blocks/PromiseList.ts

@@ -3,6 +3,7 @@ import { Block } from "payload";
 const PromiseList: Block = {
   slug: "promise-list",
   imageURL: "/cms/promises-list.png",
+  interfaceName: "PromiseListBlock",
   labels: {
     singular: "Promise List",
     plural: "Promise Lists",

src/components/Hero/Profile/index.tsx

@@ -91,6 +91,7 @@ export const Profile = ({
             color: theme.palette.primary.main,
             textTransform: "uppercase",
             mb: theme.typography.pxToRem(6),
+            whiteSpace: "nowrap",
           })}
         >
           {profileTitle}

src/components/LatestPromises/LatestPromises.tsx

@@ -39,19 +39,21 @@ const LatestPromises: React.FC<Props> = forwardRef(function LatestPromises({
       <Grid container spacing={2}>
         {items.map((promise: P) => (
           <Grid
-            key={promise.title}
+            key={promise.id}
             size={{
               xs: 12,
               lg: 4,
             }}
           >
             <PromiseCard
-              {...promise}
               image={
                 typeof promise.image === "string" ? undefined : promise.image
               }
               title={promise.title ?? null}
               status={promise.status as PromiseStatus}
+              description={promise.description ?? null}
+              createdAt={promise.createdAt}
+              href={promise.url ?? undefined}
             />
           </Grid>
         ))}

src/components/Navigation/DesktopMenu.tsx

@@ -35,7 +35,6 @@ export function DesktopMenu({ menus, entitySlug }: DesktopMenuProps) {
               height: 48,
               border: 0,
               color: theme.palette.primary.main,
-              padding: "0.8rem  1.2rem",
               margin: "0.3rem",
               textTransform: "uppercase",
               fontFamily: theme.typography.fontFamily,

src/components/PostCard/PostCard.tsx

@@ -148,14 +148,14 @@ const PostCard: FC<Props> = function PostCard({
             sx={mediaSx}
           />
         ) : null}
-        {children}
         {description && (
           <CardContent sx={contentSx}>
             <Box display="flex" sx={descriptionContainerSx}>
               <Typography variant="body2">{description}</Typography>
             </Box>
           </CardContent>
         )}
+        {children}
       </CardActionArea>
     </Card>
   );

src/components/PromiseCard/PromiseCard.tsx

@@ -2,26 +2,31 @@ import React, { FC } from "react";
 
 import PostCard from "@/components/PostCard/PostCard";
 import Status from "@/components/PromiseStatus/PromiseStatus";
-import { PromiseStatus, Promise as P, Media } from "@/payload-types";
+import { PromiseStatus, Media } from "@/payload-types";
 
 interface Props {
   status: PromiseStatus;
   href?: string;
-  title: string | null;
+  title?: string | null;
   image?: Media | null;
+  description?: string | null;
+  createdAt?: string;
 }
+
 const PromiseCard: FC<Props> = function PromiseCard({
   status,
   href,
   title,
   image,
-  ...props
+  description,
+  createdAt,
 }) {
   return (
     <PostCard
-      {...props}
+      createdAt={createdAt}
+      description={description ?? undefined}
       image={image}
-      title={title}
+      title={title ?? null}
       href={href}
       imageSx={{
         border: `8px solid ${status.colors?.color}`,

src/components/Promises/Promises.tsx

@@ -8,6 +8,8 @@ import { slugify } from "@/utils/utils";
 import { Promise as PromiseItem, PromiseStatus } from "@/payload-types";
 import PromiseCard from "../PromiseCard";
 
+type PromiseWithHref = PromiseItem & { href?: string };
+
 interface SortItem {
   name: string;
   slug: string;
@@ -22,7 +24,7 @@ interface FilterSort {
   items: SortItem[];
 }
 interface PromisesProps {
-  items: PromiseItem[];
+  items: PromiseWithHref[];
   title?: string;
   withFilter?: boolean;
   projectMeta?: ProjectMeta;
@@ -115,7 +117,7 @@ function Promises({
 
   useEffect(() => {
     if (withFilter) {
-      const hasStatus = (item: PromiseItem) => {
+      const hasStatus = (item: PromiseWithHref) => {
         const promiseSlug =
           typeof item?.status === "object" &&
           item?.status !== null &&
@@ -125,7 +127,7 @@ function Promises({
         return selectedFilters.some((c) => c.slug === promiseSlug);
       };
 
-      let filteredItems: PromiseItem[] = [];
+      let filteredItems: PromiseWithHref[] = [];
       if (filterBy === "status") {
         filteredItems = itemsProp.filter(hasStatus);
       }
@@ -232,9 +234,9 @@ function Promises({
         </Grid>
       )}
       <Grid spacing={1} justifyContent="space-between" container>
-        {items.map((card: PromiseItem) => (
+        {items.map((card: PromiseWithHref) => (
           <Grid
-            key={card.title}
+            key={card.id}
             size={{ xs: 12, lg: 4 }}
             sx={{
               pb: {
@@ -244,10 +246,12 @@ function Promises({
             }}
           >
             <PromiseCard
-              {...card}
+              href={card.href}
               title={card.title ?? null}
               image={typeof card.image === "string" ? undefined : card.image}
+              description={card.description ?? null}
               status={card.status as PromiseStatus}
+              createdAt={card.createdAt}
             />
           </Grid>
         ))}

src/components/Promises/index.tsx

@@ -1,25 +1,15 @@
-// Create a component that renders a Promises Component
-
 import { getGlobalPayload } from "@/lib/payload";
 import Promises from "./Promises";
 import { slugify } from "@/utils/utils";
+import { PromiseListBlock } from "@/payload-types";
 
-interface Props {
-  title?: string;
-  filterBy?: string[];
-  sortBy?: string[];
-  filterByLabel?: string;
-  sortByLabel?: string;
+export type PromiseListProps = PromiseListBlock & {
   entitySlug?: string;
-}
-async function Index({
-  title,
-  filterBy,
-  sortBy,
-  filterByLabel,
-  sortByLabel,
-  entitySlug,
-}: Props) {
+};
+
+async function Index(props: PromiseListProps) {
+  const { title, filterBy, sortBy, filterByLabel, sortByLabel, entitySlug } =
+    props;
   const payload = await getGlobalPayload();
 
   const entityQuery = await payload.find({
@@ -61,22 +51,27 @@ async function Index({
       };
     }) ?? [];
 
-  const promiseStatuses = [
-    ...new Set(
-      promises.map((promise) => {
-        if (typeof promise?.status === "object" && promise?.status !== null) {
-          return {
-            slug: slugify(promise.status.label ?? ""),
-            name: promise.status.label ?? "",
-          };
-        }
-        return {
-          slug: slugify(promise.status ?? ""),
-          name: promise.status ?? "",
-        };
-      }),
-    ),
-  ];
+  const promiseStatusesMap = new Map<string, { slug: string; name: string }>();
+
+  promises.forEach((promise) => {
+    const statusLabel =
+      typeof promise?.status === "object" && promise?.status !== null
+        ? promise.status.label ?? ""
+        : (promise.status as string) ?? "";
+
+    const slug = slugify(statusLabel);
+
+    if (!slug || promiseStatusesMap.has(slug)) {
+      return;
+    }
+
+    promiseStatusesMap.set(slug, {
+      slug,
+      name: statusLabel,
+    });
+  });
+
+  const promiseStatuses = Array.from(promiseStatusesMap.values());
   const filterByOptions = {
     label: filterByLabel ?? "",
     items:
@@ -93,10 +88,9 @@ async function Index({
         slug: sort,
       })) ?? [],
   };
-  // Get all promises per entity
   return (
     <Promises
-      title={title}
+      title={title!}
       items={promises}
       withFilter={!!sortBy?.length}
       filterByConfig={filterByOptions}

src/payload-types.ts

@@ -436,16 +436,7 @@ export interface Page {
             blockType: 'partners';
           }
         | PartnerDetailsBlock
-        | {
-            title?: string | null;
-            filterByLabel?: string | null;
-            sortByLabel?: string | null;
-            filterBy?: ('status' | 'category')[] | null;
-            sortBy?: ('mostRecent' | 'deadline')[] | null;
-            id?: string | null;
-            blockName?: string | null;
-            blockType: 'promise-list';
-          }
+        | PromiseListBlock
       )[]
     | null;
   meta?: {
@@ -642,6 +633,20 @@ export interface PartnerDetailsBlock {
   blockName?: string | null;
   blockType: 'partner-details';
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "PromiseListBlock".
+ */
+export interface PromiseListBlock {
+  title?: string | null;
+  filterByLabel?: string | null;
+  sortByLabel?: string | null;
+  filterBy?: ('status' | 'category')[] | null;
+  sortBy?: ('mostRecent' | 'deadline')[] | null;
+  id?: string | null;
+  blockName?: string | null;
+  blockType: 'promise-list';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users".
@@ -1164,17 +1169,7 @@ export interface PagesSelect<T extends boolean = true> {
               blockName?: T;
             };
         'partner-details'?: T | PartnerDetailsBlockSelect<T>;
-        'promise-list'?:
-          | T
-          | {
-              title?: T;
-              filterByLabel?: T;
-              sortByLabel?: T;
-              filterBy?: T;
-              sortBy?: T;
-              id?: T;
-              blockName?: T;
-            };
+        'promise-list'?: T | PromiseListBlockSelect<T>;
       };
   meta?:
     | T
@@ -1283,6 +1278,19 @@ export interface PartnerDetailsBlockSelect<T extends boolean = true> {
   id?: T;
   blockName?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "PromiseListBlock_select".
+ */
+export interface PromiseListBlockSelect<T extends boolean = true> {
+  title?: T;
+  filterByLabel?: T;
+  sortByLabel?: T;
+  filterBy?: T;
+  sortBy?: T;
+  id?: T;
+  blockName?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users_select".