diff --git a/CHANGELOG.md b/CHANGELOG.md index 220986c0..894c4745 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index ceba246f..b3f22dc4 100644 --- a/README.md +++ b/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). diff --git a/docs/docs/getting-started/installation.mdx b/docs/docs/getting-started/installation.mdx index b77531b7..37c2eac7 100644 --- a/docs/docs/getting-started/installation.mdx +++ b/docs/docs/getting-started/installation.mdx @@ -43,7 +43,7 @@ import Link from "@docusaurus/Link"; diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js index 0d91ba9e..98536f6e 100755 --- a/docs/src/pages/index.js +++ b/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 diff --git a/frontend/src/components/Root/components/Header/Header.tsx b/frontend/src/components/Root/components/Header/Header.tsx index 3c90d59e..cd32049d 100644 --- a/frontend/src/components/Root/components/Header/Header.tsx +++ b/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,18 +31,23 @@ interface Props { fetchUserRequest: () => void; } -export const Header: React.FunctionComponent = ({ +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.DEFAULT); - React.useEffect(() => { + useEffect(() => { if (isUserAuthenticated) { fetchUserRequest(); } @@ -50,7 +55,8 @@ export const Header: React.FunctionComponent = ({ const toggleAccountMenuVisibility = (event: MouseEvent) => { event.preventDefault(); - if (isAccountMenuVisible) { + event.stopPropagation(); + if (headerMenuState === HeaderMenuState.ACCOUNT_MENU_OPEN) { hideAccountMenu(); } else { showAccountMenu(); @@ -58,18 +64,19 @@ export const Header: React.FunctionComponent = ({ }; 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(); @@ -77,12 +84,12 @@ export const Header: React.FunctionComponent = ({ }; 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 = ({ - {isProjectsMenuVisible && } + {headerMenuState === HeaderMenuState.PROJECTS_MENU_OPEN && } @@ -136,7 +143,7 @@ export const Header: React.FunctionComponent = ({ - {isAccountMenuVisible && } + {headerMenuState === HeaderMenuState.ACCOUNT_MENU_OPEN && }