Merge pull request #1425 from CodeForAfrica/ft/opportunity_card_list_payloadcms

feat: Add Opportunity Category and List CMS Blocks

Author: koechkevin

apps/trustlab/payload.config.ts

@@ -17,6 +17,7 @@ import {
   Reports,
   Playbooks,
   Toolkits,
+  Opportunities,
 } from "@/trustlab/payload/collections";
 import plugins from "@/trustlab/payload/plugins";
 import SiteSettings from "@/trustlab/payload/globals";
@@ -82,6 +83,7 @@ export default buildConfig({
     // Group: Settings
     Reports,
     Users,
+    Opportunities,
   ] as CollectionConfig[],
   cors,
   csrf,

apps/trustlab/public/images/cms/blocks/opportunity-category.png

@@ -67,7 +67,7 @@ const Filters = React.forwardRef(function Filters(
 
       // Auto-generate options for known types if not provided
       let resolvedOptions = options;
-      if (!resolvedOptions) {
+      if (!resolvedOptions?.length) {
         if (type === "year") {
           resolvedOptions = generateYearOptions();
         } else if (type === "month") {
@@ -175,7 +175,6 @@ const Filters = React.forwardRef(function Filters(
     return chips;
   }, [selectedValues, getChipLabel]);
 
-  console.log("Processed Filters:", processedFilters);
   return (
     <Box ref={ref} display="flex" flexDirection="column" gap={1} sx={sx}>
       {/* Row 1: Filter By Label */}

apps/trustlab/public/images/cms/blocks/opportunity-list.png

@@ -27,32 +27,71 @@ const OpportunityList = forwardRef(function OpportunityList(props, ref) {
     ...other
   } = props;
 
-  const [page, setPage] = useState(p?.page);
-  const [params, setParams] = useState({
-    type: itemsType,
-    limit: itemsPerPage,
-  });
-  const listRef = useRef(null);
   const router = useRouter();
   const { query } = router;
-  const { page: initialPage } = query;
+  const { page: initialPage, ...queryParams } = query;
 
-  useEffect(() => {
+  const [page, setPage] = useState(() => {
     if (initialPage) {
       const parsed = parseInt(initialPage, 10);
-      if (parsed !== page) {
+      if (!Number.isNaN(parsed)) {
+        return parsed;
+      }
+    }
+    return p?.page ?? 1;
+  });
+
+  const [params, setParams] = useState(() => ({
+    type: itemsType,
+    limit: itemsPerPage,
+    // Parse query params to restore filter state
+    ...Object.entries(queryParams).reduce((acc, [key, value]) => {
+      if (typeof value === "string" && value.includes(",")) {
+        acc[key] = value.split(",");
+      } else if (value) {
+        acc[key] = value;
+      }
+      return acc;
+    }, {}),
+  }));
+
+  const listRef = useRef(null);
+
+  // Sync page and params with URL query changes
+  useEffect(() => {
+    const { page: queryPage, ...currentQueryParams } = query;
+
+    // Sync page from URL
+    if (queryPage) {
+      const parsed = parseInt(queryPage, 10);
+      if (!Number.isNaN(parsed) && parsed !== page) {
         setPage(parsed);
       }
     }
+
+    // Sync params from URL
+    const newParams = {
+      type: itemsType,
+      limit: itemsPerPage,
+      ...Object.entries(currentQueryParams).reduce((acc, [key, value]) => {
+        if (typeof value === "string" && value.includes(",")) {
+          acc[key] = value.split(",");
+        } else if (value) {
+          acc[key] = value;
+        }
+        return acc;
+      }, {}),
+    };
+    setParams(newParams);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialPage]);
+  }, []);
 
   const { items = [], pagination = p } = useOpportunities(
     page,
     params,
     initialItems,
     p?.count,
-    true,
+    !hasFilters && !hasPagination,
     apiEndpoint,
   );
 
@@ -81,23 +120,23 @@ const OpportunityList = forwardRef(function OpportunityList(props, ref) {
   function handleApplyFilters(filterParams) {
     setParams((prev) => ({ ...prev, ...filterParams }));
     setPage(1);
-    const urlParams = new URLSearchParams(router.query);
+    const searchParams = new URLSearchParams(window.location.search);
     Object.entries(filterParams).forEach(([key, value]) => {
-      if (Array.isArray(value)) {
-        urlParams.set(key, value.join(","));
+      if (Array.isArray(value) && value.length > 0) {
+        searchParams.set(key, value.join(","));
+      } else if (value) {
+        searchParams.set(key, value);
       } else {
-        urlParams.set(key, value);
+        searchParams.delete(key);
       }
     });
-    urlParams.delete("page");
-    router.push(
-      {
-        pathname: router.pathname,
-        query: urlParams.toString(),
-      },
-      undefined,
-      { shallow: true, scroll: false },
-    );
+    searchParams.delete("page");
+    const queryString = searchParams.toString();
+    let urlPath = window.location.pathname;
+    if (queryString) {
+      urlPath = `${urlPath}?${queryString}`;
+    }
+    router.push(urlPath, undefined, { shallow: true, scroll: false });
   }
 
   return (

apps/trustlab/public/images/cms/blocks/testimonial.png

@@ -5,15 +5,6 @@ import OpportunityList from "./OpportunityList";
 
 import theme from "@/trustlab/theme";
 
-// Mock next/router
-jest.mock("next/router", () => ({
-  useRouter: () => ({
-    push: jest.fn(),
-    query: {},
-    pathname: "/opportunities",
-  }),
-}));
-
 const render = createRender({ theme });
 
 const mockItems = [
@@ -24,8 +15,8 @@ const mockItems = [
       root: {
         children: [
           {
-            children: [{ text: "Description for item 1" }],
-            type: "paragraph",
+            text: "Description for item 1",
+            type: "text",
           },
         ],
       },
@@ -48,8 +39,8 @@ const mockItems = [
       root: {
         children: [
           {
-            children: [{ text: "Description for item 2" }],
-            type: "paragraph",
+            text: "Description for item 2",
+            type: "text",
           },
         ],
       },

apps/trustlab/src/components/Filters/Filters.js

@@ -8,7 +8,7 @@ function useOpportunities(
   initialItems,
   initialCount,
   skip,
-  apiEndpoint = "/api/opportunities",
+  apiEndpoint = "/api/v1/opportunities",
 ) {
   const searchParams = new URLSearchParams();
   searchParams.set("page", page);
@@ -28,6 +28,9 @@ function useOpportunities(
   if (params?.search) {
     searchParams.set("search", params.search);
   }
+  if (params?.opportunity) {
+    searchParams.set("opportunity", params.opportunity);
+  }
 
   const { data } = useSWR(
     skip ? null : `${apiEndpoint}?${searchParams.toString()}`,

apps/trustlab/src/components/OpportunityList/OpportunityList.js

@@ -41,7 +41,6 @@ const Testimonial = forwardRef(function Testimonial(props, ref) {
               TypographyProps={{
                 variant: "p2",
                 sx: {
-                  color: "text.secondary",
                   lineHeight: 1.8,
                 },
               }}
@@ -57,13 +56,13 @@ const Testimonial = forwardRef(function Testimonial(props, ref) {
                       objectPosition: "left",
                       maxHeight: 60,
                       height: "30px",
-                      width: "100%",
+                      width: "95px",
                     },
                   }}
                   sx={{
                     display: "inline-flex",
                     height: 60,
-                    width: "100%",
+                    width: "95px",
                   }}
                 />
               </Box>

apps/trustlab/src/components/OpportunityList/OpportunityList.test.js

@@ -0,0 +1,25 @@
+async function getOpportunityCategoryBlock(block) {
+  const { categories, settings, ...rest } = block;
+
+  const resolvedCategories = await Promise.all(
+    (categories || []).map(async (category) => {
+      const image = category.image ?? null;
+      const link = category.link ?? null;
+
+      return {
+        ...category,
+        image,
+        link,
+      };
+    }),
+  );
+
+  return {
+    ...rest,
+    slug: "opportunity-category",
+    categories: resolvedCategories,
+    settings,
+  };
+}
+
+export default getOpportunityCategoryBlock;