feat: Add Unit Converter

.gitignore

@@ -22,6 +22,9 @@
 .env.test.local
 .env.production.local
 .editorconfig
+.prettierrc
+.prettierignore
+/.vscode
 
 npm-debug.log*
 yarn-debug.log*

src/components/modal/style.scss

@@ -82,6 +82,13 @@
                             cursor: pointer;
                         }
                     }
+
+                    &.crud-calculator {
+                        svg {
+                            width: 21px;
+                            height: 21px;
+                        }
+                    }
                 }
             }
         }
@@ -126,6 +133,13 @@
                         }
                     }
                 }
+
+                .crud-calculator {
+                    svg {
+                        width: 21px;
+                        height: 21px;
+                    }
+                }
             }
         }
     }

src/components/recipe-crud-modal/index.js

@@ -153,6 +153,9 @@ class RecipeCrudModalNotExtended extends React.Component {
     _footer = () => {
         return (
             <div className='footer-buttons'>
+                <span className='crud-calculator' onClick={this.handleUnitConverter}>
+                    <SvgIcon name='calculator'/>
+                </span>
                 <span onClick={this.onSubmit}>
                     <SvgIcon name='save'/>
                 </span>
@@ -166,6 +169,9 @@ class RecipeCrudModalNotExtended extends React.Component {
     _headerIcons = () => {
         return (
             <div className='header-buttons'>
+                <span className='crud-calculator' onClick={this.handleUnitConverter}>
+                    <SvgIcon name='calculator'/>
+                </span>
                 <span onClick={this.onSubmit}>
                     <SvgIcon name='save'/>
                 </span>
@@ -176,6 +182,12 @@ class RecipeCrudModalNotExtended extends React.Component {
         );
     };
 
+    handleUnitConverter = () => {
+        const unitConverter = document.querySelector( '.comp_unit-converter-modal' );
+        unitConverter.classList.toggle( 'visible' );
+        console.log( 'click' );
+    };
+
     render() {
         const { formValues, errorValues, autoSuggest } = this.state;
         const { t, id, show } = this.props;

src/components/settings-modal/index.js

@@ -304,6 +304,10 @@ class SettingsModalNotExtended extends React.Component {
 											<td>{ t( 'Ctrl b' ) } <span className='tiny-text'>{ t( '(Windows & Linux)' ) }</span> { t( 'or' ) } &#8984; b <span className='tiny-text'>{ t( '(Mac)' ) }</span></td>
 											<td>{ t( 'Hide / Show Sidebar' ) }</td>
 										</tr>
+										<tr>
+											<td>{ t( 'Ctrl u' ) } <span className='tiny-text'>{ t( '(Windows & Linux)' ) }</span> { t( 'or' ) } &#8984; u <span className='tiny-text'>{ t( '(Mac)' ) }</span></td>
+											<td>{ t( 'Hide / Show Unit Converter' ) }</td>
+										</tr>
 										<tr>
 											<td>{ t( 'Ctrl n' ) }<span className='tiny-text'>{ t( '(Windows & Linux)' ) }</span> { t( 'or' ) } &#8984; n <span className='tiny-text'>{ t( '(Mac)' ) }</span></td>
 											<td>{ t( 'New recipe' ) }</td>

src/components/topmenu/index.js

@@ -1,33 +1,42 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { StorageHelpers } from '../../core/helpers';
 import { remote, ipcRenderer } from 'electron';
 import { connect } from 'react-redux';
+import { withTranslation } from 'react-i18next';
+import hoistStatics from 'hoist-non-react-statics';
 
 import SvgIcon from '../svgicon';
 import { SearchField } from '../form-elements';
 import { ReduxHelpers } from '../../core/helpers';
 import { SET_SEARCH_QUERY } from '../../redux/actions/searchActions';
 import { MainMenus, SearchResult } from '../../core/constants';
 import SettingsModal from '../settings-modal';
+import UnitConverter from '../unit-converter';
 
 import './style.scss';
 
 const Mousetrap = require( 'mousetrap' );
 
-class TopMenu extends Component {
+class TopMenuNotExtended extends Component {
     constructor( props ) {
         super( props );
         this.handleSidebarClick = this.handleSidebarClick.bind( this );
+        this.handleUnitConverterClick = this.handleUnitConverterClick.bind( this );
     }
 
     handleSidebarClick() {
         const sidebar = document.querySelector( '#sidebar-container' );
         sidebar.classList.toggle( 'hidden' );
     }
 
+    handleUnitConverterClick() {
+        const unitConverter = document.querySelector( '.comp_unit-converter-modal' );
+        unitConverter.classList.toggle( 'visible' );
+    }
+
     state = {
         maximize: false,
+        showUnitConverter: false,
         showSettingsModal: false,
         settingsSelectedTab: 'storage',
         isWindows: 'win32' === process.platform
@@ -37,6 +46,7 @@ class TopMenu extends Component {
         const { isWindows } = this.state;
 
         Mousetrap.bind( ['ctrl+b', 'command+b'], () => this.handleSidebarClick() );
+        Mousetrap.bind( ['ctrl+u', 'command+u'], () => this.handleUnitConverterClick() );
 
         ipcRenderer.on( 'appMenu', ( event, args ) => {
             if ( 'preferences' === args.type ) {
@@ -83,28 +93,15 @@ class TopMenu extends Component {
     };
 
     render() {
-        const { maximize, showSettingsModal, isWindows, settingsSelectedTab } = this.state;
-        const { query } = this.props;
-
-        // NOTE: Why react-i18n-next doesn't work here?
-        const appLang = StorageHelpers.preference.get( 'appLang' );
-        let searchtext;
-		switch ( appLang ) {
-			case 'en':
-				searchtext = 'Search recipe...';
-				break;
-			case 'fr':
-                searchtext = 'Cherchez une recette...';
-                break;
-            case 'de':
-                searchtext = 'Rezept suchen...';
-                break;
-			default:
-                searchtext = 'Search recipe...';
-		}
+        const { maximize, showUnitConverter, showSettingsModal, isWindows, settingsSelectedTab } = this.state;
+        const { t, query } = this.props;
 
         return (
             <div className='comp_topmenu'>
+                <UnitConverter
+                    show={showUnitConverter}
+                    onClose={() => this.setState({ showUnitConverter: false })}
+                />
                 <SettingsModal
                     show={showSettingsModal}
                     selectedTab={settingsSelectedTab}
@@ -127,6 +124,9 @@ class TopMenu extends Component {
                     <span className='sidebar' onClick={this.handleSidebarClick}>
                         <SvgIcon name='sidebar' />
                     </span>
+                    <span className='calculator' onClick={this.handleUnitConverterClick}>
+                        <SvgIcon name='calculator' />
+                    </span>
                     <div className='content-header-divider'></div>
                     <span className='applogo'>
                         <SvgIcon name='logo' />
@@ -140,7 +140,7 @@ class TopMenu extends Component {
                 </div>
                 <div className='right-side'>
                     <SearchField
-                        placeholder={searchtext}
+                        placeholder={t( 'Search recipe...' )}
                         value={query}
                         onChangeText={text => this.onChangeText( text )}
                         onClearClick={() => this.onChangeText( '' )}
@@ -173,7 +173,7 @@ class TopMenu extends Component {
     }
 }
 
-TopMenu.defaultProps = {
+TopMenuNotExtended.defaultProps = {
     onClickSettings: PropTypes.func
 };
 
@@ -190,4 +190,6 @@ const mapDispatchToProps = ( dispatch ) => {
     };
 };
 
+const TopMenu = hoistStatics( withTranslation()( TopMenuNotExtended ), TopMenuNotExtended );
+
 export default connect( mapStateToProps, mapDispatchToProps )( TopMenu );

src/components/topmenu/style.scss

@@ -13,7 +13,7 @@
         align-items: center;
         margin-left: 10px;
 
-        .sidebar {
+        .sidebar, .calculator {
             border: none;
             background: transparent;
             font-size: 15px;