Simple reactive search

Guya-LTD · Dec 18, 2020 · 81f91c5 · 81f91c5
1 parent 477f602
commit 81f91c5
Show file tree

Hide file tree

Showing 5 changed files with 403 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -4,9 +4,11 @@
   "private": true,
   "homepage": "/shop",
   "dependencies": {
+    "@appbaseio/reactivesearch": "^3.13.1",
     "@bit/guya-ltd.gcss.atoms.button": "^0.0.7",
     "@bit/guya-ltd.gcss.atoms.link": "^0.0.6",
     "@bit/guya-ltd.gcss.atoms.search": "^0.0.2",
+    "@bit/guya-ltd.gcss.molecules.dropdown": "^0.0.1",
     "@bit/guya-ltd.gcss.molecules.hero": "^0.0.2",
     "@bit/guya-ltd.gcss.molecules.logo": "^0.0.1",
     "@bit/guya-ltd.gcss.molecules.nav": "^0.0.3",

diff --git a/src/pages/IndexPage.js b/src/pages/IndexPage.js
@@ -8,12 +8,15 @@ import Button from '@bit/guya-ltd.gcss.atoms.button';
 import Nav from '@bit/guya-ltd.gcss.molecules.nav';
 import Notification from '@bit/guya-ltd.gcss.molecules.notification';
 import Hero from '@bit/guya-ltd.gcss.molecules.hero';
+import Dropdown from '@bit/guya-ltd.gcss.molecules.dropdown';
 import {
     Search as SearchIcon,
     MenuOutline,
-    CloseOutline
+    CloseOutline,
+    Language
 } from 'react-ionicons-icon';
 import { Redirect, NavLink as RouterNavLink } from 'react-router-dom';
+import { NavLink } from 'react-router-i18n';
 import I18n from 'I18n';
 
 const Index = (props) => {
@@ -50,11 +53,27 @@ const Index = (props) => {
                     <Link theme="cornflower-blue" cls="link--nav-cornflower"><I18n t="sign_up" /></Link>
                     <Link theme="cornflower-blue" cls="link--nav-cornflower"><I18n t="login" /></Link>
                     <div className="divider-vr" />
-                    <a href="#" className="link nav-cornflower" style={{ marginLeft: "2px", verticalAlign: "-webkit-baseline-middle"}}>
+                    <a className='link link--xs link--light-gh theme-red' style={{marginLeft: "0px",  verticalAlign: "sub"}}>
+                        <Dropdown
+                            type="is-hoverable"
+                            trigger={
+                                <Language size="27px" fill="#858585" />
+                            }
+                            >
+                            <NavLink ignoreLocale to="/en" className="link link-md theme-read linkdropdown-item">
+                                English
+                            </NavLink>
+                            <NavLink ignoreLocale to="/am" className="link link-md theme-read linkdropdown-item">
+                                እማርኛ
+                            </NavLink>
+                        </Dropdown>
+                    </a>
+                    <a href="#" className="link nav-cornflower" style={{ marginLeft: "2px", verticalAlign: "bottom"}}>
                         <span>
                             <svg height="27px" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><circle cx='176' cy='416' r='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><circle cx='400' cy='416' r='16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' d='M48 80h64l48 272h256'/><path d='M160 288h249.44a8 8 0 007.85-6.43l28.8-144a8 8 0 00-7.85-9.57H128' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/></svg>
                         </span>
                     </a>
+
                     <Button theme='cornflower-blue' variant="primary">Sell</Button>
                 </span> 
     }

diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { ReactiveBase, DataSearch, ReactiveList, CategorySearch } from '@appbaseio/reactivesearch';
+
+const SearchPage = (props) => {
+    return(
+        <ReactiveBase
+            app="kibana_sample_data_ecommerce"
+            url="http://127.0.0.1:50000/"
+        >
+        // other components will go here.
+        <div>Hello ReactiveSearch!</div>
+        <CategorySearch
+            componentId="searchbox"
+            dataField="customer_full_name"
+            categoryField="email"
+            placeholder="Search for cars"
+        />
+
+        <ReactiveList
+            componentId="SearchResult"
+            react={{
+                and: ['customer_first_name', 'customer_last_name'],
+            }}
+            renderItem={res => <div>{res.customer_full_name}</div>}
+        />
+    </ReactiveBase>
+    )
+}
+
+export default SearchPage;
diff --git a/src/routes/ServiceRoute.js b/src/routes/ServiceRoute.js
@@ -8,11 +8,13 @@ import {
 import Error404Page from 'pages/Error404Page';
 import Error500Page from 'pages/Error500Page';
 import IndexPage from 'pages/IndexPage';
+import SearchPage from 'pages/SearchPage';
 
 const ServiceRoute = () => (
     <Router basename={process.env.PUBLIC_URL}>
         <Switch>
-            <Route exact path='/' component={IndexPage} />
+            <Route exact path="/:locale(en|am)?" component={IndexPage} />
+            <Route exact path="/:locale(en|am)?/search" component={SearchPage} />
             <Route path="/:locale(en|am)?/error" component={Error500Page} />
             <Route path="*" component={Error404Page} />
         </Switch>