Add tabs to SettingsPage

package.json

@@ -50,7 +50,6 @@
     "lodash": "^4.17.4",
     "object-path": "^0.11.4",
     "react": "^16.2.0",
-    "react-collapse": "^4.0.3",
     "react-dom": "^16.2.0",
     "react-i18next": "^7.3.1",
     "react-mortal": "^3.0.1",

src/components/SettingsPage.js → src/components/SettingsPage/Profile.js

@@ -16,7 +16,7 @@ import type { Settings } from 'types/common'
 import { saveSettings } from 'actions/settings'
 import { unlock } from 'reducers/application'
 
-import Box from 'components/base/Box'
+import Box, { Card } from 'components/base/Box'
 import Input from 'components/base/Input'
 import Button from 'components/base/Button'
 
@@ -33,6 +33,7 @@ type Props = {
   unlock: Function,
 }
 type State = {
+  tab: number,
   inputValue: InputValue,
 }
 
@@ -93,11 +94,9 @@ class SettingsPage extends PureComponent<Props, State> {
 
   render() {
     const { inputValue } = this.state
-
     return (
       <form onSubmit={this.handleSubmit}>
-        <Box p={3}>
+        <Card>
-          <Box>{'settings'}</Box>
           <Box horizontal>
             <input
               type="checkbox"
@@ -119,7 +118,7 @@ class SettingsPage extends PureComponent<Props, State> {
           <Box>
             <Button type="submit">Save</Button>
           </Box>
-        </Box>
+        </Card>
       </form>
     )
   }

src/components/SettingsPage/index.js

@@ -0,0 +1,70 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+
+import Box from 'components/base/Box'
+import Text from 'components/base/Text'
+import Tabs from 'components/base/Tabs'
+
+import TabProfile from './Profile'
+
+class SettingsPage extends PureComponent<Props, State> {
+  state = {
+    tab: 'profile',
+  }
+
+  handleChangeTab = tab => this.setState({ tab })
+
+  render() {
+    const { tab } = this.state
+
+    return (
+      <Box p={3} flow={4}>
+        <Text fontSize={5}>{'Settings'}</Text>
+        <Tabs
+          index={tab}
+          onTabClick={this.handleChangeTab}
+          items={[
+            {
+              key: 'display',
+              title: 'Affichage',
+              render: () => <div>{'Affichage'}</div>,
+            },
+            {
+              key: 'money',
+              title: 'Monnaie',
+              render: () => <div>{'Monnaie'}</div>,
+            },
+            {
+              key: 'material',
+              title: 'Matériel',
+              render: () => <div>{'Matériel'}</div>,
+            },
+            {
+              key: 'app',
+              title: 'App (beta)',
+              render: () => <div>{'App (beta)'}</div>,
+            },
+            {
+              key: 'tools',
+              title: 'Outils',
+              render: () => <div>{'Outils'}</div>,
+            },
+            {
+              key: 'blockchain',
+              title: 'Blockchain',
+              render: () => <div>{'Blockchain'}</div>,
+            },
+            {
+              key: 'profile',
+              title: 'Profil',
+              render: () => <TabProfile />,
+            },
+          ]}
+        />
+      </Box>
+    )
+  }
+}
+
+export default SettingsPage

src/components/base/Tabs/index.js

@@ -1,8 +1,8 @@
 // @flow
 
 import React, { Fragment } from 'react'
-import { Collapse } from 'react-collapse'
 import styled from 'styled-components'
+import isString from 'lodash/isString'
 
 import type { Element } from 'react'
 
@@ -13,6 +13,7 @@ const Tab = styled(Tabbable).attrs({
   pb: 1,
   align: 'center',
   justify: 'center',
+  fontSize: 1,
 })`
   border-bottom: 2px solid transparent;
   border-bottom-color: ${p => (p.isActive ? p.theme.colors.blue : '')};
@@ -20,6 +21,7 @@ const Tab = styled(Tabbable).attrs({
   font-weight: ${p => (p.isActive ? 'bold' : '')};
   margin-bottom: -1px;
   outline: none;
+  cursor: ${p => (p.isActive ? 'default' : 'pointer')};
 `
 
 type Item = {
@@ -34,17 +36,24 @@ type Props = {
   onTabClick: number => void,
 }
 
-const Tabs = ({ items, index, onTabClick }: Props) => (
+const Tabs = ({ items, index, onTabClick }: Props) => {
+  const item = isString(index) ? items.find(item => item.key === index) : items[index]
+  return (
     <Fragment>
       <Box horizontal borderBottom borderWidth={1} borderColor="argile">
         {items.map((item, i) => (
-        <Tab key={item.key} isActive={index === i} onClick={() => onTabClick(i)}>
+          <Tab
+            key={item.key}
+            isActive={isString(index) ? index === item.key : index === i}
+            onClick={() => onTabClick(i)}
+          >
             {item.title}
           </Tab>
         ))}
       </Box>
-    {items[index] && <Collapse isOpened>{items[index].render()}</Collapse>}
+      {item && item.render()}
     </Fragment>
   )
+}
 
 export default Tabs

yarn.lock

@@ -7164,12 +7164,6 @@ rc@^1.0.1, rc@^1.1.2, rc@^1.1.6, rc@^1.1.7, rc@^1.2.1:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-collapse@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/react-collapse/-/react-collapse-4.0.3.tgz#b96de959ed0092a43534630b599a4753dd76d543"
-  dependencies:
-    prop-types "^15.5.8"
-
 react-color@^2.11.4:
   version "2.13.8"
   resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.13.8.tgz#bcc58f79a722b9bfc37c402e68cd18f26970aee4"