Skip to main content
Kinetic Community

Record Search Queries and Results

Overview

This article covers adding functionality to the bundle that will record the quires and results of the search box usage.  This will require creating a datastore to capture the data.  We will use the CoreAPI createSubmission to write the data to the datastore.  The write will be done inside of the CatalogSearchResultsContainer component's lifecycle methods.  In practice it may be preferable to have actions that would be dispatched from the CatalogSearchResultsContianer component.

Goals of this activity:

  • Create a datastore.
  • Add required fields to the datastore.
  • Refactor CatalogSearchResultsContainer component to add recompose.
  • Write to the datastore when the CatalogSearchResults component mounts.
  • Write to the datastore when the CatalogSearchResults component recieves props.

Activity

Create a datastore.

  1. Open the dropdown to the right of "Services" in the header.
  2. Select Admin Console.
    Dropdown.png
  3. Click on the Datastore card.
    Datastore Card.png
  4. Click Create Datastore button on the upper right of the page.
    Create Datastrore.png
  5. Name the datastore "Search Queries".
    Confirm that the slug is search-queries.
  6. Click the Create button.
    This will take you to the datastore configuration screen.
    Create Datastore 2.png

Add required fields to the datastore.

  1. From the datastore configuration screen for the Search Queries datastore click the Builder button.
    This will open the form builder in the management consoles.
    Create Datastore 4.png
  2. Rename the Simple Input element to Query.
    1. Do Rename an element select it by clicking on it.
    2. Then change the value in the Name field on the right hand side.
  3. Add and Name 3 more elements.  Name the elements Requester, Results and TimeStamp.
    1. Drag a new Text element onto the center canvas.
    2. Select the new element by clicking on it.
    3. Change the value in the name field.
  4. Click the Save button in the upper right of the page.
    Create Datastore 3.png

Refactor CatalogSearchResultsContainer component to add recompose.

  1. From the src directory navigate to the search_results directory in src > components > search_results.
  2. Open CatalogSearchResultsContainer.js file.
  3. Add username to the mapStateToProps return. open gist
    username: state.kinops.profile.username,
  4. Add below code to the import section at the top of the file. open gist
    import { compose, lifecycle } from 'recompose';
    import { CoreAPI } from 'react-kinetic-core';
    import moment from 'moment';
  5.  Add below code about the CatalogSearchResultsContainer export. open gist
    const enhance = compose(
      connect(mapStateToProps),
      lifecycle({
        componentWillMount() {
          /* Add submission create on component mount code here */
        },
        componentWillReceiveProps(nextProps) {
          /* Add submission create when component recieves props code here */
        },
      }),
    );
  6. Refactor CatalogSearchResultsContainer export with the below code. (Replace existing with below code) open gist
    export const CatalogSearchResultsContainer = enhance(CatalogSearchResults);
    
  7. Save the file and check the browser to make sure nothing is broken.

Write to the datastore when the CatalogSearchResults component mounts.

  1. In the lifecycle method locate the comment "Add submission create on component mount code here".
  2. Replace the comment with the below code. open gist
    const { username, query, forms } = this.props;
    CoreAPI.createSubmission({
      kappSlug: 'admin',
      formSlug: 'search-queries',
      values: {
        Status: 'active',
        Query: query,
        Requester: username,
        Results: forms,
        TimeStamp: moment().format(),
      },
    });

Write to the datastore when the CatalogSearchResults component recieves props.

  1. In the lifecycle method locate the comment "Add submission create when component receives props code here".
  2. Replace the comment with the below code. open gist
    const { username, query, forms } = nextProps;
    if (query !== this.props.query) {
      CoreAPI.createSubmission({
        kappSlug: 'admin',
        formSlug: 'search-queries',
        values: {
          Status: 'active',
          Query: query,
          Requester: username,
          Results: forms,
          TimeStamp: moment().format(),
        },
      });
    }
  3. Save the file and make a search from the portal.
    Datastore Create 4.png
  4. Navigate to the datastore and check to see if the record was created.
    • Click on a datastore's name to view the datastore's records
      Datastore Create 5.png