From ce8ad65a33841d07ccd83788bd9617ce44133dee Mon Sep 17 00:00:00 2001
From: httpjamesm <51917118+httpjamesm@users.noreply.github.com>
Date: Thu, 29 Jun 2023 21:13:54 -0400
Subject: [PATCH] feat: segregate community list alphabetically (#80)

* feat: segregate community list alphabetically

---------

Co-authored-by: Alexander Harding <2166114+aeharding@users.noreply.github.com>
---
 src/pages/posts/CommunitiesPage.tsx | 60 +++++++++++++++++++++--------
 1 file changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/pages/posts/CommunitiesPage.tsx b/src/pages/posts/CommunitiesPage.tsx
index a62557fd23..c38a6f1216 100644
--- a/src/pages/posts/CommunitiesPage.tsx
+++ b/src/pages/posts/CommunitiesPage.tsx
@@ -18,11 +18,12 @@ import { home, library, people } from "ionicons/icons";
 import styled from "@emotion/styled";
 import { pullAllBy, sortBy, uniqBy } from "lodash";
 import { notEmpty } from "../../helpers/array";
-import { useMemo, useRef } from "react";
+import { Fragment, useMemo, useRef } from "react";
 import { useSetActivePage } from "../../features/auth/AppContext";
 import { useBuildGeneralBrowseLink } from "../../helpers/routes";
 import ItemIcon from "../../features/labels/img/ItemIcon";
 import { jwtSelector } from "../../features/auth/authSlice";
+import { Community } from "lemmy-js-client";
 
 const SubIcon = styled(IonIcon)<{ color: string }>`
   border-radius: 50%;
@@ -86,6 +87,26 @@ export default function CommunitiesPage() {
     return communities;
   }, [follows, communityByHandle]);
 
+  const communitiesGroupedByLetter = useMemo(() => {
+    const alphabeticallySortedCommunities = sortBy(communities, (c) =>
+      c.name.toLowerCase()
+    );
+
+    return Object.entries(
+      alphabeticallySortedCommunities.reduce<Record<string, Community[]>>(
+        (acc, community) => {
+          const firstLetter = community.name[0].toUpperCase();
+          if (!acc[firstLetter]) {
+            acc[firstLetter] = [];
+          }
+          acc[firstLetter].push(community);
+          return acc;
+        },
+        {}
+      )
+    );
+  }, [communities]);
+
   return (
     <IonPage ref={pageRef}>
       <IonHeader>
@@ -125,22 +146,27 @@ export default function CommunitiesPage() {
             </IonItem>
           </IonItemGroup>
 
-          <IonItemGroup>
-            <IonItemDivider>
-              <IonLabel>Communities</IonLabel>
-            </IonItemDivider>
-          </IonItemGroup>
-
-          {sortBy(communities, "name")?.map((community) => (
-            <IonItem
-              key={community.id}
-              routerLink={buildGeneralBrowseLink(`/c/${getHandle(community)}`)}
-            >
-              <Content>
-                <ItemIcon item={community} size={28} />
-                {getHandle(community)}
-              </Content>
-            </IonItem>
+          {communitiesGroupedByLetter.map(([letter, communities]) => (
+            <Fragment key={letter}>
+              <IonItemGroup>
+                <IonItemDivider>
+                  <IonLabel>{letter}</IonLabel>
+                </IonItemDivider>
+              </IonItemGroup>
+              {communities.map((community) => (
+                <IonItem
+                  key={community.id}
+                  routerLink={buildGeneralBrowseLink(
+                    `/c/${getHandle(community)}`
+                  )}
+                >
+                  <Content>
+                    <ItemIcon item={community} size={28} />
+                    {getHandle(community)}
+                  </Content>
+                </IonItem>
+              ))}
+            </Fragment>
           ))}
         </IonList>
       </AppContent>