diff --git a/gradle/changelog/keep_quick_search.yaml b/gradle/changelog/keep_quick_search.yaml new file mode 100644 index 0000000000..9fc761f8e3 --- /dev/null +++ b/gradle/changelog/keep_quick_search.yaml @@ -0,0 +1,2 @@ +- type: fixed + description: Keep quicks earch input on page reload ([#1788](https://github.com/scm-manager/scm-manager/pull/1788)) diff --git a/scm-ui/ui-webapp/src/containers/OmniSearch.tsx b/scm-ui/ui-webapp/src/containers/OmniSearch.tsx index 0dedf8f18d..2bd29ef207 100644 --- a/scm-ui/ui-webapp/src/containers/OmniSearch.tsx +++ b/scm-ui/ui-webapp/src/containers/OmniSearch.tsx @@ -32,6 +32,7 @@ import { Button, HitProps, Notification, RepositoryAvatar, useStringHitFieldValu import SyntaxHelp from "../search/SyntaxHelp"; import SyntaxModal from "../search/SyntaxModal"; import SearchErrorNotification from "../search/SearchErrorNotification"; +import queryString from "query-string"; const Field = styled.div` margin-bottom: 0 !important; @@ -282,31 +283,39 @@ const useShowResultsOnFocus = () => { }; }; -const useSearchType = () => { +const useSearchParams = () => { const location = useLocation(); const pathname = location.pathname; - let type = "repository"; + let searchType = "repository"; + let initialQuery = ""; if (pathname.startsWith("/search/")) { const path = pathname.substring("/search/".length); const index = path.indexOf("/"); if (index > 0) { - type = path.substring(0, index); + searchType = path.substring(0, index); } else { - type = path; + searchType = path; } + + const queryParams = queryString.parse(location.search); + initialQuery = queryParams.q || ""; } - return type; + + return { + searchType, + initialQuery, + }; }; const OmniSearch: FC = () => { - const [query, setQuery] = useState(""); + const { searchType, initialQuery } = useSearchParams(); + const [query, setQuery] = useState(initialQuery); const debouncedQuery = useDebounce(query, 250); const { data, isLoading, error } = useSearch(debouncedQuery, { type: "repository", pageSize: 5 }); const { showResults, hideResults, ...handlers } = useShowResultsOnFocus(); const [showHelp, setShowHelp] = useState(false); const history = useHistory(); - const searchType = useSearchType(); const openHelp = () => setShowHelp(true); const closeHelp = () => setShowHelp(false);