New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feature] The search string as query parameters in the URL #345
Comments
Thank you @Drovosek01. It's great idea. I'll try to get this as one of the highest priority features, but I find it hard to find time to add features while a lot effort is going to getting stuff stable, so no timelines are promised :) |
12 days. Nevermind, Let me do it then |
insert this code next to const searchQuery = ref<string | undefined>();
onMounted(() => {
updateSearchQueryFromURL();
});
onUpdated(() => {
updateSearchQueryFromURL();
});
function updateSearchQueryFromURL() {
const urlParams = new URLSearchParams(window.location.search);
const searchParam = urlParams.get('s');
if (searchParam) {
searchQuery.value = searchParam;
updateFilter(searchParam);
}
} insert this code next to onMounted(updateOsFromURL);
onUpdated(updateOsFromURL);
function updateOsFromURL() {
const urlParams = new URLSearchParams(window.location.search);
const osParam = urlParams.get('os');
if (osParam) {
const matchingOs = allOses.value.find((os) => os.os === OperatingSystem[osParam as keyof typeof OperatingSystem]);
if (matchingOs) {
changeOs(matchingOs.os);
} else {
console.warn(`Invalid 'os' parameter: ${osParam}`); // Or handle the error as needed
}
}
} insert this code next to onMounted(updateRecommendationStatusFromURL);
onUpdated(updateRecommendationStatusFromURL);
function updateRecommendationStatusFromURL() {
const urlParams = new URLSearchParams(window.location.search);
const selectParam = urlParams.get('select');
if (selectParam) {
let recommendationStatusType: RecommendationStatusType | undefined;
switch (selectParam.toLowerCase()) {
case 'none':
recommendationStatusType = RecommendationStatusType.None;
break;
case 'standard':
recommendationStatusType = RecommendationStatusType.Standard;
break;
case 'strict':
recommendationStatusType = RecommendationStatusType.Strict;
break;
case 'all':
recommendationStatusType = RecommendationStatusType.All;
break;
default:
console.warn(`Invalid 'select' query parameter value: ${selectParam}`);
}
if (recommendationStatusType !== undefined) {
selectRecommendationStatusType(recommendationStatusType);
}
}
} The OS Query Parameters are based on enumerations that are defined in |
@plantindesk, thank you for the code, it's the first time front-end code is getting functional code from someone else ❤️ As you see, most of my time is going to fixing bugs and stability issues, so features get delayed, weeks/months sometimes years if there are no other contributions, so great to see this. Here are my thoughts:
I do not think that We should listen to URL changes using Navigation API like this: window.navigation.addEventListener('navigate', (event) => {
updateSearchQueryFromURL();
}) Let me know if I'm missing something.
Same thing, using Navigation API instead of onUpdated. As this logic used many times, we can create a custom hook like this to safely get current URL: function useCurrentUrl() {
const currentUrl = ref('');
onMounted(() => {
currentUrl.value = window.location.search;
})
const urlUpdater = () => {
currentUrl.value =window.location.search;
};
window.navigation.addEventListener('navigate', urlUpdater);
onUnmounted(() => {
window.navigation.removeEventListener('navigate', urlUpdater);
});
return readonly(currentUrl);
} This way other components can just use: const currentUrl = useCurrentUrl();
watch(currentUrl, (newUrl) => {
// Do their thing
}); This would be more reusable and reactive way. I blind coded this completely, this needs to be integrated. Another thing to consider is that we just not be reactive to URL changes, but we should change the URL on changes too. So the URL becomes dynamic. Would you like to create a PR for this? Then we can work on this instead of this issue. |
Length: Another consideration is the length of URLs. Naming:
What do you think? Verbose (collection, search) etc or one char query strings ( |
Ok Let me try using Navigation API as you said Also As you said
|
Preset instead of |
I think it will be convenient if you can save the string and search settings in the URL so that when you click on the URL, the necessary search query and its settings are displayed
For example:
For just search word "defender" will URL like https://privacy.sexy/?s=defender or https://privacy.sexy/?s=defender&os=all
For search word "defender" for Windows will URL like https://privacy.sexy/?s=defender&os=win or https://privacy.sexy/?s=defender&os=windows
For search word "defender" and select all results URL like https://privacy.sexy/?s=defender&select=all
etc
The text was updated successfully, but these errors were encountered: