create profile component

agents/components/Avatar.js

@@ -1,26 +1,36 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { connect } from 'react-fela'
+import MuiAvatar from 'material-ui/Avatar'
 
 import styles from '../styles/Avatar'
 
+const sizeInPx = {
+  small: 40,
+  medium: 60,
+  large: 80
+}
+
 // https://ant.design/components/avatar/
 function Avatar (props) {
-  const { styles, agent } = props
-  const { name } = agent
+  const {
+    size,
+    styles,
+    avatar
+  } = props
   return (
-    <div className={styles.container}>
-      <div className={styles.name}>
-        {name}
-      </div>
-    </div>
+    <span className={styles.container}>
+      <MuiAvatar
+        className={styles.image}
+        size={sizeInPx[size]}
+        src={avatar}
+      />
+    </span>
   )
 }
 
 Avatar.propTypes = {
-  agent: PropTypes.shape({
-    name: PropTypes.string.isRequired
-  }).isRequired,
+  avatar: PropTypes.string,
   size: PropTypes.oneOf(['small', 'medium', 'large'])
 }
 

agents/components/Profile.js

@@ -0,0 +1,91 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { connect as connectFela } from 'react-fela'
+import { Field, reduxForm as connectForm } from 'redux-form'
+import { flow } from 'lodash'
+import { TextField } from 'redux-form-material-ui'
+
+import styles from '../styles/Profile'
+
+import Button from '../../app/components/Button'
+import AvatarField from '../../app/components/AvatarField'
+
+class Profile extends React.Component {
+  constructor (props, context) {
+    super(props, context)
+    this.state = {
+      isEditing: false
+    }
+  }
+
+  toggleEdit () {
+    this.setState({
+      isEditing: this.state.isEditing ? false : true
+    })
+  }
+
+  render () {
+    const { isEditing } = this.state
+    const { styles, agent, agent: { profile: { name, description, avatar } } } = this.props
+
+    return (
+      <form className={styles.container}>
+        <Field
+          name='avatar'
+          component={AvatarField}
+          isEditingProfile={isEditing}
+          value={avatar}
+        />
+        <Field
+          name='name'
+          floatingLabelText='Name'
+          component={TextField}
+          value={name}
+          disabled={!isEditing}
+        />
+        <Field
+          name='description'
+          floatingLabelText='Description'
+          component={TextField}
+          value={description}
+          multiLine={true}
+          rows={3}
+          disabled={!isEditing}
+        />
+        <Button type='button' onClick={() => { this.toggleEdit() }}>
+          {
+            isEditing
+            ? 'Save Profile'
+            : 'Edit Profile'
+          }
+        </Button>
+      </form>
+    )
+  }
+
+}
+
+Profile.propTypes = {
+  agent: PropTypes.shape({
+    profile: PropTypes.shape({
+      avatar: PropTypes.string.isRequired,
+      description: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired
+    }).isRequired
+  })
+}
+
+Profile.defaultProps = {
+}
+
+export default flow(
+  connectFela(styles),
+  connectForm({
+    form: 'profile',
+    initialValues: {
+      avatar: 'http://dinosaur.is/images/mikey-small.jpg',
+      name: 'classic nixon',
+      description: "it's classic nixon"
+    }
+  })
+)(Profile)

agents/components/ProfileIcon.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { connect } from 'react-fela'
+
+import styles from '../styles/ProfileIcon'
+
+import Avatar from './Avatar'
+
+const imageSizePerFormat = {
+  page: 'large',
+  icon: 'small'
+}
+
+// https://ant.design/components/avatar/
+function ProfileIcon (props) {
+  const {
+    format,
+    styles,
+    agent: { profile: { name, avatar } }
+  } = props
+  return (
+    <div>
+      <Avatar
+        size={imageSizePerFormat[format]}
+        avatar={avatar}
+      />
+      <span className={styles.name}>{name}</span>
+    </div>
+  )
+}
+
+ProfileIcon.propTypes = {
+  agent: PropTypes.shape({
+    name: PropTypes.string,
+    avatar: PropTypes.string
+  }).isRequired,
+  format: PropTypes.oneOf(['page', 'icon'])
+}
+
+ProfileIcon.defaultProps = {
+  format: 'page'
+}
+
+export default connect(styles)(ProfileIcon)

