From aac888e48e4fb5434d7a3b300632eba1153db850 Mon Sep 17 00:00:00 2001
From: ismail <ismail@bazookka.com>
Date: Sun, 24 Sep 2023 15:32:06 -0400
Subject: [PATCH 1/6] Add sort options to blocked users and blocked communities

---
 .../settings/blocks/BlockedCommunities.tsx    | 25 ++++++++++-
 src/features/settings/blocks/BlockedUsers.tsx | 44 ++++++++++++++++---
 2 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/src/features/settings/blocks/BlockedCommunities.tsx b/src/features/settings/blocks/BlockedCommunities.tsx
index 51c7f5a057..85e5ecf178 100644
--- a/src/features/settings/blocks/BlockedCommunities.tsx
+++ b/src/features/settings/blocks/BlockedCommunities.tsx
@@ -5,6 +5,8 @@ import {
   IonLabel,
   IonList,
   IonLoading,
+  IonSegment,
+  IonSegmentButton,
 } from "@ionic/react";
 import { InsetIonItem } from "../../../pages/profile/ProfileFeedItemsPage";
 import { useAppDispatch, useAppSelector } from "../../../store";
@@ -17,10 +19,15 @@ import { ListHeader } from "../shared/formatting";
 export default function BlockedCommunities() {
   const dispatch = useAppDispatch();
   const [loading, setLoading] = useState(false);
+  const [sortOption, setSortOption] = useState<'default' | 'alphabetical'>('default');
   const communities = useAppSelector(
     (state) => state.auth.site?.my_user?.community_blocks
   );
 
+  const sortedCommunities = sortOption === 'alphabetical'
+    ? [...(communities || [])].sort((a, b) => a.community.name.localeCompare(b.community.name))
+    : communities || [];
+
   async function remove(community: CommunityBlockView) {
     setLoading(true);
 
@@ -36,9 +43,23 @@ export default function BlockedCommunities() {
       <ListHeader>
         <IonLabel>Blocked Communities</IonLabel>
       </ListHeader>
+      {/* Sorting Options */}
       <IonList inset>
-        {communities?.length ? (
-          communities.map((community) => (
+        <IonSegment
+          value={sortOption}
+          onIonChange={e => {
+            setSortOption(e.detail.value as 'default' | 'alphabetical');
+          }}
+        >
+          <IonSegmentButton value="default">
+            <IonLabel>Most Recent</IonLabel>
+          </IonSegmentButton>
+          <IonSegmentButton value="alphabetical">
+            <IonLabel>Alphabetical</IonLabel>
+          </IonSegmentButton>
+        </IonSegment>
+        {sortedCommunities?.length ? (
+          sortedCommunities.map((community) => (
             <IonItemSliding key={community.community.id}>
               <IonItemOptions side="end" onIonSwipe={() => remove(community)}>
                 <IonItemOption
diff --git a/src/features/settings/blocks/BlockedUsers.tsx b/src/features/settings/blocks/BlockedUsers.tsx
index d6a54c7ab1..1d8a38902a 100644
--- a/src/features/settings/blocks/BlockedUsers.tsx
+++ b/src/features/settings/blocks/BlockedUsers.tsx
@@ -5,22 +5,33 @@ import {
   IonLabel,
   IonList,
   IonLoading,
+  IonSegment,
+  IonSegmentButton,
 } from "@ionic/react";
 import { InsetIonItem } from "../../../pages/profile/ProfileFeedItemsPage";
 import { useAppDispatch, useAppSelector } from "../../../store";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { getHandle } from "../../../helpers/lemmy";
 import { PersonBlockView } from "lemmy-js-client";
 import { blockUser } from "../../user/userSlice";
 import { ListHeader } from "../shared/formatting";
+import TabsWithoutRouting from "./BlockedSortOption";
 
 export default function BlockedUsers() {
   const dispatch = useAppDispatch();
   const [loading, setLoading] = useState(false);
+  const [sortOption, setSortOption] = useState<'default' | 'alphabetical'>('default');
+
+
   const users = useAppSelector(
     (state) => state.auth.site?.my_user?.person_blocks
   );
 
+  const sortedUsers = sortOption === 'alphabetical'
+    ? [...(users || [])].sort((a, b) => a.target.name.localeCompare(b.target.name))
+    : users || [];
+
+
   async function remove(user: PersonBlockView) {
     setLoading(true);
 
@@ -31,14 +42,36 @@ export default function BlockedUsers() {
     }
   }
 
+  useEffect(() => {
+    console.log("Current sort option:", sortOption);
+    // You can also place the sorting logic here if needed
+  }, [sortOption]);
+
   return (
     <>
-      <ListHeader>
+      <ListHeader style={{ marginBottom: '20px' }} className="ion-margin-bottom">
         <IonLabel>Blocked Users</IonLabel>
       </ListHeader>
-      <IonList inset>
-        {users?.length ? (
-          users.map((user) => (
+
+      {/* Sorting Options */}
+      <IonSegment
+        value={sortOption}
+        onIonChange={e => {
+          setSortOption(e.detail.value as 'default' | 'alphabetical');
+          console.log("Sort option changed to:", e.detail.value);
+        }}
+      >
+        <IonSegmentButton value="default">
+          <IonLabel>Most Recent</IonLabel>
+        </IonSegmentButton>
+        <IonSegmentButton value="alphabetical">
+          <IonLabel>Alphabetical</IonLabel>
+        </IonSegmentButton>
+      </IonSegment>
+
+      <IonList inset key={sortOption}>
+        {sortedUsers?.length ? (
+          sortedUsers.map((user) => (
             <IonItemSliding key={user.target.id}>
               <IonItemOptions side="end" onIonSwipe={() => remove(user)}>
                 <IonItemOption
@@ -60,6 +93,7 @@ export default function BlockedUsers() {
           </InsetIonItem>
         )}
       </IonList>
+
       <IonLoading isOpen={loading} />
     </>
   );

From 5cdb42d0d9715d51fc8883396cd6b81cf26e05a7 Mon Sep 17 00:00:00 2001
From: ismail <ismail@bazookka.com>
Date: Tue, 10 Oct 2023 13:12:45 -0400
Subject: [PATCH 2/6] Implement sorting blocked users and communities

---
 .../settings/blocks/BlockedCommunities.tsx    | 11 ++-----
 .../settings/blocks/BlockedEntitiesSorter.tsx | 32 ++++++++++++++++++
 src/features/settings/blocks/BlockedUsers.tsx | 33 +++++--------------
 src/features/settings/blocks/Types.tsx        |  3 ++
 4 files changed, 46 insertions(+), 33 deletions(-)
 create mode 100644 src/features/settings/blocks/BlockedEntitiesSorter.tsx
 create mode 100644 src/features/settings/blocks/Types.tsx

diff --git a/src/features/settings/blocks/BlockedCommunities.tsx b/src/features/settings/blocks/BlockedCommunities.tsx
index 85e5ecf178..cde11b0cab 100644
--- a/src/features/settings/blocks/BlockedCommunities.tsx
+++ b/src/features/settings/blocks/BlockedCommunities.tsx
@@ -6,7 +6,6 @@ import {
   IonList,
   IonLoading,
   IonSegment,
-  IonSegmentButton,
 } from "@ionic/react";
 import { InsetIonItem } from "../../../pages/profile/ProfileFeedItemsPage";
 import { useAppDispatch, useAppSelector } from "../../../store";
@@ -15,11 +14,13 @@ import { getHandle } from "../../../helpers/lemmy";
 import { CommunityBlockView } from "lemmy-js-client";
 import { blockCommunity } from "../../community/communitySlice";
 import { ListHeader } from "../shared/formatting";
+import BlockedEntititiesSorter from "./BlockedEntitiesSorter";
 
 export default function BlockedCommunities() {
   const dispatch = useAppDispatch();
   const [loading, setLoading] = useState(false);
   const [sortOption, setSortOption] = useState<'default' | 'alphabetical'>('default');
+
   const communities = useAppSelector(
     (state) => state.auth.site?.my_user?.community_blocks
   );
@@ -43,7 +44,6 @@ export default function BlockedCommunities() {
       <ListHeader>
         <IonLabel>Blocked Communities</IonLabel>
       </ListHeader>
-      {/* Sorting Options */}
       <IonList inset>
         <IonSegment
           value={sortOption}
@@ -51,12 +51,7 @@ export default function BlockedCommunities() {
             setSortOption(e.detail.value as 'default' | 'alphabetical');
           }}
         >
-          <IonSegmentButton value="default">
-            <IonLabel>Most Recent</IonLabel>
-          </IonSegmentButton>
-          <IonSegmentButton value="alphabetical">
-            <IonLabel>Alphabetical</IonLabel>
-          </IonSegmentButton>
+          <BlockedEntititiesSorter setSortOption={setSortOption} sortOption={sortOption} />
         </IonSegment>
         {sortedCommunities?.length ? (
           sortedCommunities.map((community) => (
diff --git a/src/features/settings/blocks/BlockedEntitiesSorter.tsx b/src/features/settings/blocks/BlockedEntitiesSorter.tsx
new file mode 100644
index 0000000000..b00a4433de
--- /dev/null
+++ b/src/features/settings/blocks/BlockedEntitiesSorter.tsx
@@ -0,0 +1,32 @@
+import { IonLabel, IonSegment, IonSegmentButton } from "@ionic/react";
+
+import { SortOptionType } from "./Types";
+
+
+type BlockedEntitiesSorterProps = {
+    sortOption: SortOptionType;
+    setSortOption: (value: SortOptionType) => void;
+};
+
+const BlockedEntititiesSorter: React.FC<BlockedEntitiesSorterProps> = ({ sortOption, setSortOption }) => {
+
+    return (
+        <IonSegment
+            value={sortOption}
+            onIonChange={e => {
+                setSortOption(e.detail.value as 'default' | 'alphabetical');
+                console.log("Sort option changed to:", e.detail.value);
+            }}
+        >
+            <IonSegmentButton value="default">
+                <IonLabel>Most Recent</IonLabel>
+            </IonSegmentButton>
+            <IonSegmentButton value="alphabetical">
+                <IonLabel>Alphabetical</IonLabel>
+            </IonSegmentButton>
+        </IonSegment>
+    )
+
+}
+
+export default BlockedEntititiesSorter
\ No newline at end of file
diff --git a/src/features/settings/blocks/BlockedUsers.tsx b/src/features/settings/blocks/BlockedUsers.tsx
index 1d8a38902a..659bdf6801 100644
--- a/src/features/settings/blocks/BlockedUsers.tsx
+++ b/src/features/settings/blocks/BlockedUsers.tsx
@@ -5,22 +5,24 @@ import {
   IonLabel,
   IonList,
   IonLoading,
-  IonSegment,
-  IonSegmentButton,
 } from "@ionic/react";
 import { InsetIonItem } from "../../../pages/profile/ProfileFeedItemsPage";
 import { useAppDispatch, useAppSelector } from "../../../store";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { getHandle } from "../../../helpers/lemmy";
 import { PersonBlockView } from "lemmy-js-client";
 import { blockUser } from "../../user/userSlice";
 import { ListHeader } from "../shared/formatting";
-import TabsWithoutRouting from "./BlockedSortOption";
+import BlockedEntititiesSorter from "./BlockedEntitiesSorter";
+import { SortOptionType } from "./Types";
 
 export default function BlockedUsers() {
   const dispatch = useAppDispatch();
   const [loading, setLoading] = useState(false);
-  const [sortOption, setSortOption] = useState<'default' | 'alphabetical'>('default');
+
+
+
+  const [sortOption, setSortOption] = useState<SortOptionType>('default');
 
 
   const users = useAppSelector(
@@ -42,32 +44,13 @@ export default function BlockedUsers() {
     }
   }
 
-  useEffect(() => {
-    console.log("Current sort option:", sortOption);
-    // You can also place the sorting logic here if needed
-  }, [sortOption]);
-
   return (
     <>
       <ListHeader style={{ marginBottom: '20px' }} className="ion-margin-bottom">
         <IonLabel>Blocked Users</IonLabel>
       </ListHeader>
 
-      {/* Sorting Options */}
-      <IonSegment
-        value={sortOption}
-        onIonChange={e => {
-          setSortOption(e.detail.value as 'default' | 'alphabetical');
-          console.log("Sort option changed to:", e.detail.value);
-        }}
-      >
-        <IonSegmentButton value="default">
-          <IonLabel>Most Recent</IonLabel>
-        </IonSegmentButton>
-        <IonSegmentButton value="alphabetical">
-          <IonLabel>Alphabetical</IonLabel>
-        </IonSegmentButton>
-      </IonSegment>
+      <BlockedEntititiesSorter setSortOption={setSortOption} sortOption={sortOption} />
 
       <IonList inset key={sortOption}>
         {sortedUsers?.length ? (
diff --git a/src/features/settings/blocks/Types.tsx b/src/features/settings/blocks/Types.tsx
new file mode 100644
index 0000000000..39dff663ab
--- /dev/null
+++ b/src/features/settings/blocks/Types.tsx
@@ -0,0 +1,3 @@
+export type SortOptionType = 'default' | 'alphabetical';
+
+export type SortCriterion = 'name' | 'alphabetical';
\ No newline at end of file

From a6cb2df54c92079d045fe283251a805a8ea31d5f Mon Sep 17 00:00:00 2001
From: ismail <ismail@bazookka.com>
Date: Wed, 11 Oct 2023 22:57:25 -0400
Subject: [PATCH 3/6] Only keep alphabetical sorting

---
 .../settings/blocks/BlockedCommunities.tsx    | 13 +-------
 .../settings/blocks/BlockedEntitiesSorter.tsx | 32 -------------------
 src/features/settings/blocks/BlockedUsers.tsx | 21 ++++--------
 src/features/settings/blocks/Types.tsx        |  3 --
 4 files changed, 8 insertions(+), 61 deletions(-)
 delete mode 100644 src/features/settings/blocks/BlockedEntitiesSorter.tsx
 delete mode 100644 src/features/settings/blocks/Types.tsx

diff --git a/src/features/settings/blocks/BlockedCommunities.tsx b/src/features/settings/blocks/BlockedCommunities.tsx
index ee04f0c848..1d60282598 100644
--- a/src/features/settings/blocks/BlockedCommunities.tsx
+++ b/src/features/settings/blocks/BlockedCommunities.tsx
@@ -5,7 +5,6 @@ import {
   IonLabel,
   IonList,
   IonLoading,
-  IonSegment,
 } from "@ionic/react";
 import { InsetIonItem } from "../../../pages/profile/ProfileFeedItemsPage";
 import { useAppDispatch, useAppSelector } from "../../../store";
@@ -14,18 +13,16 @@ import { getHandle } from "../../../helpers/lemmy";
 import { CommunityBlockView } from "lemmy-js-client";
 import { blockCommunity } from "../../community/communitySlice";
 import { ListHeader } from "../shared/formatting";
-import BlockedEntititiesSorter from "./BlockedEntitiesSorter";
 
 export default function BlockedCommunities() {
   const dispatch = useAppDispatch();
   const [loading, setLoading] = useState(false);
-  const [sortOption, setSortOption] = useState<'default' | 'alphabetical'>('default');
 
   const communities = useAppSelector(
     (state) => state.auth.site?.my_user?.community_blocks,
   );
 
-  const sortedCommunities = sortOption === 'alphabetical'
+  const sortedCommunities = communities && communities.length > 0
     ? [...(communities || [])].sort((a, b) => a.community.name.localeCompare(b.community.name))
     : communities || [];
 
@@ -45,14 +42,6 @@ export default function BlockedCommunities() {
         <IonLabel>Blocked Communities</IonLabel>
       </ListHeader>
       <IonList inset>
-        <IonSegment
-          value={sortOption}
-          onIonChange={e => {
-            setSortOption(e.detail.value as 'default' | 'alphabetical');
-          }}
-        >
-          <BlockedEntititiesSorter setSortOption={setSortOption} sortOption={sortOption} />
-        </IonSegment>
         {sortedCommunities?.length ? (
           sortedCommunities.map((community) => (
             <IonItemSliding key={community.community.id}>
diff --git a/src/features/settings/blocks/BlockedEntitiesSorter.tsx b/src/features/settings/blocks/BlockedEntitiesSorter.tsx
deleted file mode 100644
index b00a4433de..0000000000
--- a/src/features/settings/blocks/BlockedEntitiesSorter.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { IonLabel, IonSegment, IonSegmentButton } from "@ionic/react";
-
-import { SortOptionType } from "./Types";
-
-
-type BlockedEntitiesSorterProps = {
-    sortOption: SortOptionType;
-    setSortOption: (value: SortOptionType) => void;
-};
-
-const BlockedEntititiesSorter: React.FC<BlockedEntitiesSorterProps> = ({ sortOption, setSortOption }) => {
-
-    return (
-        <IonSegment
-            value={sortOption}
-            onIonChange={e => {
-                setSortOption(e.detail.value as 'default' | 'alphabetical');
-                console.log("Sort option changed to:", e.detail.value);
-            }}
-        >
-            <IonSegmentButton value="default">
-                <IonLabel>Most Recent</IonLabel>
-            </IonSegmentButton>
-            <IonSegmentButton value="alphabetical">
-                <IonLabel>Alphabetical</IonLabel>
-            </IonSegmentButton>
-        </IonSegment>
-    )
-
-}
-
-export default BlockedEntititiesSorter
\ No newline at end of file
diff --git a/src/features/settings/blocks/BlockedUsers.tsx b/src/features/settings/blocks/BlockedUsers.tsx
index dcb8d5d83e..23f8cd3cdd 100644
--- a/src/features/settings/blocks/BlockedUsers.tsx
+++ b/src/features/settings/blocks/BlockedUsers.tsx
@@ -13,26 +13,21 @@ import { getHandle } from "../../../helpers/lemmy";
 import { PersonBlockView } from "lemmy-js-client";
 import { blockUser } from "../../user/userSlice";
 import { ListHeader } from "../shared/formatting";
-import BlockedEntititiesSorter from "./BlockedEntitiesSorter";
-import { SortOptionType } from "./Types";
+
 
 export default function BlockedUsers() {
   const dispatch = useAppDispatch();
   const [loading, setLoading] = useState(false);
 
-
-
-  const [sortOption, setSortOption] = useState<SortOptionType>('default');
-
-
   const users = useAppSelector(
     (state) => state.auth.site?.my_user?.person_blocks,
   );
 
-  const sortedUsers = sortOption === 'alphabetical'
-    ? [...(users || [])].sort((a, b) => a.target.name.localeCompare(b.target.name))
-    : users || [];
-
+  const sortedUsers = users && users.length > 0
+    ? [...users].sort((a, b) =>
+      (a.target?.name || '').localeCompare(b.target?.name || '')
+    )
+    : [];
 
   async function remove(user: PersonBlockView) {
     setLoading(true);
@@ -50,9 +45,7 @@ export default function BlockedUsers() {
         <IonLabel>Blocked Users</IonLabel>
       </ListHeader>
 
-      <BlockedEntititiesSorter setSortOption={setSortOption} sortOption={sortOption} />
-
-      <IonList inset key={sortOption}>
+      <IonList inset key="blocked_users">
         {sortedUsers?.length ? (
           sortedUsers.map((user) => (
             <IonItemSliding key={user.target.id}>
diff --git a/src/features/settings/blocks/Types.tsx b/src/features/settings/blocks/Types.tsx
deleted file mode 100644
index 39dff663ab..0000000000
--- a/src/features/settings/blocks/Types.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export type SortOptionType = 'default' | 'alphabetical';
-
-export type SortCriterion = 'name' | 'alphabetical';
\ No newline at end of file

From d32c54920a3cd495c860172782401c7ea4e6fe4a Mon Sep 17 00:00:00 2001
From: ismail <ismail@bazookka.com>
Date: Thu, 12 Oct 2023 14:38:34 -0400
Subject: [PATCH 4/6] eslint formatting

---
 src/features/settings/blocks/BlockedCommunities.tsx | 4 +++-
 src/features/settings/blocks/BlockedUsers.tsx       | 5 ++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/features/settings/blocks/BlockedCommunities.tsx b/src/features/settings/blocks/BlockedCommunities.tsx
index 1d60282598..2586697f29 100644
--- a/src/features/settings/blocks/BlockedCommunities.tsx
+++ b/src/features/settings/blocks/BlockedCommunities.tsx
@@ -23,7 +23,9 @@ export default function BlockedCommunities() {
   );
 
   const sortedCommunities = communities && communities.length > 0
-    ? [...(communities || [])].sort((a, b) => a.community.name.localeCompare(b.community.name))
+    ? [...(communities || [])].sort((a, b) =>
+      a.community.name.localeCompare(b.community.name)
+    )
     : communities || [];
 
   async function remove(community: CommunityBlockView) {
diff --git a/src/features/settings/blocks/BlockedUsers.tsx b/src/features/settings/blocks/BlockedUsers.tsx
index 23f8cd3cdd..2291cf024c 100644
--- a/src/features/settings/blocks/BlockedUsers.tsx
+++ b/src/features/settings/blocks/BlockedUsers.tsx
@@ -14,7 +14,6 @@ import { PersonBlockView } from "lemmy-js-client";
 import { blockUser } from "../../user/userSlice";
 import { ListHeader } from "../shared/formatting";
 
-
 export default function BlockedUsers() {
   const dispatch = useAppDispatch();
   const [loading, setLoading] = useState(false);
@@ -25,7 +24,7 @@ export default function BlockedUsers() {
 
   const sortedUsers = users && users.length > 0
     ? [...users].sort((a, b) =>
-      (a.target?.name || '').localeCompare(b.target?.name || '')
+      (a.target?.name || "").localeCompare(b.target?.name || "")
     )
     : [];
 
@@ -41,7 +40,7 @@ export default function BlockedUsers() {
 
   return (
     <>
-      <ListHeader style={{ marginBottom: '20px' }} className="ion-margin-bottom">
+      <ListHeader style={{ marginBottom: "20px" }} className="ion-margin-bottom">
         <IonLabel>Blocked Users</IonLabel>
       </ListHeader>
 

From 23c8b67fb7a8d9a07d6f31ed0320091c6d0cb147 Mon Sep 17 00:00:00 2001
From: Alexander Harding <2166114+aeharding@users.noreply.github.com>
Date: Sun, 15 Oct 2023 14:52:36 -0500
Subject: [PATCH 5/6] Cleanup

---
 src/features/settings/blocks/BlockedCommunities.tsx |  9 ++++-----
 src/features/settings/blocks/BlockedUsers.tsx       | 10 ++++------
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/features/settings/blocks/BlockedCommunities.tsx b/src/features/settings/blocks/BlockedCommunities.tsx
index 2586697f29..0a6c153e44 100644
--- a/src/features/settings/blocks/BlockedCommunities.tsx
+++ b/src/features/settings/blocks/BlockedCommunities.tsx
@@ -22,11 +22,9 @@ export default function BlockedCommunities() {
     (state) => state.auth.site?.my_user?.community_blocks,
   );
 
-  const sortedCommunities = communities && communities.length > 0
-    ? [...(communities || [])].sort((a, b) =>
-      a.community.name.localeCompare(b.community.name)
-    )
-    : communities || [];
+  const sortedCommunities = communities
+    ?.slice()
+    .sort((a, b) => a.community.name.localeCompare(b.community.name));
 
   async function remove(community: CommunityBlockView) {
     setLoading(true);
@@ -67,6 +65,7 @@ export default function BlockedCommunities() {
           </InsetIonItem>
         )}
       </IonList>
+
       <IonLoading isOpen={loading} />
     </>
   );
diff --git a/src/features/settings/blocks/BlockedUsers.tsx b/src/features/settings/blocks/BlockedUsers.tsx
index 2291cf024c..7b83431034 100644
--- a/src/features/settings/blocks/BlockedUsers.tsx
+++ b/src/features/settings/blocks/BlockedUsers.tsx
@@ -22,11 +22,9 @@ export default function BlockedUsers() {
     (state) => state.auth.site?.my_user?.person_blocks,
   );
 
-  const sortedUsers = users && users.length > 0
-    ? [...users].sort((a, b) =>
-      (a.target?.name || "").localeCompare(b.target?.name || "")
-    )
-    : [];
+  const sortedUsers = users
+    ?.slice()
+    .sort((a, b) => (a.target?.name || "").localeCompare(b.target?.name || ""));
 
   async function remove(user: PersonBlockView) {
     setLoading(true);
@@ -40,7 +38,7 @@ export default function BlockedUsers() {
 
   return (
     <>
-      <ListHeader style={{ marginBottom: "20px" }} className="ion-margin-bottom">
+      <ListHeader className="ion-margin-bottom">
         <IonLabel>Blocked Users</IonLabel>
       </ListHeader>
 

From 07c72595fe1bc7ea28e995b30d64c863382d0be2 Mon Sep 17 00:00:00 2001
From: Alexander Harding <2166114+aeharding@users.noreply.github.com>
Date: Sun, 15 Oct 2023 19:57:25 -0500
Subject: [PATCH 6/6] Remove unused optional check

---
 src/features/settings/blocks/BlockedUsers.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/settings/blocks/BlockedUsers.tsx b/src/features/settings/blocks/BlockedUsers.tsx
index 7b83431034..824e10bbc0 100644
--- a/src/features/settings/blocks/BlockedUsers.tsx
+++ b/src/features/settings/blocks/BlockedUsers.tsx
@@ -24,7 +24,7 @@ export default function BlockedUsers() {
 
   const sortedUsers = users
     ?.slice()
-    .sort((a, b) => (a.target?.name || "").localeCompare(b.target?.name || ""));
+    .sort((a, b) => a.target.name.localeCompare(b.target.name));
 
   async function remove(user: PersonBlockView) {
     setLoading(true);
@@ -38,11 +38,11 @@ export default function BlockedUsers() {
 
   return (
     <>
-      <ListHeader className="ion-margin-bottom">
+      <ListHeader>
         <IonLabel>Blocked Users</IonLabel>
       </ListHeader>
 
-      <IonList inset key="blocked_users">
+      <IonList inset>
         {sortedUsers?.length ? (
           sortedUsers.map((user) => (
             <IonItemSliding key={user.target.id}>