06382b1b91bad22f1457963dbc6aa31c.json 13.8 KB
Newer Older
1
{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\Bruger\\\\Desktop\\\\Web-projects\\\\pipit\\\\client\\\\src\\\\components\\\\navbar\\\\dropdownMenu\\\\NavbarDropdownMenu.jsx\",\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(FontAwesomeIcon, {\n                icon: \"user\"\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 61,\n                columnNumber: 17\n              }, this), \"\\xA0\\xA0\", /*#__PURE__*/_jsxDEV(\"span\", {\n                children: [/*#__PURE__*/_jsxDEV(\"p\", {\n                  children: \"Account\"\n                }, void 0, false, {\n                  fileName: _jsxFileName,\n                  lineNumber: 63,\n                  columnNumber: 19\n                }, this), /*#__PURE__*/_jsxDEV(\"p\", {\n                  children: userInfo ? userInfo.email : \"...\"\n                }, void 0, false, {\n                  fileName: _jsxFileName,\n                  lineNumber: 64,\n                  columnNumber: 19\n                }, this)]\n              }, void 0, true, {\n                fileName: _jsxFileName,\n                lineNumber: 62,\n                columnNumber: 17\n              }, this), /*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n                icon: \"chevron-right\",\n                className: \"arrow-right-icon\"\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 66,\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: 71,\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: 72,\n                columnNumber: 17\n              }, this)]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 70,\n              columnNumber: 15\n            }, this)\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 69,\n            columnNumber: 13\n          }, this), /*#__PURE__*/_jsxDEV(\"li\", {\n            children: /*#__PURE__*/_jsxDEV(\"a\", {\n              onClick: logout,\n              children: [/*#__PURE__*/_jsxDEV(FontAwesomeIcon, {\n                icon: \"sign-out-alt\"\n              }, void 0, false, {\n                fileName: _jsxFileName,\n                lineNumber: 83,\n                columnNumber: 17\n              }, this), \"\\xA0\\xA0Log out\"]\n            }, void 0, true, {\n              fileName: _jsxFileName,\n              lineNumber: 82,\n              columnNumber: 15\n            }, this)\n          }, void 0, false, {\n            fileName: _jsxFileName,\n            lineNumber: 81,\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.jsx"],"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                <FontAwesomeIcon icon=\"user\"></FontAwesomeIcon>&nbsp;&nbsp;\r\n                <span>\r\n                  <p>Account</p>\r\n                  <p>{userInfo ? userInfo.email : \"...\"}</p>\r\n                </span>\r\n                <FontAwesomeIcon icon=\"chevron-right\" className=\"arrow-right-icon\"></FontAwesomeIcon>\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              <a onClick={logout}>\r\n                <FontAwesomeIcon icon=\"sign-out-alt\"></FontAwesomeIcon>&nbsp;&nbsp;Log out\r\n              </a>\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"}