Add histories

minodisk · Feb 29, 2016 · 619b8d8 · 619b8d8
1 parent ec8f136
commit 619b8d8
Show file tree

Hide file tree

Showing 19 changed files with 255 additions and 162 deletions.
diff --git a/server/server.go b/server/server.go
@@ -38,30 +38,23 @@ func NewReqRes(req Message, data interface{}) Message {
 }
 
 func Start() (err error) {
-	// http.Handle("/", http.FileServer(http.Dir("server/static")))
-	// http.Handle("/socket", websocket.Handler(socket))
-	// err = http.ListenAndServe(":9000", nil)
-	// if err != nil {
-	// 	return
-	// }
-	// return
-
 	router := httprouter.New()
-	router.GET("/", func(w http.ResponseWriter, r *http.Request, p httprouter.Params) {
-		b, err := ioutil.ReadFile("server/static/dist/index.html")
-		if err != nil {
-			panic(err)
-		}
-		w.Write(b)
-	})
+	router.GET("/", handleIndex)
+	router.GET("/markdown/*filepath", handleIndex)
 	router.ServeFiles("/assets/*filepath", http.Dir("server/static/dist/assets"))
 	router.Handler("GET", "/socket", websocket.Handler(socket))
-	// router.GET("/", Index)
-	// router.GET("/hello/:name", Hello)
 	err = http.ListenAndServe(":9000", router)
 	return
 }
 
