Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 79x 23x 63x 63x 23x 23x 63x 63x 23x 3x 3x 3x 7x 3x 3x 3x 3x 3x 23x 4x 4x 4x 1x 1x 3x 3x 3x | import Fuse from "fuse.js";
import ReactDOMServer from "react-dom/server";
import { FAQContentType, QuestionAnswer } from "@/features/support/SupportMockContent";
import { generateBoldAnswerJSX } from "./boldSearchResults";
import Search from "./searchBarUI";
interface SearchContentProps {
placeholderText: string;
supportContent: FAQContentType[];
isSearching: boolean;
setSearchResults: (searchResults: FAQContentType[], isSearching: boolean) => void;
}
const SearchContent = ({
supportContent,
setSearchResults,
isSearching,
placeholderText,
}: SearchContentProps) => {
const removeTags = (jsxElement: JSX.Element) => {
const text = ReactDOMServer.renderToStaticMarkup(jsxElement);
return text.replace(/(<([^>]+)>)/gi, "");
};
const searchAbleContent = supportContent.flatMap(({ qanda }) =>
qanda.map(({ question, answerJSX, anchorText }) => {
const answer = removeTags(answerJSX);
return { question: question, answer: answer, anchorText };
}),
);
const fuse = new Fuse(searchAbleContent, {
includeScore: true,
keys: ["question", "answer"],
findAllMatches: true,
includeMatches: true,
threshold: 0.1,
minMatchCharLength: 2,
distance: 1000000,
});
function reorderSupportContent(supportContent: FAQContentType[], searchResults, searched) {
const contentMap = new Map();
supportContent.forEach((section) => {
section.qanda.forEach((q) => {
contentMap.set(q.anchorText, { ...q, sectionTitle: section.sectionTitle });
});
});
const formatedSearchResults = searchResults
.map((result) => {
const resultsInOgFormat: QuestionAnswer = contentMap.get(result.item.anchorText);
resultsInOgFormat.answerJSX = generateBoldAnswerJSX(searched, resultsInOgFormat.answerJSX);
return resultsInOgFormat;
})
.filter(Boolean);
return [{ sectionTitle: `Search results for "${searched}"`, qanda: formatedSearchResults }];
}
const handleSearch = (s: string) => {
Eif (s.length) {
const searchResults = fuse.search(s);
if (searchResults.length === 0) {
setSearchResults([{ sectionTitle: `No matches found for "${s}"`, qanda: [] }], true);
return;
}
const formatedSearchResults = reorderSupportContent(supportContent, searchResults, s);
setSearchResults(formatedSearchResults, true);
return;
}
};
return (
<Search
handleSearch={handleSearch}
placeholderText={placeholderText}
isSearching={isSearching}
/>
);
};
export default SearchContent;
|