Add language in DevToolbar

src/components/DevToolbar.js

@@ -2,6 +2,7 @@
 
 import React, { PureComponent } from 'react'
 import { ipcRenderer } from 'electron'
+import { translate } from 'react-i18next'
 import { AreaChart, Area } from 'recharts'
 import takeRight from 'lodash/takeRight'
 import last from 'lodash/last'
@@ -13,6 +14,7 @@ import styled from 'styled-components'
 import color from 'color'
 
 import Box from 'components/base/Box'
+import GrowScroll from 'components/base/GrowScroll'
 import CopyToClipboard from 'components/base/CopyToClipboard'
 
 import theme from 'styles/theme'
@@ -84,7 +86,6 @@ const Colors = styled(Box).attrs({
   align: 'flex-start',
 })`
   flex-wrap: wrap;
-  width: ${(80 + 4) * 4}px;
 `
 
 const Cl = styled(Box).attrs({
@@ -104,6 +105,22 @@ const Color = ({ onClick, color }: { onClick: Function, color: ColorType }) => (
   </Cl>
 )
 
+const Lang = styled(Box).attrs({
+  bg: p => (p.current ? 'white' : 'night'),
+  color: p => (p.current ? 'night' : 'white'),
+  borderColor: 'white',
+  borderWidth: 1,
+  p: 1,
+})`
+  border-radius: 3px;
+  cursor: pointer;
+`
+
+const LANGUAGES = {
+  fr: 'français',
+  en: 'english',
+}
+
 type State = {
   isOpened: boolean,
   cpuUsage: Object,
@@ -143,26 +160,43 @@ class DevToolbar extends PureComponent<any, State> {
   }
 
   handleToggle = () => this.setState({ isOpened: !this.state.isOpened })
+  handleChangeLanguage = lang => () => this.props.i18n.changeLanguage(lang)
 
   render() {
+    const { i18n } = this.props
     const { isOpened, cpuUsage } = this.state
 
     return (
       <Container isOpened={isOpened}>
         <Handle onClick={this.handleToggle}>{'DEV'}</Handle>
-        <Box horizontal>
+        <Box horizontal grow flow={10}>
-          <Colors>
+          <Box flow={10}>
-            {colors.map(color => (
+            {Object.keys(LANGUAGES).map(lang => (
-              <CopyToClipboard
+              <Lang
-                key={color.name}
+                key={lang}
-                data={color.name}
+                current={i18n.language === lang}
-                render={copy => <Color color={color} onClick={copy} />}
+                onClick={this.handleChangeLanguage(lang)}
-              />
+              >
+                {LANGUAGES[lang]}
+              </Lang>
             ))}
-          </Colors>
+          </Box>
-          <Box ml={1}>
+          <Box style={{ width: 168 }}>
+            <GrowScroll>
+              <Colors>
+                {colors.map(color => (
+                  <CopyToClipboard
+                    key={color.name}
+                    data={color.name}
+                    render={copy => <Color color={color} onClick={copy} />}
+                  />
+                ))}
+              </Colors>
+            </GrowScroll>
+          </Box>
+          <Box flow={10}>
             {Object.keys(cpuUsage).map(k => (
-              <Box key={k}>
+              <Box key={k} grow>
                 <Box horizontal align="center">
                   <Box grow>{k}</Box>
                   <Box fontSize="8px">{last(cpuUsage[k]).value}%</Box>
@@ -172,7 +206,7 @@ class DevToolbar extends PureComponent<any, State> {
                     width={100}
                     height={40}
                     data={cpuUsage[k]}
-                    margin={{ top: 10, right: 0, left: 0, bottom: 10 }}
+                    margin={{ top: 10, right: 0, left: 0, bottom: 0 }}
                   >
                     <Area
                       type="monotone"
@@ -192,4 +226,4 @@ class DevToolbar extends PureComponent<any, State> {
   }
 }
 
-export default DevToolbar
+export default translate()(DevToolbar)