{"version":3,"file":"component---src-pages-hackshack-replays-template-js-bde89b519a97c27a4efe.js","mappings":"uKAMA,MAAMA,GAAYC,EAAAA,EAAAA,WAAUC,EAAAA,EAAK,CAC/BC,OAAQ,CACNC,YAAa,CACXC,MAAO,CACLC,MAAO,SAwBf,IAlB4BC,IAAmB,IAAlB,SAAEC,GAAUD,EACvC,OACEE,EAAAA,cAACC,EAAAA,EAAO,CACNC,UAAU,eACVC,MAAOZ,EACPa,UAAU,OACVC,WAAW,UACXC,MAAO,CAAEC,UAAW,WAEnBR,EACO,C,+IC0Jd,UArJwBS,IACtB,MAAMC,EAAmBC,gEACnB,EAACC,EAAQ,EAACC,IAAcC,EAAAA,EAAAA,UAAS,KACjC,EAACC,EAAM,EAACC,IAAYF,EAAAA,EAAAA,UAAS,KAEnCG,EAAAA,EAAAA,YAAU,KAiBNC,EAAAA,EAAYC,QAAQC,MAClB,KACaF,EAAAA,EAAYG,iBAAiBC,aAjB5CC,EAAAA,EAAAA,GAAM,CACJC,OAAQ,MACRC,IAAKf,IAEJU,MAAMM,IACLb,EAAWa,EAASC,KAAK,IAE1BC,OAAM,KACLZ,EACE,yGAEFa,QAAQC,IAAIf,EAAM,GAMkC,IAEtD,KACEC,EACE,wGACD,GAIG,GAET,CAACD,EAAOL,IACX,MAAM,WAAEqB,EAAU,cAAEC,EAAa,aAAEC,EAAY,YAAEC,GAC/CzB,EAAM0B,YACFC,EAAgBL,EAClBM,SAAS5B,EAAM0B,YAAYJ,WAAY,IACvC,GACE,EAACO,EAAQ,EAACC,IAAczB,EAAAA,EAAAA,UAASsB,IACjC,EAACI,EAAS,EAACC,IAAe3B,EAAAA,EAAAA,WAAS,GACnC4B,EA1DYC,EAACC,EAAYN,KAC/B,MAAMO,EAAY,GACZC,EAAM,GAUZ,OARAF,EAAWG,KAAKC,IACVV,EAAUU,EAAOC,GACnBH,EAAII,KAAKF,GAETH,EAAUK,KAAKF,GAEVA,KAEFH,EAAUM,OAAOL,EAAI,EA8CNH,CAAY/B,EAAS0B,GACrCc,EAAiBxC,EAAQyC,MAAKtD,IAAA,IAAC,GAAEkD,GAAIlD,EAAA,OAAKkD,IAAOX,CAAO,IAE9D,OACErC,EAAAA,cAACqD,EAAAA,EAAmB,KAClBrD,EAAAA,cAACsD,EAAAA,GAAM,CAACjD,WAAW,gDACjBL,EAAAA,cAACuD,EAAAA,EAAG,CAACjD,MAAO,CAAEkD,UAAW,wBACvBxD,EAAAA,cAACyD,EAAAA,GAAU,CAACC,MAAO3B,GACjB/B,EAAAA,cAAC2D,EAAAA,GAAG,CACFD,MAAO3B,EACP6B,YAAa5B,EACb6B,MAAO5B,IAERkB,EACCnD,EAAAA,cAAAA,EAAAA,SAAA,KACEA,EAAAA,cAAC8D,EAAAA,GAAK,CACJC,UAAWZ,EAAea,UAC1BhB,GAAIG,EAAeH,GACnBiB,OAAQd,EAAec,OACvBC,KAAMf,EAAee,KACrBC,IAAKhB,EAAeO,MACpBU,UAAWjB,EAAeiB,UAC1BC,KAAMlB,EAAekB,KACrBX,MAAOP,EAAeO,MACtBpB,WAAYA,EACZD,QAASA,EACTiC,cAAe3D,EAAQ4D,OACvBhC,SAAUA,EACViC,SACErB,EAAesB,UAAYtB,EAAesB,SAASD,SAErDE,YACEvB,EAAesB,UACftB,EAAesB,SAASC,YAE1BC,SACExB,EAAesB,UAAYtB,EAAesB,SAASE,SAErDC,SACEzB,EAAesB,UAAYtB,EAAesB,SAASG,SAErD7C,cACEoB,EAAesB,UAAYtB,EAAesB,SAASI,KAErD/C,WAAYA,EACZgD,iBACE3B,EAAesB,UAAYtB,EAAesB,SAASM,WAGvD/E,EAAAA,cAACgF,EAAAA,EAAO,CAACC,MAAM,OAAO3E,MAAO,CAAE4E,WAAY,OAASC,MAAO,GAAG,YAKhEnF,EAAAA,cAACuD,EAAAA,EAAG,CACF6B,IAAI,QACJC,QAAQ,SACRC,OAAQ,CAAEC,IAAK,UACfC,UAAU,UAGT1E,EACCd,EAAAA,cAAAA,EAAAA,SAAA,KACEA,EAAAA,cAACyF,EAAAA,EAAI,CACHC,KAAK,QACLT,MAAM,kBACNU,UAAU,UAET7E,GAEHd,EAAAA,cAAC4F,EAAAA,EAAK,CAACC,IAAI,iBAAiBC,IAAI,6BAGlC9F,EAAAA,cAACuD,EAAAA,EAAG,CAACwC,OAAO,YAIjBtD,EAAcK,KACbkD,IAAA,IAAC,KAAE9B,EAAI,UAAEE,EAAS,KAAEC,EAAI,MAAEX,EAAK,UAAEM,EAAS,GAAEhB,GAAIgD,EAAA,OAC9ChD,IAAOX,GACLrC,EAAAA,cAACiG,EAAAA,GAAS,CACR9B,IAAKT,EACLV,GAAIA,EACJkB,KAASA,EAAKgC,MAAM,EAAG,KAAI,MAC3BxC,MAAOA,EACPU,UAAWA,EACXJ,UAAWA,EACXK,KAAMA,EACN/B,WAAYA,EACZE,YAAaA,GAEhB,OAKS,C","sources":["webpack://hpe-dev-portal/./src/components/hackshack/Grommet/GrommetThemeWrapper.js","webpack://hpe-dev-portal/./src/pages/hackshack/replays/template.js"],"sourcesContent":["import React from 'react';\nimport { Grommet } from 'grommet';\nimport { hpe } from 'grommet-theme-hpe';\nimport { deepMerge } from 'grommet/utils';\nimport PropTypes from 'prop-types';\n\nconst customHpe = deepMerge(hpe, {\n  global: {\n    breakpoints: {\n      small: {\n        value: 900,\n      },\n    },\n  },\n});\n\nconst GrommetThemeWrapper = ({ children }) => {\n  return (\n    <Grommet\n      className=\"Test-abc-123\"\n      theme={customHpe}\n      themeMode=\"dark\"\n      background=\"#151d29\"\n      style={{ overflowX: 'hidden' }}\n    >\n      {children}\n    </Grommet>\n  );\n};\n\nGrommetThemeWrapper.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n\nexport default GrommetThemeWrapper;\n","/* eslint-disable max-len */\n/* eslint-disable react/prop-types */\nimport React, { useEffect, useState } from 'react';\nimport { Heading, Text, Box, Image } from 'grommet';\nimport axios from 'axios';\nimport PropTypes from 'prop-types';\nimport {\n  Layout,\n  VideoList,\n  Video,\n  PageHeader,\n} from '../../../components/hackshack';\nimport AuthService from '../../../services/auth.service';\nimport { SEO } from '../../../components';\nimport GrommetThemeWrapper from '../../../components/hackshack/Grommet/GrommetThemeWrapper';\n\nconst sortReplays = (replayData, current) => {\n  const beggining = [];\n  const end = [];\n\n  replayData.map((replay) => {\n    if (current > replay.id) {\n      end.push(replay);\n    } else {\n      beggining.push(replay);\n    }\n    return replay;\n  });\n  return beggining.concat(end);\n};\n\nconst ReplayTemplate = (props) => {\n  const getReplaysApi = `${process.env.GATSBY_WORKSHOPCHALLENGE_API_ENDPOINT}/api/replays?active=true`;\n  const [replays, setReplays] = useState([]);\n  const [error, setError] = useState('');\n\n  useEffect(() => {\n    const getReplays = () => {\n      axios({\n        method: 'GET',\n        url: getReplaysApi,\n      })\n        .then((response) => {\n          setReplays(response.data);\n        })\n        .catch(() => {\n          setError(\n            'Oops..something went wrong. The HPE Developer team is addressing the problem. Please try again later!',\n          );\n          console.log(error);\n        });\n    };\n    const getToken = () => {\n      AuthService.login().then(\n        () => {\n          getReplays(AuthService.getCurrentUser().accessToken);\n        },\n        () => {\n          setError(\n            'Oops..something went wrong. The HPE Developer team is addressing the problem. Please try again later!',\n          );\n        },\n      );\n    };\n    getToken();\n    // eslint-disable-next-line\n  }, [error, getReplaysApi]);\n  const { workshopId, workshopTitle, workshopDesc, workshopImg } =\n    props.pageContext;\n  const workshopIndex = workshopId\n    ? parseInt(props.pageContext.workshopId, 10)\n    : 0;\n  const [current, setCurrent] = useState(workshopIndex);\n  const [autoplay, setAutoPlay] = useState(false);\n  const sortedReplays = sortReplays(replays, current);\n  const selectedReplay = replays.find(({ id }) => id === current);\n\n  return (\n    <GrommetThemeWrapper>\n      <Layout background=\"/img/BackgroundImages/generic-background.jpg\">\n        <Box style={{ minHeight: 'calc(100vh - 345px)' }}>\n          <PageHeader title={workshopTitle}>\n            <SEO\n              title={workshopTitle}\n              description={workshopDesc}\n              image={workshopImg}\n            />\n            {selectedReplay ? (\n              <>\n                <Video\n                  videolink={selectedReplay.videoLink}\n                  id={selectedReplay.id}\n                  avatar={selectedReplay.avatar}\n                  desc={selectedReplay.desc}\n                  key={selectedReplay.title}\n                  presenter={selectedReplay.presenter}\n                  role={selectedReplay.role}\n                  title={selectedReplay.title}\n                  setCurrent={setCurrent}\n                  current={current}\n                  replaysLength={replays.length}\n                  autoplay={autoplay}\n                  notebook={\n                    selectedReplay.workshop && selectedReplay.workshop.notebook\n                  }\n                  sessionType={\n                    selectedReplay.workshop &&\n                    selectedReplay.workshop.sessionType\n                  }\n                  location={\n                    selectedReplay.workshop && selectedReplay.workshop.location\n                  }\n                  capacity={\n                    selectedReplay.workshop && selectedReplay.workshop.capacity\n                  }\n                  workshopTitle={\n                    selectedReplay.workshop && selectedReplay.workshop.name\n                  }\n                  workshopId={workshopId}\n                  workshopDuration={\n                    selectedReplay.workshop && selectedReplay.workshop.duration\n                  }\n                />\n                <Heading color=\"text\" style={{ fontWeight: '500' }} level={2}>\n                  UP NEXT\n                </Heading>\n              </>\n            ) : (\n              <Box\n                pad=\"small\"\n                justify=\"center\"\n                margin={{ top: 'medium' }}\n                direction=\"column\"\n                // background=\"status-critical\"\n              >\n                {error ? (\n                  <>\n                    <Text\n                      size=\"large\"\n                      color=\"status-critical\"\n                      alignSelf=\"center\"\n                    >\n                      {error}\n                    </Text>\n                    <Image alt=\"gremlin rockin\" src=\"/img/gremlin-rockin.svg\" />\n                  </>\n                ) : (\n                  <Box height=\"medium\" />\n                )}\n              </Box>\n            )}\n            {sortedReplays.map(\n              ({ desc, presenter, role, title, videoLink, id }) =>\n                id !== current && (\n                  <VideoList\n                    key={title}\n                    id={id}\n                    desc={`${desc.slice(0, 150)}...`}\n                    title={title}\n                    presenter={presenter}\n                    videoLink={videoLink}\n                    role={role}\n                    setCurrent={setCurrent}\n                    setAutoPlay={setAutoPlay}\n                  />\n                ),\n            )}\n          </PageHeader>\n        </Box>\n      </Layout>\n    </GrommetThemeWrapper>\n  );\n};\n\nReplayTemplate.propTypes = {\n  pageContext: PropTypes.number,\n  // eslint-disable-next-line react/no-unused-prop-types\n  path: PropTypes.string,\n};\n\nexport default ReplayTemplate;\n"],"names":["customHpe","deepMerge","hpe","global","breakpoints","small","value","_ref","children","React","Grommet","className","theme","themeMode","background","style","overflowX","props","getReplaysApi","process","replays","setReplays","useState","error","setError","useEffect","AuthService","login","then","getCurrentUser","accessToken","axios","method","url","response","data","catch","console","log","workshopId","workshopTitle","workshopDesc","workshopImg","pageContext","workshopIndex","parseInt","current","setCurrent","autoplay","setAutoPlay","sortedReplays","sortReplays","replayData","beggining","end","map","replay","id","push","concat","selectedReplay","find","GrommetThemeWrapper","Layout","Box","minHeight","PageHeader","title","SEO","description","image","Video","videolink","videoLink","avatar","desc","key","presenter","role","replaysLength","length","notebook","workshop","sessionType","location","capacity","name","workshopDuration","duration","Heading","color","fontWeight","level","pad","justify","margin","top","direction","Text","size","alignSelf","Image","alt","src","height","_ref2","VideoList","slice"],"sourceRoot":""}