{"version":3,"file":"js/react/mls-need-to-know-app.js?_t=609bca81fc75c62a4c8b","mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AAmBA;AAGA;AAEA;;;;;;;;;;;;;;;;ACvCA;AAEA;AACA;AAAA;AAEA;AAaA;AAAA;AAGA;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;ACvBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AAGA;AAEA;AAEA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AACA;AAAA;AAGA;AACA;AAAA;AAGA;AACA;AACA;AAAA;AACA;AAGA;AACA;AACA;AAAA;AACA;AAGA;AAOA;AAIA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAGA;AAAA;AAAA;AAAA;AACA;AAAA;AAAA;AAUA;AAkBA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA;AAAA;AAOA;AAGA;AAEA;;;;;;;;;;;;;;;;ACvHA;AAEA;AACA;AAAA;AAEA;AAOA;AAEA;;;;;;;;;;;;;;;;ACdA;;;;;;;;;;;;;;;;;;;;;;ACAA;AACA;AACA;AACA;AACA;AAEA;AAAA;AACA;AAEA;AAEA;AACA;AAAA;AAEA;AAAA;AACA;AAEA;AAAA;AACA;AAGA;AAAA;AACA;AAEA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AAIA;AAMA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AAGA;AAEA;AACA;AACA;AAAA;AAEA;AACA;AAEA;AAIA;AAAA;AAGA;AAGA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA","sources":["webpack://@mlssoccer/netcore/./scripts/react/mls-need-to-know/app.js","webpack://@mlssoccer/netcore/./scripts/react/mls-need-to-know/components/NeedToKnowCard/NeedToKnowCard.js","webpack://@mlssoccer/netcore/./scripts/react/mls-need-to-know/components/NeedToKnowNavigation/NeedToKnowNavigation.js","webpack://@mlssoccer/netcore/./scripts/react/mls-need-to-know/main.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/ErrorDisplay/ErrorDisplay.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/ErrorDisplay/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/hooks/useMatchStatus.js"],"sourcesContent":["export { default } from './main';\n","import React from 'react';\nimport Picture from \"../../../shared/components/Picture\";\nimport { formatImageUrl } from \"../../../shared/utils\";\nimport { useReactAppState } from \"../../../shared/containers/utils\";\n\nfunction NeedToKnowCard({ match, homeClub, awayClub }) {\n  const { t } = useReactAppState();\n  const { fact } = match || {};\n\n  const { logoColorUrl: homeLogoColorUrl } = homeClub || {};\n  const { logoColorUrl: awayLogoColorUrl } = awayClub || {};\n\n  const { highQuality: homeClubLogoSrc } = homeLogoColorUrl ? formatImageUrl(homeLogoColorUrl, { format: \"w_128,h_128,c_pad\", extension: \"f_png\" }) : {};\n  const { highQuality: awayClubLogoSrc } = awayLogoColorUrl ? formatImageUrl(awayLogoColorUrl, { format: \"w_128,h_128,c_pad\", extension: \"f_png\" }) : {};\n\n  return (\n    fact ? (\n      <div className=\"mls-o-need-to-know__card\">\n        <div className=\"mls-o-need-to-know__card-background-container\">\n          <Picture loadingSrc={null} fallbackSrc={null} src=\"/assets/images/slashpattern-600x600-e1e1e1.png\" title=\"card background\" extraClasses=\"mls-o-need-to-know__card-background mls-o-need-to-know__card-background--light\" />\n        </div>\n        <div className=\"mls-o-need-to-know__club-group\">\n          <div className=\"mls-o-need-to-know__club-logo\">\n            <Picture src={homeClubLogoSrc} title={t(\"home_club\")} />\n          </div>\n\n          <div className=\"mls-o-need-to-know__club-logo\">\n            <Picture src={awayClubLogoSrc} title={t(\"away_club\")} />\n          </div>\n        </div>\n        <div className=\"mls-o-need-to-know__fact\">{fact}</div>\n      </div>\n    ) : null\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nNeedToKnowCard = React.memo(NeedToKnowCard);\n\nexport default NeedToKnowCard;\n","import React from 'react';\n\nfunction NeedToKnowNavigation({ side = null, onClick = null }) {\n  if (!side || !onClick) return;\n\n  return (\n    <div className=\"mls-o-need-to-know__navigation\" onClick={onClick}>\n      <div className={`fo-carousel__arrow -${side}`}>\n        <div role=\"img\" className=\"mls-o-buttons__svg transform \">\n          <span className=\"oc-o-icon--chevron-right fa-icon-svg fa-icon-svg--small\">\n            <svg className=\"fa-icon-svg fa-icon-svg--chevron-down\" viewBox=\"0 0 30 30\">\n              <use xlinkHref=\"#chevron-down\" />\n            </svg>\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n};\n\n// eslint-disable-next-line no-func-assign\nNeedToKnowNavigation = React.memo(NeedToKnowNavigation);\n\nexport default NeedToKnowNavigation;\n","import React, { createRef, useEffect, useRef } from 'react';\nimport { useQuery } from \"react-query\";\nimport Flicking from \"@egjs/react-flicking\";\nimport { apiURL, mlsNeedToKnowAPI } from \"../shared/api/variables\";\nimport { fetchClient } from \"../shared/api/fetching\";\nimport ErrorDisplay from \"../shared/components/ErrorDisplay\";\nimport NeedToKnowCard from \"./components/NeedToKnowCard/NeedToKnowCard\";\nimport NeedToKnowNavigation from \"./components/NeedToKnowNavigation/NeedToKnowNavigation\";\nimport Picture from \"../shared/components/Picture\";\nimport { useMatchStatus } from \"../shared/hooks/useMatchStatus\";\nimport { statusTypes } from \"../mls-match-list/utils\";\nimport { useReactAppState } from \"../shared/containers/utils\";\n\n\nfunction NeedToKnow({ options }) {\n  const { match: appMatch, mediaQueries, t, matchStatusOverride } = useReactAppState();\n  const { isMediumLargeMin } = mediaQueries || {};\n  const matchOptaId = options.matchOptaId || appMatch?.optaId;\n  const home = options.home;\n  const away = options.away;\n  const ref = createRef();\n\n  const { error, isLoading, isError, status: matchStatus } = useMatchStatus({\n    initialState: {\n      matchOptaId\n    }\n  });\n\n  const status = matchStatusOverride?.abbreviation ? matchStatusOverride : matchStatus;\n\n  const needToKnowEndPoint = mlsNeedToKnowAPI({ matchOptaId });\n\n  const {\n    isLoading: isLoadingNeedToKnow,\n    isError: isErrorNeedToKnow,\n    data: needToKnowData,\n    error: needToKnowError,\n  } = useQuery({\n    queryKey: [`mls-need-to-know`, { matchOptaId }],\n    queryFn: () => fetchClient({ endpoint: needToKnowEndPoint, apiURL: apiURL.statsAPI })\n  });\n\n  if (status?.abbreviation !== statusTypes.pre) {\n    return null;\n  }\n\n  if (!matchOptaId) {\n    return null;\n  }\n\n  const goToNextCard = () => {\n    if (ref?.current) {\n      ref.current.next();\n    }\n  };\n\n  const goToPrevCard = () => {\n    if (ref?.current) {\n      ref.current.prev();\n    }\n  };\n  \n  return (\n    isLoading || isLoadingNeedToKnow\n      ? (\n        <div role=\"region\" className={`mls-o-need-to-know`}>\n          <div className=\"mls-o-need-to-know__wrapper mls-o-need-to-know__wrapper--no-carousel\">\n            {\n              [...Array(4)].map((match, index) => {\n                return (\n                  <div key={index} className=\"mls-o-need-to-know__card\">\n                    <div className=\"mls-o-need-to-know__club-group\">\n                      <span className=\"mls-o-need-to-know__club-logo\">\n                        <Picture extraClasses=\"mls-o-loading mls-o-loading--glow\"\n                          src=\"/assets/images/Fallbacklogo-grey.png\" title={t(\"fallback_logo\")} />\n                      </span>\n                      <span className=\"mls-o-need-to-know__club-logo\">\n                        <Picture extraClasses=\"mls-o-loading mls-o-loading--glow\"\n                          src=\"/assets/images/Fallbacklogo-grey.png\" title={t(\"fallback_logo\")} />\n                      </span>\n                    </div>\n                    <div className=\"mls-o-need-to-know__fact\">\n                      <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--100\" />\n                      <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--100\" />\n                      <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--100\" />\n                      <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--100\" />\n                      <div className=\"mls-o-loading mls-o-loading--glow mls-o-loading--line mls-o-loading--100\" />\n                    </div>\n                  </div>\n                );\n              })\n            }\n          </div>\n        </div>\n      )\n      : isError || isErrorNeedToKnow\n        ? <ErrorDisplay error={needToKnowError || error} />\n        : needToKnowData && needToKnowData.length > 0\n          ?\n            <div role=\"region\" className={`mls-o-need-to-know`}>\n              <div className=\"mls-o-need-to-know__header\">{t(\"need_to_know\")}</div>\n            <div className=\"mls-o-need-to-know__navigation-wrapper\">\n              <NeedToKnowNavigation side=\"next\" onClick={goToNextCard} />\n              <NeedToKnowNavigation side=\"prev\" onClick={goToPrevCard} />\n              <Flicking inputType={[\"touch\", \"mouse\"]} bound ref={ref} gap={17} hanger={\"0\"} anchor={\"0\"} className=\"mls-o-need-to-know__wrapper mls-o-need-to-know__wrapper--carousel\">\n                {\n                  needToKnowData.map(match => <NeedToKnowCard key={match.fact_id} match={match} homeClub={home}\n                    awayClub={away} />)\n                }\n              </Flicking>\n              </div>\n            </div>\n          : null\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nNeedToKnow = React.memo(NeedToKnow);\n\nexport default NeedToKnow;\n","import React from 'react';\n\nconst ErrorDisplay = ({ error }) => {\n  if (!error || !error.message) return null;\n\n  return (\n    <div className={\"mls-o-error\"}>\n      <p>\n        {error.message}\n      </p>\n    </div>\n  );\n};\n\nexport default ErrorDisplay;\n","export { default } from './ErrorDisplay';\n","import React, { useEffect } from \"react\";\nimport { composeMatchStatus, periodTypes, statusTypes } from \"../../mls-match-list/utils\";\nimport { apiURL, mlsSingleMatchStatsAPI } from \"../api/variables\";\nimport { useQuery } from \"react-query\";\nimport { fetchClient } from \"../api/fetching\";\n\nexport const actionTypes = {\n  status: 'status',\n  matchOptaId: \"matchOptaId\"\n};\n\nexport function matchStatusReducer(state, action) {\n  switch (action.type) {\n    case actionTypes.status: {\n      return { ...state, status: action.payload };\n    }\n    case actionTypes.matchOptaId: {\n      return { ...state, matchOptaId: action.payload };\n    }\n\n    default: {\n      throw new Error(`Unsupported type: ${action.type}`);\n    }\n  }\n}\n\nexport function useMatchStatus({ matchData = null, initialState, reducer = matchStatusReducer } = {}) {\n  const { current: currentState } = React.useRef(initialState);\n  const [state, dispatch] = React.useReducer(reducer, currentState);\n\n  const { status: matchStatus, matchOptaId, matchStatusOverride } = state || {};\n  const mlsMatchEndpoint = mlsSingleMatchStatsAPI({ matchOptaId });\n  const updateMatchStatus = React.useCallback(({ type, payload }) => dispatch({ type, payload }), [dispatch]);\n\n  const status = matchStatusOverride?.abbreviation ? matchStatusOverride : matchStatus;\n\n  const queryConfig = status\n    ? {\n      enabled: true,\n      refetchIntervalInBackground: true,\n      staleTime:\n        status?.abbreviation === statusTypes.live || status?.abbreviation === statusTypes.pre\n          ? 0\n          : Infinity,\n      refetchInterval:\n        status?.abbreviation === statusTypes.live\n          ? 30000\n          : status?.abbreviation === statusTypes.pre\n            ? 200000\n            : null\n    } : { enabled: false };\n\n  const { data, error, isLoading, isError, isIdle } = useQuery({\n    queryKey: [`mls-match`, { matchOptaId }],\n    queryFn: () => fetchClient({ endpoint: mlsMatchEndpoint, apiURL: apiURL.statsAPI }),\n    select: data => data && data.length > 0 ? data[0] : null,\n    ...queryConfig,\n    enabled: matchOptaId > 0 && !matchData,\n  });\n\n  const mlsMatch = matchData ? matchData : data;\n\n  useEffect(() => {\n    if (!mlsMatch) {\n      return;\n    }\n    const { period } = mlsMatch || {};\n    const { delayedMatch } = initialState;\n\n    const matchStatus = matchStatusOverride\n      ? matchStatusOverride\n      : composeMatchStatus({ period, delayedMatch });\n\n    updateMatchStatus({ type: actionTypes.status, payload: matchStatus });\n  }, [mlsMatch, initialState.delayedMatch]);\n\n  const isShootout = status?.value === periodTypes.ShootOut;\n\n\n  return {\n    mlsMatch,\n    error,\n    isLoading,\n    isIdle,\n    isError,\n    status,\n    isShootout,\n    queryConfig,\n    updateMatchStatus\n  };\n}\n"],"names":[],"sourceRoot":""}