Add additional help to quick search and an advanced search documentation page (#1757)

Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
This commit is contained in:
Konstantin Schaper
2021-08-09 12:07:28 +02:00
committed by GitHub
parent f2249cea73
commit ddd2fc1055
43 changed files with 1494 additions and 94 deletions

View File

@@ -22,11 +22,12 @@
* SOFTWARE.
*/
import { ApiResult, useIndexLinks } from "./base";
import { Link, QueryResult } from "@scm-manager/ui-types";
import { ApiResult, useIndexJsonResource, useIndexLinks } from "./base";
import { Link, QueryResult, SearchableType } from "@scm-manager/ui-types";
import { apiClient } from "./apiclient";
import { createQueryString } from "./utils";
import { useQueries, useQuery } from "react-query";
import { useEffect, useState } from "react";
export type SearchOptions = {
type: string;
@@ -46,6 +47,8 @@ export const useSearchTypes = () => {
.filter(isString);
};
export const useSearchableTypes = () => useIndexJsonResource<SearchableType[]>("searchableTypes");
export const useSearchCounts = (types: string[], query: string) => {
const searchLinks = useSearchLinks();
const queries = useQueries(
@@ -113,3 +116,31 @@ export const useSearch = (query: string, optionParam = defaultSearchOptions): Ap
}
);
};
const useObserveAsync = <D extends any[], R, E = Error>(fn: (...args: D) => Promise<R>, deps: D) => {
const [data, setData] = useState<R>();
const [isLoading, setLoading] = useState(false);
const [error, setError] = useState<E>();
useEffect(() => {
setLoading(true);
fn(...deps)
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, deps);
return { data, isLoading, error };
};
const supportedLanguages = ["de", "en"];
const pickLang = (language: string) => {
if (!supportedLanguages.includes(language)) {
return "en";
}
return language;
};
export const useSearchHelpContent = (language: string) =>
useObserveAsync((lang) => import(`./help/search/modal.${pickLang(lang)}`).then((module) => module.default), [language]);
export const useSearchSyntaxContent = (language: string) =>
useObserveAsync((lang) => import(`./help/search/syntax.${pickLang(lang)}`).then((module) => module.default), [language]);