Bringing Header changes to our Theme branch (#6)

* MUI to Bootstrap Header-component * MUI to boostrap fix * Added Glyphicons to language & login * Added + Glyphicon to add new event * Updating basecode to be on same level as develop (#3) * Fix double encoding City-of-Helsinki#524; with caveat axios/axios#2563 * Display all api results in react select components * Fix event publisher field name for user rights check * Fix City-of-Helsinki#530 * Do not try to update deleted subevents * Do not try to edit past subevents * Refactor editability check; allow deleting and canceling series that contain deleted, canceled or past subevents * Remove unnecessary inlined sub_events at cancel to prevent API errors * Add instructions for internet events * Update snapshots * Add remote participation keyword to all internet events * Add notification about online events to cancel confirmation dialog * Add postpone button and badge * Mention postponing in cancel extra text * Add postpone button to editor too * Show postponed events in search instead of crashing * Update user rights managers * Add missing </p> * Do not remove subevents at cancel after all; deleted items removed by API PR City-of-Helsinki/linkedevents#407 * Fix removed future time validation; fixes City-of-Helsinki#536, City-of-Helsinki#528 * Update snapshots Co-authored-by: Riku Oja <[email protected]> Co-authored-by: Aleksi Salonen <[email protected]> Co-authored-by: Riku Oja <[email protected]> Co-authored-by: aceViilee <[email protected]> * Updated header-component Updated to Reactstrap based on Open design. Updated mobile-functionality. Language dropdown WIP Added Reactstrap stylesheet. Added Reactstrap & Bootstrap packets * Removed React-select language changer, replaced with component Added comment about Nav-update, removed React-select and updated language dropdown with LanguageSelector-component * Fixed padding on language-select Fixed padding to be inline with login * Updated Caret for language selector Added caret and styling * Header updates for changing locale, mobile, styling & components Replaced React-select with custom languageselector for changing locale, changed styling, updated header components (nav logo to brand) & added mobile styling * Updated scss formating Made header scss prettier Co-authored-by: DelusionCB <[email protected]> Co-authored-by: Riku Oja <[email protected]> Co-authored-by: Aleksi Salonen <[email protected]> Co-authored-by: Riku Oja <[email protected]> Co-authored-by: aceViilee <[email protected]>
City-of-Turku · May 5, 2020 · 5f5ac54 · 5f5ac54
1 parent a1fdbd2
commit 5f5ac54
Show file tree

Hide file tree

Showing 4 changed files with 307 additions and 233 deletions.
diff --git a/src/components/Header/LanguageSelector.js b/src/components/Header/LanguageSelector.js
@@ -11,6 +11,26 @@ class LanguageSelector extends React.Component {
         };
     }
 
+    componentDidMount() {
+        document.addEventListener('click', this.handleClick, false);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('click', this.handleClick, false);
+    }
+
+    handleClick = (event) => {
+        if (!this.node.contains(event.target)) {
+            this.handleOutsideClick();
+        }
+    }
+
+    handleOutsideClick() {
+        if ( this.state.isOpen) {
+            this.setState({isOpen: false});
+        }
+    }
+
     toggle(e) {
         e.preventDefault();
         this.setState({isOpen: !this.state.isOpen});
@@ -23,6 +43,13 @@ class LanguageSelector extends React.Component {
 
     }
 
+
+
+    /**
+     * Returns true if language is same as current locale
+     * @param {object} language
+     * @return {boolean}
+     */
     isActiveLanguage(language) {
         const {userLocale} = this.props;
         return language.label === userLocale.locale.toUpperCase();
@@ -32,20 +59,25 @@ class LanguageSelector extends React.Component {
         const {userLocale} = this.props;
         const activeLocale = userLocale.locale.toUpperCase();
         return (
-            <div style={{display: 'flex', flexDirection: 'column', width: '50px', color: 'white', fontWeight: 'bold',  padding: '.375rem .75rem', alignItems: 'center'}}>
-                <div className="currentLanguage" style={{paddingTop: '0.375rem', paddingBottom: '0.375rem'}}>
-                    <a href="#" onClick={this.toggle}>{activeLocale}</a>
+            <React.Fragment>
+                <span className="glyphicon glyphicon-globe" />
+                <div ref={node => this.node = node} className='LanguageMain'>
+                    <div className="currentLanguage">
+                        <a href="#" onClick={this.toggle}>{activeLocale}
+                            <span className="caret"></span>
+                        </a>
+                    </div>
+                    <ul className={classNames('language', {open: this.state.isOpen})}>
+                        {this.props.languages.map((language, index) => {
+                            return (
+                                <li key={index} className={classNames('language-item',{active: this.isActiveLanguage(language)})}>
+                                    <a onClick={this.handleLanguageChange.bind(this, language)} href="#">{language.label}</a>
+                                </li>
+                            )
+                        })}
+                    </ul>
                 </div>
-                <ul className={classNames('language', {open: this.state.isOpen})}>
-                    {this.props.languages.map((language, index) => {
-                        return (
-                            <li key={index} className={classNames('language-item',{active: this.isActiveLanguage(language)})}>
-                                <a onClick={this.handleLanguageChange.bind(this, language)} href="#">{language.label}</a>
-                            </li>
-                        )
-                    })}
-                </ul>
-            </div>
+            </React.Fragment>
         )
     }
 }

diff --git a/src/components/Header/LanguageSelector.test.js b/src/components/Header/LanguageSelector.test.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import LanguageSelector from './LanguageSelector';
+
+const defaultProps = {
+    languages: [
+        {
+            label: 'fi',
+        },
+        {
+            label: 'en',
+        },
+        {
+            label: 'sv',
+        },
+    ],
+    userLocale: {
+        locale: 'fi',
+    },
+    changeLanguage : () => null,
+};
+
+describe('languageSelector', () => {
+    function getWrapper(props) {
+        return shallow(<LanguageSelector {...defaultProps} {...props} />)
+    }
+    describe('acutal test', () => {
+        test('is default locale', () => {
+            const element = getWrapper().find('div');
+            expect(element).toHaveLength(2);
+            const sec = element.at(1).find('a');
+            expect(sec.text()).toBe('FI');
+        })
+
+        test('activeLocale when en', () => {
+            const element = getWrapper({userLocale:{locale:'en'}}).find('div').at(1).find('a');
+            expect(element.text()).toBe('EN');
+        })
+    })
+
+})
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -1,5 +1,4 @@
 import './index.scss'
-import 'bootstrap/dist/css/bootstrap.min.css';
 
 import React from 'react'
 import PropTypes from 'prop-types'
@@ -12,11 +11,9 @@ import {login as loginAction, logout as logoutAction} from 'src/actions/user.js'
 import {setLocale as setLocaleAction} from 'src/actions/userLocale'
 import LanguageSelector from './LanguageSelector';
 import {FormattedMessage} from 'react-intl'
-
-import {Link} from 'react-router-dom'
 import constants from '../../constants'
 //Updated Nav from Material UI to Reactstrap based on Open design
-import {Collapse, Navbar, NavbarToggler, Nav, NavbarBrand, NavLink, Button} from 'reactstrap';
+import {Collapse, Navbar, NavbarToggler, Nav, NavbarBrand, Button} from 'reactstrap';
 import cityOfHelsinkiLogo from '../../assets/images/helsinki-logo.svg'
 import {hasOrganizationWithRegularUsers} from '../../utils/user'
 import {get} from 'lodash'
@@ -32,7 +29,9 @@ class HeaderBar extends React.Component {
         this.state = {
             isOpen: false,
             showModerationLink: false,
-        };}
+        };
+    }
+
     toggle() {
         this.setState ({
             isOpen: !this.state.isOpen,
@@ -84,28 +83,21 @@ class HeaderBar extends React.Component {
         return (
             <div className='main-navbar'>
                 <Navbar className='bar'>
-                    <div className="bar__logo">
-                        <Link to='/'>
-                            <img src={cityOfHelsinkiLogo} alt='City Logo' />
-                        </Link>
-                    </div>
+                    <NavbarBrand className="bar__logo" src={cityOfHelsinkiLogo}href="/">
+                        <img src={cityOfHelsinkiLogo} />
+                    </NavbarBrand>
                     <Nav className='ml-auto'>
-                        <div className='bar__login-button'>
-                            <div className='bar__language-button'>
-                                <span className="glyphicon glyphicon-globe"></span>
-                                <div className='language-selector'>
-                                    <LanguageSelector languages={this.getLanguageOptions()} userLocale={userLocale} changeLanguage={this.changeLanguage} />
-                                </div>
+                        <div className='bar__login-and-language'>
+                            <div className='language-selector'>
+                                <LanguageSelector languages={this.getLanguageOptions()} userLocale={userLocale} changeLanguage={this.changeLanguage} />
                             </div>
                             {user ? (
                                 <Button
-
                                     onClick={() => logout()}>
                                     {user.displayName}
                                 </Button>
                             ) : (
-                                <Button
-
+                                <Button  
                                     onClick={() => login()}>
                                     <span className="glyphicon glyphicon-user"></span>
                                     <FormattedMessage id='login' />
@@ -129,8 +121,6 @@ class HeaderBar extends React.Component {
                                     toModerationPage={toModerationPage}
                                 />
                             </div>
-
-
                             <Nav className="ml-auto" navbar>
                                 {!isInsideForm && (
                                     <Button