1
1
mirror of https://github.com/pawelmalak/flame.git synced 2024-12-24 10:42:40 +03:00

Search bar bug fixes

This commit is contained in:
Paweł Malak 2021-10-13 13:31:01 +02:00
parent 6f44200a3c
commit e5cba605fa
4 changed files with 38 additions and 19 deletions
CHANGELOG.md
client/src
components/SearchBar
store/reducers
utility

View File

@ -1,3 +1,7 @@
### v1.7.1 (TBA)
- Fixed search action not being triggered by Numpad Enter
- Fixed search bar not redirecting to valid URL if it starts with capital letter ([#118](https://github.com/pawelmalak/flame/issues/118))
### v1.7.0 (2021-10-11) ### v1.7.0 (2021-10-11)
- Search bar will now redirect if valid URL or IP is provided ([#67](https://github.com/pawelmalak/flame/issues/67)) - Search bar will now redirect if valid URL or IP is provided ([#67](https://github.com/pawelmalak/flame/issues/67))
- Users can now add their custom search providers ([#71](https://github.com/pawelmalak/flame/issues/71)) - Users can now add their custom search providers ([#71](https://github.com/pawelmalak/flame/issues/71))

View File

@ -27,6 +27,11 @@ const SearchBar = (props: ComponentProps): JSX.Element => {
inputRef.current.focus(); inputRef.current.focus();
}, []); }, []);
const clearSearch = () => {
inputRef.current.value = '';
setLocalSearch('');
};
const searchHandler = (e: KeyboardEvent<HTMLInputElement>) => { const searchHandler = (e: KeyboardEvent<HTMLInputElement>) => {
const { isLocal, search, query, isURL, sameTab } = searchParser( const { isLocal, search, query, isURL, sameTab } = searchParser(
inputRef.current.value inputRef.current.value
@ -36,31 +41,39 @@ const SearchBar = (props: ComponentProps): JSX.Element => {
setLocalSearch(search); setLocalSearch(search);
} }
if (e.code === 'Enter') { if (e.code === 'Enter' || e.code === 'NumpadEnter') {
if (!query.prefix) { if (!query.prefix) {
// Prefix not found -> emit notification
createNotification({ createNotification({
title: 'Error', title: 'Error',
message: 'Prefix not found', message: 'Prefix not found',
}); });
} else if (isURL) { } else if (isURL) {
// URL or IP passed -> redirect
const url = urlParser(inputRef.current.value)[1]; const url = urlParser(inputRef.current.value)[1];
redirectUrl(url, sameTab); redirectUrl(url, sameTab);
} else if (isLocal) { } else if (isLocal) {
// Local query -> filter apps and bookmarks
setLocalSearch(search); setLocalSearch(search);
} else { } else {
// Valid query -> redirect to search results
const url = `${query.template}${search}`; const url = `${query.template}${search}`;
redirectUrl(url, sameTab); redirectUrl(url, sameTab);
} }
} else if (e.code === 'Escape') {
clearSearch();
} }
}; };
return ( return (
<input <div className={classes.SearchContainer}>
ref={inputRef} <input
type="text" ref={inputRef}
className={classes.SearchBar} type="text"
onKeyUp={(e) => searchHandler(e)} className={classes.SearchBar}
/> onKeyUp={(e) => searchHandler(e)}
/>
</div>
); );
}; };

View File

@ -7,20 +7,22 @@ export interface State {
const initialState: State = { const initialState: State = {
theme: { theme: {
name: 'blues', name: 'tron',
colors: { colors: {
background: '#2B2C56', background: '#242B33',
primary: '#EFF1FC', primary: '#EFFBFF',
accent: '#6677EB' accent: '#6EE2FF',
} },
} },
} };
const themeReducer = (state = initialState, action: Action) => { const themeReducer = (state = initialState, action: Action) => {
switch (action.type) { switch (action.type) {
case ActionTypes.setTheme: return { theme: action.payload }; case ActionTypes.setTheme:
default: return state; return { theme: action.payload };
default:
return state;
} }
} };
export default themeReducer; export default themeReducer;

View File

@ -20,7 +20,7 @@ export const searchParser = (searchQuery: string): SearchResult => {
// Check if url or ip was passed // Check if url or ip was passed
const urlRegex = const urlRegex =
/^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/; /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/i;
result.isURL = urlRegex.test(searchQuery); result.isURL = urlRegex.test(searchQuery);