mirror of
https://github.com/BoostIo/Boostnote
synced 2026-02-19 18:58:51 +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
|
||||
40
browser/main/Services/Auth.js
Normal file
40
browser/main/Services/Auth.js
Normal file
@@ -0,0 +1,40 @@
|
||||
/* global localStorage */
|
||||
var Auth = {}
|
||||
|
||||
var currentUser = null
|
||||
Auth.attempt = function (params) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var token = 'some token'
|
||||
var user = {
|
||||
name: 'testcat',
|
||||
email: 'testcat@example.com',
|
||||
profileName: 'Test Cat'
|
||||
}
|
||||
localStorage.setItem('token', token)
|
||||
|
||||
resolve(user)
|
||||
})
|
||||
}
|
||||
|
||||
Auth.register = function (params) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var token = 'some token'
|
||||
var user = {
|
||||
name: 'testcat',
|
||||
email: 'testcat@example.com',
|
||||
profileName: 'Test Cat'
|
||||
}
|
||||
localStorage.setItem('token', token)
|
||||
|
||||
resolve(user)
|
||||
})
|
||||
}
|
||||
|
||||
Auth.getUser = function () {
|
||||
return new Promise(function (resolve, reject) {
|
||||
|
||||
resolve(currentUser)
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = Auth
|
||||
38
browser/main/Services/Snippet.js
Normal file
38
browser/main/Services/Snippet.js
Normal file
@@ -0,0 +1,38 @@
|
||||
var Snippet = {}
|
||||
|
||||
var snippets = {
|
||||
testcat: [
|
||||
{
|
||||
id: 1,
|
||||
callSign: 'alert',
|
||||
description: 'yolo',
|
||||
content: '<div></div>',
|
||||
mode: 'html',
|
||||
createdAt: '2015-06-26T15:10:59.000Z',
|
||||
updatedAt: '2015-06-26T15:10:59.000Z',
|
||||
UserId: 1,
|
||||
Tags: [{'id': 18, 'name': 'bootstrap', 'color': null}, {'id': 19, 'name': 'alert', 'color': null}]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
callSign: 'log',
|
||||
description: 'javascript log',
|
||||
content: 'console.log(\'yolo\')',
|
||||
mode: 'js',
|
||||
createdAt: '2015-06-26T15:10:59.000Z',
|
||||
updatedAt: '2015-06-26T15:10:59.000Z',
|
||||
UserId: 1,
|
||||
Tags: [{'id': 20, 'name': 'log', 'color': null}, {'id': 1, 'name': 'js', 'color': null}]
|
||||
}
|
||||
],
|
||||
group1: [],
|
||||
group2: []
|
||||
}
|
||||
|
||||
Snippet.getByPlanet = function (planetName) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
resolve(snippets[planetName])
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = Snippet
|
||||
16
browser/main/index.electron.html
Normal file
16
browser/main/index.electron.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CodeXen</title>
|
||||
|
||||
<link rel="stylesheet" href="../vendor/fontawesome/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
<script>
|
||||
require('node-jsx').install({ harmony: true, extension: '.jsx' });
|
||||
require('./index.jsx')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
16
browser/main/index.html
Normal file
16
browser/main/index.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CodeXen</title>
|
||||
|
||||
<link rel="stylesheet" href="../vendor/fontawesome/css/font-awesome.min.css" media="screen" title="no title" charset="utf-8">
|
||||
<script src="../vendor/react/react-with-addons.js"></script>
|
||||
<script src="../vendor/react-router/build/umd/ReactRouter.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
<script src="http://localhost:8090/webpack-dev-server.js"></script>
|
||||
<script type="text/javascript" src="http://localhost:8090/assets/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
34
browser/main/index.jsx
Normal file
34
browser/main/index.jsx
Normal file
@@ -0,0 +1,34 @@
|
||||
require('../styles/main/index.styl')
|
||||
|
||||
var React = require('react/addons')
|
||||
|
||||
var ReactRouter = require('react-router')
|
||||
var Route = ReactRouter.Route
|
||||
var DefaultRoute = ReactRouter.DefaultRoute
|
||||
|
||||
var MainContainer = require('./Containers/MainContainer.jsx')
|
||||
|
||||
var LoginContainer = require('./Containers/LoginContainer.jsx')
|
||||
var RegisterContainer = require('./Containers/RegisterContainer.jsx')
|
||||
|
||||
var PlanetContainer = require('./Containers/PlanetContainer.jsx')
|
||||
|
||||
var Dashboard = require('./Containers/DashboardContainer.jsx')
|
||||
var SnippetContainer = require('./Containers/SnippetContainer.jsx')
|
||||
var BlueprintContainer = require('./Containers/BlueprintContainer.jsx')
|
||||
|
||||
var routes = (
|
||||
<Route path='/' handler={MainContainer}>
|
||||
<Route name='planet' path='planet/:planetName' handler={PlanetContainer}>
|
||||
<DefaultRoute name='dashboard' handler={Dashboard}/>
|
||||
<Route name='snippets' handler={SnippetContainer}/>
|
||||
<Route name='blueprint' handler={BlueprintContainer}/>
|
||||
</Route>
|
||||
<Route name='login' path='login' handler={LoginContainer}/>
|
||||
<Route name='register' path='register' handler={RegisterContainer}/>
|
||||
</Route>
|
||||
)
|
||||
|
||||
ReactRouter.run(routes, ReactRouter.HashLocation, function (Root) {
|
||||
React.render(<Root/>, document.getElementById('content'))
|
||||
})
|
||||
Reference in New Issue
Block a user