169e6e6faf7fc5293583518c26a37bf0.json 15.3 KB
Newer Older
1
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\navbar\\\\dropdownMenu\\\\NavbarDropdownMenu.js\",\n    _s = $RefreshSig$();\n\nimport React, { useRef, useState, useEffect } from 'react';\nimport { NavLink } from \"react-router-dom\";\nimport { useOktaAuth } from '@okta/okta-react';\nimport \"./NavbarDropdownMenu.css\";\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nconst DropdownMenu = () => {\n  _s();\n\n  const {\n    authState,\n    oktaAuth\n  } = useOktaAuth();\n  const [userInfo, setUserInfo] = useState(null);\n  const dropdownRef = useRef(null);\n  const [isActive, setIsActive] = useState(false);\n\n  const onClick = () => setIsActive(!isActive);\n\n  useEffect(() => {\n    const pageClickEvent = e => {\n      if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\n        setIsActive(!isActive);\n      }\n    }; // If the item is active (ie open) then listen for clicks\n\n\n    if (isActive) {\n      window.addEventListener('click', pageClickEvent);\n    }\n\n    return () => {\n      window.removeEventListener('click', pageClickEvent);\n    };\n  }, [isActive]);\n  useEffect(() => {\n    if (!authState.isAuthenticated) {\n      // When user isn't authenticated, forget any user info\n      setUserInfo(null);\n    } else {\n      oktaAuth.getUser().then(info => {\n        setUserInfo(info);\n      });\n    }\n  }, [authState, oktaAuth]); // Update if authState changes\n\n  const logout = () => {\n    oktaAuth.signOut();\n  };\n\n  return /*#__PURE__*/_jsxDEV(\"li\", {\n    children: /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"navbar-user-dropdown-container\",\n      children: [/*#__PURE__*/_jsxDEV(\"button\", {\n        className: `user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`,\n        onClick: onClick,\n        children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n          className: \"user-icon\",\n          icon: \"user-circle\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 53,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n          className: \"down-arrow\",\n          icon: \"angle-down\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 54,\n          columnNumber: 11\n        }, this)]\n      }, void 0, true, {\n        fileName: _jsxFileName,\n        lineNumber: 52,\n        columnNumber: 9\n      }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n        ref: dropdownRef,\n        className: `user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`,\n        children: /*#__PURE__*/_jsxDEV(\"ul\", {\n          children: [/*#__PURE__*/_jsxDEV(\"li\", {\n            children: /*#__PURE__*/_jsxDEV(NavLink, {\n              to: \"/account\",\n              onClick: onClick,\n              className: \"top-item\",\n              children: [/*#__PURE__*/_jsxDEV(\"div\", {\n                children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n                  icon: \"user\",\n                  className: \"item-icon-top\"\n                }, void 0, false, {\n                  fileName: _jsxFileName,\n                  lineNumber: 62,\n                  columnNumber: 19\n                }, this), \"\\xA0\\xA0\"]\n              }, void 0, true, {\n                fileName: _jsxFileName,\n                lineNumber: 61,\n                columnNumber: 17\n              }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n                className: \"item-top-text\",\n                children: /*#__PURE__*/_jsxDEV(\"span\", {\n                  children: [/*#__PURE__*/_jsxDEV(\"p\", {\n                    className: \"top-row\",\n                    children: \"Account\"\n                  }, void 0, false, {\n                    fileName: _jsxFileName,\n                    lineNumber: 66,\n                    columnNumber: 21\n                  }, this), /*#__PURE__*/_jsxDEV(\"p\", {\n                    className: \"bottom-row\",\n                    children: userInfo ? userInfo.email : \"...\"\n                  }, void 0, false, {\n                    fileName: _jsxFileName,\n                    lineNumber: 67,\n                    columnNumber: 21\n                  }, this)]\n                }, void 0, true, {\n                  fileName: _jsxFileName,\n                  lineNumber: 65,\n                  columnNumber: 19\n                }, this)\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 64,\n                columnNumber: 17\n              }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n                className: \"item-last-flex-item\",\n                children: /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n                  icon: \"chevron-right\",\n                  className: \"item-icon-top\"\n                }, void 0, false, {\n                  fileName: _jsxFileName,\n                  lineNumber: 71,\n                  columnNumber: 19\n                }, this)\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 70,\n                columnNumber: 17\n              }, this)]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 60,\n              columnNumber: 15\n            }, this)\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 59,\n            columnNumber: 13\n          }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n            children: /*#__PURE__*/_jsxDEV(NavLink, {\n              to: \"/messages\",\n              onClick: onClick,\n              children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n                icon: \"envelope\"\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 77,\n                columnNumber: 17\n              }, this), \"\\xA0\\xA0Messages\", /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n                icon: \"chevron-right\",\n                className: \"arrow-right-icon\"\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 78,\n                columnNumber: 17\n              }, this)]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 76,\n              columnNumber: 15\n            }, this)\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 75,\n            columnNumber: 13\n          }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n            children: /*#__PURE__*/_jsxDEV(\"p\", {\n              onClick: logout,\n              children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n                icon: \"sign-out-alt\"\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 89,\n                columnNumber: 17\n              }, this), \"\\xA0\\xA0Log out\"]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 88,\n              columnNumber: 15\n            }, this)\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 87,\n            columnNumber: 13\n          }, this)]\n        }, void 0, true, {\n          fileName: _jsxFileName,\n          lineNumber: 58,\n          columnNumber: 11\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 57,\n        columnNumber: 9\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 51,\n      columnNumber: 7\n    }, this)\n  }, void 0, false, {\n    fileName: _jsxFileName,\n    lineNumber: 50,\n    columnNumber: 5\n  }, this);\n};\n\n_s(DropdownMenu, \"fSJPYre4v1rGcIZdck7wMJJU1dU=\", false, function () {\n  return [useOktaAuth];\n});\n\n_c = DropdownMenu;\nexport default DropdownMenu;\n\nvar _c;\n\n$RefreshReg$(_c, \"DropdownMenu\");","map":{"version":3,"sources":["C:/Users/Bruger/Desktop/Web-projects/pipit/client/src/components/navbar/dropdownMenu/NavbarDropdownMenu.js"],"names":["React","useRef","useState","useEffect","NavLink","useOktaAuth","FontAwesomeIcon","DropdownMenu","authState","oktaAuth","userInfo","setUserInfo","dropdownRef","isActive","setIsActive","onClick","pageClickEvent","e","current","contains","target","window","addEventListener","removeEventListener","isAuthenticated","getUser","then","info","logout","signOut","email"],"mappings":"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","sourcesContent":["import React, { useRef, useState, useEffect } from 'react'\r\nimport { NavLink } from \"react-router-dom\";\r\nimport { useOktaAuth } from '@okta/okta-react';\r\nimport \"./NavbarDropdownMenu.css\"\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\n\r\n\r\nconst DropdownMenu = () => {\r\n  const { authState, oktaAuth } = useOktaAuth();\r\n  const [userInfo, setUserInfo] = useState(null);\r\n\r\n  const dropdownRef = useRef(null);\r\n  const [isActive, setIsActive] = useState(false);\r\n  const onClick = () => setIsActive(!isActive);\r\n\r\n  useEffect(() => {\r\n    const pageClickEvent = (e) => {\r\n      if (dropdownRef.current !== null && !dropdownRef.current.contains(e.target)) {\r\n        setIsActive(!isActive);\r\n      }\r\n    };\r\n\r\n    // If the item is active (ie open) then listen for clicks\r\n    if (isActive) {\r\n      window.addEventListener('click', pageClickEvent);\r\n    }\r\n\r\n    return () => {\r\n      window.removeEventListener('click', pageClickEvent);\r\n    }\r\n\r\n  }, [isActive]);\r\n\r\n  useEffect(() => {\r\n    if (!authState.isAuthenticated) {\r\n      // When user isn't authenticated, forget any user info\r\n      setUserInfo(null);\r\n    } else {\r\n      oktaAuth.getUser().then(info => {\r\n        setUserInfo(info);\r\n      });\r\n    }\r\n  }, [authState, oktaAuth]); // Update if authState changes\r\n\r\n  const logout = () => {\r\n    oktaAuth.signOut()\r\n  }\r\n\r\n  return (\r\n    <li>\r\n      <div className=\"navbar-user-dropdown-container\">\r\n        <button className={`user-dropdown-menu-toggle-button ${isActive ? 'active' : 'inactive'}`} onClick={onClick} >\r\n          <FontAwesomeIcon className=\"user-icon\" icon=\"user-circle\"></FontAwesomeIcon>\r\n          <FontAwesomeIcon className=\"down-arrow\" icon=\"angle-down\"></FontAwesomeIcon>\r\n        </button>\r\n        {/* show submenu?*/}\r\n        <div ref={dropdownRef} className={`user-dropDown-menu-content ${isActive ? 'active' : 'inactive'}`}>\r\n          <ul>\r\n            <li>\r\n              <NavLink to=\"/account\" onClick={onClick} className=\"top-item\">\r\n                <div>\r\n                  <FontAwesomeIcon icon=\"user\" className=\"item-icon-top\"></FontAwesomeIcon>&nbsp;&nbsp;\r\n                </div>\r\n                <div className=\"item-top-text\">\r\n                  <span>\r\n                    <p className=\"top-row\">Account</p>\r\n                    <p className=\"bottom-row\">{userInfo ? userInfo.email : \"...\"}</p>\r\n                  </span>\r\n                </div>\r\n                <div className=\"item-last-flex-item\">\r\n                  <FontAwesomeIcon icon=\"chevron-right\" className=\"item-icon-top\"></FontAwesomeIcon>\r\n                </div>\r\n              </NavLink>\r\n            </li>\r\n            <li>\r\n              <NavLink to=\"/messages\" onClick={onClick}>\r\n                <FontAwesomeIcon icon=\"envelope\"></FontAwesomeIcon>&nbsp;&nbsp;Messages\r\n                <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n              </NavLink>\r\n            </li>\r\n            {/* <li>\r\n              <a href=\"./\">\r\n                <FontAwesomeIcon icon=\"sliders-h\"></FontAwesomeIcon>&nbsp;&nbsp;Preferences\r\n                <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\r\n              </a>\r\n            </li> */}\r\n            <li>\r\n              <p onClick={logout}>\r\n                <FontAwesomeIcon icon=\"sign-out-alt\"></FontAwesomeIcon>&nbsp;&nbsp;Log out\r\n              </p>\r\n            </li>\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    </li >\r\n  )\r\n}\r\n\r\nexport default DropdownMenu"]},"metadata":{},"sourceType":"module"}