-
-
Save ciwolsey/28caecf1651f5face7172d24b7177508 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component, PropTypes } from 'react'; | |
import ReactDOM from 'react-dom'; | |
import { Meteor } from 'meteor/meteor'; | |
import { Session } from 'meteor/session' | |
import { createContainer } from 'meteor/react-meteor-data'; | |
import { Mailboxes } from '../api/mailboxes.js'; | |
import { Mails } from '../api/mails.js'; | |
import Mailbox from './Mailbox.jsx'; | |
import Mail from './Mail.jsx'; | |
import AccountsUIWrapper from './AccountsUIWrapper.jsx'; | |
// App component - represents the whole app | |
export default class App extends Component { | |
constructor(props, context) { | |
super(props, context); | |
this.state = { | |
currentMailbox: 0 | |
}; | |
}; | |
handleSubmit(event) { | |
event.preventDefault(); | |
// Find the text field via the React ref | |
const text = ReactDOM.findDOMNode(this.refs.createMailbox_name).value.trim(); | |
Mailboxes.insert({ | |
name: text, | |
length: 0, | |
owner: Meteor.userId(), // _id of logged in user | |
username: Meteor.user().username, // username of logged in user | |
}); | |
// Clear form | |
ReactDOM.findDOMNode(this.refs.createMailbox_name).value = ''; | |
} | |
handleShowMailboxes(event) { | |
event.preventDefault(); | |
$('.ui.sidebar') | |
.sidebar('toggle') | |
; | |
} | |
handleSelectMailbox(event, i){ | |
event.preventDefault(); | |
//What the heck do I do put here? | |
console.log('works' + i); | |
} | |
renderMailboxes() { | |
return this.props.mailboxes.map(function(mailbox, i){ | |
var scope = this; | |
return <Mailbox key={mailbox._id} onClick={scope.props.handleSelectMailbox.bind(this, i)} mailbox={mailbox} /> // Troubles with this too! | |
}); | |
} | |
renderMails() { | |
return this.props.mails.map((mail) => ( | |
<Mail key={mail._id} mail={mail} /> | |
)); | |
} | |
render() { | |
return ( | |
<div> | |
<div className="ui sidebar vertical menu"> | |
{this.renderMailboxes()} | |
</div> | |
<div className="pusher"> | |
<div className="ui left fixed vertical menu mailmenu" style={{width:300 + 'px'}}> | |
{this.renderMails()} | |
<div className="item mailitem"> | |
<img className="ui avatar image" src="http://semantic-ui.com/images/avatar/small/stevie.jpg" /> | |
<div className="content"> | |
<div className="header">Stevie Feliciano</div> | |
Concerning the yellow ape beh... | |
</div> | |
</div> | |
<div className="item mailitem"> | |
<img className="ui avatar image" src="http://semantic-ui.com/images/avatar/small/elliot.jpg" /> | |
<div className="content"> | |
<div className="header">Elliot Fu</div> | |
Whazzzzaaaap | |
</div> | |
</div> | |
<div className="item"> | |
<button className="ui button" id="showMailboxes" onClick={this.handleShowMailboxes.bind(this)}>Show Mailboxes</button> | |
</div> | |
</div> | |
<AccountsUIWrapper /> | |
{ this.props.currentUser ? | |
<form className="new-task" onSubmit={this.handleSubmit.bind(this)} > | |
<input | |
type="text" | |
ref="createMailbox_name" | |
placeholder="Mailbox Name" | |
/> | |
</form> : '' | |
} | |
</div> | |
</div> | |
); | |
} | |
componentDidMount() { | |
$('.ui.sidebar') | |
.sidebar('setting', 'dimPage', false) | |
.sidebar('setting', 'closeable', false) | |
.sidebar('toggle') | |
; | |
} | |
} | |
App.propTypes = { | |
mailboxes: PropTypes.array.isRequired, | |
mails: PropTypes.array.isRequired, | |
currentMailbox: PropTypes.object.isRequired, | |
currentUser: PropTypes.object, | |
}; | |
export default React.createContainer(React.createClass({ | |
getInitialState(){ | |
return { | |
someState: 0 | |
} | |
}, | |
render(){ | |
return { | |
mailboxes: Mailboxes.find({}).fetch(), | |
mails: Mails.find({mailbox_id: Session.get('currentMailbox', 0)}).fetch(), | |
currentMailbox: //What the heck do I do put here? | |
currentUser: Meteor.user(), | |
}; | |
} | |
}), App); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment