feat: add release date to changelog

Author: saschb2b

lib/changelog.hook.ts

@@ -45,7 +45,13 @@ export function useChangelogs(config: UpdateHiveConfig): UpdateHiveHookResult {
         throw new Error(error.message);
       }
 
-      setData(await result.json());
+      const resultData: Changelog[] | undefined = await result.json();
+
+      if (resultData) {
+        setData(
+          resultData.sort((a, b) => Date.parse(b.releaseDate) - Date.parse(a.releaseDate)),
+        );
+      }
     } catch (error) {
       if (error instanceof Error) {
         setError(error.message);

lib/changelog.types.ts

@@ -53,7 +53,7 @@ export type Changelog = {
   product: string;
   variant: VariantType;
   version: string;
-  releaseDate: Date;
+  releaseDate: string;
   title?: string;
   description?: string;
   entries: ChangelogEntryInterface[];

lib/components/ChangelogList/ChangelogList.tsx

@@ -6,7 +6,6 @@ import {
   ChangeTypeMap,
   getTypeColor,
   groupChangelogsByComponents,
-  reorderChangelogs,
   ungroupedChangelogs,
 } from '../changelog.util.ts';
 import ComponentList from './_internal/ComponentList.tsx';
@@ -40,13 +39,11 @@ export const ChangelogList: React.FC<Props> = ({
         return undefined;
       }
 
-      const reorderedChangelogs = reorderChangelogs(data);
-
       if (groupBy === GroupBy.NONE) {
-        return ungroupedChangelogs(reorderedChangelogs);
+        return ungroupedChangelogs(data);
       }
 
-      return groupChangelogsByComponents(reorderedChangelogs);
+      return groupChangelogsByComponents(data);
     }, [data, groupBy]);
 
   return (

lib/components/ChangelogList/MinimalChangelogList.tsx

@@ -4,7 +4,6 @@ import {
   ChangelogWithComponents,
   ChangeTypeMap,
   getTypeColor,
-  reorderChangelogs,
   ungroupedChangelogs,
 } from '../changelog.util.ts';
 import { ChangeType } from '../../changelog.types.ts';
@@ -33,8 +32,7 @@ export const MinimalChangelogList: React.FC<Props> = ({
         return undefined;
       }
 
-      const reorderedChangelogs = reorderChangelogs(data);
-      return ungroupedChangelogs(reorderedChangelogs);
+      return ungroupedChangelogs(data);
     }, [data]);
 
   return (

lib/components/ChangelogList/_internal/ComponentList.tsx

@@ -28,6 +28,13 @@ const ComponentList: React.FC<Props> = ({
         <Card key={`changelogs-${index}`} variant={'soft'}>
           <Box sx={() => ({ mb: 1 })}>
             <Typography level="h1">Version {changelog.version}</Typography>
+            <Typography level="h4" color={'neutral'}>
+              {new Intl.DateTimeFormat('de-DE', {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+              }).format(new Date(changelog.releaseDate))}
+            </Typography>
             <Divider
               sx={{
                 mt: 1,

lib/components/changelog.util.ts

@@ -31,14 +31,8 @@ export const getTypeColor = (type: ChangeType): string => {
   }
 };
 
-export const reorderChangelogs = (changelogs: Changelog[]) => {
-  return changelogs.toReversed();
-};
-
-export interface ChangelogWithComponents {
-  version: string;
-  description?: string;
-
+export interface ChangelogWithComponents
+  extends Pick<Changelog, 'version' | 'description' | 'releaseDate'> {
   entries: ComponentEntries[];
 }
 
@@ -48,6 +42,7 @@ export const ungroupedChangelogs = (
   return changelogs.map((changelog) => ({
     version: changelog.version,
     description: changelog.description,
+    releaseDate: changelog.releaseDate,
     entries: [{ component: '', changelogs: changelog.entries }],
   }));
 };
@@ -61,6 +56,7 @@ export const groupChangelogsByComponents = (
     mapped.push({
       version: changelog.version,
       description: changelog.description,
+      releaseDate: changelog.releaseDate,
       entries: groupChangelogByComponents(changelog),
     });
   });