Work on SettingsPage

src/components/SettingsPage/Profile.js

@@ -33,7 +33,6 @@ type Props = {
   unlock: Function,
 }
 type State = {
-  tab: number,
   inputValue: InputValue,
 }
 

src/components/SettingsPage/index.js

@@ -8,12 +8,18 @@ import Tabs from 'components/base/Tabs'
 
 import TabProfile from './Profile'
 
+type Props = {}
+
+type State = {
+  tab: number,
+}
+
 class SettingsPage extends PureComponent<Props, State> {
   state = {
-    tab: 'profile',
+    tab: 6,
   }
 
-  handleChangeTab = tab => this.setState({ tab })
+  handleChangeTab = (tab: number) => this.setState({ tab })
 
   render() {
     const { tab } = this.state

src/components/base/Box/index.js

@@ -59,7 +59,7 @@ const RawCard = styled(Box).attrs({ bg: 'white', p: 3 })`
   border-radius: 5px;
 `
 
-export const Card = ({ title, ...props }: { title: string }) => {
+export const Card = ({ title, ...props }: { title?: string }) => {
   if (title) {
     return (
       <Box flow={2}>
@@ -73,6 +73,10 @@ export const Card = ({ title, ...props }: { title: string }) => {
   return <RawCard {...props} />
 }
 
+Card.defaultProps = {
+  title: undefined,
+}
+
 export const GrowScroll = (props: *) => (
   <Box grow relative>
     <Box sticky scroll {...props} />

src/components/base/Tabs/index.js

@@ -2,7 +2,6 @@
 
 import React, { Fragment } from 'react'
 import styled from 'styled-components'
-import isString from 'lodash/isString'
 
 import type { Element } from 'react'
 
@@ -36,24 +35,17 @@ 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]
+  <Fragment>
-  return (
+    <Box horizontal borderBottom borderWidth={1} borderColor="argile">
-    <Fragment>
+      {items.map((item, i) => (
-      <Box horizontal borderBottom borderWidth={1} borderColor="argile">
+        <Tab key={item.key} isActive={index === i} onClick={() => onTabClick(i)}>
-        {items.map((item, i) => (
+          {item.title}
-          <Tab
+        </Tab>
-            key={item.key}
+      ))}
-            isActive={isString(index) ? index === item.key : index === i}
+    </Box>
-            onClick={() => onTabClick(i)}
+    {items[index] && items[index].render()}
-          >
+  </Fragment>
-            {item.title}
+)
-          </Tab>
-        ))}
-      </Box>
-      {item && item.render()}
-    </Fragment>
-  )
-}
 
 export default Tabs