Skip to content
This repository has been archived by the owner on Sep 4, 2018. It is now read-only.

Commit

Permalink
starting the engines
Browse files Browse the repository at this point in the history
  • Loading branch information
@peterbe
peterbe committed Jul 19, 2016
0 parents commit efb85a5
Show file tree
Hide file tree
Showing 35 changed files with 1,787 additions and 0 deletions.
4 changes: 4 additions & 0 deletions .babelrc
@@ -0,0 +1,4 @@
{
"presets": ["es2015", "stage-0", "react"],
"plugins": ["react-hot-loader/babel"]
}
21 changes: 21 additions & 0 deletions .eslintrc
@@ -0,0 +1,21 @@
{
"ecmaFeatures": {
"jsx": true,
"modules": true
},
"env": {
"browser": true,
"node": true
},
"parser": "babel-eslint",
"rules": {
"quotes": [2, "single"],
"strict": [2, "never"],
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2
},
"plugins": [
"react"
]
}
4 changes: 4 additions & 0 deletions .gitignore
@@ -0,0 +1,4 @@
node_modules
npm-debug.log
.DS_Store
dist
6 changes: 6 additions & 0 deletions .jshintrc
@@ -0,0 +1,6 @@
{
"node": true,
"browser": true,
"esnext": true,
"newcap": false
}
354 changes: 354 additions & 0 deletions LICENSE

Large diffs are not rendered by default.

12 changes: 12 additions & 0 deletions README.md
@@ -0,0 +1,12 @@
react-buggy
===========

This project needs a name.

### Usage

```
npm install
npm start
open http://localhost:3000
```
26 changes: 26 additions & 0 deletions index.html
@@ -0,0 +1,26 @@
<!doctype html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buggy</title>

<!-- build:css _cache/combined-$hash.min.css -->
<link rel="stylesheet" href="static/css/vendor/dialog-polyfill.css">
<link rel="stylesheet" href="static/css/vendor/pure-min.css">
<link rel="stylesheet" href="static/css/vendor/nv.d3.min.css">
<link rel="stylesheet" href="static/css/email.css">
<link rel="stylesheet" href="static/css/extra.css">
<!-- endbuild -->

</head>
<body>
<div id='root'>
</div>
<script src="/static/bundle.js"></script>

<!-- XXX Move to meta tags or data attributes -->
<script>var POP_SOUNDS = ['static/sounds/pop.mp3', 'static/sounds/pop.ogg'];</script>
</body>
</html>
42 changes: 42 additions & 0 deletions package.json
@@ -0,0 +1,42 @@
{
"name": "react-buggy",
"version": "1.0.0",
"description": "Experimental new version of buggy.peterbe.com",
"scripts": {
"start": "node server.js",
"lint": "eslint src"
},
"repository": {
"type": "git",
"url": "https://github.com/peterbe/react-buggy.git"
},
"keywords": [
"react",
"reactjs",
"github"
],
"author": "Peter Bengtsson <mail@peterbe.com> (@peterbe)",
"license": "MIT",
"bugs": {
"url": "https://github.com/peterbe/react-buggy/issues"
},
"homepage": "https://github.com/peterbe/react-buggy",
"devDependencies": {
"babel-core": "^6.0.20",
"babel-eslint": "^4.1.3",
"babel-loader": "^6.0.1",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.0.15",
"eslint": "^1.10.3",
"eslint-plugin-react": "^3.6.2",
"react-hot-loader": "^3.0.0-beta.1",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.1"
},
"dependencies": {
"react": "^15.0.1",
"react-dom": "^15.0.1",
"whatwg-fetch": "1.0.0"
}
}
15 changes: 15 additions & 0 deletions server.js
@@ -0,0 +1,15 @@
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
if (err) {
return console.log(err);
}

console.log('Listening at http://localhost:3000/');
});
52 changes: 52 additions & 0 deletions src/App.js
@@ -0,0 +1,52 @@
import React, { Component } from 'react';
import Layout from './Layout';
import Dialog from './Dialog';
import Nav from './Nav';
import List from './List';
import Main from './Main';

// If you use React Router, make this component
// render <Router> with your routes. Currently,
// only synchronous routes are hot reloaded, and
// you will see a warning from <Router> on every reload.
// You can ignore this warning. For details, see:
// https://github.com/reactjs/react-router/issues/2182

