OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Now only the search suggestions are handled asynchronously.

Browse Source 
This commit removes the async wrapper in the useEffect again. Instead the search suggestions are stored in their own state and the `quicklaunch` results show the last suggestions until they are updated.

This allows the search for services be fast even with a slow internet connection.
This commit is contained in:
Flo2410 2024-01-26 22:20:43 +00:00
parent cc73839874
commit 769beb7dc6
No known key found for this signature in database
GPG Key ID: 8ECB00AC5216DC7F
1 changed files with 54 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/components/quicklaunch.jsx
View File

@ -89,67 +89,73 @@ export default function QuickLaunch({
} }
} }
const [searchSuggestions, setSearchSuggestions] = useState([])
useEffect(() => { useEffect(() => {
(async () => { if (searchString.length === 0) setResults([]);
if (searchString.length === 0) setResults([]); else {
else { let newResults = servicesAndBookmarks.filter((r) => {
let newResults = servicesAndBookmarks.filter((r) => { const nameMatch = r.name.toLowerCase().includes(searchString);
const nameMatch = r.name.toLowerCase().includes(searchString); let descriptionMatch;
let descriptionMatch; if (searchDescriptions) {
if (searchDescriptions) { descriptionMatch = r.description?.toLowerCase().includes(searchString);
descriptionMatch = r.description?.toLowerCase().includes(searchString); r.priority = nameMatch ? 2 * +nameMatch : +descriptionMatch; // eslint-disable-line no-param-reassign
r.priority = nameMatch ? 2 * +nameMatch : +descriptionMatch; // eslint-disable-line no-param-reassign }
} return nameMatch || descriptionMatch;
return nameMatch || descriptionMatch; });
if (searchDescriptions) {
newResults = newResults.sort((a, b) => b.priority - a.priority);
}
if (searchProvider) {
newResults.push({
href: searchProvider.url + encodeURIComponent(searchString),
name: `${searchProvider.name ?? t("quicklaunch.custom")} ${t("quicklaunch.search")}`,
type: "search",
}); });
if (searchDescriptions) { if (!hideSearchSuggestions) {
newResults = newResults.sort((a, b) => b.priority - a.priority); fetch(`/api/searchSuggestion?query=${encodeURIComponent(searchString)}&providerName=${searchProvider.name}`).then(async (searchSuggestionResult) => {
} const newSearchSuggestions = (await searchSuggestionResult.json())[1];
if (searchProvider) {
newResults.push({
href: searchProvider.url + encodeURIComponent(searchString),
name: `${searchProvider.name ?? t("quicklaunch.custom")} ${t("quicklaunch.search")}`,
type: "search",
});
if (!hideSearchSuggestions) {
const searchSuggestionResult = await fetch(`/api/searchSuggestion?query=${encodeURIComponent(searchString)}&providerName=${searchProvider.name}`);
const searchSuggestion = (await searchSuggestionResult.json())[1];
// Check if there is a search suggestion // Check if there is a search suggestion
if (searchSuggestion) { if (newSearchSuggestions) {
// Restrict the searchSuggestion to 4 entries // Restrict the searchSuggestion to 4 entries
if (searchSuggestion.length - 4 > 0) { if (newSearchSuggestions.length - 4 > 0) {
searchSuggestion.splice(-(searchSuggestion.length-4)); newSearchSuggestions.splice(-(newSearchSuggestions.length-4));
} }
newResults = newResults.concat(searchSuggestion.map((suggestion)=>({ // Save the new search suggestions in their state.
href: searchProvider.url + encodeURIComponent(suggestion), setSearchSuggestions(newSearchSuggestions);
name: suggestion,
type: "search",
})));
} }
} }).catch(() => {
} // If there is an error, just ignore it. There just will be no search suggestions.
if (!hideVisitURL && url) {
newResults.unshift({
href: url.toString(),
name: `${t("quicklaunch.visit")} URL`,
type: "url",
}); });
}
setResults(newResults); // Show search suggestions from their state. This will show the "old" suggestions until they are updated.
newResults = newResults.concat(searchSuggestions.map((suggestion)=>({
if (newResults.length) { href: searchProvider.url + encodeURIComponent(suggestion),
setCurrentItemIndex(0); name: suggestion,
type: "search",
})));
} }
} }
})()
}, [searchString, servicesAndBookmarks, searchDescriptions, hideVisitURL, hideSearchSuggestions, searchProvider, url, t]); if (!hideVisitURL && url) {
newResults.unshift({
href: url.toString(),
name: `${t("quicklaunch.visit")} URL`,
type: "url",
});
}
setResults(newResults);
if (newResults.length) {
setCurrentItemIndex(0);
}
}
}, [searchString, servicesAndBookmarks, searchDescriptions, hideVisitURL, hideSearchSuggestions, searchSuggestions, searchProvider, url, t]);
const [hidden, setHidden] = useState(true); const [hidden, setHidden] = useState(true);
useEffect(() => { useEffect(() => {