fix: Add base field to search worker api

3y3 · 3y3 · commit 08034fb1dd1d · 2025-08-22T00:16:47.000+03:00
diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
@@ -134,7 +134,7 @@ export function App(props: DocInnerProps): ReactElement {
     return (
         <div className="App">
             <ThemeProvider theme={theme} direction={direction}>
-                <LangProvider value={lang}>
+                <LangProvider value={fixedLang}>
                     <RouterProvider value={router}>
                         <SearchProvider value={search}>
                             <InterfaceProvider interface={viewerInterface || {}}>
diff --git a/src/components/Router/index.ts b/src/components/Router/index.ts
@@ -3,12 +3,12 @@ import type {Router} from '@diplodoc/components';
 import {createContext, useContext} from 'react';
 
 export interface RouterConfig extends Router {
-    depth: number;
+    base: string;
 }
 
 export const RouterContext = createContext<RouterConfig>({
     pathname: '/',
-    depth: 0,
+    base: './',
 });
 
 RouterContext.displayName = 'RouterContext';
diff --git a/src/components/Search/Page.scss b/src/components/Search/Page.scss
diff --git a/src/components/Search/Page.tsx b/src/components/Search/Page.tsx
@@ -7,7 +7,7 @@ import block from 'bem-cn-lite';
 import {useRouter} from '../Router';
 
 import {useProvider} from './useProvider';
-import './Search.scss';
+import './Page.scss';
 
 const b = block('Search');
 
@@ -20,25 +20,35 @@ function getUrlParams() {
 }
 
 function setUrlParams(query: string, page: number) {
-    const params = new URLSearchParams();
-    if (query) params.set('query', query);
-    if (page > 1) params.set('page', String(page));
-    window.history.pushState({}, '', `?${params.toString()}`);
+    const url = new URL(window.location.href);
+
+    if (query) {
+        url.searchParams.set('query', query);
+    }
+
+    if (page > 1) {
+        url.searchParams.set('page', String(page));
+    }
+
+    window.history.pushState({}, '', url);
 }
 
 function formatResults(searchResults: SearchResultData[]): FormattedSearchResultData {
-    if (!Array.isArray(searchResults)) return [];
+    if (!Array.isArray(searchResults)) {
+        return [];
+    }
+
     return searchResults.map((result) => ({
-        title: result?.title || result?.hierarchy?.lvl0 || result?.hierarchy?.lvl1 || '',
-        url: result?.url || result?.link || '#',
-        description: result?.description || result?.content || result?.text || '',
-        section: result?.section || result?.hierarchy?.lvl1 || '',
+        title: result?.title || '',
+        url: result?.link || '#',
+        description: result?.description || '',
+        section: result?.section || '',
     }));
 }
 
 const ITEMS_PER_PAGE = 10;
 
-export const Search: React.FC = () => {
+export const Page: React.FC = () => {
     const provider = useProvider();
     const router = useRouter();
 
diff --git a/src/components/Search/index.ts b/src/components/Search/index.ts
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
@@ -0,0 +1,66 @@
+import type {ReactElement} from 'react';
+import type {SearchConfig, WorkerApi, WorkerConfig} from './types';
+import type {DocInnerProps} from '../App';
+
+import React, {createContext, useContext, useEffect} from 'react';
+import {ThemeProvider} from '@gravity-ui/uikit';
+import {ConsentPopup, Lang, SUPPORTED_LANGS, configure} from '@diplodoc/components';
+
+import {RouterProvider} from '../Router';
+import {LangProvider} from '../../hooks/useLang';
+import {getDirection, updateRootClassName, updateThemeClassName} from '../../utils';
+import {useSettings} from '../App/useSettings';
+import {useMobile} from '../App/useMobile';
+
+import {Page} from './Page';
+
+export type {SearchConfig, WorkerConfig, WorkerApi};
+
+export const SearchContext = createContext<SearchConfig | null | undefined>(null);
+
+SearchContext.displayName = 'SearchContext';
+
+export const SearchProvider = SearchContext.Provider;
+
+export function Search(props: DocInnerProps): ReactElement {
+    const {lang, search, router, analytics} = props;
+    const settings = useSettings();
+    const mobileView = useMobile();
+    const fixedLang = SUPPORTED_LANGS.includes(lang) ? lang : Lang.En;
+    const direction = getDirection(lang);
+
+    configure({
+        lang: fixedLang,
+        localeCode: fixedLang,
+    });
+
+    const {theme, wideFormat} = settings;
+
+    useEffect(() => {
+        updateRootClassName({mobileView, wideFormat});
+        updateThemeClassName({theme});
+    }, [theme, mobileView, wideFormat]);
+
+    return (
+        <ThemeProvider theme={theme} direction={direction}>
+            <LangProvider value={fixedLang}>
+                <RouterProvider value={router}>
+                    <SearchProvider value={search}>
+                        <Page />
+                        {analytics && (
+                            <ConsentPopup
+                                router={router}
+                                gtmId={analytics?.gtm?.id || ''}
+                                consentMode={analytics?.gtm?.mode}
+                            />
+                        )}
+                    </SearchProvider>
+                </RouterProvider>
+            </LangProvider>
+        </ThemeProvider>
+    );
+}
+
+export function useSearch() {
+    return useContext(SearchContext);
+}
diff --git a/src/components/Search/provider/index.ts b/src/components/Search/provider/index.ts
@@ -1,8 +1,6 @@
 import type {ISearchProvider, ISearchResult} from '@diplodoc/components';
 import type {SearchConfig, SearchProviderExtended, WorkerConfig} from '../types';
 
-import {buildSearchLink} from './utils/searchLink';
-
 export class DefaultSearchProvider implements ISearchProvider, SearchProviderExtended {
     private worker!: Promise<Worker>;
 
@@ -15,7 +13,6 @@ export class DefaultSearchProvider implements ISearchProvider, SearchProviderExt
     init = () => {
         this.worker = initWorker({
             ...this.config,
-            base: this.base,
             mark: 'Suggest__Item__Marker',
         });
     };
@@ -36,11 +33,22 @@ export class DefaultSearchProvider implements ISearchProvider, SearchProviderExt
         }) as Promise<{items: ISearchResult[]; total: number}>;
     }
 
-    link = (query: string, page = 1) => buildSearchLink(this.base, this.config, query, page);
+    link = (query: string, page = 1) => {
+        const searchParams = new URLSearchParams();
 
-    private get base() {
-        return window.location.href.split('/').slice(0, -this.config.depth).join('/');
-    }
+        if (query) {
+            searchParams.set('query', query);
+        }
+
+        if (page > 1) {
+            searchParams.set('page', page.toString());
+        }
+
+        const params = searchParams.toString() ? `?${searchParams.toString()}` : '';
+        const link = `${this.config.link}${params}`;
+
+        return link;
+    };
 
     private async request(message: object) {
         return request(await this.worker, message);
diff --git a/src/components/Search/provider/utils/searchLink.ts b/src/components/Search/provider/utils/searchLink.ts
diff --git a/src/components/Search/types.ts b/src/components/Search/types.ts
@@ -1,41 +1,19 @@
 import type {ISearchResult, SearchSuggestPageItem} from '@diplodoc/components';
 
-export interface AlgoliaQuerySettings {
-    hitsPerPage?: number;
-    facetFilters?: string[];
-    attributesToRetrieve?: string[];
-    attributesToHighlight?: string[];
-    [key: string]: unknown;
-}
-
 export interface SearchData {
     api: string;
     link: string;
     lang: string;
-    provider?: 'local' | 'algolia';
 }
 
 export interface SearchConfig extends SearchData {
-    depth: number;
-    appId?: string;
-    indexName?: string;
-    searchKey?: string;
-    querySettings?: AlgoliaQuerySettings;
-    search?: SearchData;
+    base: string;
 }
 
 export interface WorkerConfig {
     api?: string;
     base: string;
     mark: string;
-    provider?: 'local' | 'algolia';
-
-    appId?: string;
-    indexName?: string;
-    searchKey?: string;
-    querySettings?: {
-        [key: string]: unknown;
-    };
 }
 
 export interface SearchResultItem {
@@ -93,13 +71,7 @@ export interface SearchResultData extends Partial<ISearchResult> {
     url?: string;
     link?: string;
     description?: string;
-    content?: string;
-    text?: string;
     section?: string;
-    hierarchy?: {
-        lvl0?: string;
-        lvl1?: string;
-    };
 }
 
 export interface FormattedSearchResultItem {
diff --git a/src/components/Search/useProvider.ts b/src/components/Search/useProvider.ts
@@ -1,16 +1,16 @@
 import type {ISearchProvider} from '@diplodoc/components';
 
-import {useContext, useEffect, useMemo, useState} from 'react';
+import {useEffect, useMemo, useState} from 'react';
 
-import {RouterContext, SearchContext} from '../index';
+import {useRouter, useSearch} from '../index';
 import {useLang} from '../../hooks/useLang';
 
 import {createProvider} from './provider';
 
 export function useProvider() {
     const lang = useLang();
-    const {depth = 0} = useContext(RouterContext);
-    const search = useContext(SearchContext);
+    const {base = './'} = useRouter();
+    const search = useSearch();
     const [provider, setProvider] = useState<ISearchProvider | null>(null);
 
     const config = useMemo(() => {
@@ -20,10 +20,10 @@ export function useProvider() {
 
         return {
             ...search,
-            depth,
+            base,
             lang,
         };
-    }, [lang, depth, search]);
+    }, [lang, base, search]);
 
     useEffect(() => {
         if (config) {
diff --git a/src/components/Search/worker/index.ts b/src/components/Search/worker/index.ts
@@ -49,10 +49,10 @@ const HANDLERS = {
         self.config = config;
 
         if (self.config.api) {
-            if (!self.config.api.startsWith('/')) {
-                importScripts(self.config.base + '/' + self.config.api);
-            } else {
+            if (self.config.api.startsWith('/')) {
                 importScripts(self.config.api);
+            } else {
+                importScripts(self.config.base + '/' + self.config.api);
             }
         }
 
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -4,6 +4,8 @@ import type {SearchConfig} from './components/Search/types';
 declare global {
     interface Window {
         STATIC_CONTENT?: boolean;
-        __DATA__: DocInnerProps | SearchConfig;
+        __DATA__: DocInnerProps & {
+            search: SearchConfig;
+        };
     }
 }
diff --git a/src/search.tsx b/src/search.tsx
@@ -1,41 +1,18 @@
-import type {SearchConfig} from './components/Search';
+import type {DocInnerProps} from './components/App';
 
 import React from 'react';
 import {createRoot} from 'react-dom/client';
-import {configure as configureUikit} from '@gravity-ui/uikit';
-import {configure as configureDocs} from '@diplodoc/components';
 
-import {Search, SearchProvider} from './components/Search';
-import {RouterProvider} from './components/Router';
+import {Search} from './components/Search';
+import {setRootClasses} from './interceptors/fast-class-applier';
 
 const root = document.getElementById('root');
+const data = window.__DATA__;
 
 if (!root) {
     throw new Error('Root element not found!');
 }
 
-const url = new URL(window.location.href);
-
-const windowData = window.__DATA__ as SearchConfig;
-const searchConfig = windowData || {};
-const searchData = windowData.search;
-
-const lang = searchData?.lang;
-
-configureUikit({lang});
-configureDocs({lang});
-
-searchConfig.depth = searchConfig.depth || 3;
-
-const routerConfig = {
-    pathname: url.pathname,
-    depth: 3,
-};
-
-createRoot(root).render(
-    <RouterProvider value={routerConfig}>
-        <SearchProvider value={searchData}>
-            <Search />
-        </SearchProvider>
-    </RouterProvider>,
-);
+const props = data as DocInnerProps;
+setRootClasses(props);
+createRoot(root).render(<Search {...props} />);
diff --git a/src/utils.ts b/src/utils.ts
@@ -96,8 +96,8 @@ export function getSettings() {
     };
 }
 
-export function getLandingPage(data: PageData) {
-    return getPageType(data) === 'PAGE_CONSTRUCTOR';
+export function getLandingPage(data: PageData | undefined) {
+    return data && getPageType(data) === 'PAGE_CONSTRUCTOR';
 }
 
 export function getMobileView() {
