Building a basic UI using the search tool elasticsearch -reactive search

Building a basic UI using the search tool elasticsearch -reactive search

The last time we did this, we launched elastic search.The actual reactivesearch code example is shown below.

import React, {Component} from 'react';
import {DataSearch, ReactiveBase, ReactiveList, ResultList, SelectedFilters} from '@appbaseio/reactivesearch';
import './App.css';

const { ResultListWrapper } = ReactiveList;

class App extends Component {
    render() {
        return (
            <div className="main-container">
                <ReactiveBase
                    app="データベース名"    ←
                    url="http://localhost:9200"  ←
                >
                    <DataSearch
                        componentId="title"　←
                        dataField={["入力データのフィールド名"]}  ←
                        queryFormat="and"
                    />
                    <SelectedFilters/>
                    <ReactiveList
                        componentId="resultLists" ←
                        dataField="出力データのフィールド名" ←
                        size={10}
                        pagination={true}
                        react={{
                            "and": ["title"]　←
                        }}
                    >
                        {({data}) => (
                            <ResultListWrapper>
                                {
                                    data.map(item => (
                                        <ResultList key={item._id}>
                                            <ResultList.Content>
                                                <ResultList.Title
                                                    dangerouslySetInnerHTML={{
                                                        __html: item."field name".    ←
                                                    }}
                                                />
                                            </ResultList.Content>
                                        </ResultList>
                                    ))
                                }
                            </ResultListWrapper>
                        )}
                    </ReactiveList>
                </ReactiveBase>
            </div>
        );
    }
}

export default App;

Before running the program, configure CORS settings on the elastcisearch side. (Set it in the configuration file elastic.yml in the elasticsearch folder)

http.cors.enabled: true
http.cors.allow-origin: "*"

After setting the above, you should be able to see the input box and the result data on your web browser (localhost:3000). If you see only the box but not the result screen, elastcisearch may not be working properly, the index name may not be set properly, or the web communication (CORS, etc.) may not be working properly.

As for the structure of the code, import to introduce the library. In this case, React, reactiveserach, and CSS) Next, place React’s drawing class app. React components are represented in an HTML-like structure called <ReactiveBase> and <JSX>, with <ReactiveBase> at the top as the main component. It wraps all reacticesearch components, and is used in the following way.

<ReactiveBase
  app="appname"
  credentials="abcdef123:abcdef12-ab12-ab12-ab12-abcdef123456"
>
    <Component1 .. />
    <Component2 .. />
</ReactiveBase>

This module is used to connect to elasticsearch and to set the overall theme.

The components that go into it (Component1 in the above code example, etc.) include the <DataSearch> component, which is the search part of Main (the basic usage is as follows), the

<DataSearch
  componentId="SearchSensor"
  dataField={["group_venue", "group_city"]}
/>

Although not introduced in this code, there is a LIST Component represented by <SingleList>, which is responsible for filtering data, and a Range Component represented by <singleRange>.

In addition, there is a ResultComponent, such as <ReactiveList> and <ResultList>, which displays the result as a component placed behind it.

The basic structure of <ReactiveList> is as follows

<ReactiveList
    componentId="SearchResult"
    react={{
        "and": ["CitySensor", "SearchSensor"]    }}
    renderItem={(res) => <div>{res.title}</div>}
/>

The basic structure of <ResultList> is as follows.

<ReactiveList
    react={{
        "and": ["PriceFilter", "SearchFilter"]    }}
    componentId="SearchResult"
>
    {({ data, error, loading, ... }) => (
        <ResultListWrapper>
            {
                data.map(item => (
                    <ResultList key={item._id}>
                        <ResultList.Image src={item.image} />
                        <ResultList.Content>
                            <ResultList.Title
                                dangerouslySetInnerHTML={{
                                    __html: item.original_title
                                }}
                            />
                            <ResultList.Description>
                                <div>
                                    <div>by {item.authors}</div>
                                    <div>
                                        ({item.average_rating} avg)
                                    </div>
                                </div>
                                <span>
                                    Pub {item.original_publication_year}
                                </span>
                            </ResultList.Description>
                        </ResultList.Content>
                    </ResultList>
                ))
            }
        </ResultListWrapper>
    )}
</ReactiveList>

At this point, you can connect to Elasticsearch and configure basic full-text search and display results.

In the next article, we will discuss more detailed filtering and CSS to improve the overall appearance.