fix: display projects menu (#254)

Author: fargito

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.1] — 2021-04-16
+
+- [Bugfix]: Correctly display projects and account menus (@fargito)
+
 ## [1.2.0] — 2021-04-16
 
 - [Security] : Bump Python version to 3.8 (@fargito)
@@ -78,7 +82,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 🎉Initial release! 🎉
 
-[unreleased]: https://github.com/theodo/falco/compare/1.2.0...HEAD
+[unreleased]: https://github.com/theodo/falco/compare/1.2.1...HEAD
+[1.2.1]: https://github.com/theodo/falco/compare/1.2.1...1.2.0
 [1.2.0]: https://github.com/theodo/falco/compare/1.2.0...1.1.5
 [1.1.5]: https://github.com/theodo/falco/compare/1.1.5...1.1.4
 [1.1.4]: https://github.com/theodo/falco/compare/1.1.4...1.1.3

README.md

@@ -37,7 +37,7 @@ You can try a demo version by logging in to https://falco.theo.do with the crede
 
 You can deploy Falco on Heroku by clicking on the following button:
 
-[![Deploy to Heroku](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/theodo/falco/tree/1.2.0)
+[![Deploy to Heroku](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/theodo/falco/tree/1.2.1)
 
 You will need to provide your credit card details to Heroku, but you will be under the free tier by default. You can find more details on why they are needed and Heroku’s pricing policy [in the docs](https://getfal.co).
 

docs/docs/getting-started/installation.mdx

@@ -43,7 +43,7 @@ import Link from "@docusaurus/Link";
 <Link
   className="button button--primary button--lg"
   href={
-    "https://heroku.com/deploy?template=https://github.com/theodo/falco/tree/1.2.0"
+    "https://heroku.com/deploy?template=https://github.com/theodo/falco/tree/1.2.1"
   }
   style={{ marginBottom: "20px" }}
 >

docs/src/pages/index.js

@@ -106,7 +106,7 @@ function Home() {
                     "button button--primary button--lg",
                     styles.addFocus
                   )}
-                  href="https://heroku.com/deploy?template=https://github.com/theodo/falco/tree/1.2.0"
+                  href="https://heroku.com/deploy?template=https://github.com/theodo/falco/tree/1.2.1"
                   target="_blank"
                 >
                   Deploy to Heroku

frontend/src/components/Root/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useState } from 'react';
+import { MouseEvent, useEffect, useState } from 'react';
 
 import Logo from 'components/Logo';
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -31,58 +31,65 @@ interface Props {
   fetchUserRequest: () => void;
 }
 
-export const Header: React.FunctionComponent<Props> = ({
+enum HeaderMenuState {
+  DEFAULT = 'DEFAULT',
+  ACCOUNT_MENU_OPEN = 'ACCOUNT_MENU_OPEN',
+  PROJECTS_MENU_OPEN = 'PROJECTS_MENU_OPEN',
+}
+
+export const Header = ({
   currentURL,
   fetchUserRequest,
   isUserAuthenticated,
   isMenuDisplayed,
-}) => {
+}: Props): JSX.Element => {
   const intl = useIntl();
 
-  const [isAccountMenuVisible, setIsAccountMenuVisible] = React.useState(false);
-  const [isProjectsMenuVisible, setIsProjectsMenuVisible] = React.useState(false);
+  const [headerMenuState, setHeaderMenuState] = useState<HeaderMenuState>(HeaderMenuState.DEFAULT);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isUserAuthenticated) {
       fetchUserRequest();
     }
   }, [isUserAuthenticated, fetchUserRequest]);
 
   const toggleAccountMenuVisibility = (event: MouseEvent) => {
     event.preventDefault();
-    if (isAccountMenuVisible) {
+    event.stopPropagation();
+    if (headerMenuState === HeaderMenuState.ACCOUNT_MENU_OPEN) {
       hideAccountMenu();
     } else {
       showAccountMenu();
     }
   };
 
   const showAccountMenu = () => {
-    setIsAccountMenuVisible(true);
+    setHeaderMenuState(HeaderMenuState.ACCOUNT_MENU_OPEN);
     document.addEventListener('click', hideAccountMenu);
   };
 
   const hideAccountMenu = () => {
-    setIsAccountMenuVisible(false);
+    setHeaderMenuState(HeaderMenuState.DEFAULT);
     document.removeEventListener('click', hideAccountMenu);
   };
 
   const toggleProjectsMenuVisibility = (event: MouseEvent) => {
     event.preventDefault();
-    if (isProjectsMenuVisible) {
+    event.stopPropagation();
+    if (headerMenuState === HeaderMenuState.PROJECTS_MENU_OPEN) {
       hideProjectsMenu();
     } else {
       showProjectsMenu();
     }
   };
 
   const showProjectsMenu = () => {
-    setIsProjectsMenuVisible(true);
+    setHeaderMenuState(HeaderMenuState.PROJECTS_MENU_OPEN);
     document.addEventListener('click', hideProjectsMenu);
   };
 
   const hideProjectsMenu = () => {
-    setIsProjectsMenuVisible(false);
+    setHeaderMenuState(HeaderMenuState.DEFAULT);
     document.removeEventListener('click', hideProjectsMenu);
   };
 
@@ -127,7 +134,7 @@ export const Header: React.FunctionComponent<Props> = ({
                   <HeaderButtonArrow />
                 </HeaderMenuItem>
                 <HeaderMenuItemContent right="270">
-                  {isProjectsMenuVisible && <ProjectsMenu />}
+                  {headerMenuState === HeaderMenuState.PROJECTS_MENU_OPEN && <ProjectsMenu />}
                 </HeaderMenuItemContent>
                 <HeaderMenuItem onClick={toggleAccountMenuVisibility} role="menu">
                   <HeaderButton>
@@ -136,7 +143,7 @@ export const Header: React.FunctionComponent<Props> = ({
                   <HeaderButtonArrow />
                 </HeaderMenuItem>
                 <HeaderMenuItemContent right="100">
-                  {isAccountMenuVisible && <AccountMenu />}
+                  {headerMenuState === HeaderMenuState.ACCOUNT_MENU_OPEN && <AccountMenu />}
                 </HeaderMenuItemContent>
               </HeaderButtonsBlock>
             </Nav>