I will preface this with stating this is my fourth day working on Node or React.js, so please bear with me.
I am building a custom, offline search function for Docusaurus 2. I have built a JSON index and created a function to search it with elasticlunr. I want to redirect to a separate results page, however I am having issues with the redirect despite trying to follow multiple examples. Here is my index.js for the SearchBar.
import React, {Component} from 'react';
import {Redirect} from 'react-router-dom';
import classnames from 'classnames';
import elasticlunr from 'elasticlunr';
let siteIndex = require('./siteIndex.json');
class Search extends Component {
constructor(props) {
super(props);
this.state = {
results: [],
term: '',
index: elasticlunr(function () {
this.setRef('id');
this.addField('title');
this.addField('body');
this.addField('url');
})
};
this.toggleSearchPressEnter = this.toggleSearchPressEnter.bind(this);
this.changeTerm = this.changeTerm.bind(this);
}
init() {
let siteIndexKeys = Object.keys(siteIndex);
siteIndexKeys.forEach(key => {
this.state.index.addDoc(siteIndex[key]);
});
}
changeTerm(e) {
this.setState({term: e.target.value});
}
toggleSearchPressEnter(e) {
if (e.key === "Enter") {
this.init();
let siteSearch = this.state.index.search(e.target.value, {}); // Empty dictionary here fixes the warning about using the default configuration because you didn't supply one!
let docs = this.state.index.documentStore.docs;
this.state.results = siteSearch.slice(0, 5).map(searchKey => docs[searchKey.ref]);
if (this.state.results.length > 0) {
this.renderRedirect();
}
}
}
renderRedirect() {
console.log("Go home!");
console.log(this.state.results.length);
console.log(this.state.results);
// window.location = "/"
<Redirect
to={{
pathname: '/',
state: { results: this.state.results }
}}
/>
}
render() {
return (
<div className="navbar__search" key="search-box">
<span
aria-label="expand searchbar"
role="button"
className={classnames('search-icon', {
'search-icon-hidden': this.props.isSearchBarExpanded,
})}
tabIndex={0}
/>
<input
id="search_input_react"
type="search"
placeholder="Search"
aria-label="Search"
className={classnames(
'navbar__search-input',
{'search-bar-expanded': this.props.isSearchBarExpanded},
{'search-bar': !this.props.isSearchBarExpanded},
)}
onKeyPress={this.toggleSearchPressEnter}
/>
</div>
);
}
}
export default Search;
Because we had issues redirecting to the results page with the results, I wanted to see if I could just go to the home page. I see the message "Go home!" in the browser console when the user hits enter on the search bar, but no redirect occurs. I have commented out the javascript redirect that does work if I comment out Redirect from renderRedirect().
I have tried adding a return() around the Redirect, but it does not seem to make any difference.
If you would like to reproduce the issue
npx @docusaurus/init@next init docs classic
npm run swizzle @docusaurus/theme-search-algolia SearchBar
Replace the contents of src/theme/SearchBar/index.js with the code that is the problem above.
To generate the JSON index:
generate-index.js
const fs = require('fs-extra');
const path = require('path');
const removeMd = require('remove-markdown');
let searchId = 0;
const searchDoc = {};
async function readAllFilesAndFolders(folder) {
try {
const topFilesAndFolders = fs.readdirSync(folder);
for (let i = 0; i < topFilesAndFolders.length; i++) {
const file = topFilesAndFolders[i];
const fileOrFolderPath = `${folder}/${file}`;
const stat = fs.lstatSync(fileOrFolderPath);
if (stat.isFile() && path.extname(fileOrFolderPath) === '.md') {
console.log(`Got Markdown File ${file}`);
fs.readFile(fileOrFolderPath, (err, data) => {
if (err) throw err;
const regex = /title: .*\n/g;
let search = data.toString().match(regex);
let docTitle = search[0].toString().replace("title: ", "");
console.log("doctitle: ", docTitle);
if (!docTitle) {
docTitle = file.replace('.md', '');
generateSearchIndexes(fileOrFolderPath, file, docTitle);
}
else {
generateSearchIndexes(fileOrFolderPath, file, docTitle);
}
});
} else if (stat.isDirectory()) {
console.log(`Got Directory ${file}, Started Looking into it`);
readAllFilesAndFolders(fileOrFolderPath, file);
}
}
} catch (error) {
console.log(error);
}
}
function generateSearchIndexes(fileOrFolderPath, file, docTitle) {
try {
let fileContent = fs.readFileSync(fileOrFolderPath, 'utf-8');
let body = removeMd(fileContent).replace(/^\s*$(?:\r\n?|\n)/gm, '');
let title = docTitle.trim();
let url = fileOrFolderPath
.replace('.md', '')
.trim();
searchDoc[file.replace('.md', '').toLowerCase()] = { id: searchId, title, body, url };
fs.writeFileSync('src/theme/SearchBar/siteIndex.json', JSON.stringify(searchDoc), 'utf-8');
searchId = searchId + 1;
} catch (error) {
console.log('Failed to generate fail:', error);
}
}
readAllFilesAndFolders('docs');
Once the JSON index is built from the default docs, the search can be attempted. I haven't made any other changes.
I've probably done something stupid and hopefully it is easily fixable, so please be merciful. I really did try. ;)
Using some guidance from Ajay, and playing around a little, I have a working solution.
import React, {Component} from 'react';
import {Redirect} from 'react-router';
import classnames from 'classnames';
import elasticlunr from 'elasticlunr';
let siteIndex = require('./siteIndex.json');
class Search extends Component {
constructor(props) {
super(props);
this.state = {
results: [],
term: '',
search: '',
index: elasticlunr(function () {
this.setRef('id');
this.addField('title');
this.addField('body');
this.addField('url');
})
};
this.toggleSearchPressEnter = this.toggleSearchPressEnter.bind(this);
this.changeTerm = this.changeTerm.bind(this);
}
init() {
let siteIndexKeys = Object.keys(siteIndex);
siteIndexKeys.forEach(key => {
this.state.index.addDoc(siteIndex[key]);
});
}
changeTerm(e) {
this.setState({term: e.target.value});
}
toggleSearchPressEnter(e) {
if (e.key === "Enter") {
this.init();
let searchTerm = e.target.value;
let siteSearch = this.state.index.search(searchTerm, {}); // Empty dictionary here fixes the warning about using the default configuration because you didn't supply one!
let docs = this.state.index.documentStore.docs;
let searchResults = siteSearch.slice(0, 5).map(searchKey => docs[searchKey.ref]);
this.setState({
results: searchResults,
search: searchTerm,
});
}
}
render() {
if (this.state.results.length >= 1) {
return <Redirect to={{
pathname: '/results',
state: {
results: this.state.results,
search: this.state.search
}
}} />
}
return (
<div className="navbar__search" key="search-box">
<span
aria-label="expand searchbar"
role="button"
className={classnames('search-icon', {
'search-icon-hidden': this.props.isSearchBarExpanded,
})}
tabIndex={0}
/>
<input
id="search_input_react"
type="search"
placeholder="Search"
aria-label="Search"
className={classnames(
'navbar__search-input',
{'search-bar-expanded': this.props.isSearchBarExpanded},
{'search-bar': !this.props.isSearchBarExpanded},
)}
onKeyPress={this.toggleSearchPressEnter}
/>
</div>
);
}
}
export default Search;