{"version":3,"file":"js/8441-4f7558aa53bb53e6a1d6.chunk.js","mappings":"qSAUO,MAAMA,EAA4B,4BA0DzC,UAxDgCC,KAC9B,MAAOC,EAAyBC,IAA8BC,EAAAA,EAAAA,UAAS,OAEvEC,EAAAA,EAAAA,YAAU,KACJC,OAAOJ,wBACTC,GAA2BI,EAAAA,EAAAA,IAAYD,OAAOJ,2BAE9CM,EAAAA,EAAAA,IAAQ,kCACLC,MAAMC,IACLP,GAA2BI,EAAAA,EAAAA,IAAYG,GAAM,IAC5CC,OAAM,QACb,GACC,KAEHN,EAAAA,EAAAA,YAAU,KACJH,GAA2BA,EAAwBU,SACrDC,EAAAA,EAAAA,IAAWb,EAA2B,CAAE,cAAeE,EAAwBU,QACjF,GACC,CAACV,GAA2BA,EAAwBU,SAEvD,MAAME,EAAcZ,EAKlBa,EAAAA,cAAAA,EAAAA,SAAA,KACEA,EAAAA,cAAA,UAAI,cACJA,EAAAA,cAAA,MAAIC,UAAYC,IAAWC,EAAAA,GAAcC,EAAAA,KAErCjB,EAAwBkB,KAAKC,GAC3BN,EAAAA,cAACO,EAAAA,EAAU,CACTC,IAAMF,EAAEG,GACRC,KAAOJ,EAAEK,MACTC,eAAiB,8BAA+BN,EAAEO,OAClDC,YAAcR,EAAES,SAChBC,aAAeV,EAAEW,UACjBC,YAAY,WACZC,aAAW,QAhBrBnB,EAAAA,cAACoB,EAAAA,EAAM,CAACC,QAAM,EAACC,QAAM,GAAC,iCAwBxB,OACEtB,EAAAA,cAAA,OAAKC,UAAYG,EAAAA,IACbjB,EAA0Ba,EAAAA,cAACuB,EAAAA,EAAW,CAACC,SAAS,WAAWC,QAAUxC,IAAiC,KACxGe,EAAAA,cAAA,OAAKC,UAAYC,IAAWE,EAAAA,GAA6BD,EAAAA,KACrDJ,GAEA,C","sources":["webpack://artfully-walls/./app/javascript/arts/components/popular_search_categories/index.js"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { Loader } from 'semantic-ui-react';\nimport classnames from 'classnames';\nimport { request, toCamelCase } from 'arts/../shared/request';\nimport GTMPageView from '../Application/data_layer';\nimport { trackEvent } from '../../config/analytics';\nimport * as AppClasses from '../Application/styles.module.scss';\nimport * as Classes from '../collections/styles.module.scss';\nimport Collection from '../collections/collection';\n\nexport const POPULAR_SEARCH_CATEGORIES = 'popular search categories';\n\nconst PopularSearchCategories = () => {\n  const [popularSearchCategories, setPopularSearchCategories] = useState(null);\n\n  useEffect(() => {\n    if (window.popularSearchCategories) {\n      setPopularSearchCategories(toCamelCase(window.popularSearchCategories));\n    } else {\n      request('/api/popular-search-categories')\n        .then((data) => {\n          setPopularSearchCategories(toCamelCase(data));\n        }).catch(() => {});\n    }\n  }, []);\n\n  useEffect(() => {\n    if (popularSearchCategories && popularSearchCategories.length) {\n      trackEvent(POPULAR_SEARCH_CATEGORIES, { 'items count': popularSearchCategories.length });\n    }\n  }, [popularSearchCategories && popularSearchCategories.length]);\n\n  const collection = !popularSearchCategories ? (\n    <Loader active inline>\n      Loading, hold on for a sec...\n    </Loader>\n  ) : (\n    <>\n      <h1>Categories</h1>\n      <ul className={ classnames(Classes.grid, AppClasses.gridContainer2inRow) }>\n        {\n          popularSearchCategories.map((i) => (\n            <Collection\n              key={ i.id }\n              name={ i.title }\n              collectionHref={ `/popular-search-categories/${ i.slug }` }\n              description={ i.subTitle }\n              topMenuImage={ i.imageHref }\n              actionLabel=\"See More\"\n              useRealLink\n            />\n          ))\n        }\n      </ul>\n    </>\n  );\n\n  return (\n    <div className={ AppClasses.container20 }>\n      { popularSearchCategories ? <GTMPageView pageType=\"category\" section={ POPULAR_SEARCH_CATEGORIES } /> : null }\n      <div className={ classnames(AppClasses.innerContainer20, Classes.root) }>\n        { collection }\n      </div>\n    </div>\n\n  );\n};\n\nexport default PopularSearchCategories;\n"],"names":["POPULAR_SEARCH_CATEGORIES","PopularSearchCategories","popularSearchCategories","setPopularSearchCategories","useState","useEffect","window","toCamelCase","request","then","data","catch","length","trackEvent","collection","React","className","classnames","Classes","AppClasses","map","i","Collection","key","id","name","title","collectionHref","slug","description","subTitle","topMenuImage","imageHref","actionLabel","useRealLink","Loader","active","inline","GTMPageView","pageType","section"],"sourceRoot":""}