{"version":3,"file":"81725.a5f9f17a06367fec6c61.index.js","mappings":"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","sources":["webpack://richie-education/./js/components/UserMenu/DesktopUserMenu.tsx","webpack://richie-education/./js/components/UserMenu/MobileUserMenu.tsx","webpack://richie-education/./js/components/UserMenu/index.tsx","webpack://richie-education/./js/components/UserLogin/index.tsx","webpack://richie-education/./js/utils/useMatchMedia.ts","webpack://richie-education/./node_modules/core-js/modules/es.object.entries.js","webpack://richie-education/./node_modules/core-js/modules/es.object.set-prototype-of.js","webpack://richie-education/./node_modules/core-js/modules/es.symbol.replace.js"],"sourcesContent":["import React from 'react';\nimport { defineMessages, FormattedMessage } from 'react-intl';\nimport { useSelect } from 'downshift';\nimport { location } from 'utils/indirection/window';\nimport { UserMenuProps } from '.';\n\nconst messages = defineMessages({\n  menuPurpose: {\n    defaultMessage: 'Access to your profile settings',\n    description: 'Accessible label for user menu button',\n    id: 'components.DesktopUserMenu.menuPurpose',\n  },\n});\n\nexport const DesktopUserMenu: React.FC<UserMenuProps> = ({ user }) => {\n  const labels = user.urls.map((label) => label);\n  const {\n    isOpen,\n    highlightedIndex,\n    getMenuProps,\n    getItemProps,\n    getToggleButtonProps,\n    getLabelProps,\n  } = useSelect({\n    items: labels,\n    onSelectedItemChange: ({ selectedItem }) => {\n      // Manually handle action in case the user interacted with a keyboard, and therefore with a\n      // list item, and not by clicking on the actual links.\n      if (typeof selectedItem!.action === 'string') {\n        location.replace(selectedItem!.action);\n      } else {\n        selectedItem!.action();\n      }\n    },\n  });\n\n  return (\n    <div className=\"user-menu user-menu--desktop selector\">\n      <label {...getLabelProps()} className=\"offscreen\">\n        <FormattedMessage {...messages.menuPurpose} />\n      </label>\n      <button {...getToggleButtonProps()} className=\"selector__button\">\n        {user.username}\n        <svg role=\"img\" className=\"selector__button__icon\" aria-hidden=\"true\">\n          <use xlinkHref=\"#icon-chevron-down\" />\n        </svg>\n      </button>\n      <ul\n        {...getMenuProps()}\n        className={`selector__list ${isOpen ? '' : 'selector__list--is-closed'}`}\n      >\n        {isOpen &&\n          user.urls.map((link, index) => (\n            <li key={link.key} {...getItemProps({ item: link, index })}>\n              {typeof link.action === 'string' ? (\n                <a\n                  className={`selector__list__link ${\n                    highlightedIndex === index ? 'selector__list__link--highlighted' : ''\n                  }`}\n                  href={link.action}\n                >\n                  {link.label}\n                </a>\n              ) : (\n                <button\n                  className={`selector__list__link\n                  ${highlightedIndex === index ? 'selector__list__link--highlighted' : ''}`}\n                  onClick={link.action}\n                >\n                  {link.label}\n                </button>\n              )}\n            </li>\n          ))}\n      </ul>\n    </div>\n  );\n};\n","import React from 'react';\nimport { UserMenuProps } from '.';\n\nexport const MobileUserMenu: React.FC<UserMenuProps> = ({ user }) => (\n  <div className=\"user-menu user-menu--mobile\">\n    <h6 className=\"user-menu__username\">\n      <svg aria-hidden={true} role=\"img\" className=\"icon\">\n        <use xlinkHref=\"#icon-login\" />\n      </svg>\n      {user.username}\n    </h6>\n    <ul className=\"user-menu__list\">\n      {user.urls.map(({ key, label, action }) => (\n        <li className=\"user-menu__list__item\" key={key}>\n          {typeof action === 'string' ? (\n            <a href={action}>{label}</a>\n          ) : (\n            <button onClick={action}>{label}</button>\n          )}\n        </li>\n      ))}\n    </ul>\n  </div>\n);\n","import React from 'react';\nimport { User } from 'types/User';\nimport useMatchMedia from 'utils/useMatchMedia';\nimport { DesktopUserMenu } from './DesktopUserMenu';\nimport { MobileUserMenu } from './MobileUserMenu';\n\nexport interface UserMenuProps {\n  user: User;\n}\n\nexport const UserMenu: React.FC<UserMenuProps> = (props: UserMenuProps) => {\n  const showDesktop = useMatchMedia('(min-width: 992px)');\n\n  return showDesktop ? <DesktopUserMenu {...props} /> : <MobileUserMenu {...props} />;\n};\n","/* eslint-disable no-nested-ternary */\nimport React from 'react';\nimport { defineMessages, FormattedMessage, MessageDescriptor, useIntl } from 'react-intl';\n\nimport { Spinner } from 'components/Spinner';\nimport { UserMenu } from 'components/UserMenu';\nimport { useSession } from 'data/useSession';\nimport { CommonDataProps } from 'types/commonDataProps';\nimport { User } from 'types/User';\n\nconst messages: { [key: string]: MessageDescriptor } = defineMessages({\n  logIn: {\n    defaultMessage: 'Log in',\n    description: 'Text for the login button.',\n    id: 'components.UserLogin.logIn',\n  },\n  logOut: {\n    defaultMessage: 'Log out',\n    description: 'Text for the logout button.',\n    id: 'components.UserLogin.logOut',\n  },\n  signUp: {\n    defaultMessage: 'Sign up',\n    description: 'Text for the signup button.',\n    id: 'components.UserLogin.signup',\n  },\n  spinnerText: {\n    defaultMessage: 'Loading login status...',\n    description: 'Accessibility text for the spinner in the login area.',\n    id: 'components.UserLogin.spinnerText',\n  },\n});\n\ninterface UserLoginProps {\n  context: CommonDataProps['context'];\n  profileUrls?: User['urls'];\n}\n\n/*\n  bindUserDataToUrl\n\n  @param url an url defined in profileUrls prop\n  @param user the loggedin user\n\n  Profile urls are just strings provided by the backend then consumed by the frontend to display\n  custom links in user menu. In some case, these urls may require user dynamic fields.\n  So this is why, it is possible to define a dynamic fields by wrapping field name into parentheses.\n  bindUserDataToUrl function aims to match these dynamic\n  fields then bind it with corresponding user data.\n\n  e.g:\n  In backend, a profile url can be written as following: /profile/(username)\n  Then from frontend, this string is parsed and match (<dynamic_field>) pattern\n  So the provided /profile/(username) string will be transform into /profile/johndoe\n*/\nconst REGEXP_PROFILE_URL = /\\((?<prop>[a-zA-Z0-9-_]*)\\)/g;\nconst bindUserDataToUrl = (url: string, user: any) =>\n  url.replace(REGEXP_PROFILE_URL, (match: string, prop: string): string =>\n    typeof user[prop] === 'string' ? user[prop] : match,\n  );\n\nconst UserLogin = ({ profileUrls = [] }: UserLoginProps) => {\n  /**\n   * `user` is:\n   * - `undefined` when we have not made the `whoami` request yet;\n   * - `null` when the user is anonymous or the request failed;\n   * - a user object when the user is logged in.\n   */\n  const { user, destroy, login, register } = useSession();\n  const intl = useIntl();\n\n  return (\n    <div className=\"user-login\">\n      {user === undefined ? (\n        <Spinner size=\"small\">\n          <FormattedMessage {...messages.spinnerText} />\n        </Spinner>\n      ) : user === null ? (\n        <React.Fragment>\n          <button onClick={register} className=\"user-login__btn user-login__btn--sign-up\">\n            <FormattedMessage {...messages.signUp} />\n          </button>\n          <button onClick={login} className=\"user-login__btn user-login__btn--log-in\">\n            <svg aria-hidden={true} role=\"img\" className=\"icon\">\n              <use xlinkHref=\"#icon-login\" />\n            </svg>\n            <FormattedMessage {...messages.logIn} />\n          </button>\n        </React.Fragment>\n      ) : (\n        <UserMenu\n          // If user's fullname is empty, we use its username as a fallback\n          user={{\n            ...user,\n            urls: [\n              ...Object.entries(profileUrls).map(([key, { label, action }]) => ({\n                key,\n                label,\n                action: typeof action === 'string' ? bindUserDataToUrl(action, user) : action,\n              })),\n              {\n                key: 'logout',\n                label: intl.formatMessage(messages.logOut),\n                action: destroy,\n              },\n            ],\n          }}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default UserLogin;\n","import { useCallback, useMemo, useState, useEffect } from 'react';\nimport { matchMedia } from 'utils/indirection/window';\n\n/**\n * Hook which listens if a mediaQuery matched.\n * It is useful to show/hide component through a mediaQuery as we do in CSS.\n * e.g: Show a burger menu when we reached mobile width.\n * @param query The media query to monitor\n */\nconst useMatchMedia = (query: string): boolean => {\n  const mediaQuery = useMemo(() => matchMedia(query), [query]);\n  const [matches, setMatches] = useState(mediaQuery.matches);\n  const handleChange = useCallback((mQuery) => setMatches(mQuery.matches), [setMatches]);\n\n  useEffect(() => {\n    mediaQuery.addListener(handleChange);\n\n    return () => {\n      mediaQuery.removeListener(handleChange);\n    };\n  }, [mediaQuery]);\n\n  return matches;\n};\n\nexport default useMatchMedia;\n","var $ = require('../internals/export');\nvar $entries = require('../internals/object-to-array').entries;\n\n// `Object.entries` method\n// https://tc39.es/ecma262/#sec-object.entries\n$({ target: 'Object', stat: true }, {\n  entries: function entries(O) {\n    return $entries(O);\n  }\n});\n","var $ = require('../internals/export');\nvar setPrototypeOf = require('../internals/object-set-prototype-of');\n\n// `Object.setPrototypeOf` method\n// https://tc39.es/ecma262/#sec-object.setprototypeof\n$({ target: 'Object', stat: true }, {\n  setPrototypeOf: setPrototypeOf\n});\n","var defineWellKnownSymbol = require('../internals/define-well-known-symbol');\n\n// `Symbol.replace` well-known symbol\n// https://tc39.es/ecma262/#sec-symbol.replace\ndefineWellKnownSymbol('replace');\n"],"names":["messages","defineMessages","menuPurpose","DesktopUserMenu","user","labels","urls","map","label","useSelect","items","onSelectedItemChange","selectedItem","action","location","isOpen","highlightedIndex","getMenuProps","getItemProps","getToggleButtonProps","getLabelProps","className","username","role","xlinkHref","link","index","key","item","href","onClick","MobileUserMenu","UserMenu","props","useMatchMedia","logIn","logOut","signUp","spinnerText","REGEXP_PROFILE_URL","bindUserDataToUrl","url","replace","match","prop","profileUrls","useSession","destroy","login","register","intl","useIntl","undefined","Spinner","size","Object","entries","formatMessage","query","mediaQuery","useMemo","matchMedia","useState","matches","setMatches","handleChange","useCallback","mQuery","useEffect","addListener","removeListener","$","$entries","target","stat","O","setPrototypeOf","defineWellKnownSymbol"],"sourceRoot":""}