useSearchData Hook

The useSearchData hook is a custom React hook designed to fetch and manage search data efficiently. It allows you to filter, sort, and retrieve items based on various customizable criteria such as item types, properties, location, and more.

Installation

Make sure you have all the necessary dependencies installed in your project before using this hook.

npm i konciv-hooks

Usage

Import the Hook

import { useSearchData, useApi, useSearchItem } from "konciv-hooks";

Example Implementation

Here’s how you can use the useSearchData hook in a functional React component:

import React from "react";
import { useSearchData, useApi, useSearchItem } from "konciv-hooks";

const SearchComponent = () => {
  const token = "your-auth-token"; // Replace with your actual token
  const ocpKey = "your-ocp-key"; // Replace with your actual ocpKey

  const { itemTypes, projects, globals, users, groups } = useApi(token, ocpKey); // Exclude or include whatever you need. Only does api for whats in the object.

  const { data: nameWhateverUWant, error: searchItemError, loading: searchItemLoading } = useSearchItem(token, ocpKey, itemId);

  const { searchData, allDataFetched, error, loading } = useSearchData({
    token: token, // Required
    ocpKey: ocpKey, // Required
    itemType: itemTypes?.employee, // To seach withing item type "Employee" - Required
    itemName: "Hello", // Search by item with a name "Hello" - Optional
    properties: [
      { name: "User", value: "E3GRG342-GJ123-4567890" },
      { name: "Monthly Salary", value: "40000" }, // By Default its EQ on numbers.
      { name: "Recieved", value: "200000", comparison: "GOE" }, // On number properties u can use comparions: "GOE", "LOE", "EQ", "NEQ" and so on.
      { name: "Process Step", value: "Ready for Project", operator: "OR" }, // You can add operator "OR/AND" on each property.
    ], // Filter by custom properties - Optional
    location: {
      // Optional
      locationName: "Tananger",
      subregionName: "Stavanger", // Optional
    },
    pageSize: 4200, // Number of items to fetch ""all" || number" - Optional. 2000 is default.
    propertyOperator: "AND", // Filter operator (AND/OR) - Optional. AND is default - Optional.
  });

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Search Results</h1>
      {allDataFetched && <p>All data fetched successfully.</p>}
      <ul>
        {searchData?.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchComponent;

Options

The useSearchData hook accepts an object with the following options:

| Option | Type | Description | | ------------------ | ----------------- | ----------------------------------------------------------------------------------- | | token | string | Required. Authentication token for API access. | | ocpKey | string | Required. Key for additional API security. | | itemType | Array<string> | Optional. List of item types to filter the search results. | | itemName | string | Optional. Name of the item to search for. | | properties | Array<object> | Optional. Array of property filters. Each object contains a name and value. | | location | object | Optional. Contains locationName and subregionName for location-based filtering. | | pageSize | number or 'all' | Optional. Number of items to fetch . Default is 2000. | | propertyOperator | string | Optional. Operator for property filters (AND or OR). Default is AND. |

Return Values

The hook returns an object with the following:

| Property | Type | Description | | ---------------- | --------------- | --------------------------------------------------------- | | searchData | Array<object> | Array of fetched search results. | | allDataFetched | boolean | Indicates whether all data has been successfully fetched. | | error | Error | Error object if the request fails. | | loading | boolean | Indicates whether the data is currently being fetched. |

Notes

• Ensure proper error handling is implemented for smoother user experience.
• Adjust the pageSize to balance between performance and result accuracy.
• Customize the filters based on your specific use case.