Skip to main content

History Items Feature

Purpose:​

The History Items Feature provides a centralized view of all historical events or messages within the application. This feature focuses on efficiently displaying and interacting with historical records, allowing users to apply filters, view item details, and perform actions such as deletion.

The history items are fetched and filtered using an integrated SDK, which provides a flexible way to manage and display historical data within the app.

Key Features​

  1. Display History Items: The screen displays a list of history items fetched using an SDK.
  2. Apply Filters: Supports various filters including static message types, dynamic contacts, action types, and date ranges.
  3. View Details: Allows users to navigate to a detailed view of a specific history item.

Fetching and Displaying History Items​

The getHistory function is responsible for initializing the agent and retrieving history items using the SDK. It can accept optional filter parameters to refine the results based on the user's preferences.

Example: Fetching History Items​

const getHistory = async () => {
  const agent = await initializeAgent();
  const result = await agent.historyManager.getList({
    currentPage: 1,
    rowsPerPage: 20,
    // Optional filters can be passed here:
    // type: selectedTypeFilter,
    // fromDid: selectedFilterContacts,
    // action: selectedActionFilter,
    // dateFrom: startDateFilter,
    // dateTo: endDateFilter,
  });
  if (result.isSuccessful) {
    setHistoryItems(result.result.result);
  }
};
  • SDK Initialization: Sets up the agent with the necessary configurations.
  • History List Fetch: Uses the getList method to fetch the list of history items based on pagination and optional filter parameters such as type, action, date range, and contact identifiers.

Filter Initialization:​

Filters are initialized either statically or dynamically, allowing developers to customize filtering options based on the app’s requirements.

Static Filters:​

  1. Message Type Filter: Predefined list of message types supported by the SDK.

    const messageTypeData = [
      NotificationMessageType.ActionMessage,
      NotificationMessageType.CredentialOffer,
      NotificationMessageType.GeneralMessage,
      NotificationMessageType.ConnectionRequest,
      NotificationMessageType.ProofRequest,
      NotificationMessageType.ProofResponse,
    ];
    • Description: These message types are static and predefined based on the SDK’s supported message types. They can be used to filter history items of specific types such as "Credential Offer" or "Proof Request".

  2. Action Type Filter: Predefined list of possible actions related to history items.

    const actionTypeData = [
      HistoryAction.Accepted,
      HistoryAction.Rejected,
      HistoryAction.Deleted,
      HistoryAction.Expired,
      HistoryAction.Received,
      HistoryAction.SentResponse,
      HistoryAction.Viewed,
    ];
    • Description: These action types represent the different states or events that a history item can have, such as "Accepted", "Rejected", or "Viewed".

Dynamic Filters:​

  1. Contacts Filter: Dynamically fetched from the SDK.

    const getContacts = async () => {
      const agent = await initializeAgent();
      const result = await agent.contactManager.getList({
        currentPage: 1,
        rowsPerPage: 20,
      });
      if (result.isSuccessful) {
        // Extracting the DID of each contact
        const contactDIDs = result.result.result.map(
          (contact) => contact.theirDid
        );
        return contactDIDs;
      }
    };
    • Description: The contacts list is dynamically fetched using the getList method of the contactManager. The returned list of contact DIDs is used as filter options.

  2. Date Range Filter: User-selected start and end dates.

    • Start and End Dates: The user can pick a start date and an end date dynamically using date pickers. The selected date range should follow the format YYYY-MM-DDTHH:mm:ss.sssZ.

Example: Filter Parameters​

const filterParameters = {
  type: selectedTypeFilter, // E.g., ["action-message", "credential-offer"]
  fromDid: selectedFilterContacts, // E.g., ["did:web:stream.dev-one37.id"]
  action: selectedActionFilter, // E.g., ["accepted", "deleted"]
  dateFrom: startDateFilter, // E.g., "2024-10-30T11:18:00.000Z"
  dateTo: endDateFilter, // E.g., "2024-11-30T11:18:00.000Z"
};

Viewing History Item Details:​

The onNotificationPress function fetches detailed information about a specific history item using its id. It retrieves the full details using the SDK and navigates to a dedicated details screen.

Example: Fetching History Item Details​

const getDetails = async (id: string) => {
  const agent = await initializeAgent();
  const result = await agent.historyManager?.get(id);
  if (result.isSuccessful) {
    return result.result;
  } else {
    throw new Error(result.error);
  }
};

Example: Viewing Details on Item Click​

const onNotificationPress = async (
  notification: HistoryListResponse
): Promise<void> => {
  const historyDetails = await getDetails(notification.id);
  await RootNavigation.navigate("HistoryDetailsScreen", historyDetails);
};

Code Summary:​

The code integrates the SDK to:

  • Fetch history items with optional filters (message types, contacts, actions, and date ranges).
  • Display a list of history items, showing key details such as action, type, contact information, and date.
  • Provide navigation to view more details about a selected history item.
  • Optionally delete history items.
X

Graph View