{"version":3,"sources":["webpack://search-example-site/./src/movieList.js","webpack://search-example-site/./src/pages/movies.js"],"names":["list","loadMore","rowRenderer","useCallback","key","index","style","width","className","name","height","rowCount","isRowLoaded","loadMoreRows","onRowsRendered","registerChild","ref","length","rowHeight","rowGetter","log","initialState","loading","search","page","indice","reducer","state","action","type","value","Error","useReducer","dispatch","useDebounce","query","useMemo","$ngram","$lex","$regex","RegExp","makeQuery","cursor","useCdnCursorQuery","undefined","useEffect","next","hasNext","onChange","event","target","onChangeType","title","placeholder","checked"],"mappings":"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","file":"component---src-pages-movies-js-d10a259af6b0d7c26564.js","sourcesContent":["// You can import any component you want as a named export from 'react-virtualized', eg\nimport React, { useCallback } from \"react\";\nimport { List, InfiniteLoader, AutoSizer } from \"react-virtualized\";\n\n\nconst MovieList = ({ list, loadMore }) => {\n\n  const rowRenderer = useCallback(function ({ key, index, style }) {\n    return (\n      <div\n        key={key}\n        style={{...style, width: '97%'}}\n        className={'border list-none rounded-sm px-3 py-3 ml-3 mr-3 box-border bg-white'}\n      >\n        {list[index].name}\n      </div>\n    )\n  }, [list])\n  return (\n    <div style={{height: 500}}>\n      <AutoSizer>\n        {({ height, width }) => (\n          <InfiniteLoader\n            rowCount={1000000}\n            isRowLoaded={({ index }) => {\n              return !!list[index]\n            }}\n            loadMoreRows={loadMore}\n          >\n            {({ onRowsRendered, registerChild }) => (\n              <List\n                ref={registerChild}\n                height={height}\n                onRowsRendered={onRowsRendered}\n                rowRenderer={rowRenderer}\n                rowCount={list.length}\n                rowHeight={60}\n                width={width}\n                rowGetter={({ index }) => list[index]}\n              />\n            )}\n\n          </InfiniteLoader>)}\n      </AutoSizer>\n    </div>\n  );\n};\n\nexport default MovieList;\n","import React, { useReducer, useEffect, useMemo, useCallback } from \"react\"\nimport { useCdnCursorQuery, log } from 'gatsby-cdn-search-plugin'\nimport Layout from \"../layout\";\nimport { useDebounce } from 'use-debounce';\nimport MovieList from '../movieList';\nlog.enableAll();\n\nconst makeQuery = (search, type) => {\n  if (search.length >= 3 && type === 'ngram') {\n    return { $ngram: search };\n  } if (!!search.length && type === 'lex') {\n    return { $lex: search };\n  } else if (!!search.length && type === 'regexp') {\n    return { name: { $regex: new RegExp(`^${search}`, 'i'), } };\n  } else {\n    return {};\n  }\n}\n\nconst initialState = {\n  loading: false,\n  search: '',\n  list: [],\n  page: 0,\n  indice: 'ngram'\n};\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'pageUp':\n      return { ...state, page: state.page + 1 }\n    case 'type':\n      return { ...state, search: action.value }\n    case 'indice':\n      return { ...state, indice: action.value }\n    case 'loading':\n      return { ...state, loading: true }\n    case 'load':\n      return { ...state, loading: false, list: action.list, page: 0 };\n    case 'loadMore':\n      return { ...state, loading: false, list: [...state.list, ...action.list] };\n    default:\n      throw new Error();\n  }\n}\nconst IndexPage = () => {\n\n  const [state, dispatch] = useReducer(reducer, initialState);\n  const [search] = useDebounce(state.search, 1000);\n  const query = useMemo(() => makeQuery(search, state.indice), [search, state.indice]);\n\n  const cursor = useCdnCursorQuery('movies', query, undefined, 0, 30);\n\n  useEffect(() => {\n    (async () => {\n      dispatch({ type: 'load', list: await cursor.next() });\n    })();\n  }, [cursor])\n\n  useEffect(() => {\n    (async () => {\n      const hasNext = await cursor.hasNext();\n      if (hasNext) {\n        dispatch({ type: 'loadMore', list: await cursor.next() })\n      }\n    })()\n  }, [state.page]);\n\n  const onChange = useCallback((event) => {\n    const { value } = event.target;\n    dispatch({ type: 'type', value });\n  }, []);\n  const onChangeType = useCallback((event) => {\n    const { value } = event.target;\n    dispatch({ type: 'indice', value });\n  }, []);\n  return (\n    <Layout title={\"Movies\"}>\n      <div className=\"bg-indigo-100 py-6 md:py-12\">\n        <div className=\"container px-4 mx-auto\">\n\n          <div className=\"text-center max-w-4xl mx-auto\">\n            <h1 className=\"text-3xl md:text-4xl font-medium mb-2\">Demo search cars (N-Gram, Regexp, By year)</h1>\n            <div className=\"relative text-gray-600 mt-10\">\n              <input value={state.search} onChange={onChange} type=\"search\" name=\"search\" placeholder=\"Search\" className=\"border-blue-500 border-2 bg-white h-10 px-5 pr-10 rounded-full text-sm focus:outline-none w-11/12 m-4\" />\n            </div>\n            <div className=\"flex justify-around mb-10\">\n              <label className=\"inline-flex items-center mt-4 \">\n                <input\n                  name=\"type\"\n                  value=\"ngram\"\n                  type=\"radio\"\n                  checked={state.indice === \"ngram\"}\n                  onChange={onChangeType}\n                  className=\"form-radio h-5 w-5 text-gray-600\" />\n                <span className=\"ml-2 text-gray-700\">NGRAM</span>\n              </label>\n\n              <label className=\"inline-flex items-center mt-4\">\n                <input\n                  name=\"type\"\n                  value=\"lex\"\n                  type=\"radio\"\n                  className=\"form-radio h-5 w-5 text-red-600\"\n                  checked={state.indice === \"lex\"}\n                  onChange={onChangeType}\n                /><span className=\"ml-2 text-gray-700\">LEX</span>\n              </label>\n\n              <label className=\"inline-flex items-center mt-4\">\n                <input\n                  name=\"type\"\n                  value=\"regexp\"\n                  type=\"radio\"\n                  className=\"form-radio h-5 w-5 text-red-600\"\n                  checked={state.indice === \"regexp\"}\n                  onChange={onChangeType}\n                /><span className=\"ml-2 text-gray-700\">REGEXP</span>\n              </label>\n            </div>\n            {useMemo(() => (<>\n              <MovieList list={state.list} loadMore={() => dispatch({ type: \"pageUp\" })} />\n            </>), [state.list])}\n          </div>\n        </div>\n      </div>\n    </Layout>\n  )\n}\n\nexport default IndexPage\n"],"sourceRoot":""}