結果を目標の作成順にしてまとめて表示するように変更

src/Components/Progress/Progress.tsx

@@ -20,19 +20,33 @@ interface ProgressProps {
 }
 
 export default function Progress({
-  successResults,
-  failedResults,
-  pendingResults,
+  successResults = [],
+  failedResults = [],
+  pendingResults = [],
 }: ProgressProps) {
   console.log("successResults:", successResults);
   console.log("failedResults:", failedResults);
   console.log("pendingResults:", pendingResults);
 
+  const allResults = [
+    ...successResults.map((result) => ({ ...result, type: "success" })),
+    ...failedResults.map((result) => ({ ...result, type: "failed" })),
+    ...pendingResults.map((result) => ({ ...result, type: "pending" })),
+  ];
+
+  allResults.sort(
+    (a, b) => new Date(b.deadline).getTime() - new Date(a.deadline).getTime()
+  );
+
   return (
     <>
-      {successResults && successResults.map((result) => successStep(result))}
-      {failedResults && failedResults.map((result) => failedStep(result))}
-      {pendingResults && pendingResults.map((result) => pendingStep(result))}
+      {allResults.map((result) => {
+        if (result.type === "success")
+          return successStep(result as SuccessResult);
+        if (result.type === "failed") return failedStep(result as GoalWithId);
+        if (result.type === "pending") return pendingStep(result as GoalWithId);
+        return null;
+      })}
     </>
   );
 }