feat: refactor AdminMembers and AdminStaff to utilize useMembers hook for improved member management

src/pages/admin/AdminMembers.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { useNavigate, useLocation, Link } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
 import api from '../../utils/api';
@@ -21,16 +21,22 @@ import InviteStaffDialog from '../../components/InviteStaffDialog';
 import WordPressImportWizard from '../../components/WordPressImportWizard';
 import StatusBadge from '../../components/StatusBadge';
 import { StatCard } from '@/components/StatCard';
+import useMembers from '../../hooks/use-members';
 
 const AdminMembers = () => {
   const navigate = useNavigate();
   const location = useLocation();
   const { hasPermission } = useAuth();
-  const [users, setUsers] = useState([]);
-  const [filteredUsers, setFilteredUsers] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
-  const [statusFilter, setStatusFilter] = useState('active');
+  const {
+    users,
+    filteredUsers,
+    loading,
+    searchQuery,
+    setSearchQuery,
+    filterValue: statusFilter,
+    setFilterValue: setStatusFilter,
+    fetchMembers,
+  } = useMembers();
   const [paymentDialogOpen, setPaymentDialogOpen] = useState(false);
   const [selectedUserForPayment, setSelectedUserForPayment] = useState(null);
   const [statusChanging, setStatusChanging] = useState(null);
@@ -41,46 +47,6 @@ const AdminMembers = () => {
   const [importDialogOpen, setImportDialogOpen] = useState(false);
   const [exporting, setExporting] = useState(false);
 
-  useEffect(() => {
-    fetchMembers();
-  }, []);
-
-  useEffect(() => {
-    filterUsers();
-  }, [users, searchQuery, statusFilter]);
-
-  const fetchMembers = async () => {
-    try {
-      const response = await api.get('/admin/users');
-      // Filter to only members
-      const members = response.data.filter(user => user.role === 'member');
-      setUsers(members);
-    } catch (error) {
-      toast.error('Failed to fetch members');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const filterUsers = () => {
-    let filtered = users;
-
-    if (statusFilter && statusFilter !== 'all') {
-      filtered = filtered.filter(user => user.status === statusFilter);
-    }
-
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      filtered = filtered.filter(user =>
-        user.first_name.toLowerCase().includes(query) ||
-        user.last_name.toLowerCase().includes(query) ||
-        user.email.toLowerCase().includes(query)
-      );
-    }
-
-    setFilteredUsers(filtered);
-  };
-
   const handleActivatePayment = (user) => {
     setSelectedUserForPayment(user);
     setPaymentDialogOpen(true);