From 8bb5f8c0e4a00583f70094589e1e818523a51f23 Mon Sep 17 00:00:00 2001
From: janpoem <janpoem@163.com>
Date: Tue, 17 Jan 2023 16:22:39 +0800
Subject: [PATCH 1/2] init

---
 .gitignore         | 1 +
 src/hooks/index.ts | 0
 2 files changed, 1 insertion(+)
 create mode 100644 src/hooks/index.ts

diff --git a/.gitignore b/.gitignore
index 6007098..bd4cd23 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 # Logs
 logs
 yarn.lock
+pnpm-lock.yaml
 *.log
 npm-debug.log*
 yarn-debug.log*
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
new file mode 100644
index 0000000..e69de29
-- 
Gitee


From ccc9e29f1f7f39ba851715b0bf4b999d265bc652 Mon Sep 17 00:00:00 2001
From: janpoem <janpoem@163.com>
Date: Tue, 17 Jan 2023 20:10:32 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E7=BB=93=E6=9E=84=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                    |   2 +-
 src/components/aggregation.tsx  |   2 +-
 src/components/aggregations.tsx |   2 +-
 src/components/home.tsx         |  52 +++----
 src/components/hotwords.tsx     |  51 ++++---
 src/components/index.tsx        |  97 ++----------
 src/components/input.tsx        |  60 ++++----
 src/components/queries.tsx      |  68 +++++++--
 src/components/render.tsx       |  71 ++++-----
 src/components/results.tsx      |   4 +-
 src/hooks/index.ts              |   1 +
 src/hooks/useIndexeaSearch.ts   | 261 ++++++++++++++++++++++++++++++++
 12 files changed, 443 insertions(+), 228 deletions(-)
 create mode 100644 src/hooks/useIndexeaSearch.ts

diff --git a/package.json b/package.json
index c6c8a68..3b41f32 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@indexea/sdk": "^1.3.26",
+    "@indexea/sdk": "^1.3.27",
     "@popperjs/core": "^2.11.6",
     "@types/uuid": "^8.3.4",
     "bootstrap": "^5.2.3",
