feat: implement UsersContext and refactor user management hooks for improved user data handling

src/hooks/use-members.js

@@ -2,12 +2,23 @@ import { useCallback, useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import api from '../utils/api';
 
+const DEFAULT_SEARCH_FIELDS = ['first_name', 'last_name', 'email'];
+
+/**
+ * Hook for fetching users from a custom endpoint (e.g., member-facing directory).
+ * For admin pages, use hooks from use-users.js instead which share a centralized context.
+ */
 const useMembers = ({
+  endpoint = '/admin/users',
   initialFilter = 'active',
   initialSearch = '',
   filterKey = 'status',
   allowedRoles = ['member'],
+  searchFields = DEFAULT_SEARCH_FIELDS,
   fetchErrorMessage = 'Failed to fetch members',
+  searchAccessor,
+  transform,
+  onFetchError,
 } = {}) => {
   const [users, setUsers] = useState([]);
   const [filteredUsers, setFilteredUsers] = useState([]);
@@ -17,18 +28,25 @@ const useMembers = ({
 
   const fetchMembers = useCallback(async () => {
     try {
-      const response = await api.get('/admin/users');
+      const response = await api.get(endpoint);
       let filtered = response.data;
+      if (typeof transform === 'function') {
+        filtered = transform(filtered);
+      }
       if (allowedRoles && allowedRoles.length) {
         filtered = filtered.filter(user => allowedRoles.includes(user.role));
       }
       setUsers(filtered);
     } catch (error) {
-      toast.error(fetchErrorMessage);
+      if (typeof onFetchError === 'function') {
+        onFetchError(error);
+      } else {
+        toast.error(fetchErrorMessage);
+      }
     } finally {
       setLoading(false);
     }
-  }, [allowedRoles, fetchErrorMessage]);
+  }, [allowedRoles, endpoint, fetchErrorMessage, onFetchError, transform]);
 
   useEffect(() => {
     fetchMembers();
@@ -43,15 +61,19 @@ const useMembers = ({
 
     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)
-      );
+      filtered = filtered.filter(user => {
+        const values = typeof searchAccessor === 'function'
+          ? searchAccessor(user)
+          : searchFields.map(field => user?.[field]);
+
+        return values
+          .filter(Boolean)
+          .some(value => value.toString().toLowerCase().includes(query));
+      });
     }
 
     setFilteredUsers(filtered);
-  }, [users, searchQuery, filterKey, filterValue]);
+  }, [users, searchQuery, filterKey, filterValue, searchAccessor, searchFields]);
 
   return {
     users,