From 9ff67af9f2c394222d2155c3307cd76eef6cee7f Mon Sep 17 00:00:00 2001
From: XlebyllleK <96723939+XlebyllleK@users.noreply.github.com>
Date: Sat, 11 Jan 2025 23:08:04 +0200
Subject: [PATCH 1/3] Sort packages alphabetically

---
 src/components/PackageList.tsx | 46 ++++++++++++++++++++--------------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/src/components/PackageList.tsx b/src/components/PackageList.tsx
index 4eabb04..15f64d8 100644
--- a/src/components/PackageList.tsx
+++ b/src/components/PackageList.tsx
@@ -2,28 +2,36 @@ import {
     JSX
 } from 'react';
 
-import { Package } from '../types';
-import { PackageCard } from './PackageCard';
+import {
+    Package
+} from '../types';
+
+import {
+    PackageCard
+} from './PackageCard';
 
 interface PackageListProps {
-  packages: Package[];
-  loading: boolean;
+    packages: Package[];
+    loading: boolean;
 }
 
-export function PackageList({ packages, loading }: PackageListProps): JSX.Element {
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center h-64">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
-      </div>
+export function PackageList({
+    packages,
+    loading
+}: PackageListProps): JSX.Element {
+    if (loading) return (
+        <div className="flex items-center justify-center h-64">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500"></div>
+        </div>
     );
-  }
 
-  return (
-    <div className="grid gap-4">
-      {packages.map((pkg) => (
-        <PackageCard key={pkg.name} package={pkg} />
-      ))}
-    </div>
-  );
-}
\ No newline at end of file
+    const sortedPackages = [...packages].sort((a, b) => a.name.localeCompare(b.name));
+
+    return (
+        <div className="grid gap-4">
+            {sortedPackages.map((pkg) => (
+                <PackageCard key={pkg.name} package={pkg} />
+            ))}
+        </div>
+    );
+}

From 3f2a66057a4b2c1691c2d9ff56134aa4758a3dd2 Mon Sep 17 00:00:00 2001
From: XlebyllleK <96723939+XlebyllleK@users.noreply.github.com>
Date: Sat, 11 Jan 2025 23:15:54 +0200
Subject: [PATCH 2/3] feat: Optimize package sorting with useMemo

---
 src/components/PackageList.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/PackageList.tsx b/src/components/PackageList.tsx
index 15f64d8..3d84dd6 100644
--- a/src/components/PackageList.tsx
+++ b/src/components/PackageList.tsx
@@ -1,5 +1,6 @@
 import {
-    JSX
+    JSX,
+    useMemo
 } from 'react';
 
 import {
@@ -25,7 +26,10 @@ export function PackageList({
         </div>
     );
 
-    const sortedPackages = [...packages].sort((a, b) => a.name.localeCompare(b.name));
+    const sortedPackages = useMemo(
+        () => [...packages].sort((a, b) => a.name.localeCompare(b.name)),
+        [packages]
+    );
 
     return (
         <div className="grid gap-4">

From 176bd3ef9d977afca2af0fa5bae942f25fa6b5c9 Mon Sep 17 00:00:00 2001
From: XlebyllleK <96723939+XlebyllleK@users.noreply.github.com>
Date: Sat, 11 Jan 2025 23:17:11 +0200
Subject: [PATCH 3/3] Update PackageList.tsx

---
 src/components/PackageList.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/PackageList.tsx b/src/components/PackageList.tsx
index 3d84dd6..a3177e2 100644
--- a/src/components/PackageList.tsx
+++ b/src/components/PackageList.tsx
@@ -27,8 +27,9 @@ export function PackageList({
     );
 
     const sortedPackages = useMemo(
-        () => [...packages].sort((a, b) => a.name.localeCompare(b.name)),
-        [packages]
+        () => [...packages].sort(
+            (a, b) => a.name.localeCompare(b.name)
+        ), [packages]
     );
 
     return (