First

alfonsoluis · May 11, 2016 · 23c7b47 · 23c7b47
1 parent 7012c51
commit 23c7b47
Show file tree

Hide file tree

Showing 25 changed files with 812 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,17 @@
+{
+  "presets": ["react", "es2015", "stage-0"],
+  "env": {
+    "development": {
+      "plugins": [
+        ["react-transform", {
+          "transforms": [{
+            "transform": "react-transform-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+          }]
+        }]
+      ]
+    }
+  },
+  "plugins": ["transform-runtime"]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+build/
+typings/
+node_modules/
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,21 @@
+notifications:
+  email:
+    on_success: never
+    on_failure: change
+
+language: node_js
+node_js:
+  - "node"
+
+env:
+  - CXX=g++-4.8
+
+addons:
+  apt:
+    sources:
+      - ubuntu-toolchain-r-test
+    packages:
+      - g++-4.8
+
+before_script:
+  - export DISPLAY=:99.0; sh -e /etc/init.d/xvfb start
diff --git a/README.md b/README.md
@@ -0,0 +1,24 @@
+# Desktop tech proof-of-concept
+
+Just playin around with some computering.
+
+```
+npm install
+```
+
+If you want hot loading:
+
+```
+# Start the dev server
+npm start
+
+# And in another Terminal, launch the app
+npm run dev
+```
+
+Or if you don't care:
+
+```
+npm run build
+npm run dev
+```
diff --git a/appveyor.yml b/appveyor.yml
@@ -0,0 +1,24 @@
+environment:
+  nodejs_version: "5"
+
+branches:
+  only:
+    - master
+
+skip_tags: true
+
+version: "{build}"
+
+install:
+  - ps: Install-Product node $env:nodejs_version
+  - npm install
+
+test_script:
+  - node --version
+  - npm --version
+  - npm test
+
+build: off
+
+cache:
+  - node_modules
diff --git a/dev_server.js b/dev_server.js
@@ -0,0 +1,22 @@
+var express = require('express')
+var webpack = require('webpack')
+var config = require('./webpack.config')
+
+var app = express()
+var compiler = webpack(config)
+var port = process.env.PORT || 3000
+
+app.use(require('webpack-dev-middleware')(compiler, {
+  publicPath: config.output.publicPath
+}))
+
+app.use(require('webpack-hot-middleware')(compiler))
+
+app.listen(port, 'localhost', err => {
+  if (err) {
+    console.log(err)
+    return
+  }
+
+  console.log(`Listening at http://localhost:${port}`)
+})
diff --git a/lib/app.tsx b/lib/app.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react'
+import ThingList from './thing-list'
+import Info from './info'
+
+const Octokat = require('octokat')
+
+type AppState = {
+  selectedRow: number
+}
+
+type AppProps = {
+  style?: Object
+}
+
+const AppStyle = {
+  display: 'flex',
+  flexDirection: 'row',
+  flexGrow: 1
+}
+
+export default class App extends React.Component<AppProps, AppState> {
+  private octo: any
+
+  public constructor(props: AppProps) {
+    super(props)
+
+    this.octo = new Octokat({
+      token: process.env.GITHUB_ACCESS_TOKEN
+    })
+
+    this.state = {selectedRow: -1}
+  }
+
+  public async componentDidMount() {
+    const zen = await this.octo.zen.read()
+    console.log('zen', zen)
+  }
+
+  public render() {
+    const completeStyle = Object.assign({}, this.props.style, AppStyle)
+    return (
+      <div style={completeStyle}>
+        <ThingList selectedRow={this.state.selectedRow} onSelectionChanged={row => this.handleSelectionChanged(row)}/>
+        <Info selectedRow={this.state.selectedRow}/>
+      </div>
+    )
+  }
+
+  private handleSelectionChanged(row: number) {
+    this.setState({selectedRow: row})
+  }
+}
diff --git a/lib/browser/app-window.ts b/lib/browser/app-window.ts
@@ -0,0 +1,35 @@
+import {BrowserWindow} from 'electron'
+
+import Stats from './stats'
+
+export default class AppWindow extends BrowserWindow {
+  private stats: Stats
+
+  public constructor(stats: Stats) {
+    super({width: 800, height: 600, show: false, titleBarStyle: 'hidden'})
+
+    this.stats = stats
+  }
+
+  public load() {
+    let startLoad: number = null
+    this.webContents.on('did-finish-load', () => {
+      if (process.env.NODE_ENV === 'development') {
+        this.webContents.openDevTools()
+      }
+
+      this.show()
+
+      const now = Date.now()
+      this.rendererLog(`Loading: ${now - startLoad}ms`)
+      this.rendererLog(`Launch: ${now - this.stats.launchTime}ms`)
+    })
+
+    startLoad = Date.now()
+    this.loadURL(`file://${__dirname}/../../static/index.html`)
+  }
+
+  private rendererLog(msg: string) {
+    this.webContents.send('log', msg)
+  }
+}
diff --git a/lib/browser/main.ts b/lib/browser/main.ts
@@ -0,0 +1,25 @@
+import {app} from 'electron'
+
+import AppWindow from './app-window'
+import Stats from './stats'
+
+const stats = new Stats()
+
+let mainWindow: AppWindow = null
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+app.on('ready', () => {
+  stats.readyTime = Date.now()
+
+  mainWindow = new AppWindow(stats)
+  mainWindow.on('closed', () => {
+    mainWindow = null
+  })
+
+  mainWindow.load()
+})
diff --git a/lib/browser/stats.ts b/lib/browser/stats.ts
@@ -0,0 +1,8 @@
+export default class Stats {
+  public launchTime: number
+  public readyTime: number
+
+  public constructor() {
+    this.launchTime = Date.now()
+  }
+}
diff --git a/lib/index.tsx b/lib/index.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+
+import {ipcRenderer} from 'electron'
+
+import App from './app'
+
+ipcRenderer.on('log', (event, msg) => {
+  console.log(msg)
+})
+
+const style = {
+  paddingTop: process.platform === 'darwin' ? 20 : 0
+}
+
+ReactDOM.render(<App style={style}/>, document.getElementById('content'))
diff --git a/lib/info.tsx b/lib/info.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react'
+
+const LOLZ = [
+  'http://www.reactiongifs.com/r/drkrm.gif',
+  'http://www.reactiongifs.com/r/wvy1.gif',
+  'http://www.reactiongifs.com/r/ihniwid.gif',
+  'http://www.reactiongifs.com/r/dTa.gif',
+  'http://www.reactiongifs.com/r/didit.gif'
+]
+
+type InfoProps = {
+  selectedRow: number
+}
+
+const ContainerStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1
+}
+
+const ImageStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  flex: 1
+}
+
+export default class Info extends React.Component<InfoProps, void> {
+  private renderNoSelection() {
+    return (
+      <div>No row selected!</div>
+    )
+  }
+
+  public render() {
+    const row = this.props.selectedRow
+    if (row < 0) {
+      return this.renderNoSelection()
+    }
+
+    const img = LOLZ[row % LOLZ.length]
+    return (
+      <div style={ContainerStyle}>
+        Row {row + 1} is selected!
+
+        <div style={ImageStyle}>
+          <img src={img}/>
+        </div>
+      </div>
+    )
+  }
+}