+func handleIndex(w http.ResponseWriter, r *http.Request, p httprouter.Params) {
+	b, err := ioutil.ReadFile("server/static/dist/index.html")
+	if err != nil {
+		panic(err)
+	}
+	w.Write(b)
+}
+
 func socket(ws *websocket.Conn) {
 	for {
 		var req Message

diff --git a/server/static/dist/index.html b/server/static/dist/index.html
@@ -7,6 +7,6 @@
 </head>
 <body>
   <div id="app"></div>
-  <script src="assets/bundle.js"></script>
+  <script src="/assets/bundle.js"></script>
 </body>
 </html>
diff --git a/server/static/package.json b/server/static/package.json
@@ -13,31 +13,12 @@
     "autoprefixer": "^6.3.3",
     "css-loader": "^0.23.1",
     "file-loader": "^0.8.5",
-    "less": "^2.6.0",
-    "less-loader": "^2.2.2",
-    "postcss-advanced-variables": "^1.2.2",
-    "postcss-atroot": "^0.1.3",
-    "postcss-color-function": "^2.0.0",
-    "postcss-custom-media": "^5.0.1",
-    "postcss-custom-properties": "^5.0.0",
-    "postcss-custom-selectors": "^3.0.0",
-    "postcss-extend": "^1.0.1",
     "postcss-loader": "^0.8.1",
-    "postcss-media-minmax": "^2.1.1",
-    "postcss-mixins": "^4.0.1",
     "postcss-modules-local-by-default": "^1.0.1",
-    "postcss-nested": "^1.0.0",
-    "postcss-nesting": "^2.3.0",
-    "postcss-partial-import": "^1.3.0",
-    "postcss-property-lookup": "^1.2.1",
-    "postcss-selector-matches": "^2.0.1",
-    "postcss-selector-not": "^2.0.0",
     "postcss-url": "^5.1.1",
     "precss": "^1.4.0",
     "resolve-url-loader": "^1.4.3",
-    "sass-loader": "^3.1.2",
     "style-loader": "^0.13.0",
-    "stylus-loader": "^1.5.1",
     "ts-loader": "^0.8.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.12.14",
@@ -46,7 +27,7 @@
   "dependencies": {
     "classnames": "^2.2.3",
     "es6-promise": "^3.1.2",
-    "history": "^1.17.0",
+    "eventemitter3": "^1.1.1",
     "lodash": "^4.5.1",
     "material-design-icons": "^2.2.0",
     "material-ui": "^0.14.4",

diff --git a/server/static/src/actions/files.ts b/server/static/src/actions/files.ts
@@ -24,7 +24,28 @@ export const fetchFiles = () => {
   }
 }
 
-export const startFile = createAction<File>(
-  types.START_FILE,
-  (file: File) => file
+const didWatchFile = createAction<string>(
+  types.DID_WATCH_FILE,
+  (file: string) => file
+);
+
+const didUnwatchFile = createAction<string>(
+  types.DID_UNWATCH_FILE,
+  (file: string) => file
 );
+
+export const watchFile = (file) => {
+  return (dispatch, getState) => {
+    console.log('watchFile:', file)
+    return socket.call('WatchFile', file)
+      .then(file => dispatch(didWatchFile))
+  }
+}
+
+export const unwatchFile = (file) => {
+  return (dispatch, getState) => {
+    console.log('unwatchFile:', file)
+    return socket.call('UnwatchFile', file)
+      .then(file => dispatch(didUnwatchFile))
+  }
+}
diff --git a/server/static/src/actions/socket.ts b/server/static/src/actions/socket.ts
@@ -1,12 +1,15 @@
 import { createAction } from 'redux-actions';
 import { WILL_OPEN_SOCKET, DID_OPEN_SOCKET } from '../constants/ActionTypes';
 import { Promise } from 'es6-promise';
+import * as EventEmitter from 'eventemitter3';
 
-export class Socket {
+export class Socket extends EventEmitter {
 
   s: WebSocket
 
-  constructor() {}
+  constructor() {
+    super()
+  }
 
   open() {
     return new Promise((resolve, reject) => {
@@ -21,23 +24,27 @@ export class Socket {
   }
 
   close() {
-    this.s.close()
     this.removeEventListeners()
+    this.s.close()
   }
 
   addEventListener() {
     this.removeEventListeners()
     this.s.addEventListener('error', this.onError, false);
     this.s.addEventListener('open', this.onOpen, false);
-    this.s.addEventListener('message', this.onMessage, false);
     this.s.addEventListener('close', this.onClose, false);
+    this.s.addEventListener('message', this.onMessage, false);
   }
 
   removeEventListeners() {
     this.s.removeEventListener('error', this.onError, false);
     this.s.removeEventListener('open', this.onOpen, false);
-    this.s.removeEventListener('message', this.onMessage, false);
     this.s.removeEventListener('close', this.onClose, false);
+    this.s.removeEventListener('message', this.onMessage, false);
+  }
+
+  send(req: Req) {
+    this.s.send(JSON.stringify(req))
   }
 
   call(method: string, data?: any) {
@@ -55,25 +62,30 @@ export class Socket {
         }
       }
       this.s.addEventListener('message', cb, false)
-      // console.log('send', req)
-      this.s.send(JSON.stringify(req));
+      this.send(req);
     })
   }
 
+  reopen() {
+    this.close()
+    this.open()
+  }
+
   onError = (e) => {
-    // console.log('socket error:', e)
+    this.reopen()
   }
 
   onOpen = (e) => {
     // console.log('socket opened:', e)
   }
 
-  onMessage = (e) => {
-    // console.log('socket messaged:', e)
+  onClose = (e) => {
+    this.reopen()
   }
 
-  onClose = (e) => {
-    // console.log('socket closed:', e)
+  onMessage = (e) => {
+    let res = JSON.parse(e.data) as Res
+    this.emit(res.method, res.data)
   }
 }
 

diff --git a/server/static/src/components/Element.tsx b/server/static/src/components/Element.tsx
@@ -27,9 +27,8 @@ export default class Element extends React.Component<Props, void> {
           style={{
             paddingLeft: (1.5 * indent) + 'em'
           }}
-          href="#"
           title={title}
-          to={linkTo}
+          to={'/markdown/' + linkTo}
         >
           {children}
         </Link>

diff --git a/server/static/src/components/Markdown.tsx b/server/static/src/components/Markdown.tsx
@@ -1,16 +1,35 @@
 import * as React from 'react';
 
+import {
+  watchFile,
+  unwatchFile
+} from '../actions/files'
+
 const styles = require('../styles/content.css')
 
 interface Props {
+  location: any;
 };
-interface State {
-};
+interface State {};
 
 export default class Markdown extends React.Component<Props, State> {
+  componentWillMount() {
+    watchFile(this.props.location.pathname)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    unwatchFile(this.props.location.pathname)
+    watchFile(nextProps.location.pathname)
+  }
+
+  componentWillUnmount() {
+    console.log('componentWillUnmount')
+    unwatchFile(this.props.location.pathname)
+  }
+
   render() {
     return (
-      <p>Markdown</p>
+      <p>{this.props.location.pathname}</p>
     );
   }
 }
diff --git a/server/static/src/components/NotFound.tsx b/server/static/src/components/NotFound.tsx
@@ -7,6 +7,7 @@ interface State {};
 
 export default class NotFound extends React.Component<Props, State> {
   render() {
+    console.log('NotFound.render')
     return (
       <p>NotFound</p>
     );

diff --git a/server/static/src/constants/ActionTypes.ts b/server/static/src/constants/ActionTypes.ts
@@ -10,4 +10,8 @@ export const DID_OPEN_SOCKET = 'DID_OPEN_SOCKET'
 
 export const REQUEST_FILES = 'REQUEST_FILES';
 export const RECIEVE_FILES = 'RECIEVE_FILES';
-export const START_FILE = 'START_FILE';
+
+export const WILL_WATCH_FILE = 'WILL_WATCH_FILE'
+export const DID_WATCH_FILE = 'DID_WATCH_FILE'
+export const DID_UNWATCH_FILE = 'DID_UNWATCH_FILE'
+export const CHANGE_FILE = 'CHANGE_FILE'
diff --git a/server/static/src/containers/App.tsx b/server/static/src/containers/App.tsx
@@ -23,11 +23,12 @@ interface AppProps {
   todos?: Todo[];
   file?: File;
   dispatch?: Dispatch;
+  children: any;
 }
 
 class App extends React.Component<AppProps, void> {
   render() {
-    const { todos, file, dispatch } = this.props;
+    const { todos, file, dispatch, children } = this.props;
     const actions = bindActionCreators(TodoActions, dispatch);
     return (
       <div>
@@ -38,10 +39,9 @@ class App extends React.Component<AppProps, void> {
           file={file}
           addTodo={actions.addTodo}
         />
-        <Content
-          todos={todos}
-          actions={actions}
-        />
+        <section className={styles.content}>
+          {children}
+        </section>
       </div>
     );
   }

diff --git a/server/static/src/index.tsx b/server/static/src/index.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
 import {render} from 'react-dom';
 import {createHistory} from 'history'
-import {Route} from 'react-router'
+import {Router, Route, IndexRoute, browserHistory} from 'react-router'
 import {
-  connect,
   Provider
 } from 'react-redux';
 import {
@@ -30,7 +29,8 @@ import NotFound from './components/NotFound'
 
 const routes = (
   <Route path="/" component={App}>
-    <Route path="**/*.md" component={Markdown}/>
+    <IndexRoute component={Markdown}/>
+    <Route path="/**/*.md" component={Markdown}/>
     <Route path="*" component={NotFound}/>
   </Route>
 )

diff --git a/server/static/src/reducers/file.ts b/server/static/src/reducers/file.ts
@@ -4,7 +4,10 @@ import { handleActions, Action } from 'redux-actions';
 import { File } from '../models/files';
 import {
   REQUEST_FILES,
-  RECIEVE_FILES
+  RECIEVE_FILES,
+  // WILL_WATCH_FILE,
+  // DID_WATCH_FILE,
+  // CHANGE_FILE,
 } from '../constants/ActionTypes';
 
 export default handleActions<File>({
@@ -13,5 +16,17 @@ export default handleActions<File>({
   },
   [RECIEVE_FILES]: (state: File, action: Action): File => {
     return action.payload;
-  }
+  },
+  // [WILL_WATCH_FILE]: (state: File, action: Action): File => {
+  //   console.log('WILL_WATCH_FILE')
+  //   return state
+  // },
+  // [DID_WATCH_FILE]: (state: File, action: Action): File => {
+  //   console.log('DID_WATCH_FILE')
+  //   return state
+  // },
+  // [CHANGE_FILE]: (state: File, action: Action): File => {
+  //   console.log('CHANGE_FILE')
+  //   return state
+  // },
 }, <File>{name: 'loading...', children: []});
diff --git a/server/static/src/styles/app.css b/server/static/src/styles/app.css
@@ -17,3 +17,11 @@ li {
   padding: 0;
   list-style-type: none;
 }
+
+.content {
+  margin-top: 48px;
+  margin-left: calc(72px + 256px);
+  margin-bottom: 48px;
+  margin-right: 72px;
+  min-height: 400px;
+}
diff --git a/server/static/src/styles/content.css b/server/static/src/styles/content.css
@@ -1,8 +0,0 @@
-.content {
-  padding-top: 64px;
-  padding-left: 256px;
-}
-
-.contentInner {
-  margin: 48px 72px;
-}

diff --git a/server/static/tsd.json b/server/static/tsd.json
@@ -49,6 +49,9 @@
     },
     "react-router/history.d.ts": {
       "commit": "ab2462147a313f69e7118625cfcce21c005fa4af"
+    },
+    "eventemitter3/eventemitter3.d.ts": {
+      "commit": "4d2d0653003a4d1df4d7c68054cce4f4ace58bdf"
     }
   }
 }