Overview
In this guide, we will see how to add a new page to a search UI created through the UI builder.
Pre-requisite: Create a Search UI
You can follow this 👇🏻 step-by-step tutorial to build a new Search UI, incase you already don't have one.
Now that we have a Search UI, Let's begin adding a route!! 🏎
Adding a new route
Code Snippets
Step 4: Add "hello-world" page key under the "pages" JSON object
"hello-world": "/hello-world"
Step 6: Create a new page "HelloWorld.js" under "src > pages" directory
import React from 'react';
const HelloWorld = () => {
return <h1>Hello from new page! 👋🏻</h1>;
}
export default HelloWorld;
Step 7: Import HelloWorld.js from src/pages/ in App.js
import HelloWorld from './pages/HelloWorld';
Step 8: Add a new route '/hello-world' to "App.js" that renders "HelloWorld.js"
<Route path="/hello-world">
<HelloWorld />
</Route>
Step 29: Add a new route '/hello-world' to "App.js" that renders "HelloWorld.js"
import React, { useState } from "react";
import { ReactiveBase, SearchBox } from "@appbaseio/reactivesearch";
import get from "lodash.get";
import { getSearchPreferences, defaultPreferences } from "../utils";
import { ResultsLayoutByCategory } from "@appbaseio/enterprise-search-ui";
import { Col, Row } from "antd";
import { css } from "@emotion/core";
import Filters from "../components/Filters";
const HelloWorld = () => {
const [state, setState] = useState({
searchAppState: {
search_results: "",
search_facets: {}
}
});
const isMobile = () => {
return window.innerWidth <= 768;
};
const preferences = getSearchPreferences();
const pageSettings = get(preferences, "pageSettings", {});
const pageEndpoint = get(
pageSettings,
`pages.${pageSettings.currentPage}.indexSettings.endpoint`
);
const index = get(preferences, "appbaseSettings.index");
const credentials = get(preferences, "appbaseSettings.credentials");
const url = get(preferences, "appbaseSettings.url");
const theme = get(
preferences,
"themeSettings.rsConfig",
defaultPreferences.themeSettings.rsConfig
);
const componentSettings = get(
pageSettings,
`pages.${pageSettings.currentPage}.componentSettings`,
{}
);
const backend = get(preferences, "backend", "");
const isFusion = backend === "fusion";
const globalFusionSettings = get(preferences, "fusionSettings", {});
const pageFusionSettings = get(
pageSettings,
`pages.${pageSettings.currentPage}.indexSettings.fusionSettings`
);
const fusionSettings = {
...globalFusionSettings,
...pageFusionSettings
};
const resultSettings = get(
componentSettings,
"result",
get(preferences, "resultSettings", {})
);
const transformRequest = isFusion
? (props) => {
if (Object.keys(fusionSettings).length) {
const newBody = JSON.parse(props.body);
newBody.metadata = {
app: fusionSettings.app,
profile: fusionSettings.profile,
suggestion_profile: fusionSettings.searchProfile,
sponsored_profile: get(fusionSettings, "meta.sponsoredProfile", "")
};
// eslint-disable-next-line
props.body = JSON.stringify(newBody);
}
return props;
}
: undefined;
let newProps = {};
const sortOptionSelector = get(resultSettings, "sortOptionSelector", []);
if (sortOptionSelector && sortOptionSelector.length) {
newProps = {
sortOptions: get(resultSettings, "sortOptionSelector")
};
}
const searchSettings = get(
componentSettings,
"search",
get(preferences, "searchSettings", {})
);
const searchStyles = ({ titleColor }) => css`
.section-header > h3 {
margin: 8px 0;
color: ${titleColor};
font-size: 16px;
}
`;
let valueFields = ["term_s"];
const defaultFields = get(resultSettings, "fields", {});
if (defaultFields.title.dataField) {
valueFields = [...valueFields, defaultFields.title.dataField];
} else if (defaultFields.description.dataField) {
valueFields = [...valueFields, defaultFields.description.dataField];
}
const searchIcon = get(searchSettings, "searchButton.icon", "");
const currency = get(
preferences,
"globalSettings.currency",
defaultPreferences.globalSettings.currency
);
const themeType = get(
preferences,
"themeSettings.type",
defaultPreferences.themeSettings.type
);
const exportType = get(
preferences,
"exportSettings.type",
defaultPreferences.exportType
);
const getFontFamily = () => {
const receivedFont = get(theme, "typography.fontFamily", "");
let fontFamily = "";
if (receivedFont && receivedFont !== "default") {
fontFamily = receivedFont; // eslint-disable-line
}
return fontFamily ? { fontFamily } : {};
};
const handleAppStateChange = (key, val) => {
const { searchAppState } = state;
const newSearchAppState = {
...JSON.parse(JSON.stringify(searchAppState))
};
if (key === "search") newSearchAppState.search_results = val;
else if (Array.isArray(val)) {
val.forEach((facet) => {
newSearchAppState.search_facets[facet] = true;
});
Object.keys(newSearchAppState.search_facets).forEach((facet) => {
if (!val.includes(facet))
newSearchAppState.search_facets[facet] = false;
});
}
setState({
searchAppState: newSearchAppState
});
};
return (
<ReactiveBase
endpoint={pageEndpoint}
app={index}
url={url}
credentials={credentials}
theme={theme}
enableAppbase
appbaseConfig={{
recordAnalytics: true
}}
preferences={getSearchPreferences()}
initialQueriesSyncTime={100}
transformRequest={transformRequest}
>
<SearchBox
preferencesPath={`pageSettings.pages.${pageSettings.currentPage}.componentSettings.search`}
componentId="search"
filterLabel="Search"
className="search"
debounce={100}
placeholder={"Enter search query"}
iconPosition="right"
icon={
searchIcon ? (
<img
src={searchIcon}
alt="Search Icon"
width="20px"
height="20px"
/>
) : (
searchIcon
)
}
URLParams
style={{
margin: 20,
position: "sticky",
top: "10px",
zIndex: 1000
}}
css={searchStyles(theme.colors)}
popularSuggestionsConfig={{
size: 3,
sectionLabel: '<h3 class="section-label">Popular Suggestions</h3>'
}}
recentSuggestionsConfig={{
size: 3,
sectionLabel: '<h3 class="section-label">Recent Suggestions</h3>'
}}
enableIndexSuggestions
indexSuggestionsConfig={{
sectionLabel: '<h3 class="section-label">Index Suggestions</h3>',
size: 3,
valueFields
}}
size={6}
showDistinctSuggestions
/>
<Row gutter={2}>
<Col span={6}>
<Filters
theme={theme}
isMobile={isMobile}
currency={currency}
themeType={themeType}
exportType={exportType}
preferences={preferences}
getFontFamily={getFontFamily()}
pageSettings={pageSettings}
handleAppStateChange={handleAppStateChange}
searchAppState={state.searchAppState}
/>
</Col>
<Col span={18}>
<ResultsLayoutByCategory
preferences={preferences}
toggleFilters={false}
componentProps={{
...newProps,
highlight: get(resultSettings, "resultHighlight", false)
}}
/>
</Col>
</Row>
</ReactiveBase>
);
};
export default HelloWorld;