{"version":3,"file":"component---src-dynamic-pages-category-js-115c5ba8370792e08d95.js","mappings":"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","sources":["webpack://gatsby-starter-default/./src/dynamic-pages/category.js"],"sourcesContent":["import React, { useContext, useState, Fragment, useEffect } from \"react\"\nimport Layout from \"../components/layout\"\nimport { StateContext } from \"../context/stateProvider\"\nimport { Listbox, Transition } from \"@headlessui/react\"\nimport { CheckIcon, SelectorIcon } from \"@heroicons/react/solid\"\nimport { NavigationContext } from \"../context/Navigation\"\nimport CourseCard from \"../components/CourseCard\"\nimport courseSvc from \"../services/Course\"\nimport Loader from \"../components/Loader\"\nimport { englishStarCourseId } from \"../../config\"\nimport { sortEnglishCourse } from \"./home-pages\"\nconst { coursesByCategories, coursesByField } = require(\"../data.json\")\n\nfunction Category({ pageContext }) {\n  const { category } = pageContext\n  const { courseName, Category, setCourseName, setCategory } =\n    useContext(StateContext)\n  const { setPath } = useContext(NavigationContext)\n\n  // Courses of this category (up-to-date)\n  const [courses, setCourses] = useState(sortEnglishCourse(coursesByField))\n\n  // Bootstrap\n  useEffect(() => {\n    console.log(\"Effect Triggered\")\n    setCategory(category)\n\n    courseSvc\n      .fetchAllCourses()\n      .catch(err => {\n        console.error(err)\n        return []\n      })\n      .then(courses => setCourses(sortEnglishCourse(courses)))\n  }, [])\n\n  // All categories\n  const handleSearch = e => {\n    let value = e.target.value.toLowerCase()\n    setCourseName(value)\n  }\n  const changeCategory = e => {\n    setCategory(e)\n    setPath(`/courses/${e.id}`)\n  }\n  const searchTerms = courseName.split(\" \").map(e => e.trim())\n\n  const filteredData = (courses || []).filter(item => {\n    let exists = false\n    const { displayName, shortName, categoryId } = item\n    searchTerms.map(term => {\n      const compareString = `${displayName} ${shortName} ${categoryId}`\n      if (compareString.toLowerCase().includes(term)) exists = true\n    })\n    return exists\n  })\n\n  return (\n    <Layout>\n      <div className=\"content mx-auto\">\n        <div className=\"flex flex-col md:flex-row justify-between pb-12 pt-36 px-5\">\n          <input\n            type=\"text\"\n            onChange={handleSearch}\n            placeholder=\"Search Courses\"\n            value={courseName}\n            className=\"bg-gray-100 text text-md px-4 py-3 rounded-lg outline w-full md:w-3/5 \"\n          />\n\n          <div className=\"w-full lg:w-1/3 z-10\">\n            {/* <Listbox value={selected} onChange={setSelected}> */}\n            <Listbox value={Category} onChange={changeCategory}>\n              <div className=\"relative mt-1\">\n                <Listbox.Button className=\"relative w-full py-3 pl-2 pr-6 text-left bg-white cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-opacity-75 focus-visible:ring-white focus-visible:ring-offset-orange-300 focus-visible:ring-offset-2 focus-visible:border-indigo-500\">\n                  <span className=\"block truncate text-md text-gray-500\">\n                    {/* {selected?.categoryName} */}\n                    {Category?.categoryName}\n                  </span>\n                  <span className=\"absolute inset-y-0 right-0 flex items-center pr-1 pointer-events-none\">\n                    <SelectorIcon\n                      className=\"w-6 h-6 text-gray-400\"\n                      aria-hidden=\"true\"\n                    />\n                  </span>\n                </Listbox.Button>\n                <Transition\n                  as={Fragment}\n                  enter=\"transition duration-100 ease-out\"\n                  enterFrom=\"transform scale-95 opacity-0\"\n                  enterTo=\"transform scale-100 opacity-100\"\n                  leave=\"transition duration-75 ease-out\"\n                  leaveFrom=\"transform scale-100 opacity-100\"\n                  leaveTo=\"transform scale-95 opacity-0\"\n                >\n                  <Listbox.Options className=\"absolute -left-16 select-width py-1 mt-1 overflow-auto scroll text-sm bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\">\n                    {coursesByCategories?.map(category => {\n                      const { categoryName, id } = category\n\n                      return (\n                        <Listbox.Option\n                          // key={person.id}\n                          key={id}\n                          className={({ active }) =>\n                            `${\n                              active\n                                ? \"text-yellow-900 bg-yellow-100\"\n                                : \"text-gray-900\"\n                            }\n                          cursor-default select-none relative py-2 pl-10 pr-4`\n                          }\n                          value={category}\n                          // value={person?.categoryName}\n                        >\n                          {/* {({ selected, active }) => ( */}\n                          {({ selected, active }) => (\n                            <>\n                              <span\n                                className={`${\n                                  // selected ? \"font-medium\" : \"font-normal\"\n                                  selected ? \"font-medium\" : \"font-normal\"\n                                } block truncate text-xl pl-4`}\n                                dangerouslySetInnerHTML={{\n                                  __html: categoryName,\n                                }}\n                              >\n                                {}\n                                {/* {categoryName} */}\n                                {/* {person.categoryName} */}\n                              </span>\n                              {/* {selected ? ( */}\n                              {selected ? (\n                                <span\n                                  className={`${\n                                    active\n                                      ? \"text-yellow-600\"\n                                      : \"text-yellow-600\"\n                                  }\n                                absolute inset-y-0 left-0 flex items-center pl-3`}\n                                >\n                                  <CheckIcon\n                                    className=\"w-8 h-8\"\n                                    aria-hidden=\"true\"\n                                  />\n                                </span>\n                              ) : null}\n                            </>\n                          )}\n                        </Listbox.Option>\n                      )\n                    })}\n                  </Listbox.Options>\n                </Transition>\n              </div>\n            </Listbox>\n          </div>\n        </div>\n\n        {!filteredData && (\n          <div className=\"w-full flex justify-center p-4\">\n            <Loader style={{ width: \"130px\" }} />\n          </div>\n        )}\n        {filteredData && filteredData.length === 0 && (\n          <h2>No Courses available</h2>\n        )}\n        {filteredData && filteredData.length > 0 && (\n          <div className=\"w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-x-2 gap-y-6\">\n            {filteredData.map(obj => (\n              <CourseCard data={obj} key={obj.courseId} />\n            ))}\n          </div>\n        )}\n      </div>\n    </Layout>\n  )\n}\n\nexport default Category\n"],"names":["coursesByCategories","coursesByField","require","_ref","pageContext","category","courseName","Category","setCourseName","setCategory","useContext","StateContext","setPath","NavigationContext","courses","setCourses","useState","sortEnglishCourse","useEffect","console","log","courseSvc","catch","err","error","then","searchTerms","split","map","e","trim","filteredData","filter","item","exists","displayName","shortName","categoryId","term","toLowerCase","includes","React","Layout","className","type","onChange","value","target","placeholder","Listbox","id","Button","categoryName","SelectorIcon","Transition","as","Fragment","enter","enterFrom","enterTo","leave","leaveFrom","leaveTo","Options","Option","key","_ref2","active","_ref3","selected","dangerouslySetInnerHTML","__html","CheckIcon","Loader","style","width","length","obj","CourseCard","data","courseId"],"sourceRoot":""}