Skip to content

Commit 361e9c6

Browse files
Rokt33rRokt33r
committed
switch Angular -> React(half done)
1 parent 1a832c1 commit 361e9c6

27 files changed

Lines changed: 1011 additions & 42 deletions

‎.bowerrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"directory": "browser/vendor/"
3+
}

‎bower.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"name": "codexen-app",
3+
"dependencies": {
4+
"react": "~0.13.3",
5+
"fontawesome": "~4.3.0",
6+
"react-router": "~0.13.3"
7+
}
8+
}

‎browser/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title></title>
6+
</head>
7+
<body>
8+
<a href="/main">Go Main</a>
9+
<a href="/main">Go Popup</a>
10+
</body>
11+
</html>

‎browser/main/Containers/BlueprintContainer.jsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
var React = require('react/addons')
2+
3+
module.exports = React.createClass({
4+
render: function () {
5+
return (
6+
<div>
7+
Blueprint Container
8+
</div>
9+
)
10+
}
11+
})

‎browser/main/Containers/DashboardContainer.jsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
var React = require('react/addons')
2+
3+
module.exports = React.createClass({
4+
render: function () {
5+
return (
6+
<div className='DashboardContainer'>
7+
<h1 className='jumbotron'>Codexen App <small>v0.2.0</small></h1>
8+
9+
<h2>About CodeXen</h2>
10+
11+
<p>
12+
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.
13+
</p>
14+
15+
<ol>
16+
<li>
17+
<h3>Post your code</h3>
18+
<p>
19+
Post your commonly used code with description,category,and tags.
20+
</p>
21+
</li>
22+
<li>
23+
<h3>Save on cloud</h3>
24+
<p>
25+
From short snippet to long complex code,CodeXen saves any code simply.
26+
</p>
27+
</li>
28+
<li>
29+
<h3>
30+
Use code like a magic
31+
</h3>
32+
<p>
33+
CodeXen call code you posted whereever you are.Type [shift+control+tab] simultaneously.
34+
</p>
35+
</li>
36+
<li>
37+
<h3>
38+
Code Elegantly
39+
</h3>
40+
<p>
41+
That's all!
42+
You must be loved with CodeXen. Enjoy coding;)
43+
</p>
44+
</li>
45+
</ol>
46+
<p>
47+
© 2015 MAISIN&CO.,Inc.
48+
</p>
49+
</div>
50+
)
51+
}
52+
})

‎browser/main/Containers/LoginContainer.jsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
var React = require('react/addons')
2+
var ReactRouter = require('react-router')
3+
var Link = ReactRouter.Link
4+
var Auth = require('../Services/Auth')
5+
6+
module.exports = React.createClass({
7+
mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
8+
getInitialState: function () {
9+
return {
10+
email: '',
11+
password: ''
12+
}
13+
},
14+
handleSubmit: function (e) {
15+
console.log(this.state)
16+
Auth.attempt()
17+
// TODO: request user data
18+
.then(function (user) {
19+
this.transitionTo('dashboard', {planetName: user.name})
20+
}.bind(this))
21+
e.preventDefault()
22+
},
23+
render: function () {
24+
return (
25+
<div className='LoginContainer'>
26+
<h1 className='text-center'>CodeXen</h1>
27+
<h2 className='text-center'>Log In | <small><Link to='register'>Register</Link></small></h2>
28+
<form onSubmit={this.handleSubmit}>
29+
<div className='form-group'>
30+
<label>E-mail</label>
31+
<input valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
32+
</div>
33+
<div className='form-group'>
34+
<label>Password</label>
35+
<input valueLink={this.linkState('password')} onChange={this.handleChange} type='password' placeholder='Password'/>
36+
</div>
37+
<div className='form-group'>
38+
<button className='btn-primary btn-block' type='submit'><i className='fa fa-sign-in'></i> Login</button>
39+
</div>
40+
</form>
41+
</div>
42+
)
43+
}
44+
})

‎browser/main/Containers/MainContainer.jsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var React = require('react/addons')
2+
var ReactRouter = require('react-router')
3+
var RouteHandler = ReactRouter.RouteHandler
4+
5+
module.exports = React.createClass({
6+
mixins: [ReactRouter.Navigation, ReactRouter.State],
7+
render: function () {
8+
// Redirect Login state
9+
if (this.getPath() === '/') {
10+
this.transitionTo('/login')
11+
}
12+
return (
13+
<div className='Main'>
14+
<RouteHandler/>
15+
</div>
16+
)
17+
}
18+
})

