sort published at

src/App.js

@@ -1,6 +1,6 @@
 import { DislikeFilled, LikeFilled, RightOutlined } from "@ant-design/icons";
 import "./App.css";
-import { Badge, Flex, Result, Skeleton } from "antd";
+import { Badge, Flex, Result, Skeleton, Space, Tag } from "antd";
 import { useEffect, useRef, useState } from "react";
 import { motion } from "framer-motion";
 
@@ -125,6 +125,38 @@ function VoteRequest(id, up) {
   }).catch(() => {});
 }
 
+// Create a function to compare date values
+function comparePublishedAt(a, b) {
+  // Check if PublishedAt for both a and b is empty
+  if (!a.PublishedAt && !b.PublishedAt) {
+    return 0; // If both are empty, they are considered equal
+  }
+  if (!a.PublishedAt) {
+    return 1; // If a is empty but b is not, a is considered greater
+  }
+  if (!b.PublishedAt) {
+    return -1; // If b is empty but a is not, b is considered greater
+  }
+
+  // Convert the published date values to Date objects
+  const dateA = new Date(a.PublishedAt.split(".").reverse().join("."));
+  const dateB = new Date(b.PublishedAt.split(".").reverse().join("."));
+
+  // Sort by the latest date
+  if (dateA > dateB) {
+    return -1;
+  }
+  if (dateA < dateB) {
+    return 1;
+  }
+  return 0;
+}
+
+function dateDiffInDays(a, b) {
+  const diffInMs = Math.abs(b - a);
+  return Math.ceil(diffInMs / (1000 * 60 * 60 * 24));
+}
+
 function App() {
   const { votes, vote, setVotes } = UseVoteLocalStorage();
   const votesRef = useRef(votes);
@@ -182,6 +214,8 @@ function App() {
     window.parent.postMessage(height, "*");
   }
 
+  const currentDate = new Date();
+
   return (
     <div className="app">
       <div className="container">
@@ -194,12 +228,28 @@ function App() {
               <Result status={404} title="Aktuell nichts neues :(" />
             ) : products.NewProducts.length > 0 ? (
               <>
-                {products.NewProducts.map(
+                {products.NewProducts.sort(comparePublishedAt).map(
                   (product, index) =>
                     (showMore.newProducts || index < 5) && (
                       <Card
                         key={index}
-                        name={product.Name}
+                        name={
+                          <Space>
+                            {product.Name}
+                            {dateDiffInDays(
+                              currentDate,
+                              new Date(
+                                product.PublishedAt.split(".")
+                                  .reverse()
+                                  .join(".")
+                              )
+                            ) < 3 && (
+                              <Tag style={{ fontSize: 14 }} color="#af9363">
+                                Neu
+                              </Tag>
+                            )}
+                          </Space>
+                        }
                         productVariant={product.Variant}
                         productCharacteristics={product.Characteristics}
                         rightComponent={