diff --git a/src/components/aggregation.tsx b/src/components/aggregation.tsx
index b355a16..d5d75f0 100644
--- a/src/components/aggregation.tsx
+++ b/src/components/aggregation.tsx
@@ -1,3 +1,3 @@
-export default function (props: any) {
+export default function () {
   return <div>aggregation</div>
 }
diff --git a/src/components/aggregations.tsx b/src/components/aggregations.tsx
index 92abd77..41c9ee4 100644
--- a/src/components/aggregations.tsx
+++ b/src/components/aggregations.tsx
@@ -1,5 +1,5 @@
 import Aggregation from './aggregation'
 
-export default function (props: any) {
+export default function () {
   return <Aggregation />
 }
diff --git a/src/components/home.tsx b/src/components/home.tsx
index 4d55832..a0df942 100644
--- a/src/components/home.tsx
+++ b/src/components/home.tsx
@@ -1,13 +1,15 @@
-import { WidgetLayout } from '@indexea/sdk/layout'
-import { SearchContext } from '@indexea/sdk/context'
+import { WidgetLayout } from '@indexea/sdk/layout';
+import { SearchContext } from '@indexea/sdk/context';
+import { useIndexeaSearch } from '../hooks';
 
-import Input from './input'
-import Hotwords from './hotwords'
+import Input from './input';
+import Hotwords from './hotwords';
+import Render from './render';
 
-export type HomeProps = {
-  context: SearchContext
-  search: (q: string) => void
-}
+// export type HomeProps = {
+//   context: SearchContext
+//   search: (q: string) => void
+// }
 
 /**
  * 搜索脚手架的首页
@@ -15,31 +17,25 @@ export type HomeProps = {
  * @param context
  * @returns
  */
-export default function ({ context, search }: HomeProps) {
-  //@ts-ignore
-  const logo: string = context?.widget?.settings?.logo || '/static/indexea.png'
-  const layout = WidgetLayout.parse(context.widget.layout || '<layout/>')
+export default function () {
+  const { defaultLogo: logo, inQuery } = useIndexeaSearch();
+
+  if (inQuery) {
+    return <Render />
+  }
+
   return (
     <div
-      className='d-flex justify-content-center align-middle'
+      className="d-flex justify-content-center align-middle"
       style={{ height: '60vh' }}
     >
-      <div className='m-auto' style={{ width: '600px' }}>
-        <div className='mb-4'>
-          <img src={logo} className='mx-auto d-block' alt='...' width='200' />
+      <div className="m-auto" style={{ width: '600px' }}>
+        <div className="mb-4">
+          <img src={logo} className="mx-auto d-block" alt="..." width="200"/>
         </div>
-        <Input
-          context={context}
-          showLogo={false}
-          attrs={layout.getAttributes('input')}
-          search={search}
-        />
-        <Hotwords
-          context={context}
-          attrs={layout.getAttributes('hotwords')}
-          search={search}
-        />
+        <Input showLogo={false}/>
+        <Hotwords/>
       </div>
     </div>
-  )
+  );
 }
diff --git a/src/components/hotwords.tsx b/src/components/hotwords.tsx
index 37d65ae..cc1d10c 100644
--- a/src/components/hotwords.tsx
+++ b/src/components/hotwords.tsx
@@ -1,16 +1,17 @@
-import { useEffect, useState, SyntheticEvent } from 'react'
-import { SearchWord } from '@indexea/sdk'
-import { SearchContext } from '@indexea/sdk/context'
-import config from '../../config.json'
-import { Indexea } from '../openapi'
+import { useEffect, useState, SyntheticEvent } from 'react';
+import { SearchWord } from '@indexea/sdk';
+import { SearchContext } from '@indexea/sdk/context';
+import config from '../../config.json';
+import { useIndexeaSearch } from '../hooks';
+import { Indexea } from '../openapi';
 
-const indexea = new Indexea(config.api, '', config.widget)
+const indexea = new Indexea(config.api, '', config.widget);
 
-export type HotwordsProps = {
-  context: SearchContext
-  attrs: any
-  search: (q: string) => void
-}
+// export type HotwordsProps = {
+//   context: SearchContext
+//   attrs: any
+//   search: (q: string) => void
+// }
 
 /**
  * 显示搜索热词
@@ -19,21 +20,22 @@ export type HotwordsProps = {
  * @param search
  * @returns
  */
-export default function ({ context, attrs, search }: HotwordsProps) {
-  const query: number = context.query
-  const count: number = attrs.show_count || 5
-  const [words, setWords] = useState<SearchWord[]>([])
+export default function () {
+  const { context, layout, search } = useIndexeaSearch();
+
+  const [words, setWords] = useState<SearchWord[]>([]);
 
   useEffect(() => {
-    indexea.hotwords(query, 'year', count).then(setWords)
-  }, [query])
+    // @ts-ignore show_count maybe string or number, should convert to number as safe
+    indexea.hotwords(context.query, 'year', layout.hotWords.show_count || 5).then(setWords);
+  }, [context.query]);
 
   return (
-    <ul className='nav'>
+    <ul className="nav">
       {words.map(word => (
-        <li className='nav-item' key={word.q}>
+        <li className="nav-item" key={word.q}>
           <a
-            className='nav-link m-0 px-2'
+            className="nav-link m-0 px-2"
             href={'?q=' + word.q}
             onClick={e => doSearch(e, word.q || '')}
           >
@@ -42,9 +44,10 @@ export default function ({ context, attrs, search }: HotwordsProps) {
         </li>
       ))}
     </ul>
-  )
-  function doSearch (e: SyntheticEvent, q: string) {
-    e.preventDefault()
-    search(q)
+  );
+
+  function doSearch(e: SyntheticEvent, q: string) {
+    e.preventDefault();
+    search(q);
   }
 }
diff --git a/src/components/index.tsx b/src/components/index.tsx
index c1f4779..704ba97 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -1,9 +1,7 @@
-import { useState } from 'react'
-import { Indexea } from '../openapi'
-import { WidgetBean } from '@indexea/sdk'
-import { SearchContext, SearchFilter } from '@indexea/sdk/context'
-import Home from './home'
-import Render from './render'
+import { useInitIndexeaSearch, IndexeaSearchProvider, UseInitIndexeaSearchProps } from '../hooks';
+import { Indexea } from '../openapi';
+import { WidgetBean } from '@indexea/sdk';
+import Home from './home';
 
 export type IndexProps = {
   indexea: Indexea
@@ -17,85 +15,12 @@ export type IndexProps = {
  * @param widget 组件详情
  * @returns
  */
-export default function ({ indexea, widget }: IndexProps) {
-  //全局搜索上下文
-  const [context, setContext] = useState<SearchContext>(
-    SearchContext.fromUrl(widget, window.location.search)
-  )
-  //搜索结果
-  const [results, setResults] = useState<any>(null)
+export default function (props: UseInitIndexeaSearchProps) {
+  const ctx = useInitIndexeaSearch(props);
 
-  const render = <Render context={context} results={results} search={search} /> //搜索结果渲染页面
-  const home = <Home context={context} search={search} /> //默认的搜索首页
-  return context.q ? render : home
-
-  function beginSearch () {
-    if (!context?.q) return
-    let url = context.toUrl()
-    history.pushState({}, '', '?' + url)
-    var args: any = context.filters.reduce((obj: any, f: SearchFilter) => {
-      obj[f.name] = obj[f.name]
-        ? Array.isArray(obj[f.name])
-          ? obj[f.name].concat(f.value)
-          : [obj[f.name], f.value]
-        : f.value
-      return obj
-    }, {})
-    args.sort_by_f = context.sort
-    setResults(null)
-    indexea
-      .search(
-        context.query,
-        context.q,
-        args,
-        context.getFromIndex(),
-        context.itemsPerPage
-      )
-      .then(setResults)
-      .catch((err: any) => console.error(err))
-  }
-  function search (q: string) {
-    context.q = q
-    context.filters = []
-    context.page = 1
-    setContext(context)
-    beginSearch()
-  }
-  function switchQuery (query: number) {
-    if (context.query != query) {
-      context.query = query
-      context.filters = []
-      setContext(context)
-      beginSearch()
-    }
-  }
-  function sort (s: string) {
-    context.sort = s
-    setContext(context)
-    beginSearch()
-  }
-  function changePage (p: number) {
-    context.page = p
-    setContext(context)
-    beginSearch()
-  }
-  function addFilter (f: SearchFilter) {
-    if (f.multiple || !context.filters.find(sf => sf.name == f.name)) {
-      context.filters.push(f)
-    } else {
-      context.filters = context.filters.map(sf => (sf.name == f.name ? f : sf))
-    }
-    setContext(context)
-    beginSearch()
-  }
-  function deleteFilter (f: SearchFilter) {
-    context.filters = context.filters.filter(
-      tf => tf.name != f.name || tf.value != f.value
-    )
-    setContext(context)
-    beginSearch()
-  }
-  function clickHit (_id: string) {
-    indexea.click(results.action, _id)
-  }
+  return (
+    <IndexeaSearchProvider value={ctx}>
+      <Home />
+    </IndexeaSearchProvider>
+  );
 }
diff --git a/src/components/input.tsx b/src/components/input.tsx
index 89e7b59..e96929c 100644
--- a/src/components/input.tsx
+++ b/src/components/input.tsx
@@ -1,11 +1,9 @@
-import { FormEvent, SyntheticEvent, useState } from 'react'
-import { SearchContext } from '@indexea/sdk/context'
+import { FormEvent, SyntheticEvent, useEffect, useRef, useState } from 'react';
+import { SearchContext } from '@indexea/sdk/context';
+import { useIndexeaSearch } from '../hooks';
 
 export type InputProps = {
-  context: SearchContext
   showLogo: boolean
-  attrs: any
-  search: (q: string) => void
 }
 
 /**
@@ -16,48 +14,56 @@ export type InputProps = {
  * @param search
  * @returns
  */
-export default function ({ context, attrs, showLogo, search }: InputProps) {
+export default function ({ showLogo }: InputProps) {
+  const { selectLogo, context, layout: { input: attrs }, search, loading } = useIndexeaSearch();
+
   // Logo 的显示由多个因素决定，优先级最高的是 showLogo 参数，其次是 widget 中的设置
-  const logo =
-    showLogo && (attrs?.logo === undefined || attrs?.logo)
-      ? //@ts-ignore
-        context?.widget?.settings?.logo || '/static/indexea.png'
-      : ''
+  const logo = selectLogo(showLogo);
+
+  const queryRef = useRef<string>('');
+  const [value, setValue] = useState<string>('');
 
-  const [value, setValue] = useState<string>(context.q)
+  useEffect(() => {
+    const q = context.q || '';
+    if (queryRef.current !== q) {
+      queryRef.current = q;
+      setValue(q);
+    }
+  }, [context.q]);
 
   return (
-    <form className='d-flex align-items-center mb-3' onSubmit={doSearch}>
+    <form className="d-flex align-items-center mb-3" onSubmit={doSearch}>
       {logo && (
-        <div className='logo'>
-          <a href='/' onClick={doHome}>
-            <img src={logo} className='me-4' alt='logo' height='28' />
+        <div className="logo">
+          <a href="/" onClick={doHome}>
+            <img src={logo} className="me-4" alt="logo" height="28"/>
           </a>
         </div>
       )}
-      <div className='flex-grow-1'>
+      <div className="flex-grow-1">
         <input
-          className='form-control'
-          defaultValue={context.q}
+          className="form-control"
+          value={value}
           autoFocus={true}
           onChange={e => setValue(e.target.value)}
+          disabled={loading}
         />
       </div>
       {attrs?.button && (
-        <button type='submit' className='btn btn-primary ms-2'>
+        <button type="submit" className="btn btn-primary ms-2" disabled={loading}>
           Search
         </button>
       )}
     </form>
-  )
+  );
 
-  function doSearch (e: FormEvent) {
-    e.preventDefault()
-    search(value)
+  function doSearch(e: FormEvent) {
+    e.preventDefault();
+    search(value);
   }
 
-  function doHome (e: SyntheticEvent) {
-    e.preventDefault()
-    search('')
+  function doHome(e: SyntheticEvent) {
+    e.preventDefault();
+    search('', 0);
   }
 }
diff --git a/src/components/queries.tsx b/src/components/queries.tsx
index c879784..74822df 100644
--- a/src/components/queries.tsx
+++ b/src/components/queries.tsx
@@ -1,30 +1,70 @@
-import { QueryBean } from '@indexea/sdk'
+import { QueryBean } from '@indexea/sdk';
+import { SearchContext } from '@indexea/sdk/context';
+import { useCallback, useEffect, useState } from 'react';
+import { useIndexeaSearch } from '../hooks';
+
+export type QueriesProps = {
+  context: SearchContext,
+}
 
 /**
  * 显示切换不同查询的 Tab 菜单
  * @param props
  */
-export default function (props: any) {
-  const queries = props.context.widget.queries
+export default function () {
+  const { context, layout: { indices }, results, search } = useIndexeaSearch();
+
+  const onClick = useCallback((q: string, id?: number) => (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (context.query !== id) {
+      search(q, id);
+    }
+  }, [context, search]);
+
   return (
-    <ul className='nav nav-tabs ps-3 mt-3'>
-      {queries.map((query: QueryBean) => (
-        <li className='nav-item' key={query.id}>
+    <ul className="nav nav-tabs ps-3 mt-3">
+      {context?.widget?.queries?.map((query: QueryBean) => (
+        <li className="nav-item" key={query.id}>
           <a
-            href={'?query=' + query.id}
+            href={`?q=${context.q}&i=${query.id}`}
+            onClick={onClick(context.q, query.id)}
             className={
-              query.id == props.context.query ? 'nav-link active' : 'nav-link'
+              query.id == context?.query ? 'nav-link active' : 'nav-link'
             }
           >
-            {props.attrs['label' + query.id] || query.name}
-            {props.attrs.show_count && (
-              <span className='badge bg-light text-dark rounded-pill fw-light'>
-                {props.results?.results[query.id + ''] || 0}
-              </span>
+            {indices['label' + query.id] || query.name}
+            {indices.show_count && (
+              // @ts-ignore id and results?.results
+              <Count id={query.id} count={results?.results[query.id + '']}/>
             )}
           </a>
         </li>
       ))}
     </ul>
-  )
+  );
+}
+
+type CountProps = {
+  id: number | string,
+  count?: number,
+}
+
+const refValues: Record<number | string, number> = {};
+
+// 尽可能只一路向前，不 reset 回0
+function Count({ id, count }: CountProps) {
+  const [value, setValue] = useState(refValues[id] || 0);
+
+  useEffect(() => {
+    if (count != null) {
+      refValues[id] = count;
+      setValue(count);
+    }
+  }, [count]);
+
+  return (
+    <span className="badge bg-light text-dark rounded-pill fw-light">
+      {value}
+    </span>
+  );
 }
diff --git a/src/components/render.tsx b/src/components/render.tsx
index 8dfb0f9..7724b69 100644
--- a/src/components/render.tsx
+++ b/src/components/render.tsx
@@ -1,25 +1,27 @@
-import { WidgetLayout } from '@indexea/sdk/layout'
-import { SearchContext } from '@indexea/sdk/context'
-import Input from './input'
-import Hotwords from './hotwords'
-import Queries from './queries'
-import Aggregations from './aggregations'
-import Results from './results'
+import { WidgetLayout } from '@indexea/sdk/layout';
+import { SearchContext } from '@indexea/sdk/context';
+import { useIndexeaSearch } from '../hooks';
+import Input from './input';
+import Hotwords from './hotwords';
+import Queries from './queries';
+import Aggregations from './aggregations';
+import Results from './results';
 
 export type RenderProps = {
-  context: SearchContext
-  results: any
-  search: (q: string) => void
+  // context: SearchContext
+  // results: any
+  // search: (q: string) => void
 }
 
-export default function ({ context, results, search }: RenderProps) {
-  const layout = WidgetLayout.parse(context.widget.layout || '<layout/>')
-  const rows: Element[] = Array.from(layout.rows())
+export default function () {
+  const { layout, context, results } = useIndexeaSearch();
+
+  const rows: Element[] = Array.from(layout.data.rows());
 
   return (
-    <div className='container-fluid p-3'>
+    <div className="container-fluid p-3">
       {rows.map((row: any, rindex: number) => (
-        <div className='row' key={rindex}>
+        <div className="row" key={rindex}>
           {Array.from(row.getElementsByTagName('col')).map(
             (col: any, cindex: number) => (
               <div
@@ -28,51 +30,30 @@ export default function ({ context, results, search }: RenderProps) {
               >
                 {Array.from(col.getElementsByTagName('control')).map(
                   (ctrl: any, aindex: number) => (
-                    <div className='control' key={aindex}>
+                    <div className="control" key={aindex}>
                       {ctrl.getAttribute('type') === 'input' && (
-                        <Input
-                          context={context}
-                          showLogo={true}
-                          attrs={layout.getAttributes('input')}
-                          search={search}
-                        />
+                        <Input showLogo={true}/>
                       )}
                       {ctrl.getAttribute('type') === 'hotwords' && (
-                        <Hotwords
-                          context={context}
-                          attrs={layout.getAttributes('hotwords')}
-                          search={search}
-                        />
+                        <Hotwords/>
                       )}
                       {ctrl.getAttribute('type') === 'indices' && (
-                        <Queries
-                          context={context}
-                          attrs={layout.getAttributes('indices')}
-                          results={results}
-                        />
+                        <Queries/>
                       )}
                       {ctrl.getAttribute('type') === 'aggregation' && (
-                        <Aggregations
-                          context={context}
-                          attrs={layout.getAttributes('aggregation')}
-                          aggregations={results?.aggregations}
-                        />
+                        <Aggregations />
                       )}
                       {ctrl.getAttribute('type') === 'results' && (
-                        <Results
-                          context={context}
-                          attrs={layout.getAttributes('results')}
-                          results={results}
-                        />
+                        <Results />
                       )}
                     </div>
-                  )
+                  ),
                 )}
               </div>
-            )
+            ),
           )}
         </div>
       ))}
     </div>
-  )
+  );
 }
diff --git a/src/components/results.tsx b/src/components/results.tsx
index 4ae3f38..579c46c 100644
--- a/src/components/results.tsx
+++ b/src/components/results.tsx
@@ -1,3 +1,5 @@
-export default function (props: any) {
+
+
+export default function () {
   return <div>results</div>
 }
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index e69de29..28822ec 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useIndexeaSearch';
diff --git a/src/hooks/useIndexeaSearch.ts b/src/hooks/useIndexeaSearch.ts
new file mode 100644
index 0000000..c380af8
--- /dev/null
+++ b/src/hooks/useIndexeaSearch.ts
@@ -0,0 +1,261 @@
+import { WidgetBean } from '@indexea/sdk';
+import { SearchContext, SearchFilter } from '@indexea/sdk/context';
+import { WidgetLayout } from '@indexea/sdk/layout';
+import {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Indexea } from '../openapi';
+
+export type IndexeaSearchResults = object;
+
+export type UseInitIndexeaSearchProps = {
+  indexea: Indexea
+  widget: WidgetBean
+}
+
+export type IndexeaInputAttr = {
+  type: 'input',
+  button: boolean,
+  complete: string,
+  complete_count: string | number,
+  complete_url_field: string | number,
+  logo: boolean,
+  placeholder: ReactNode,
+  query: string,
+  suggest: boolean,
+}
+
+export type HotWordsAttr = {
+  type: 'hotwords',
+  scope: string,
+  show_count: number | string,
+}
+
+export type IndicesAttr = {
+  type: 'indices',
+  show_count: boolean,
+} & {
+  [k: string]: string,
+}
+
+export type AggregationAttr = {
+  type: 'aggregation',
+  show_count: boolean,
+} & {
+  [k: string]: string,
+}
+
+
+export type IndexeaLayoutData = {
+  data: WidgetLayout,
+  input: IndexeaInputAttr,
+  hotWords: HotWordsAttr,
+  indices: IndicesAttr,
+  aggregation: AggregationAttr
+}
+
+const defaultLayout = '<layout/>';
+
+export type IndexeaSearchContextType = {
+  context: SearchContext,
+  results: IndexeaSearchResults | undefined,
+  setResults: Dispatch<SetStateAction<IndexeaSearchResults | undefined>>,
+  inQuery: boolean,
+  defaultLogo: string,
+  selectLogo: (showLogo?: boolean) => string,
+  layout: IndexeaLayoutData,
+  search: (q: string, queryId?: number) => void,
+  loading: boolean,
+}
+
+// @ts-ignore context default value
+const IndexeaSearchContext = createContext<IndexeaSearchContextType>({});
+
+export const IndexeaSearchProvider = IndexeaSearchContext.Provider;
+
+function prepareWidgetLayout(data: WidgetLayout): IndexeaLayoutData {
+  return {
+    data,
+    input      : data.getAttributes('input'),
+    hotWords   : data.getAttributes('hotwords'),
+    indices    : data.getAttributes('indices'),
+    aggregation: data.getAttributes('aggregation'),
+  };
+}
+
+// 因为 SearchContext 已经封装好了，所以我就不去改动了，这里只作为对 SearchContext 的一个代理暴露
+export function useInitIndexeaSearch({
+  widget,
+  indexea,
+}: UseInitIndexeaSearchProps): IndexeaSearchContextType {
+  const locationSearch = window.location.search;
+
+  const searchRef = useRef<string>(locationSearch);
+  const layoutRef = useRef<string | undefined>(defaultLayout);
+
+  //全局搜索上下文
+  const [context, setContext] = useState<SearchContext>(
+    SearchContext.fromUrl(widget, locationSearch),
+  );
+  //搜索结果
+  const [results, setResults] = useState<IndexeaSearchResults | undefined>(undefined);
+  const [layout, setLayout] = useState<IndexeaLayoutData>(prepareWidgetLayout(WidgetLayout.parse(defaultLayout)));
+  const [loading, setLoading] = useState(false);
+  const [logo, setLogo] = useState<string>('/static/indexea.png');
+
+  const beginSearch = useCallback(function beginSearch() {
+    if (!context?.q) return;
+    // let url = context.toUrl();
+    // history.pushState({}, '', '?' + url);
+    var args: any = context.filters.reduce((obj: any, f: SearchFilter) => {
+      obj[f.name] = obj[f.name]
+        ? Array.isArray(obj[f.name])
+          ? obj[f.name].concat(f.value)
+          : [obj[f.name], f.value]
+        : f.value;
+      return obj;
+    }, {});
+    args.sort_by_f = context.sort;
+    // setResults(undefined);
+    setLoading(true);
+    indexea
+      .search(
+        context.query,
+        context.q,
+        args,
+        context.getFromIndex(),
+        context.itemsPerPage,
+      )
+      .then(setResults)
+      .catch((err: any) => {
+        console.error(err);
+        setResults(undefined);
+      })
+      .finally(() => setLoading(false))
+    ;
+  }, [context]);
+
+  const updateContext = useCallback((search: string) => {
+    if (searchRef.current !== search) {
+      searchRef.current = search;
+      const newContext = SearchContext.fromUrl(widget, search);
+      setContext(newContext);
+    }
+  }, []);
+
+  const search = useCallback(function search(q: string, queryId?: number) {
+    // loading 就不去加载
+    if (loading) return;
+    const newContext = new SearchContext(widget, q, 1, [], queryId == null ? context.query: queryId, context.sort);
+    const url = newContext.toUrl();
+    const search = !url ? '' : '?' + url;
+    history.pushState({}, '', '?' + url);
+    updateContext(search);
+  }, [beginSearch, context, loading]);
+
+  const listenPopState = useCallback(function listenPopState(event: PopStateEvent) {
+    // @ts-ignore event location
+    updateContext(event.currentTarget.location.search);
+  }, [updateContext]);
+
+  useEffect(() => {
+    updateContext(window.location.search);
+  }, [window.location.search]);
+
+  useEffect(() => {
+    beginSearch();
+  }, [context]);
+
+  useEffect(() => {
+    if (context.widget.layout !== layoutRef.current) {
+      layoutRef.current = context.widget.layout;
+      setLayout(prepareWidgetLayout(WidgetLayout.parse(context.widget.layout || defaultLayout)));
+    }
+  }, [context.widget.layout]);
+
+  useEffect(() => {
+    window.addEventListener('popstate', listenPopState);
+
+    return () => window.removeEventListener('popstate', listenPopState);
+  }, []);
+
+  const getHotWordsShowCount = useCallback(() => {
+    return (layout.hotWords.show_count as number) || 5;
+  }, [layout]);
+
+  const selectLogo = useCallback((showLogo = true) => {
+    if (showLogo && !!layout.input.logo) {
+      return logo;
+    }
+    return '';
+  }, [layout, logo]);
+
+  return {
+    context,
+    results, setResults,
+    inQuery    : !!context.q,
+    defaultLogo: logo,
+    selectLogo,
+    layout,
+    search,
+    loading,
+  };
+}
+
+export function useIndexeaSearch(): IndexeaSearchContextType {
+  return useContext<IndexeaSearchContextType>(IndexeaSearchContext);
+}
+
+// 以下为从首页 index.tsx 搬过来的方法，而且未实现的方法体
+/**
+ function switchQuery(query: number) {
+    if (context.query != query) {
+      context.query = query;
+      context.filters = [];
+      setContext(context);
+      beginSearch();
+    }
+  }
+
+ function sort(s: string) {
+    context.sort = s;
+    setContext(context);
+    beginSearch();
+  }
+
+ function changePage(p: number) {
+    context.page = p;
+    setContext(context);
+    beginSearch();
+  }
+
+ function addFilter(f: SearchFilter) {
+    if (f.multiple || !context.filters.find(sf => sf.name == f.name)) {
+      context.filters.push(f);
+    } else {
+      context.filters = context.filters.map(sf => (sf.name == f.name ? f : sf));
+    }
+    setContext(context);
+    beginSearch();
+  }
+
+ function deleteFilter(f: SearchFilter) {
+    context.filters = context.filters.filter(
+      tf => tf.name != f.name || tf.value != f.value,
+    );
+    setContext(context);
+    beginSearch();
+  }
+
+ function clickHit(_id: string) {
+    indexea.click(results.action, _id);
+  }
+ */
-- 
Gitee