React, React Native and Vue UI components for building data-driven apps with Elasticsearch

For services like AWS Elasticsearch, all requests needed to be signed and the signature added to the headers (at least for some configurations in AWS).

Is there any way to specify custom headers on a per request base? While I still have a proxy for my requests, I am depending on AWS to verify security, which works fine if I can sign the request.

Thanks

Issue Type:

Reactive Base component have server side rendering issues, it tries to uses the window which will not be available on the server. Description:

I have been giving it a try and found that the Reactive Base component does have a server side rendering issues, it tries to uses the window which will not be available on the server. Not sure if other components have similar issues, but it would be great if all of the components have SSR support. I got it working by rendering it only on the client side but that's a bad practice and is not recommended.

Screenshots:

Minimal reproduction of the problem with instructions:

Reactivesearch version: 2.2.0

Browser: [all | Chrome XX | Firefox XX | Edge XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Anything else:

I have implemented the same code which you have given in Snack, but in my app it is showing blank screen with search bar

Using on React Native

I want to load some data on the screen when I load it for the first time, before user start searching for the tutors.

Dependancies: "dependencies": { "@appbaseio/reactivesearch-native": "^0.9.0", "@expo/videoplayer": "^0.4.0", "axios": "^0.18.0", "dateformat": "^3.0.3", "expo": "^30.0.0", "firebase": "^5.5.1-0", "native-base": "^2.8.0", "prop-types": "^15.6.2", "react": "^16.3.1", "react-bootstrap-sweetalert": "^4.4.1", "react-data-fetching": "^0.2.3", "react-dom": "^16.5.2", "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz", "react-native-animatable": "^1.3.0", "react-native-atoz-listview": "0.0.7", "react-native-awesome-alerts": "^1.1.1", "react-native-calendars": "^1.20.0", "react-native-keyboard-aware-scroll-view": "^0.7.2", "react-native-modal": "^6.5.0", "react-native-modal-datetime-picker": "^6.0.0", "react-native-read-more-text": "^1.1.0", "react-native-render-html": "^3.10.0", "react-native-search-box": "0.0.19", "react-native-search-filter": "^0.1.4", "react-native-star-rating": "^1.1.0", "react-native-sweet-alert": "^1.1.0", "react-native-view-more-text": "^2.0.1", "react-navigation": "2.0.1", "sweetalert-react": "^0.4.11", "video-react": "^0.13.0"

In DynamicRangeSlider "RangeLabel" props is working, but I want to it shows me only 2 or 3 decimal digits. It Shows me all the decimal digit after decimal point that's why I can not show the $ sign in my Label. And also issue in RangeSelection my product's maximum range is 39.45 but the slider is set 39 that's why I can not show the my last product. And another thing in DynamicRangeSlider is if my product range is 0-10 $ then slider is set to 0-9 $ and I can not show my products which price is grater than 9 $ and less than 10 $.

Issue Type: Enhancement

Description: My apologies if this already exists in some way; if it does I could not find it.

I'm looking for a way to have more advanced sort options. Specifically, the ability for a sortOption to support multiple sorts, executed in the order declared.

For example, suppose we wanted two search options, Best Match which sorts by the relevance score, and Rating which sorts by the rating field and secondarily sorts by the relevance score.

Here's a crude mockup:

<ResultCard
    react={{
        "and": ["PriceFilter", "SearchFilter"]
    }}
    onData={this.onData}
    sortOptions={[
        {
            label: "Best Match",
            dataField: "_score",
            sortBy: "desc"
        },
        {
            label: "Rating",
            and: {[
                {
                    dataField: "rating",
                    sortBy: "desc"
                },
                {
                    dataField: "_score",
                    sortBy: "desc"
                }
            ]}
    }]
/>

This feature request applies to all the result components: ResultList, ResultCard, and ReactiveList.

ElasticSearch sort docs

Affected Projects React Web

Library Version: 3.0.0-alpha.3

Describe the bug I use customQuery in a DataSearch component. When I type a query in the search box I see 2 issues,

1. The query generated by autocomplete (the one that shows instance results as a drop down list form the search box) is the stock query that is fired as if there was no customQuery being specified. This results in a disparity in results shown in the connected ReactiveList because I want cross_fields while searching, which is not present in stock query for data search component.
2. Even though there are results for a query in the autocomplete they are not being rendered. I found this out when I was wanted to customize what info was shown in the autocomplete using parseSuggestion. Here I printed the suggestion on console & I also monitor the query & response from server. I do not see the results as I would expect. Note that this does not happen all the time.

To Reproduce Steps to reproduce the behavior:

1. Basically specify a customQuery on DataSearch & see the query fired when you are typing in the search box versus when you finally hit the enter which then renders the ReactiveList
2. Again you need to monitor the parseSuggestions method & see what suggestions are being printed on the consiole versus what are actually shown in the autocomplete section.

Expected behavior

1. Use the same query as customQuery specified
2. Render all the suggestions/results form the query.

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Brave/Chrome

Additional context

My DataSearch component invocation,

<DataSearch
  componentId="nameReactor"
  placeholder="Search for Name, Address, Phone, Email"
  dataField={['full_name', 'address', 'primary_email', 'primary_cell_phone']}
  fieldWeights={[10, 8, 6, 4]}
  searchInputId="universal-search"
  filterLabel="Search"
  iconPosition="right"
  autosuggest={true}
  fuzziness="AUTO"
  showClear={true}
  customQuery={
    function(value, props) {
      if (!value || !props) {
        return;
      }

      let fields = [];
      let currentDataField = props.dataField || [];
      let currentFieldWeights = props.fieldWeights || [];
      currentDataField.forEach(function(currentField, index) {
        let currentFieldWeight = currentField;
        if (index < currentFieldWeights.length) {
          currentFieldWeight += "^" + currentFieldWeights[index];
        }
        fields.push(currentFieldWeight);
      });

      const multiMatchTypes = ["best_fields", "cross_fields", "phrase_prefix"];
      const fuzzinessCapableTypes = ["best_fields"];

      let multiMatchDefinitions = [];
      multiMatchTypes.forEach(function(currentMultiMatchType) {

      let currentDefinition = {
            "query": value,
            "fields": fields,
            "type": currentMultiMatchType,
            "operator": "or"
      };

      if (props.fuzziness) {

        if (fuzzinessCapableTypes.includes(currentMultiMatchType)) {
            currentDefinition["fuzziness"] = props.fuzziness;
        }
      }

      multiMatchDefinitions.push({
                  "multi_match": currentDefinition
                })});

      return {
        "query": {
          "bool": {
              "should": multiMatchDefinitions,
              "minimum_should_match": "1"
          }          
        }
      }
    }
  }
parseSuggestion={
  function(suggestion) {

    if (!suggestion || suggestion === undefined) {
      return;
    }

    console.log("suggestion:", suggestion)

    return {
      label: (
          <div>
              {suggestion.source.first_name} {suggestion.source.middle_name} {suggestion.source.last_name}
               &nbsp;| {suggestion.source.address_line_1}
              <span style={{ color: 'dodgerblue', marginLeft: 5 }}>
                  {suggestion.source.zone}
              </span>
          </div>
      ),
      value: suggestion.value,
      source: suggestion.source  // for onValueSelected to work with parseSuggestion
    }
  }
}
renderError={error => (
    <div>
      Something went wrong with DataSearch
      <br />
      Error details
      <br />
      {error}
    </div>
  )}
  renderNoSuggestion={() => (
          <div>
              No suggestions found
          </div>
      )
  }
/>

I also keep on seeing the below error when I load the page,

index.js:1375 Warning: Failed prop type: Invalid prop `show` of type `boolean` supplied to `PoweredBy`, expected `number`.
    in PoweredBy (created by ReactiveList)
    in ReactiveList
    in Unknown (created by Context.Consumer)
    in Connect(Component) (created by ForwardRef)
    in ForwardRef (at App.js:348)
    in div (at App.js:346)
    in div (at App.js:227)
    in div
    in Unknown (created by Styled(Component))
    in Styled(Component) (created by URLParamsProvider)
    in URLParamsProvider
    in Unknown (created by Context.Consumer)
    in Connect(Component) (created by ForwardRef)
    in ForwardRef (created by ReactiveBase)
    in Provider (created by ReactiveBase)
    in ThemeProvider (created by ReactiveBase)
    in ReactiveBase (at App.js:78)
    in div (at App.js:77)
    in App (at src/index.js:7)

Affected Projects React

Library Version: 3.4.3

Describe the bug If you want to change _msearch to _search as seen in the documentation (https://docs.appbase.io/docs/reactivesearch/v3/overview/reactivebase/#props in transformRequest) it has an Problem with the Structure of the Body, because of the {"preference":"queryResult"}. If you remove that part from the Body it throws the following error TypeError: Cannot read property '0' of undefined at query.js:1 at Array.forEach () at handleResponse (query.js:1) at query.js:1

To Reproduce You can Reproduce the Error in the Following Sandbox in App.js Line 40: https://codesandbox.io/s/gitxplore-app-qmjdn

Expected behavior In My Expactation i Should atleast become an Answer from the Server, which i would log with the help of the transformResponse function, but before the Request is send or at the moment the Result is incoming the Error happens.

Issue Type: Question

Platform: Web

Description: I am currently trying to build complex sorting component and since there is not enough documentation on it I have to ask here. I will split the question in two parts.

1. Using the default sortOptions of the ReactiveList result component, there is a problem with result relevance. To be more precise, if I set default value to the sort and then try typing something in the search component, the results will still be sorted by default sort value instead by relevance. Is there a way to avoid this with the default sortOptions provided by Reactive Search? So to have ie. SingleDropdownList component to change the current sorting of the elements in the ReactiveList?

2. I tried to create and put CustomSort inside ReactiveComponent. The code for it is

<ReactiveComponent
  key="componentSort"
  componentId="ComponentSort"
>
  <CustomSort sortData={sortOptions} />
</ReactiveComponent>

CustomSort component has setQuery which gets triggered on button click (there are multiple sortOptions).

setValue(value) {
  this.props.setQuery({
    "query": {
      "match_all": {}
    },
    "sort": {
      value: {"order": "desc"}
    }
  });
}

Query is completely the same as the one being sent by default sortOptions (when checked in dev tools). However query does not update Reactive List component (ReactiveList has custom sort component in react). Should I have defaultQuery even if I do not want to set default sort? Is this the proper way to set up the custom sort?

Great project btw. Much more customizations available compared to SearchKit.

Screenshots: N/A

Reactivesearch version: 2.6.12

Browser: All

Hi , I am using Datasearch Component . Whenever I try to modify the search value (lets say change the middle character) , the cursor position is going to the end of the input . I guess its rerendering every time .

Pls suggest a fix .

I tried the demo sandbox example for datasearch and I face the same issue there .

<DataSearch componentId="searchbox" dataField={["title"]} fieldWeights={[3]} placeholder="Search" autosuggest={false} highlight={true} />

Issue Type: enhancement

Platform: Web

Description:

For me, the main idea behind SSR is to make web app crawlable (including dummy crawlers, which do not execute javascript).

So, for testing purposes I fired your demo packages/web/examples/ssr, disabled javascript in the browser and navigated to localhost:3000.

First page renders just fine, but pagination buttons do not function at all until I enable js back. It would be nice, if pagination buttons work without js and with URLParams enabled in ResultCard

Reactivesearch version: dev branch

Browser: all

Issue Type: Enhancement

Platform: Web

Description: Add a new prop onFilterCleared to SelectedFilters that will be invoked with the value of the selected filter being cleared or it will indicate that all filters have been cleared.

Reactivesearch version: 2.6.2

Closes #2127

• Fixes a security vulnerability by replacing xdate with dayjs
• Affects web and native

Reactivecore PR

📔 Notion

Test Scenarios

Web

• [x] Test with DatePicker component [Loom preview](https://www.loom.com/share/bac7429f300d4c98a6a4d652c811b551)
• [x] Test with DateRange component [Loom preview](https://www.loom.com/share/bac7429f300d4c98a6a4d652c811b551)
• [x] Test with RangeInput (Test with/without queryFormat) [(Loom preview)](https://www.loom.com/share/4729b4e215064680abed33e44df99380)
• [x] Test with RangeSlider (Test with/without queryFormat) ([Loom preview](https://www.loom.com/share/f131b36d106441a3bd376c4431365172))
• [x] SavedSearch example ([Loom preview](https://www.loom.com/share/a80618631ec74da8b0245c62fd7420a2))

Native:

• [x] DatePicker and DateRange [Loom preview](https://www.loom.com/share/09ce0967494b4d3385bdd9059a19afa1)

PR Type feat

Description The PR adds the setPage method in the render prop of the ReactiveList component to allow custom pagination. Addresses https://github.com/appbaseio/reactivesearch/issues/2121.

https://github.com/appbaseio/Docs/pull/364

Affected Projects React "^18.2.0" / Next "^13.0.6"

Library Version: x.y.z "^3.43.6"

Describe the bug Refreshing search results gives hydration error. Following a link to results with urlparams also leads to hydration error. DataSearch and ToggleButton filters all have urlparams set to true.

To Reproduce Refresh search result page or follow a link to results (e.g.: "http://localhost:3000/search?searchbox="testing")

Expected behavior

The results page shows as normal without error, following the urlparams

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Bumps qs from 6.7.0 to 6.11.0.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.