feat: segregate community list alphabetically (#80)

* feat: segregate community list alphabetically --------- Co-authored-by: Alexander Harding <2166114+aeharding@users.noreply.github.com>
aeharding · Jun 30, 2023 · ce8ad65 · ce8ad65
1 parent 111bf65
commit ce8ad65
Showing 1 changed file with 43 additions and 17 deletions.
diff --git 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>