From e3c8854145ca38a1f6c45b3924fdf6c5bee6fd4a Mon Sep 17 00:00:00 2001
From: Adam Antal <adoantal@gmail.com>
Date: Tue, 9 Apr 2024 10:39:59 +0200
Subject: [PATCH] Show renewable loans grouped first, then non-renewable

---
 src/components/GroupModal/GroupModalLoansList.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/GroupModal/GroupModalLoansList.tsx b/src/components/GroupModal/GroupModalLoansList.tsx
index 01bc2ebacc..2167afc803 100644
--- a/src/components/GroupModal/GroupModalLoansList.tsx
+++ b/src/components/GroupModal/GroupModalLoansList.tsx
@@ -24,16 +24,20 @@ const GroupModalLoansList: FC<GroupModalLoansListProps> = ({
   selectMaterials,
   pageSize
 }) => {
+  // Show renewable materials first, then non-renewable
+  const groupedMaterials = materials.sort(
+    (a, b) => Number(!!b.isRenewable) - Number(!!a.isRenewable)
+  );
   const t = useText();
   const [displayedMaterials, setDisplayedMaterials] = useState<LoanType[]>([]);
   const { itemsShown, PagerComponent, firstInNewPage } = usePager({
-    hitcount: materials.length,
+    hitcount: groupedMaterials.length,
     pageSize
   });
 
   useEffect(() => {
-    setDisplayedMaterials([...materials].splice(0, itemsShown));
-  }, [itemsShown, materials]);
+    setDisplayedMaterials([...groupedMaterials].splice(0, itemsShown));
+  }, [itemsShown, groupedMaterials]);
 
   const onMaterialChecked = (item: ListType) => {
     const selectedMaterialsCopy = [...selectedMaterials];