export default class App extends Component {
constructor(props) {
super(props);
this.state = {
countStatuses: {},
selectedStatuses: [],
projects: [{org: 'mozilla', repo:'airmozilla', count:123}],
}
this.selectStatus = this.selectStatus.bind(this)
}

selectStatus(status) {
console.log('STATUS', status)
}

addProject(project) {
let projects = this.state.projects
projects.push(project)
this.setState({projects: projects})
}

render() {
return (
<Layout>
{/*<Dialog />*/}
<Nav
countStatuses={this.state.countStatuses}
selectedStatuses={this.state.selectedStatuses}
selectStatus={this.selectStatus}
/>
<List />
<Main
projects={this.state.projects}
addProject={(p) => this.addProject(p)}/>
</Layout>
);
}
}
29 changes: 29 additions & 0 deletions src/Counter.js
@@ -0,0 +1,29 @@
import React, { Component } from 'react';

export default class Counter extends Component {
constructor(props) {
super(props);
this.state = { counter: 0 };
}

componentDidMount() {
this.interval = setInterval(this.tick.bind(this), 1000);
}

tick() {
this.setState({
counter: this.state.counter + 1
});
}

componentWillUnmount() {
clearInterval(this.interval);
}

render() {
return (
<h2>Counter: {this.state.counter}</h2>
);
}
}

30 changes: 30 additions & 0 deletions src/Dialog.js
@@ -0,0 +1,30 @@
import React, { Component } from 'react';

export default class Dialog extends Component {
constructor(props) {
super(props);
// this.state = { counter: 0 };
}

// componentDidMount() {
// this.interval = setInterval(this.tick.bind(this), 1000);
// }

// tick() {
// this.setState({
// counter: this.state.counter + 1
// });
// }
//
// componentWillUnmount() {
// clearInterval(this.interval);
// }

render() {
return (
<dialog>
<span className="blinking">Loading</span>
</dialog>
);
}
}
10 changes: 10 additions & 0 deletions src/Layout.js
@@ -0,0 +1,10 @@
import React from 'react';

// XXX we probably don't need this
export default function Layout({ children }) {
return (
<div className="pure-g-r content" id="layout">
{children}
</div>
)
}
127 changes: 127 additions & 0 deletions src/List.js
@@ -0,0 +1,127 @@
import React, { Component } from 'react';

export default class List extends Component {
constructor(props) {
super(props);
// this.state = { counter: 0 };
}

// componentDidMount() {
// this.interval = setInterval(this.tick.bind(this), 1000);
// }

// tick() {
// this.setState({
// counter: this.state.counter + 1
// });
// }
//
// componentWillUnmount() {
// clearInterval(this.interval);
// }

render() {
return (
<div className="pure-u-1" id="list">
<div id="list-options">
<form className="pure-form" id="searchform">
<input
type="text"
id="search_q"
className="pure-input-rounded"
placeholder="Search..." />
<button
className="pure-button secondary-button"
type="button"
>Clear</button>
<button
className="pure-button secondary-button"
type="button" title="Filter by Project"
>
<span>Filter</span>
<span>Close</span>
<span>(X)</span>
</button>
</form>
</div>{/* /list-options */}
<div id="product-filters">
<ul>
<li className="selected">
<a href="#">ALL (X)</a>
</li>
<li>
<a href="#">socorro (X)</a>
<a href="#">airmozilla (X)</a>
</li>
</ul>
</div>{/* /product-filters */}
<div id="list-items">
<div className="email-item pure-g">
<div className="pure-u">
{/* Only do this if we have an email address */}
<img
className="email-avatar"
alt="avatar"
title="Person who created the Issue/Pull Request"/>
<br/>
<br/>
<span
style={{marginLeft: 10}}
className="badge badge-small"
title="Number of comments">x</span>
</div>
<div className="pure-u-5-6">
<h5 className="email-name">ORG / REPO</h5>
<h4 className="email-subject">
<img
className="padlock"
src="static/images/padlock.png"
alt="Padlock"
title="Only visible to people who are cool"/>
<a
href="{{ makeBugzillaLink(bug.id) }}"
target="_blank">ID</a>
<span>SUMMARY</span>
</h4>

<p className="email-desc">
<img
src="static/images/avatar.png"
className="email-avatar"
alt="Avatar"
title="Last person to comment"
height="32" width="32"/>
<span>extract...</span>
<br/>
<span className="badge badge-small badge-*status*">*status*</span>
</p>
</div>
</div>{/* /email-item */}

<div className="email-item">
<p>Filtered too much?</p>
<p>Matching only: <code>search</code>.
<a href="#">Reset</a>
</p>
<p>
You've filtered by: <br/> <b>*projects</b>.
<a href="#">Reset</a>
</p>
<p>
Only showing: <br/> <b>*status*</b>.
<a href="#">Reset</a>
</p>
</div>{/* /email-item */}

<div className="email-item">
<p>
Limited to the XXX most recently changed.<br/>
<a href="#">Load more</a>
</p>
</div>{/* /email-item */}

</div>
</div>
);
}
}

0 comments on commit efb85a5

Please sign in to comment.