siddharthlatest

SearchBar UI Component

Create a React component (say SearchBar) which creates a searchbar UI that searches on a provided dataset and displays the matches as suggestions.

The component's usage should look as follows:

<SearchBar
  data={[{..}, {..}]}
 fields={["email", "company"]}

siddharthlatest

[
    {
        "avatar": "https://avatars1.githubusercontent.com/u/1449905?v=4",
        "created": "2014-02-15T16:45:10Z",
        "description": "Flappy Bird hack using Reinforcement Learning",
        "forks": 207,
        "fullname": "SarvagyaVaish~FlappyBirdRL",
        "language": "JavaScript",
        "name": "FlappyBirdRL",
        "owner": "SarvagyaVaish",

siddharthlatest

cat <<EOF | kubectl apply -f -
apiVersion: apps/v1
kind: Deployment
metadata:
  annotations:
    deployment.kubernetes.io/revision: "1"
  generation: 1
  name: arc
spec:
  selector:

siddharthlatest

Comparing baseline 
  Race ID: es-raw 
  Race timestamp: 2020-06-15 16:35:44 
  Challenge: append-no-conflicts 
  Car: external 

with contender 
  Race ID: arc_7.28.0_retest_notemplate_logging_on 
  Race timestamp: 2020-06-27 10:51:57 

siddharthlatest

curl --location --request POST "https://scalr.api.appbase.io/RESTAPI/users/_search" \
  --header "Authorization: Basic YjdqV2hVSjhYOjcyYmI2ZmMxLWRkZjItNDU5Zi1iNGM3LWU2NzgwNjQyM2MyZA==" \
  --header "Content-Type: application/json" \
  --data '{
    "size": 0,
    "aggs": {
      "my-terms-agg": {
        "terms": {
          "field": "name"
        }

siddharthlatest

<ResultCard
  componentId="results"
  dataField="original_title"
  pagination={true}
  paginationAt="bottom"
  pages={5}
  size={12}
  Loader="Loading..."
  showResultStats={true}
  noResults="No results were found..."

siddharthlatest

<SingleRange 
    componentId= "revenue-list"
    dataField= "ran_revenue"
    className= "revenue-filter"
    data={[
      { start: 0, end: 1000, label: "< 1M" },
      { start: 1000, end: 10000, label: "1M-10M" },
      { start: 10000, end: 500000, label: "10M-500M" },
      { start: 500000, end: 1000000, label: "500M-1B" },
      { start: 1000000, end: 10000000, label: "> 1B" }

siddharthlatest

<MultiList     
    componentId="genres-list"
    dataField="genres_data.raw"
    className="genres-filter"
    size={20}
    sortBy="asc"
    queryFormat="or"
    selectAllLabel="All Genres"
    showCheckbox={true}
    showCount={true}

siddharthlatest

.navbar {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  background-color: #0B6AFF;
  color: #fff;

siddharthlatest

import React, { Component } from 'react';
import {
  ReactiveBase,
  DataSearch,
  SingleRange,
  ResultCard
} from '@appbaseio/reactivesearch';
import './App.css';

class App extends Component {