Implement sorting blocked users and communities

aeharding · Oct 10, 2023 · 5cdb42d · 5cdb42d
1 parent aac888e
commit 5cdb42d
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 33 deletions.
diff --git 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,20 +44,14 @@ export default function BlockedCommunities() {
       <ListHeader>
         <IonLabel>Blocked Communities</IonLabel>
       </ListHeader>
-      {/* Sorting Options */}
       <IonList inset>
         <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>
+          <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
@@ -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
diff --git 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
@@ -0,0 +1,3 @@
+export type SortOptionType = 'default' | 'alphabetical';
+
+export type SortCriterion = 'name' | 'alphabetical';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		export type SortOptionType = 'default' \| 'alphabetical';

		export type SortCriterion = 'name' \| 'alphabetical';