{"version":3,"sources":["webpack://search-example-site/./src/carTable.js","webpack://search-example-site/./src/pages/cars.js"],"names":["renderHeader","dataKey","className","getRowClassName","index","list","loadMore","style","height","width","isRowLoaded","loadMoreRows","rowCount","onRowsRendered","registerChild","ref","headerHeight","length","rowHeight","rowClassName","rowGetter","headerRenderer","label","cellRenderer","cellData","log","initialState","loading","search","page","indice","reducer","state","action","type","value","Error","useReducer","dispatch","useDebounce","query","useMemo","extraCondition","year","$lte","$ngram","$or","model","$regex","RegExp","make","makeQuery","cursor","useCdnCursorQuery","undefined","useEffect","next","hasNext","useCallback","onChange","event","target","onChangeType","title","name","placeholder","checked"],"mappings":"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","file":"component---src-pages-cars-js-9dc0536b7d957148e346.js","sourcesContent":["// You can import any component you want as a named export from 'react-virtualized', eg\nimport React from \"react\";\nimport { Column, Table, InfiniteLoader, AutoSizer } from \"react-virtualized\";\n\nconst renderHeader = ({ dataKey }) => {\n  return <div className=\"text-left\">{dataKey}</div>;\n};\n\n\nconst getRowClassName = ({ index }) => {\n  const basicRow = \"hover:bg-blue-300 \";\n  if (index < 0) return \"bg-blue-100\";\n  return basicRow + (index % 2 === 0 ? \"bg-white\" : \"bg-blue-100\");\n};\n\nconst CarTable = ({ list, loadMore }) => {\n  return (\n    <div className=\"bg-white\" style={{ height: 500 }}>\n      <AutoSizer>\n        {({ height, width }) => (\n          <InfiniteLoader\n            isRowLoaded={({ index }) => !!list[index]}\n            loadMoreRows={loadMore}\n            rowCount={1000000}\n          >\n            {({ onRowsRendered, registerChild }) => (\n              <Table\n                ref={registerChild}\n                headerHeight={40}\n                height={height}\n                onRowsRendered={onRowsRendered}\n                rowCount={list.length}\n                rowHeight={60}\n                width={width}\n                className={\"table-auto\"}\n                rowClassName={getRowClassName}\n                rowGetter={({ index }) => list[index]}\n              >\n                <Column\n                  headerRenderer={renderHeader}\n                  label=\"Make\"\n                  cellRenderer={({ cellData }) => cellData}\n                  dataKey=\"make\"\n                  width={200}\n                />\n                <Column\n                  headerRenderer={renderHeader}\n                  label={\"Model\"}\n                  dataKey=\"model\"\n                  width={200}\n                  className=\"text-left\"\n                  cellRenderer={({ cellData }) => cellData}\n                />\n                <Column\n                  headerRenderer={renderHeader}\n                  label=\"Color\"\n                  dataKey=\"color\"\n                  width={200}\n                  className=\"text-left\"\n                  cellRenderer={({ cellData }) => cellData}\n                />\n                <Column\n                  headerRenderer={renderHeader}\n                  label=\"Year\"\n                  dataKey=\"year\"\n                  width={200}\n                  className=\"text-left\"\n                  cellRenderer={({ cellData }) => cellData}\n                />\n                <Column\n                  headerRenderer={renderHeader}\n                  label=\"Seller\"\n                  dataKey=\"seller\"\n                  width={200}\n                  className=\"text-left\"\n                  cellRenderer={({ cellData }) => cellData}\n                />\n                <Column\n                  headerRenderer={renderHeader}\n                  label=\"Price\"\n                  dataKey=\"sellingprice\"\n                  width={200}\n                  className=\"text-left\"\n                  cellRenderer={({ cellData }) => cellData}\n                />\n              </Table>\n            )}\n\n          </InfiniteLoader>)\n        }</AutoSizer>\n    </div>\n  );\n};\n\nexport default CarTable;\n","import React, { useReducer, useEffect, useMemo, useCallback } from \"react\"\nimport CarTable from '../carTable';\nimport Layout from '../layout';\nimport { useDebounce } from 'use-debounce';\nimport { useCdnCursorQuery, log } from 'gatsby-cdn-search-plugin';\nlog.enableAll();\nconst initialState = {\n  loading: false,\n  search: '',\n  list: [],\n  page: 0,\n  indice: 'simple'\n};\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 'loading':\n      return { ...state, loading: true }\n    case 'load':\n      return { ...state, loading: false, list: action.list, page: 0 };\n    case 'indice':\n      return { ...state, indice: action.value }\n    case 'loadMore':\n      return { ...state, loading: false, list: [...state.list, ...action.list] };\n    default:\n      throw new Error();\n  }\n}\n\nconst makeQuery = (search, indice) => {\n  const extraCondition = indice === 'lte' ? { year: { $lte: 2010 } } : {};\n  if (search.length >= 4) {\n    return { $ngram: search, ...extraCondition };\n  } else if (!!search.length) {\n    return {\n      $or: [\n        { model: { $regex: new RegExp(`^${search}`, 'i'), }, },\n        { make: { $regex: new RegExp(`^${search}`, 'i'), }, }\n      ],\n      ...extraCondition\n    };\n  } else {\n    return extraCondition;\n  }\n}\nconst IndexPage = () => {\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('cars', 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  const loadMore = useCallback(() => {\n    dispatch({ type: 'pageUp' });\n  });\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={\"Cars\"}>\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=\"simple\"\n                  type=\"radio\"\n                  className=\"form-radio h-5 w-5 text-red-600\"\n                  checked={state.indice === \"simple\"}\n                  onChange={onChangeType}\n                /><span className=\"ml-2 text-gray-700\">All dates</span>\n              </label>\n              <label className=\"inline-flex items-center mt-4 \">\n                <input\n                  name=\"type\"\n                  value=\"lte\"\n                  type=\"radio\"\n                  checked={state.indice === \"lte\"}\n                  onChange={onChangeType}\n                  className=\"form-radio h-5 w-5 text-gray-600\" />\n                <span className=\"ml-2 text-gray-700\">Date $lte  2010</span>\n              </label>\n            </div>\n            {useMemo(() => (<>\n              <CarTable list={state.list} loadMore={loadMore} />\n            </>), [state.list])}\n          </div>\n        </div>\n      </div>\n    </Layout>\n\n  )\n}\n\nexport default IndexPage;\n\n"],"sourceRoot":""}