Order News and Presentations

src/components/news/list.tsx

@@ -1,20 +1,22 @@
 "use client";
 
+import { formatDate, sortDates } from "@/lib/format-date";
+
 import RichTextContent from "../rich-text-content";
 import { UserGroupIcon } from "@heroicons/react/20/solid";
-import { formatDate } from "@/lib/format-date";
 import useGetContentfulData from "@/hooks/use-get-contentful-data";
 
 export default function NewsList() {
   const data = useGetContentfulData("newsItem");
+  const sorted = data ? data.sort(sortDates("desc", "publishDate")) : [];
 
   return (
     <div className="">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl">
           <div className="space-y-16 border-t border-gray-200 pt-10 sm:pt-16">
-            {data &&
-              data.map(({ fields, sys }: { fields: any; sys: any }) => (
+            {sorted &&
+              sorted.map(({ fields, sys }: { fields: any; sys: any }) => (
                 <article
                   key={sys.id}
                   className="flex max-w-xl flex-col items-start justify-between animate-fade-in"

src/components/presentations/list.tsx

@@ -1,16 +1,18 @@
 "use client";
 
-import { formatDate } from "@/lib/format-date";
+import { formatDate, sortDates } from "@/lib/format-date";
+
 import useGetContentfulData from "@/hooks/use-get-contentful-data";
 
 export default function PresentationsList() {
   const data = useGetContentfulData("presentation");
-  console.log("data", data);
+
+  const sorted = data ? data.sort(sortDates("desc", "publishedDate")) : [];
 
   return (
     <ul role="list" className="list-none ml-0 divide-y divide-gray-100 ">
-      {data &&
-        data.map(({ fields, sys }: { fields: any; sys: any }) => (
+      {sorted &&
+        sorted.map(({ fields, sys }: { fields: any; sys: any }) => (
           <>
             <li
               key={sys.id}

src/hooks/use-get-contentful-data.tsx

@@ -16,7 +16,6 @@ export default function useGetContentfulData(contentType: string) {
         content_type: contentType,
       })
       .then((response) => {
-        console.log("response", response);
         setData(response.items);
       })
       .catch((error) => {

src/lib/format-date.ts

@@ -5,3 +5,21 @@ export function formatDate(date: string) {
     day: "numeric",
   });
 }
+
+/**
+ *
+ * @param data Contentful CMS data
+ * @param order
+ * @returns
+ */
+export function sortDates(order: string = "desc", field: string) {
+  return (a: any, b: any) => {
+    const dateA = new Date(a.fields[field]);
+    const dateB = new Date(b.fields[field]);
+    return dateA && dateB
+      ? order === "asc"
+        ? Number(dateA) - Number(dateB)
+        : Number(dateB) - Number(dateA)
+      : 0;
+  };
+}