modmapper-web/components/SearchBar.tsx

175 lines
4.7 KiB
TypeScript
Raw Normal View History

import { useCombobox } from "downshift";
import React, { useEffect, useState, useRef } from "react";
import { useRouter } from "next/router";
2022-01-25 05:52:52 +00:00
import MiniSearch, { SearchResult } from "minisearch";
import useSWRImmutable from "swr/immutable";
import styles from "../styles/SearchBar.module.css";
import { jsonFetcher } from "../lib/api";
type Props = {
counts: Record<number, [number, number, number]> | null;
2022-02-27 06:17:52 +00:00
sidebarOpen: boolean;
};
interface Mod {
name: string;
id: number;
}
2022-02-07 03:55:58 +00:00
let cells = [];
for (let x = -77; x < 76; x++) {
for (let y = -50; y < 45; y++) {
const id = `${x},${y}`;
cells.push({ id, name: `Cell ${id}`, x, y });
}
}
const cellSearch = new MiniSearch({
fields: ["id"],
storeFields: ["id", "name", "x", "y"],
tokenize: (s) => [s.replace(/(cell\s?)|\s/gi, "")],
2022-02-07 03:55:58 +00:00
searchOptions: {
fields: ["id"],
prefix: true,
fuzzy: false,
},
});
cellSearch.addAll(cells);
2022-02-27 06:17:52 +00:00
const SearchBar: React.FC<Props> = ({ counts, sidebarOpen }) => {
const router = useRouter();
2022-02-07 03:55:58 +00:00
const modSearch = useRef<MiniSearch<Mod> | null>(
2022-01-25 05:52:52 +00:00
null
) as React.MutableRefObject<MiniSearch<Mod>>;
const { data, error } = useSWRImmutable(
`https://mods.modmapper.com/mod_search_index.json`,
(_) => jsonFetcher<Mod[]>(_)
);
useEffect(() => {
2022-02-07 03:55:58 +00:00
if (data && !modSearch.current) {
modSearch.current = new MiniSearch({
2022-01-25 05:52:52 +00:00
fields: ["name"],
storeFields: ["name", "id"],
searchOptions: {
fields: ["name"],
fuzzy: 0.2,
2022-02-07 15:43:51 +00:00
prefix: true,
2022-01-25 05:52:52 +00:00
},
});
modSearch.current.addAll(data);
}
}, [data]);
const searchInput = useRef<HTMLInputElement | null>(null);
const [searchFocused, setSearchFocused] = useState<boolean>(false);
const [results, setResults] = useState<SearchResult[]>([]);
const {
isOpen,
getMenuProps,
getInputProps,
getComboboxProps,
highlightedIndex,
getItemProps,
reset,
} = useCombobox({
items: results,
itemToString: (item) => (item ? item.name : ""),
onInputValueChange: ({ inputValue }) => {
2022-02-07 03:55:58 +00:00
if (inputValue) {
let results: SearchResult[] = [];
if (
modSearch.current &&
!/(^cell\s?-?\d+\s?,?\s?-?\d*$)|(^-?\d+\s?,\s?-?\d*$)/i.test(
inputValue
)
) {
console.log("searching mods");
2022-02-07 03:55:58 +00:00
results = results.concat(
modSearch.current.search(inputValue).sort((resultA, resultB) => {
if (counts) {
const countA = counts[resultA.id];
const countB = counts[resultB.id];
2022-02-07 15:43:51 +00:00
const scoreA = resultA.score;
const scoreB = resultB.score;
if (countA && countB && scoreA && scoreB) {
if (scoreA === scoreB) {
return countB[2] - countA[2];
} else {
return scoreB - scoreA;
}
}
2022-02-07 03:55:58 +00:00
}
return 0;
})
);
}
results = results.concat(cellSearch.search(inputValue));
setResults(results.splice(0, 30));
}
},
onSelectedItemChange: ({ selectedItem }) => {
if (selectedItem) {
setSearchFocused(false);
if (selectedItem.x !== undefined && selectedItem.y !== undefined) {
2022-02-07 03:55:58 +00:00
router.push({
query: { cell: `${selectedItem.x},${selectedItem.y}` },
});
} else {
router.push({ query: { mod: selectedItem.id } });
}
if (searchInput.current) searchInput.current.blur();
reset();
}
},
});
return (
<>
<div
className={`${styles["search-bar"]} ${
searchFocused ? styles["search-bar-focused"] : ""
2022-02-27 06:17:52 +00:00
} ${sidebarOpen ? styles["search-bar-sidebar-open"] : ""}`}
{...getComboboxProps()}
>
<input
{...getInputProps({
type: "text",
placeholder: "Search mods or cells…",
onFocus: () => setSearchFocused(true),
onBlur: () => {
if (!isOpen) setSearchFocused(false);
},
disabled: !data,
ref: searchInput,
})}
/>
<ul
className={styles["search-results"]}
style={!isOpen ? { display: "none" } : {}}
{...getMenuProps()}
>
{isOpen &&
2022-02-07 03:55:58 +00:00
results.map((result, index) => (
<li
key={result.id}
{...getItemProps({ item: result, index })}
className={`${
highlightedIndex === index ? styles["highlighted-result"] : ""
}`}
>
{result.name}
</li>
))}
</ul>
</div>
</>
);
};
export default SearchBar;