Skip to content

Instantly share code, notes, and snippets.

/account.cjsx Secret
Created Jan 20, 2016

Embed
What would you like to do?
Fluxxor = require 'fluxxor'
BillingInfo = require '../components/billingInfo.cjsx'
Card = require '../components/card.cjsx'
ConfirmDelete = require '../components/confirmDelete.cjsx'
List = require '../components/list.cjsx'
Loader = require '../components/loader.cjsx'
PageTabs = require '../components/pageTabs.cjsx'
module.exports = React.createClass
mixins: [
Fluxxor.FluxMixin(React)
Fluxxor.StoreWatchMixin('acct', 'ui', 'users')
React.addons.LinkedStateMixin
ReactRouter.Navigation
ReactRouter.State
]
getStateFromFlux: ->
utils.getStateFromFlux.call @, ['acct', 'ui', 'users']
componentDidMount: ->
@handleGetMe()
@handleGetSummary()
@handleGetUserLists()
# Add `me` to state
if @state.users.me
@setState @state.users.me
componentDidUpdate: (prevProps, prevState) ->
flux = @getFlux()
@handleGetMe()
@handleGetSummary()
@handleGetUserLists()
# Add `me` to state
if utils.propAdded 'me', prevState.users, @state.users
@setState @state.users.me
# If a list was deleted,
if utils.propAdded 'deleted', prevState.acct, @state.acct
flux.actions.acct.extend {deleted: null}
flux.actions.ui.addMessage
color: 'green'
header: 'Your list has been deleted'
hide: 5000
# If `me` was saved,
if utils.propAdded 'me_saved', prevState.users, @state.users
@showUpdates()
flux.actions.users.extend {me_saved: null}
# If the account was deleted,
if utils.propAdded 'acct_deleted', prevState.acct, @state.acct
flux.actions.auth.logout()
flux.actions.ui.addMessage
color: 'yellow'
header: "Please check your email to confirm your account deletion."
hide: 15000
@transitionTo 'login'
showUpdates: ->
flux = @getFlux()
updated = @state.users.me_saved
msg = {color: 'green', hide: 3000}
if updated.name
flux.actions.ui.addMessage _.extend(msg, {header: 'Updated name', content: ''})
if updated.phone
flux.actions.ui.addMessage _.extend(msg, {header: 'Sent phone confirmation', content: 'Please check your text messages'})
if updated.email
flux.actions.ui.addMessage _.extend(msg, {header: 'Sent email confirmation', content: 'Please check your email'})
handleGetMe: ->
if not @state.users.me
@getFlux().actions.users.me()
handleGetSummary: ->
{summary} = @state.acct
{me} = @state.users
if me and not summary
@getFlux().actions.acct.getSummary me
handleGetUserLists: ->
{me} = @state.users
if me and not @state.acct.lists
@getFlux().actions.acct.getLists me
handleDeleteList: (list) ->
@getFlux().actions.acct.deleteList {list_hid: list.hid}
handleDeleteAccount: ->
@getFlux().actions.acct.delete @state.users.me
handleSave: ->
{name, email, phone} = @state
me = _.extend {}, @state.users.me, {name, email, phone}
@getFlux().actions.users.save me
render: ->
{summary, lists, deleting, acct_deleting} = @state.acct
{me, me_saving} = @state.users
meSaveButtonClasses = classNames
ui: true
huge: true
primary: true
button: true
disabled: !!me_saving
loading: !!me_saving
<div>
<div className="pusher">
<div className="ui inverted vertical center aligned segment" style={{backgroundColor: '#B10'}}>
<Menu title='Account'/>
</div>
<PageTabs/>
<div className="ui basic segment">
<div className="ui center aligned container">
<h2 className="ui icon header">
<i className="configure icon"></i>
Account
<div className="content">
<div className="sub header">
Edit your account settings
</div>
</div>
</h2>
</div>
</div>
{if not me or not summary
<Loader/>
else
<div className="ui container">
<div className="ui basic segment">
<h2 className="ui dividing header">
My Info
</h2>
<div className="ui basic segment">
<div className="ui huge form">
<div className="ui three fields">
<div className="ui field">
<label>Name</label>
<input type="text" valueLink={@linkState('name')}/>
</div>
<div className="ui field">
<label>Email</label>
<input type="text" valueLink={@linkState('email')}/>
</div>
<div className="ui field">
<label>Phone</label>
<input type="text" valueLink={@linkState('phone')}/>
</div>
</div>
<div className="ui right aligned basic segment">
<button className={meSaveButtonClasses} onClick={@handleSave}>Save</button>
</div>
</div>
</div>
</div>
<div className="ui basic segment" style={{marginBottom: '4rem'}}>
<h2 className="ui dividing header">
Lists
</h2>
<div className="ui form">
<div className="ui container">
{unless lists?.length
<Link to="lists" className="ui center aligned blue header">
Add a Foghorn list
</Link>
}
<div className="ui relaxed items">
{(lists or []).map (list, i) =>
<div key={"list-#{i}"} className="ui two column stackable grid">
<div className="six wide left aligned column">
<div className="item">
<h2 className="ui header">
<i className="ui black phone icon"/>
<div className="content">
{if list.phone
<span>{list.phone_formatted}</span>
else
<span style={{fontStyle: 'italic'}}>Setup in progress</span>
}
</div>
</h2>
</div>
</div>
<div className="ten wide right aligned column">
<ConfirmDelete obj={list} deleting={deleting} onDelete={@handleDeleteList.bind(@, list)}/>
</div>
</div>
}
</div>
</div>
</div>
</div>
<BillingInfo/>
<div className="ui basic segment">
<h2 className="ui red dividing header">
Delete account
</h2>
<div className="ui form">
<ConfirmDelete obj={@state.users.me} deleting={acct_deleting} onDelete={@handleDeleteAccount}/>
</div>
</div>
</div>
}
<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<Footer/>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.