mirror of
https://github.com/BoostIo/Boostnote
synced 2025-12-15 18:56:22 +00:00
switch Angular -> React(half done)
This commit is contained in:
Rokt33r
11
browser/main/Containers/BlueprintContainer.jsx
Normal file
11
browser/main/Containers/BlueprintContainer.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
var React = require('react/addons')
|
||||
|
||||
module.exports = React.createClass({
|
||||
render: function () {
|
||||
return (
|
||||
<div>
|
||||
Blueprint Container
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
52
browser/main/Containers/DashboardContainer.jsx
Normal file
52
browser/main/Containers/DashboardContainer.jsx
Normal file
@@ -0,0 +1,52 @@
|
||||
var React = require('react/addons')
|
||||
|
||||
module.exports = React.createClass({
|
||||
render: function () {
|
||||
return (
|
||||
<div className='DashboardContainer'>
|
||||
<h1 className='jumbotron'>Codexen App <small>v0.2.0</small></h1>
|
||||
|
||||
<h2>About CodeXen</h2>
|
||||
|
||||
<p>
|
||||
CodeXen is short code storage tool make coding more stressless. If you use CodeXen, then you will be disentangled from troublesome organizing a large number of snippets and googling same code many times.
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<h3>Post your code</h3>
|
||||
<p>
|
||||
Post your commonly used code with description,category,and tags.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>Save on cloud</h3>
|
||||
<p>
|
||||
From short snippet to long complex code,CodeXen saves any code simply.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>
|
||||
Use code like a magic
|
||||
</h3>
|
||||
<p>
|
||||
CodeXen call code you posted whereever you are.Type [shift+control+tab] simultaneously.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>
|
||||
Code Elegantly
|
||||
</h3>
|
||||
<p>
|
||||
That's all!
|
||||
You must be loved with CodeXen. Enjoy coding;)
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
<p>
|
||||
© 2015 MAISIN&CO.,Inc.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
44
browser/main/Containers/LoginContainer.jsx
Normal file
44
browser/main/Containers/LoginContainer.jsx
Normal file
@@ -0,0 +1,44 @@
|
||||
var React = require('react/addons')
|
||||
var ReactRouter = require('react-router')
|
||||
var Link = ReactRouter.Link
|
||||
var Auth = require('../Services/Auth')
|
||||
|
||||
module.exports = React.createClass({
|
||||
mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
|
||||
getInitialState: function () {
|
||||
return {
|
||||
email: '',
|
||||
password: ''
|
||||
}
|
||||
},
|
||||
handleSubmit: function (e) {
|
||||
console.log(this.state)
|
||||
Auth.attempt()
|
||||
// TODO: request user data
|
||||
.then(function (user) {
|
||||
this.transitionTo('dashboard', {planetName: user.name})
|
||||
}.bind(this))
|
||||
e.preventDefault()
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div className='LoginContainer'>
|
||||
<h1 className='text-center'>CodeXen</h1>
|
||||
<h2 className='text-center'>Log In | <small><Link to='register'>Register</Link></small></h2>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<div className='form-group'>
|
||||
<label>E-mail</label>
|
||||
<input valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<label>Password</label>
|
||||
<input valueLink={this.linkState('password')} onChange={this.handleChange} type='password' placeholder='Password'/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<button className='btn-primary btn-block' type='submit'><i className='fa fa-sign-in'></i> Login</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
18
browser/main/Containers/MainContainer.jsx
Normal file
18
browser/main/Containers/MainContainer.jsx
Normal file
@@ -0,0 +1,18 @@
|
||||
var React = require('react/addons')
|
||||
var ReactRouter = require('react-router')
|
||||
var RouteHandler = ReactRouter.RouteHandler
|
||||
|
||||
module.exports = React.createClass({
|
||||
mixins: [ReactRouter.Navigation, ReactRouter.State],
|
||||
render: function () {
|
||||
// Redirect Login state
|
||||
if (this.getPath() === '/') {
|
||||
this.transitionTo('/login')
|
||||
}
|
||||
return (
|
||||
<div className='Main'>
|
||||
<RouteHandler/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
138
browser/main/Containers/PlanetContainer.jsx
Normal file
138
browser/main/Containers/PlanetContainer.jsx
Normal file
@@ -0,0 +1,138 @@
|
||||
var React = require('react/addons')
|
||||
var RouteHandler = require('react-router').RouteHandler
|
||||
var ReactRouter = require('react-router')
|
||||
var Link = ReactRouter.Link
|
||||
|
||||
var userPlanets = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'testcat',
|
||||
profileName: 'TestCat'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'group1',
|
||||
profileName: 'Some Group#1'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'group2',
|
||||
profileName: 'Some Group#1'
|
||||
}
|
||||
]
|
||||
|
||||
var PlanetNavigator = React.createClass({
|
||||
propTypes: {
|
||||
currentPlanet: React.PropTypes.object
|
||||
},
|
||||
render: function () {
|
||||
var planets = userPlanets.map(function (planet) {
|
||||
return (
|
||||
<li key={planet.id} className={this.props.currentPlanet.name === planet.name ? 'active' : ''}><a>{planet.profileName[0]}</a></li>
|
||||
)
|
||||
}.bind(this))
|
||||
|
||||
return (
|
||||
<div className='PlanetNavigator'>
|
||||
<ul>
|
||||
{planets}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
var PlanetMain = React.createClass({
|
||||
propTypes: {
|
||||
currentPlanet: React.PropTypes.object
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div className='PlanetMain'>
|
||||
<SideNavigator currentPlanet={this.props.currentPlanet}/>
|
||||
<Screen currentPlanet={this.props.currentPlanet}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
var SideNavigator = React.createClass({
|
||||
propTypes: {
|
||||
currentPlanet: React.PropTypes.shape({
|
||||
name: React.PropTypes.string
|
||||
})
|
||||
},
|
||||
render: function () {
|
||||
var currentPlanetName = this.props.currentPlanet.name
|
||||
|
||||
return (
|
||||
<div className='SideNavigator'>
|
||||
<div className='nav-header'>
|
||||
<p className='planet-name'>{currentPlanetName}</p>
|
||||
<button className='menu-btn'>
|
||||
<i className='fa fa-chevron-down'></i>
|
||||
</button>
|
||||
</div>
|
||||
<button className='btn-primary btn-block'>
|
||||
<i className='fa fa-rocket fa-fw'/> Launch
|
||||
</button>
|
||||
<nav>
|
||||
<Link to='dashboard' params={{planetName: currentPlanetName}}>
|
||||
<i className='fa fa-home fa-fw'/> Home
|
||||
</Link>
|
||||
<Link to='snippets' params={{planetName: currentPlanetName}}>
|
||||
<i className='fa fa-code fa-fw'/> Snippets
|
||||
</Link>
|
||||
<Link to='blueprint' params={{planetName: currentPlanetName}}>
|
||||
<i className='fa fa-wrench fa-fw'/> Blueprints
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
var Screen = React.createClass({
|
||||
render: function () {
|
||||
return (
|
||||
<div className='Screen'>
|
||||
<RouteHandler/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
module.exports = React.createClass({
|
||||
mixins: [ReactRouter.Navigation],
|
||||
propTypes: {
|
||||
params: React.PropTypes.object,
|
||||
planetName: React.PropTypes.string
|
||||
},
|
||||
render: function () {
|
||||
var currentPlanetName = this.props.params.planetName
|
||||
var currentPlanet = null
|
||||
userPlanets.some(function (planet) {
|
||||
if (planet.name === currentPlanetName) {
|
||||
currentPlanet = planet
|
||||
return true
|
||||
}
|
||||
return false
|
||||
})
|
||||
if (currentPlanet == null) {
|
||||
var redirectTo = userPlanets[0].name
|
||||
this.transitionTo('planet', {planetName: redirectTo})
|
||||
return (
|
||||
<div className='PlanetContainer'>
|
||||
Redirecting...
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='PlanetContainer'>
|
||||
<PlanetNavigator currentPlanet={currentPlanet}/>
|
||||
<PlanetMain currentPlanet={currentPlanet}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
55
browser/main/Containers/RegisterContainer.jsx
Normal file
55
browser/main/Containers/RegisterContainer.jsx
Normal file
@@ -0,0 +1,55 @@
|
||||
var React = require('react/addons')
|
||||
var ReactRouter = require('react-router')
|
||||
var Link = ReactRouter.Link
|
||||
var Auth = require('../Services/Auth')
|
||||
|
||||
module.exports = React.createClass({
|
||||
mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
|
||||
getInitialState: function () {
|
||||
return {
|
||||
email: '',
|
||||
password: '',
|
||||
name: '',
|
||||
profileName: ''
|
||||
}
|
||||
},
|
||||
handleSubmit: function (e) {
|
||||
Auth.register()
|
||||
// TODO: request user data
|
||||
.then(function (user) {
|
||||
this.transitionTo('dashboard', {planetName: user.name})
|
||||
}.bind(this))
|
||||
|
||||
e.preventDefault()
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div className='RegisterContainer'>
|
||||
<h1 className='text-center'>CodeXen</h1>
|
||||
<h2 className='text-center'><small><Link to='login'>Log In</Link></small> | Register</h2>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<div className='form-group'>
|
||||
<label>E-mail</label>
|
||||
<input valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<label>Password</label>
|
||||
<input valueLink={this.linkState('password')} type='password' placeholder='Password'/>
|
||||
</div>
|
||||
<hr></hr>
|
||||
<div className='form-group'>
|
||||
<label>User name</label>
|
||||
<input valueLink={this.linkState('name')} type='text' placeholder='name'/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<label>Profile name</label>
|
||||
<input valueLink={this.linkState('profileName')} type='text' placeholder='Profile name'/>
|
||||
</div>
|
||||
<div className='form-group'>
|
||||
<button className='btn-primary btn-block' type='submit'><i className='fa fa-sign-in'></i> Register</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
110
browser/main/Containers/SnippetContainer.jsx
Normal file
110
browser/main/Containers/SnippetContainer.jsx
Normal file
@@ -0,0 +1,110 @@
|
||||
var React = require('react/addons')
|
||||
var Snippet = require('../Services/Snippet')
|
||||
|
||||
var SnippetList = React.createClass({
|
||||
propTypes: {
|
||||
snippets: React.PropTypes.array,
|
||||
selectSnippet: React.PropTypes.func
|
||||
},
|
||||
itemClickHandlerFactory: function (snippet) {
|
||||
return function () {
|
||||
console.log(this.props.selectSnippet)
|
||||
this.props.selectSnippet(snippet)
|
||||
}.bind(this)
|
||||
},
|
||||
render: function () {
|
||||
var snippets = this.props.snippets.map(function (snippet) {
|
||||
var tags = snippet.Tags.map(function (tag) {
|
||||
return (
|
||||
<a key={tag.id} href>#{tag.name}</a>
|
||||
)
|
||||
})
|
||||
return (
|
||||
<li key={snippet.id} onClick={this.itemClickHandlerFactory(snippet)}>
|
||||
<div className='callSign'><i className='fa fa-code'></i> {snippet.callSign}</div>
|
||||
<div className='description'>{snippet.description}</div>
|
||||
<div className='updatedAt'>{snippet.updatedAt}</div>
|
||||
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
|
||||
</li>
|
||||
)
|
||||
}.bind(this))
|
||||
|
||||
return (
|
||||
<div className='SnippetList'>
|
||||
<div className='search form-group'><input type='text' placeholder='Search...'/></div>
|
||||
<ul>
|
||||
{snippets}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
var SnippetViewer = React.createClass({
|
||||
propTypes: {
|
||||
snippet: React.PropTypes.object
|
||||
},
|
||||
render: function () {
|
||||
var snippet = this.props.snippet
|
||||
var content
|
||||
if (snippet != null) {
|
||||
var tags = snippet.Tags.map(function (tag) {
|
||||
return (
|
||||
<a key={tag.id} href>#{tag.name}</a>
|
||||
)
|
||||
})
|
||||
content = (
|
||||
<div className='SnippetViewer'>
|
||||
<div className='viewer-header'><i className='fa fa-code'></i> {snippet.callSign} <small className='updatedAt'>{snippet.updatedAt}</small></div>
|
||||
<div className='viewer-body'>
|
||||
<div className='viewer-detail'>
|
||||
<div className='description'>{snippet.description}</div>
|
||||
<div className='tags'><i className='fa fa-tags'/>{tags}</div>
|
||||
</div>
|
||||
<div>{snippet.content}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
content = (
|
||||
<div className='SnippetViewer'>
|
||||
Not selected
|
||||
</div>
|
||||
)
|
||||
}
|
||||
return content
|
||||
}
|
||||
})
|
||||
|
||||
var SnippetContainer = React.createClass({
|
||||
propTypes: {
|
||||
params: React.PropTypes.shape({
|
||||
planetName: React.PropTypes.string
|
||||
})
|
||||
},
|
||||
getInitialState: function () {
|
||||
return {
|
||||
snippets: [],
|
||||
curentSnippet: {}
|
||||
}
|
||||
},
|
||||
componentDidMount: function () {
|
||||
Snippet.getByPlanet(this.props.params.planetName)
|
||||
.then(function (snippets) {
|
||||
this.setState({snippets: snippets, currentSnippet: snippets.length > 0 ? snippets[0] : null})
|
||||
}.bind(this))
|
||||
},
|
||||
selectSnippet: function (snippet) {
|
||||
this.setState({currentSnippet: snippet})
|
||||
},
|
||||
render: function () {
|
||||
return (
|
||||
<div className='SnippetContainer'>
|
||||
<SnippetList selectSnippet={this.selectSnippet} snippets={this.state.snippets}/>
|
||||
<SnippetViewer snippet={this.state.currentSnippet}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
module.exports = SnippetContainer
|
||||
Reference in New Issue
Block a user