sel-esri-custom-table

useWithAdvanceSearch Hook

Overview

The useWithAdvanceSearch hook is designed to manage state for dynamic fields in a React application. It uses data from a feature layer and a time query to fetch unique field values and update the state accordingly.

Installation

To use this hook in your project, ensure you have the required dependencies:

npm install sel-esri-advance-search

Usage Component

The ESRIAdvanceSearch component can be used directly in your React application as shown below:

import ESRIAdvanceSearch from 'esri-advance-search';

const MyComponent = ({ featureLayer, autocompleteFields, setFinalQuery }) => {
  return (
    <ESRIAdvanceSearch
      featureLayer={featureLayer}
      timeQuery={"Proj_Start_Year <= 2026 AND Proj_End_Year >= 2017"}
      autocompleteFields={autocompleteFields}
      setFinalQuery={setFinalQuery}
    />
  );
};

Usage Custom Hook

You can use the useWithAdvanceSearch custom hook for more control over the advanced search functionalities and get the attributes from the advance search.

import { useWithAdvanceSearch } from 'esri-advance-search';

const MyComponent = ({ featureLayer, autocompleteFields, setFinalQuery }) => {
  const { fetchFeatures } = useWithAdvanceSearch({
    featureLayer,
    timeQuery: "Proj_Start_Year <= 2026 AND Proj_End_Year >= 2017",
    autocompleteFields,
    setFinalQuery,
  });

  // Example usage of fetchFeatures
  useEffect(() => {
    const fetchData = async () => {
      // pass query to fetchFeatures()
      const features = await fetchFeatures("Proj_Status = 'Active'");
    };
    fetchData();
  }, [fetchFeatures]);

  return <div>My ESRI Advanced Search Component</div>;
};

API ESRIAdvanceSearch

Props:

• featureLayer (Object): The ESRI Feature Layer to be queried.
• timeQuery (string): The time-based query string.
• autocompleteFields (Array): Array of fields for autocompletion.
• setFinalQuery (function): Function to set the final query string.

useWithAdvanceSearch

Parameters:

• featureLayer (Object): The ESRI Feature Layer to be queried.
• timeQuery (string): The time-based query string.
• autocompleteFields (Array): Array of fields for autocompletion.
• setFinalQuery (function): Function to set the final query string.

Returns:

• state (Object): State object with keys corresponding to the autocompleteFields array.
• autocompleteData (Array): Array containing autocomplete data.
• setAutocompleteData (function): Function to update the autocomplete data.
• fetchFeatures (function): Function to fetch features based on a query string.

Example

Here's a more detailed example demonstrating the usage of useWithAdvanceSearch:

import React, { useState } from 'react';
import { useWithAdvanceSearch } from 'esri-advance-search';

const MyComponent = ({ featureLayer }) => {
  const [finalQuery, setFinalQuery] = useState('');
  const autocompleteFields = ['Project_Name', 'Project_Manager'];

  const { state, autocompleteData, setAutocompleteData, fetchFeatures } = useWithAdvanceSearch({
    featureLayer,
    timeQuery: "Proj_Start_Year <= 2026 AND Proj_End_Year >= 2017",
    autocompleteFields,
    setFinalQuery,
  });

  const handleSearch = async () => {
    const features = await fetchFeatures(finalQuery);
  };

  return (
    <div>
      <button onClick={handleSearch}>Search</button>
      {/* Render UI based on state and autocompleteData */}
    </div>
  );
};

Important Notes

Ensure the featureLayer prop is valid and not null before using the hook. The hook will fetch and update field values whenever featureLayer, autocompleteData, timeQuery, or autocompleteFields change. You can manage autocompleteData using the provided setAutocompleteData function.

Error Handling

If there is an error updating the fields, it will be logged to the console with the message: "Error updating fields:"

Development

Publishing the Package

To publish the npm package, follow these steps:

• Update the version in package.json:

{
    "version": "1.0.3"
}

• Commit your changes and push to GitHub:

git add .
git commit -m "Update version to 1.0.3"
git push origin main

• Create a Release on GitHub
• Go to the Releases page of your repository.
• Click on Draft a new release.
• Fill out the form:
• Tag version: v1.0.3
• Release title: v1.0.3
• Description: Describe the changes in this release.
• Click Publish release.
• Check on the Actions tab to see full workflow.
• Confirm it was published.