{"version":3,"file":"js/react/mls-match-hub-navigation-app.js?_t=f64513933e2627549b3f","mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;ACAA;AACA;AAEA;AACA;AAAA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAGA;AAiBA;AAGA;AAEA;;;;;;;;;;;;;;;;;;;;;;AC1CA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AAEA;AAAA;AACA;AACA;AACA;AAGA;AAEA;AACA;AAAA;AAGA;AACA;AAaA;AAIA;AAuBA;AAGA;AAEA;;;;;;;;;;;;;;;;AC1EA;AAEA;AACA;AAAA;AAEA;AAOA;AAEA;;;;;;;;;;;;;;;;ACdA;;;;;;;;;;;;;;;;;ACAA;AACA;AAEA;AACA;AAEA;AACA;AAEA;;;;;;;;;;;;;;;;ACTA;;;;;;;;;;;;;;;ACAA;AAAA;AAEA;;;;;;;;;;;;;;;;;;;;;;ACFA;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-match-hub-navigation/app.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-hub-navigation/components/SubMenuNavItem/SubMenuNavItem.js","webpack://@mlssoccer/netcore/./scripts/react/mls-match-hub-navigation/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/components/LoadingDisplay/LoadingDisplay.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/LoadingDisplay/index.js","webpack://@mlssoccer/netcore/./scripts/react/shared/components/LoadingDisplay/utils.js","webpack://@mlssoccer/netcore/./scripts/react/shared/hooks/useMatchStatus.js"],"sourcesContent":["export { default } from './main';\n","import React from 'react';\nimport { useReactAppState } from \"../../../shared/containers/utils\";\n\nfunction SubMenuNavItem({ menuItem, position }) {\n  const {\n    isActive,\n    link,\n    text,\n    tag\n  } = menuItem || {};\n  const { t } = useReactAppState();\n\n  const trackingData =\n  {\n    navigationType: 'sub navigation',\n    navigationSelection: text,\n    navigationPosition: position,\n    clickLocation: 'sub navigation'\n  };\n\n  return (\n    <li className=\"mls-c-sub-nav__nav-item\" data-tracking-click={JSON.stringify(trackingData)} data-click-event-name=\"navigation-click\" >\n      {\n        link\n          ? (\n            <a className={`mls-c-sub-nav__item-link ${isActive ? \"active\" : \"\"}`} href={link}>\n              <span className=\"mls-c-sub-nav__item-text\">{tag ? t(tag) : text}</span>\n            </a>\n          )\n          : (\n            <span className={`mls-c-sub-nav__item-link ${isActive ? \"active\" : \"\"}`}>\n              <span className=\"mls-c-sub-nav__item-text\">{tag ? t(tag) : text}</span>\n            </span>\n          )\n      }\n    </li>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nSubMenuNavItem = React.memo(SubMenuNavItem);\n\nexport default SubMenuNavItem;\n","import React from 'react';\nimport { statusTypes } from \"../mls-match-list/utils\";\nimport LoadingDisplay from \"../shared/components/LoadingDisplay\";\nimport ErrorDisplay from \"../shared/components/ErrorDisplay\";\nimport SubMenuNavItem from \"./components/SubMenuNavItem/SubMenuNavItem\";\nimport { useMatchStatus } from \"../shared/hooks/useMatchStatus\";\nimport { useReactAppState } from \"../shared/containers/utils\";\n\nfunction MatchHubNavigation({ options }) {\n  const { match: appMatch, matchStatusOverride } = useReactAppState();\n  const matchOptaId = options.matchOptaId || appMatch?.optaId;\n\n  const preMatchNavigation = options.preMatchNavigation;\n  const liveMatchNavigation = options.liveMatchNavigation;\n  const postMatchNavigation = options.postMatchNavigation;\n\n  const { status: matchStatus, isLoading, isError, error } = useMatchStatus({\n    initialState: {\n      matchOptaId\n    }\n  });\n\n  const status = matchStatusOverride?.abbreviation ? matchStatusOverride : matchStatus;\n\n  if (!preMatchNavigation || !liveMatchNavigation || !postMatchNavigation) {\n    return null;\n  }\n\n  if (!matchOptaId) {\n    return (\n      <div className=\"d3-l-grid--outer\">\n        <div className=\"d3-l-grid--inner\">\n          <div className=\"d3-l-col__col-12\">\n            <ul className=\"mls-c-sub-nav__nav-list\">\n              <li className=\"mls-c-sub-nav__nav-item\">\n                <span className={`mls-c-sub-nav__item-link`}>\n                  <span className=\"mls-c-sub-nav__item-text\">Match Not Found</span>\n                </span>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"d3-l-grid--outer\">\n      <div className=\"d3-l-grid--inner\">\n        <div className=\"d3-l-col__col-12\">\n          <ul className=\"mls-c-sub-nav__nav-list\">\n            {\n              isLoading\n                ? <LoadingDisplay />\n                : isError\n                  ? <ErrorDisplay error={error} />\n                  : status?.abbreviation === statusTypes.pre && preMatchNavigation && preMatchNavigation.length > 0\n                    ? preMatchNavigation.map((preMatch, index) => <SubMenuNavItem menuItem={preMatch} position={index + 1} key={`${preMatch.id}-${index}`} />)\n                    : status?.abbreviation === statusTypes.live && liveMatchNavigation && liveMatchNavigation.length > 0\n                      ? liveMatchNavigation.map((liveMatch, index) => <SubMenuNavItem menuItem={liveMatch} position={index + 1} key={`${liveMatch.id}-${index}`} />)\n                      : postMatchNavigation && postMatchNavigation.length > 0\n                        ? postMatchNavigation.map((postMatch, index) => <SubMenuNavItem menuItem={postMatch} position={index + 1} key={`${postMatch.id}-${index}`} />)\n                        : null\n            }\n          </ul>\n        </div>\n      </div>\n    </div>\n  );\n}\n\n// eslint-disable-next-line no-func-assign\nMatchHubNavigation = React.memo(MatchHubNavigation);\n\nexport default MatchHubNavigation;\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 from 'react';\nimport { loadingTypes } from \"./utils\";\n\nconst LoadingDisplay = (props) => {\n  const { width = \"100\", type = loadingTypes.line, ...otherProps } = props || {};\n\n  return <div {...otherProps} data-testid={\"loading\"} className={`mls-o-loading mls-o-loading--glow mls-o-loading--${type} mls-o-loading--${width}`} />;\n};\n\nexport default LoadingDisplay;\n","export { default } from './LoadingDisplay';\n","export const loadingTypes = {\n  line: 'line'\n};\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":""}