UserSessions

import { UserSessions } from '@arcblock/blocklet-ui-react';
import { client } from './libs/client'; // Your API client instance

// The user object for whom sessions are being displayed.
const currentUser = {
  did: 'z1...',
  name: 'Alice',
  // other user properties
};

/**
 * This function fetches session data from your backend.
 * The UserSessions component will call this function whenever it needs new data.
 *
 * @param {object} params - The query parameters.
 * @param {number} params.page - The current page number.
 * @param {number} params.pageSize - The number of items per page.
 * @param {string} params.status - The session status to filter by ('online', 'expired', 'offline').
 * @returns {Promise<{ list: UserSession[], paging: { total: number } }>} A promise that resolves to the session data.
 */
const fetchUserSessions = async ({ page, pageSize, status }) => {
  const response = await client.user.getSessions({
    page,
    pageSize,
    status,
  });

  // Ensure the return format matches the component's requirements
  return {
    list: response?.list || [],
    paging: {
      total: response?.paging?.total || 0,
    },
  };
};

export default function MyAccountSessionsPage() {
  return (
    <div>
      <h2>Manage Your Login Sessions</h2>
      <UserSessions
        user={currentUser}
        getUserSessions={fetchUserSessions}
      />
    </div>
  );
}