{"version":3,"sources":["webpack:///./src/components/modules/Event.js","webpack:///./src/pages/community.js","webpack:///./src/components/modules/BlockImageText.js"],"names":["Event","data","className","onClick","e","currentTarget","parentElement","classList","toggle","title","date","formatDate","Date","richText","description","json","image","Community","communityPage","allContentfulCommunity","nodes","slice","events","textBlocks","useState","eventsSorted","setEventsSorted","eventsIndex","setEventsIndex","useEffect","sort","a","b","pageTitle","classnames","bb","length","map","event","index","key","bt","block","__typename","isNavList","BlockImageText","setTextToLeft","text"],"mappings":"8FAAA,iDAsCeA,IAlCD,SAAC,GAA8B,IAA5BC,EAA2B,EAA3BA,KAA2B,IAArBC,iBAAqB,MAAT,GAAS,EAO1C,OACE,wBAAIA,UAAS,2CAA6CA,GACxD,4BACEA,UAAU,kGACVC,QATkB,SAAAC,GACNA,EAAEC,cAAcC,cACtBC,UAAUC,OAAO,yBASvB,yBAAKN,UAAU,eAAeD,EAAKQ,OAClCR,EAAKS,MACJ,yBAAKR,UAAU,eAAeS,YAAW,IAAIC,KAAKX,EAAKS,SAG3D,yBAAKR,UAAU,0CACb,yBAAKA,UAAU,gCACb,yBAAKA,UAAU,wEACZW,YAASZ,EAAKa,YAAYC,OAE5Bd,EAAKe,OACJ,4BAAQd,UAAU,oEAChB,kBAAC,IAAD,CAAOc,MAAOf,EAAKe,c,oCC7BjC,6HAuGeC,UA5FG,SAAC,GAAc,IAGzBC,EAHwB,EAAXjB,KAGQkB,uBAAuBC,MAAMC,OAAO,GAAG,GAC1DC,EAAuBJ,EAAvBI,OAAQC,EAAeL,EAAfK,WAJc,EAOUC,mBAAS,IAA1CC,EAPuB,KAOTC,EAPS,OAUQF,mBAAS,GAAxCG,EAVuB,KAUVC,EAVU,KAkB9B,OAJAC,qBAAU,WACRH,EAAgBJ,EAAOQ,MAAK,SAACC,EAAGC,GAAJ,OAAU,IAAIpB,KAAKoB,EAAEtB,MAAQ,IAAIE,KAAKmB,EAAErB,YACnE,CAACgB,EAAiBJ,IAGnB,kBAAC,IAAD,CAAQW,UAAU,aAChB,6BAAS/B,UAAU,8CAEjB,6BACEA,UAAWgC,IAAW,2BAA4B,CAChDC,GAAIZ,EAAWa,OAAS,KAG1B,wBAAIlC,UAAU,mBACXuB,EAAaJ,MAAM,EAAGM,GAAaU,KAAI,SAACC,EAAOC,GAC9C,OACE,kBAAC,IAAD,CACEC,IAAKD,EACLtC,KAAMqC,EACNpC,UAAWgC,IAAW,CAAEO,GAAc,IAAVF,UAKnCd,EAAaW,OAAST,GACrB,6BAASzB,UAAU,MACjB,4BACEA,UAAU,iBACVC,QAAS,WACPyB,EAAeD,EAhCA,KA6BnB,yBAYLJ,EAAWc,KAAI,SAACK,EAAOH,GACtB,MAAyB,4BAArBG,EAAMC,WAEN,kBAAC,IAAD,CACEH,IAAKD,EACLtC,KAAMyC,EACNxC,UAAWgC,IAAW,CACpBC,GAAII,EAAQhB,EAAWa,OAAS,MAIR,4BAArBM,EAAMC,WAEb,kBAAC,IAAD,CACEH,IAAKD,EACLtC,KAAMyC,EACNxC,UAAWgC,IAAW,CACpBC,GAAII,EAAQhB,EAAWa,OAAS,MAMpC,kBAAC,IAAD,CACEI,IAAKD,EACLtC,KAAMyC,EACNxC,UAAWgC,IAAW,CACpBC,GAAII,EAAQhB,EAAWa,OAAS,SAO1C,kBAAC,IAAD,CAAgBQ,WAAW,EAAM1C,UAAU,W,kCCjGnD,sEAuCe2C,IAlCQ,SAAC,GAA8B,IAA5B5C,EAA2B,EAA3BA,KAA2B,IAArBC,iBAAqB,MAAT,GAAS,EACnD,OACE,6BAASA,UAAS,4BAA8BA,GAC9C,wBAAIA,UAAU,gDACXD,EAAKQ,OAER,yBACEP,UAAWgC,IAAW,+BAAgC,CACpD,0CAA2CjC,EAAK6C,iBAGlD,yBACE5C,UAAWgC,IAAW,6CAA8C,CAClE,aAAcjC,EAAK6C,iBAGpB7C,EAAKe,OACJ,gCACE,kBAAC,IAAD,CAAOA,MAAOf,EAAKe,UAIzB,yBACEd,UAAWgC,IAAW,6CAA8C,CAClE,cAAejC,EAAK6C,iBAGrBjC,YAASZ,EAAK8C,KAAKhC","file":"component---src-pages-community-js-ad2c64ec886c60342321.js","sourcesContent":["import React from 'react';\nimport { formatDate, richText } from 'components/utils/helpers';\nimport Image from 'components/base/Image';\n\nconst Event = ({ data, className = '' }) => {\n  // Accordion toggler\n  const toggleAccordion = e => {\n    let accordion = e.currentTarget.parentElement;\n    accordion.classList.toggle('Accordion--collapse');\n  };\n\n  return (\n    <li className={`Event Accordion Accordion--collapse pv2 ${className}`}>\n      <button\n        className=\"Event__head Accordion__head db w-100 flex justify-between body-subheader gradient-hover pointer\"\n        onClick={toggleAccordion}\n      >\n        <div className=\"Event__name\">{data.title}</div>\n        {data.date && (\n          <div className=\"Event__date\">{formatDate(new Date(data.date))}</div>\n        )}\n      </button>\n      <div className=\"Event__body Accordion__body mv4 mv2-md\">\n        <div className=\"flex flex-column flex-row-md\">\n          <div className=\"Event__description w-100 w-50-md body-copy pr0 pr3-md pr4-xl pr5-xxl\">\n            {richText(data.description.json)}\n          </div>\n          {data.image && (\n            <figure className=\"Event__images w-100 w-50-md mt4 mt0-md pl0 pl3-md pl4-xl pl5-xxl\">\n              <Image image={data.image} />\n            </figure>\n          )}\n        </div>\n      </div>\n    </li>\n  );\n};\n\nexport default Event;\n","import React, { useState, useEffect } from 'react';\nimport { graphql } from 'gatsby';\nimport classnames from 'classnames';\nimport Layout from 'components/Layout';\nimport Event from 'components/modules/Event';\nimport BlockRichText from 'components/modules/BlockRichText';\nimport BlockTextText from 'components/modules/BlockTextText';\nimport BlockImageText from 'components/modules/BlockImageText';\nimport BlockLinksList from 'components/modules/BlockLinksList';\n// import SEO from '../components/site/SEO';\n\nconst Community = ({ data }) => {\n  //get the last item in the nodes - this is in case they have a draft version\n  //of a new event page\n  const communityPage = data.allContentfulCommunity.nodes.slice(-1)[0];\n  const { events, textBlocks } = communityPage;\n\n  // State for sorted events\n  const [eventsSorted, setEventsSorted] = useState([]);\n\n  // State for number of events to show\n  const [eventsIndex, setEventsIndex] = useState(5);\n  const eventsIndexIncrementer = 5;\n\n  // Set the events in order by date\n  useEffect(() => {\n    setEventsSorted(events.sort((a, b) => new Date(b.date) - new Date(a.date)));\n  }, [setEventsSorted, events]);\n\n  return (\n    <Layout pageTitle=\"Community\">\n      <article className=\"container container--thin container--boxed\">\n        {/* An events block, a list of events */}\n        <section\n          className={classnames('block pv3 pv4-xl pv5-xxl', {\n            bb: textBlocks.length > 0\n          })}\n        >\n          <ul className=\"list ph3 ph4-xl\">\n            {eventsSorted.slice(0, eventsIndex).map((event, index) => {\n              return (\n                <Event\n                  key={index}\n                  data={event}\n                  className={classnames({ bt: index !== 0 })}\n                />\n              );\n            })}\n          </ul>\n          {eventsSorted.length > eventsIndex && (\n            <section className=\"tc\">\n              <button\n                className=\"gradient-hover\"\n                onClick={() => {\n                  setEventsIndex(eventsIndex + eventsIndexIncrementer);\n                }}\n              >\n                Show more events...\n              </button>\n            </section>\n          )}\n        </section>\n        {/* a block with text left and image right */}\n        {textBlocks.map((block, index) => {\n          if (block.__typename === 'ContentfulBlockRichText') {\n            return (\n              <BlockRichText\n                key={index}\n                data={block}\n                className={classnames({\n                  bb: index < textBlocks.length - 1\n                })}\n              />\n            );\n          } else if (block.__typename === 'ContentfulBlockTextText') {\n            return (\n              <BlockTextText\n                key={index}\n                data={block}\n                className={classnames({\n                  bb: index < textBlocks.length - 1\n                })}\n              />\n            );\n          } else {\n            return (\n              <BlockImageText\n                key={index}\n                data={block}\n                className={classnames({\n                  bb: index < textBlocks.length - 1\n                })}\n              />\n            );\n          }\n        })}\n        {/* Links list block */}\n        <BlockLinksList isNavList={true} className=\"bt\" />\n      </article>\n    </Layout>\n  );\n};\n\nexport default Community;\n\nexport const query = graphql`\n  query communityPage {\n    allContentfulCommunity {\n      nodes {\n        events {\n          ... on Node {\n            ... on ContentfulBlockEvent {\n              title\n              date\n              description {\n                json\n              }\n              image {\n                description\n                fluid(maxWidth: 600) {\n                  ...GatsbyContentfulFluid_withWebp\n                }\n              }\n            }\n          }\n        }\n        textBlocks {\n          __typename\n          ... on Node {\n            ... on ContentfulBlockRichText {\n              title\n              description {\n                json\n              }\n              twoColumn\n            }\n            ... on ContentfulBlockTextText {\n              title\n              textLeft {\n                json\n              }\n              textRight {\n                json\n              }\n            }\n            ... on ContentfulBlockImageText {\n              title\n              image {\n                description\n                fluid(maxWidth: 600) {\n                  ...GatsbyContentfulFluid_withWebp\n                }\n              }\n              setTextToLeft\n              text {\n                json\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n","import React from 'react';\nimport { richText } from 'components/utils/helpers';\nimport classnames from 'classnames';\nimport Image from 'components/base/Image';\n\nconst BlockImageText = ({ data, className = '' }) => {\n  return (\n    <section className={`block pv3 pv4-xl pv5-xxl ${className}`}>\n      <h3 className=\"body-header mb3 mb4-md mb5-xl ph3 ph4-xl ttu\">\n        {data.title}\n      </h3>\n      <div\n        className={classnames('flex flex-column flex-row-md', {\n          'flex-column-reverse flex-row-reverse-md': data.setTextToLeft\n        })}\n      >\n        <div\n          className={classnames('w-100 w-50-md body-copy ph3 ph4-xl ph5-xxl', {\n            'mt4 mt0-md': data.setTextToLeft\n          })}\n        >\n          {data.image && (\n            <figure>\n              <Image image={data.image} />\n            </figure>\n          )}\n        </div>\n        <div\n          className={classnames('w-100 w-50-md body-copy ph3 ph4-xl ph5-xxl', {\n            'mt4 mt0-md': !data.setTextToLeft\n          })}\n        >\n          {richText(data.text.json)}\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default BlockImageText;\n"],"sourceRoot":""}