‎browser/main/Containers/PlanetContainer.jsx‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
var React = require('react/addons')
2+
var RouteHandler = require('react-router').RouteHandler
3+
var ReactRouter = require('react-router')
4+
var Link = ReactRouter.Link
5+
6+
var userPlanets = [
7+
{
8+
id: 1,
9+
name: 'testcat',
10+
profileName: 'TestCat'
11+
},
12+
{
13+
id: 2,
14+
name: 'group1',
15+
profileName: 'Some Group#1'
16+
},
17+
{
18+
id: 3,
19+
name: 'group2',
20+
profileName: 'Some Group#1'
21+
}
22+
]
23+
24+
var PlanetNavigator = React.createClass({
25+
propTypes: {
26+
currentPlanet: React.PropTypes.object
27+
},
28+
render: function () {
29+
var planets = userPlanets.map(function (planet) {
30+
return (
31+
<li key={planet.id} className={this.props.currentPlanet.name === planet.name ? 'active' : ''}><a>{planet.profileName[0]}</a></li>
32+
)
33+
}.bind(this))
34+
35+
return (
36+
<div className='PlanetNavigator'>
37+
<ul>
38+
{planets}
39+
</ul>
40+
</div>
41+
)
42+
}
43+
})
44+
45+
var PlanetMain = React.createClass({
46+
propTypes: {
47+
currentPlanet: React.PropTypes.object
48+
},
49+
render: function () {
50+
return (
51+
<div className='PlanetMain'>
52+
<SideNavigator currentPlanet={this.props.currentPlanet}/>
53+
<Screen currentPlanet={this.props.currentPlanet}/>
54+
</div>
55+
)
56+
}
57+
})
58+
59+
var SideNavigator = React.createClass({
60+
propTypes: {
61+
currentPlanet: React.PropTypes.shape({
62+
name: React.PropTypes.string
63+
})
64+
},
65+
render: function () {
66+
var currentPlanetName = this.props.currentPlanet.name
67+
68+
return (
69+
<div className='SideNavigator'>
70+
<div className='nav-header'>
71+
<p className='planet-name'>{currentPlanetName}</p>
72+
<button className='menu-btn'>
73+
<i className='fa fa-chevron-down'></i>
74+
</button>
75+
</div>
76+
<button className='btn-primary btn-block'>
77+
<i className='fa fa-rocket fa-fw'/> Launch
78+
</button>
79+
<nav>
80+
<Link to='dashboard' params={{planetName: currentPlanetName}}>
81+
<i className='fa fa-home fa-fw'/> Home
82+
</Link>
83+
<Link to='snippets' params={{planetName: currentPlanetName}}>
84+
<i className='fa fa-code fa-fw'/> Snippets
85+
</Link>
86+
<Link to='blueprint' params={{planetName: currentPlanetName}}>
87+
<i className='fa fa-wrench fa-fw'/> Blueprints
88+
</Link>
89+
</nav>
90+
</div>
91+
)
92+
}
93+
})
94+
95+
var Screen = React.createClass({
96+
render: function () {
97+
return (
98+
<div className='Screen'>
99+
<RouteHandler/>
100+
</div>
101+
)
102+
}
103+
})
104+
105+
module.exports = React.createClass({
106+
mixins: [ReactRouter.Navigation],
107+
propTypes: {
108+
params: React.PropTypes.object,
109+
planetName: React.PropTypes.string
110+
},
111+
render: function () {
112+
var currentPlanetName = this.props.params.planetName
113+
var currentPlanet = null
114+
userPlanets.some(function (planet) {
115+
if (planet.name === currentPlanetName) {
116+
currentPlanet = planet
117+
return true
118+
}
119+
return false
120+
})
121+
if (currentPlanet == null) {
122+
var redirectTo = userPlanets[0].name
123+
this.transitionTo('planet', {planetName: redirectTo})
124+
return (
125+
<div className='PlanetContainer'>
126+
Redirecting...
127+
</div>
128+
)
129+
}
130+
131+
return (
132+
<div className='PlanetContainer'>
133+
<PlanetNavigator currentPlanet={currentPlanet}/>
134+
<PlanetMain currentPlanet={currentPlanet}/>
135+
</div>
136+
)
137+
}
138+
})

‎browser/main/Containers/RegisterContainer.jsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
var React = require('react/addons')
2+
var ReactRouter = require('react-router')
3+
var Link = ReactRouter.Link
4+
var Auth = require('../Services/Auth')
5+
6+
module.exports = React.createClass({
7+
mixins: [React.addons.LinkedStateMixin, ReactRouter.Navigation],
8+
getInitialState: function () {
9+
return {
10+
email: '',
11+
password: '',
12+
name: '',
13+
profileName: ''
14+
}
15+
},
16+
handleSubmit: function (e) {
17+
Auth.register()
18+
// TODO: request user data
19+
.then(function (user) {
20+
this.transitionTo('dashboard', {planetName: user.name})
21+
}.bind(this))
22+
23+
e.preventDefault()
24+
},
25+
render: function () {
26+
return (
27+
<div className='RegisterContainer'>
28+
<h1 className='text-center'>CodeXen</h1>
29+
<h2 className='text-center'><small><Link to='login'>Log In</Link></small> | Register</h2>
30+
<form onSubmit={this.handleSubmit}>
31+
<div className='form-group'>
32+
<label>E-mail</label>
33+
<input valueLink={this.linkState('email')} type='text' placeholder='E-mail'/>
34+
</div>
35+
<div className='form-group'>
36+
<label>Password</label>
37+
<input valueLink={this.linkState('password')} type='password' placeholder='Password'/>
38+
</div>
39+
<hr></hr>
40+
<div className='form-group'>
41+
<label>User name</label>
42+
<input valueLink={this.linkState('name')} type='text' placeholder='name'/>
43+
</div>
44+
<div className='form-group'>
45+
<label>Profile name</label>
46+
<input valueLink={this.linkState('profileName')} type='text' placeholder='Profile name'/>
47+
</div>
48+
<div className='form-group'>
49+
<button className='btn-primary btn-block' type='submit'><i className='fa fa-sign-in'></i> Register</button>
50+
</div>
51+
</form>
52+
</div>
53+
)
54+
}
55+
})

0 commit comments

Comments
 (0)