agents/stories/Avatar.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { linkTo } from '@storybook/addon-links'
+
+import Avatar from '../components/Avatar'
+
+const catz = 'http://random.cat/i/cute_animals_show_feeling_06.jpg'
+
+storiesOf('agents.Avatar', module)
+  .add('default', () => (
+    <Avatar avatar={catz} />
+  ))
+  .add('small', () => (
+    <Avatar size={'small'} avatar={catz} />
+  ))
+  .add('medium', () => (
+    <Avatar size={'medium'} avatar={catz} />
+  ))
+  .add('large', () => (
+    <Avatar size={'large'} avatar={catz} />
+  ))

agents/stories/Profile.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { reduxForm, Field } from 'redux-form'
+
+import Profile from '../components/Profile'
+
+const alice = {
+  profile: {
+    name: 'Alice',
+    description: 'a cool cat',
+    avatar: 'http://dinosaur.is/images/mikey-small.jpg'
+  }
+}
+storiesOf('agents.Profile', module)
+  .add('basic', () => (
+    <Profile agent={alice} />
+  ))

agents/stories/ProfileIcon.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { linkTo } from '@storybook/addon-links'
+
+import ProfileIcon from '../components/ProfileIcon'
+
+const alice = {
+  profile: {
+    avatar: 'http://random.cat/i/cute_animals_show_feeling_06.jpg',
+    name: 'Alice',
+    description: 'a cool cat'
+  }
+}
+
+storiesOf('agents.ProfileIcon', module)
+  .add('default', () => (
+    <ProfileIcon agent={alice} />
+  ))
+  .add('icon', () => (
+    <ProfileIcon format={'icon'} agent={alice} />
+  ))
+  .add('page', () => (
+    <ProfileIcon format={'page'} agent={alice} />
+  ))

agents/stories/index.js

@@ -1,27 +1,3 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
-import { linkTo } from '@storybook/addon-links'
-
-import Avatar from '../components/Avatar'
-
-import initFelaStorybook from '../../app/helpers/initFelaStorybook'
-
-const FelaProvider = initFelaStorybook()
-
-const alice = { name: 'Alice' }
-
-storiesOf('agents.Avatar', module)
-  .addDecorator(FelaProvider)
-  .add('default', () => (
-    <Avatar agent={alice} />
-  ))
-  .add('small', () => (
-    <Avatar size={'small'} agent={alice} />
-  ))
-  .add('medium', () => (
-    <Avatar size={'medium'} agent={alice} />
-  ))
-  .add('large', () => (
-    <Avatar size={'large'} agent={alice} />
-  ))
+require('./Avatar')
+require('./Profile')
+require('./ProfileIcon')

agents/styles/Avatar.js

@@ -1,25 +1,14 @@
+// (mw) just for fun, not for real
 const containerPaddingBySize = {
   small: '0.5rem',
   medium: '0.75rem',
   large: '1rem'
 }
 
-const nameFontSizeBySize = {
-  small: '1rem',
-  medium: '1.5rem',
-  large: '2rem'
-}
-
 // https://ant.design/components/avatar/
 
 export default {
-  container: ({ size }) => ({
-    backgroundColor: '#fef',
+  container: ({ size = 'small' }) => ({
     padding: containerPaddingBySize[size]
-  }),
-  name: ({ size }) => ({
-    fontSize: nameFontSizeBySize[size],
-    fontWeight: size === 'large' ? 'bold' : 'normal',
-    textAlign: 'center'
   })
 }

agents/styles/Profile.js

@@ -0,0 +1,4 @@
+export default {
+  container: () => ({}),
+  name: () => ({})
+}

agents/styles/ProfileIcon.js

@@ -0,0 +1,11 @@
+const fontSizeByFormat = {
+  page: '2rem',
+  icon: '1rem'
+}
+
+export default {
+  container: () => ({}),
+  name: ({ format }) => ({
+    fontSize: fontSizeByFormat[format]
+  })
+}