Feature/header components (#9)

* city_theme is the same as the theme folder name in node_modules, ie node_modules/linked-theme would be city_theme: linked-theme * language json fields can now be imported from the theme package, images can also be directly import ie. import SomePicture from '@city-images/somepic.png' * 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 * Bringing develop changes to city-theme branch (#4) * 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]> * 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 * Bringing Bootstrap header. (#5) * 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 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]> * 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 * Reverted unintended changes Reverted changes that came with an accidental merge from experimental/city-theme branch. * Update to component Removed moderationstyles and added classnames + scss rule when moderationlink is displayed. Added temp alt to citylogo Updated Language dropdowns styling and structure Co-Authored-By: Hannes <[email protected]> * Update to header + test Cleaned NavbarBrand, export for NavLinks and HeaderBar for testing purpose, updated SCSS for NavbarBrand and added rules to JEST Co-Authored-By: Hannes <[email protected]> * Added comment on citylogo Citylogo can now be used from scss * Removed not needed stylesheet and added comment * Comments for code Co-authored-by: Hannes <[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]> Co-authored-by: Jack Valley <[email protected]> Co-authored-by: Hannes <[email protected]>
City-of-Turku · May 13, 2020 · 87900d6 · 87900d6
1 parent 50f3868
commit 87900d6
Show file tree

Hide file tree

Showing 12 changed files with 704 additions and 217 deletions.
diff --git a/config/appConfig.js b/config/appConfig.js
@@ -36,7 +36,7 @@ nconf.defaults({
 
 /**
  * Function to retrieve value from config
- * @param {undefined|string|string[]} keys 
+ * @param {undefined|string|string[]} keys
  */
 function getConfig(keys) {
     // Return all config if no keys provided

diff --git a/config/webpack/dev.js b/config/webpack/dev.js
@@ -3,7 +3,6 @@ import common from './common.js';
 import webpack from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import {readConfig} from '../appConfig';
-
 const publicUrl = readConfig('publicUrl')
 const ui_mode = readConfig('ui_mode')
 
@@ -27,8 +26,8 @@ export default {
     module: {
         rules: [
             {
-                test: /\.(js|jsx)?$/, 
-                exclude: /node_modules/, 
+                test: /\.(js|jsx)?$/,
+                exclude: /node_modules/,
                 enforce: 'pre',
                 use: ['babel-loader', 'eslint-loader'],
             },

diff --git a/config/webpack/prod.js b/config/webpack/prod.js
@@ -37,8 +37,8 @@ const config = {
     module: {
         rules: [
             {
-                test: /\.(js|jsx)?$/, 
-                exclude: /node_modules/, 
+                test: /\.(js|jsx)?$/,
+                exclude: /node_modules/,
                 enforce: 'pre',
                 use: ['babel-loader', 'eslint-loader'],
             },

diff --git a/package.json b/package.json
@@ -60,6 +60,7 @@
     "raven-js": "^2.3.0",
     "react": "16.12.0",
     "react-addons-pure-render-mixin": "^15.6.2",
+    "react-bootstrap": "^1.0.1",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "16.12.0",
     "react-helmet": "^5.2.1",
@@ -70,6 +71,7 @@
     "react-router-dom": "^4.2.2",
     "react-router-redux": "^5.0.0-alpha.9",
     "react-select": "^3.0.8",
+    "reactstrap": "^8.4.1",
     "redux": "4.0.4",
     "redux-actions": "^0.9.0",
     "redux-oidc": "^4.0.0-beta1",
@@ -135,7 +137,8 @@
       "node_modules"
     ],
     "moduleNameMapper": {
-      "^.+\\.(css|styl|less|sass|scss|png|jpg|svg|ttf|woff|woff2)$": "identity-obj-proxy"
+      "^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|svg|woff|woff2)$": "identity-obj-proxy",
+      "src/(.*)": "<rootDir>/src/$1"
     },
     "snapshotSerializers": [
       "enzyme-to-json/serializer"

diff --git a/src/components/Header/Header.test.js b/src/components/Header/Header.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import {shallow} from 'enzyme';
-import {Button} from '@material-ui/core'
+import {Button} from 'reactstrap';
 
 import {mockUser} from '__mocks__/mockData';
 import {UnconnectedHeaderBar} from './index';

diff --git a/src/components/Header/LanguageSelector.js b/src/components/Header/LanguageSelector.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+class LanguageSelector extends React.Component {
+    constructor(props) {
+        super(props);
+        this.toggle = this.toggle.bind(this);
+        this.state = {
+            isOpen: false,
+        };
+    }
+
+    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});
+    }
+
+    handleLanguageChange(lang, e) {
+        e.preventDefault();
+        this.props.changeLanguage(lang);
+        this.setState({isOpen: false})
+
+    }
+
+
+
+    /**
+     * 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();
+    }
+
+    render() {
+        const {userLocale} = this.props;
+        const activeLocale = userLocale.locale.toUpperCase();
+        return (
+            <React.Fragment>
+                <div onClick={this.toggle} ref={node => this.node = node} className='LanguageMain'>
+                    <span className="glyphicon glyphicon-globe" />
+                    <div className="currentLanguage">
+                        <a href="#">{activeLocale}
+                            <span className="caret"></span>
+                        </a>
+                    </div>
+                </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)})}
+                                onClick={this.handleLanguageChange.bind(this, language)}
+                            >
+                                <a href="#">{language.label}</a>
+                            </li>
+                        )
+                    })}
+                </ul>
+            </React.Fragment>
+        )
+    }
+}
+
+LanguageSelector.propTypes = {
+    languages: PropTypes.array,
+    userLocale: PropTypes.object,
+    changeLanguage: PropTypes.func,
+}
+export default LanguageSelector;
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');
+        })
+    })
+
+})