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] 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