article CRUD with socket

browser/main/HomePage.js

@@ -10,6 +10,8 @@ import { findWhere, findIndex, pick } from 'lodash'
 import keygen from 'boost/keygen'
 import { NEW, refreshArticles } from './actions'
 import api from 'boost/api'
+import auth from 'boost/auth'
+import './socket'
 
 class HomePage extends React.Component {
   componentDidMount () {
@@ -17,18 +19,18 @@ class HomePage extends React.Component {
 
     dispatch(switchUser(this.props.params.userId))
 
-    let currentUser = JSON.parse(localStorage.getItem('currentUser'))
+    let currentUser = auth.user()
     let users = [currentUser].concat(currentUser.Teams)
-      users.forEach(user => {
-        api.fetchArticles(user.id)
-          .then(res => {
-            dispatch(refreshArticles(user.id, res.body))
-          })
-          .catch(err => {
-            if (err.status == null) throw err
-            console.error(err)
-          })
-      })
+    users.forEach(user => {
+      api.fetchArticles(user.id)
+        .then(res => {
+          dispatch(refreshArticles(user.id, res.body))
+        })
+        .catch(err => {
+          if (err.status == null) throw err
+          console.error(err)
+        })
+    })
   }
 
   componentWillReceiveProps (nextProps) {

browser/main/HomePage/ArticleList.js

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react'
 import ProfileImage from 'boost/components/ProfileImage'
 import ModeIcon from 'boost/components/ModeIcon'
 import moment from 'moment'
-import { IDLE_MODE, CREATE_MODE, EDIT_MODE, switchArticle, NEW } from '../actions'
+import { switchArticle, NEW } from '../actions'
 
 export default class ArticleList extends React.Component {
   handleArticleClick (key) {
@@ -13,16 +13,14 @@ export default class ArticleList extends React.Component {
   }
 
   render () {
-    let { status, articles, activeArticle } = this.props
+    let { articles, activeArticle } = this.props
 
     let articlesEl = articles.map(article => {
-      let tags = Array.isArray(article.Tags) && article.Tags.length > 0 ? article.Tags.map(tag => {
-        return (
-          <a key={tag.name}>{tag.name}</a>
-        )
-      }) : (
-        <span>Not tagged yet</span>
-      )
+      let tags = Array.isArray(article.Tags) && article.Tags.length > 0
+        ? article.Tags.map(tag => {
+          return (<a key={tag.name}>{tag.name}</a>)
+        })
+        : (<span>Not tagged yet</span>)
 
       return (
         <div key={'article-' + article.key}>
@@ -53,7 +51,6 @@ export default class ArticleList extends React.Component {
 }
 
 ArticleList.propTypes = {
-  status: PropTypes.shape(),
   articles: PropTypes.array,
   activeArticle: PropTypes.shape(),
   dispatch: PropTypes.func

browser/main/LoginPage.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import { Link } from 'react-router'
 import linkState from 'boost/linkState'
 import { login } from 'boost/api'
+import auth from 'boost/auth'
 
 export default class LoginPage extends React.Component {
   constructor (props) {
@@ -23,8 +24,8 @@ export default class LoginPage extends React.Component {
     }, function () {
       login(this.state.user)
         .then(res => {
-          localStorage.setItem('token', res.body.token)
-          localStorage.setItem('currentUser', JSON.stringify(res.body.user))
+          let { user, token } = res.body
+          auth.user(user, token)
 
           this.props.history.pushState('home')
         })
@@ -34,12 +35,11 @@ export default class LoginPage extends React.Component {
             return this.setState({
               error: {
                 name: 'CunnectionRefused',
-                message: 'Can\'t connect to API server.'
+                message: 'Can\'t cznnect to API server.'
               },
               isSending: false
             })
-          }
-          else if (err.status != null) {
+          } else if (err.status != null) {
             return this.setState({
               error: {
                 name: err.response.body.name,

browser/main/actions.js

@@ -30,21 +30,21 @@ export function updateUser (user) {
 export function refreshArticles (userId, articles) {
   return {
     type: ARTICLE_REFRESH,
-    data: {userId, articles}
+    data: { userId, articles }
   }
 }
 
 export function updateArticle (userId, article) {
   return {
     type: ARTICLE_UPDATE,
-    data: {userId, article}
+    data: { userId, article }
   }
 }
 
-export function destroyArticle (userId, articleId) {
+export function destroyArticle (userId, articleKey) {
   return {
     type: ARTICLE_DESTROY,
-    data: { userId, articleId }
+    data: { userId, articleKey }
   }
 }
 
@@ -70,9 +70,9 @@ export function switchMode (mode) {
   }
 }
 
-export function switchArticle (articleId) {
+export function switchArticle (articleKey) {
   return {
     type: SWITCH_ARTICLE,
-    data: articleId
+    data: articleKey
   }
 }

browser/main/index.js

@@ -1,18 +1,18 @@
 import React from 'react'
-import { createStore } from 'redux'
 import { Provider } from 'react-redux'
-import { updateUser, refreshArticles } from './actions'
-import reducer from './reducer'
-import { fetchCurrentUser, fetchArticles } from 'boost/api'
+import { updateUser } from './actions'
+import { fetchCurrentUser } from 'boost/api'
 import { Router, Route, IndexRoute } from 'react-router'
 import MainPage from './MainPage'
 import LoginPage from './LoginPage'
 import SignupPage from './SignupPage'
 import HomePage from './HomePage'
+import auth from 'boost/auth'
+import store, { devToolElement } from './store'
 require('../styles/main/index.styl')
 
 function onlyUser (state, replaceState) {
-  var currentUser = JSON.parse(localStorage.getItem('currentUser'))
+  let currentUser = auth.user()
   if (currentUser == null) return replaceState('login', '/login')
   if (state.location.pathname === '/') return replaceState('user', '/users/' + currentUser.id)
 }
@@ -26,24 +26,6 @@ let routes = (
   </Route>
 )
 
-// with Dev
-import { compose } from 'redux'
-// Redux DevTools store enhancers
-import { devTools, persistState } from 'redux-devtools'
-// React components for Redux DevTools
-import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react'
-
-let finalCreateStore = compose(devTools(), persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)))(createStore)
-let store = finalCreateStore(reducer)
-let devEl = (
-  <DebugPanel top right bottom>
-    <DevTools store={store} monitor={LogMonitor} visibleOnLoad={false}/>
-  </DebugPanel>
-)
-
-// On production
-// let store = createStore(reducer)
-
 let el = document.getElementById('content')
 
 React.render((
@@ -51,7 +33,7 @@ React.render((
     <Provider store={store}>
       {() => <Router>{routes}</Router>}
     </Provider>
-    {devEl}
+    {devToolElement}
   </div>
 ), el, function () {
   let loadingCover = document.getElementById('loadingCover')

browser/main/reducer.js

@@ -1,17 +1,14 @@
 import { combineReducers } from 'redux'
 import { findIndex } from 'lodash'
 import { SWITCH_USER, SWITCH_FOLDER, SWITCH_MODE, SWITCH_ARTICLE, USER_UPDATE, ARTICLE_REFRESH, ARTICLE_UPDATE, ARTICLE_DESTROY, IDLE_MODE, CREATE_MODE } from './actions'
+import auth from 'boost/auth'
 
 const initialStatus = {
   mode: IDLE_MODE
 }
 
-function getInitialCurrentUser () {
-  return JSON.parse(localStorage.getItem('currentUser'))
-}
-
 function getInitialArticles () {
-  let initialCurrentUser = getInitialCurrentUser()
+  let initialCurrentUser = auth.user()
   if (initialCurrentUser == null) return []
 
   let teams = Array.isArray(initialCurrentUser.Teams) ? initialCurrentUser.Teams : []
@@ -29,10 +26,10 @@ function currentUser (state, action) {
   switch (action.type) {
     case USER_UPDATE:
       let user = action.data
-      localStorage.setItem('currentUser', JSON.stringify(user))
-      return user
+
+      return auth.user(user)
     default:
-      if (state == null) return getInitialCurrentUser()
+      if (state == null) return auth.user()
       return state
   }
 }
@@ -83,7 +80,7 @@ function articles (state, action) {
         let teamKey = genKey(userId)
         let articles = JSON.parse(localStorage.getItem(teamKey))
 
-        let targetIndex = findIndex(articles, _article => article.id === _article.id)
+        let targetIndex = findIndex(articles, _article => article.key === _article.key)
         if (targetIndex < 0) articles.unshift(article)
         else articles.splice(targetIndex, 1, article)
 
@@ -93,11 +90,12 @@ function articles (state, action) {
       return state
     case ARTICLE_DESTROY:
       {
-        let { userId, articleId } = action.data
+        let { userId, articleKey } = action.data
         let teamKey = genKey(userId)
         let articles = JSON.parse(localStorage.getItem(teamKey))
-
-        let targetIndex = findIndex(articles, _article => articleId === _article.id)
+        console.log(articles)
+        console.log(articleKey)
+        let targetIndex = findIndex(articles, _article => articleKey === _article.key)
         if (targetIndex >= 0) articles.splice(targetIndex, 1)
 
         localStorage.setItem(teamKey, JSON.stringify(articles))

browser/main/socket.js

@@ -0,0 +1,44 @@
+import { API_URL } from '../../config'
+import socketio from 'socket.io-client'
+import auth from 'boost/auth'
+import store from './store'
+import { updateArticle, destroyArticle } from './actions'
+
+export const CONN = 'CONN'
+export const ALERT = 'ALERT'
+export const USER_UPDATE = 'USER_UPDATE'
+export const ARTICLE_UPDATE = 'ARTICLE_UPDATE'
+export const ARTICLE_DESTROY = 'ARTICLE_DESTROY'
+
+let io = socketio(API_URL)
+
+io.on(CONN, function (data) {
+  console.log('connected', data)
+
+  let token = auth.token()
+  if (token != null) {
+    io.emit('JOIN', {token})
+  }
+})
+
+io.on(ALERT, function (data) {
+  console.log(ALERT, data)
+})
+
+io.on(USER_UPDATE, function (data) {
+  console.log(USER_UPDATE, data)
+})
+
+io.on(ARTICLE_UPDATE, function (data) {
+  console.log(ARTICLE_UPDATE, data)
+  let { userId, article } = data
+  store.dispatch(updateArticle(userId, article))
+})
+
+io.on(ARTICLE_DESTROY, function (data) {
+  console.log(ARTICLE_DESTROY, data)
+  let { userId, articleKey } = data
+  store.dispatch(destroyArticle(userId, articleKey))
+})
+
+export default io

browser/main/store.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import reducer from './reducer'
+import { createStore } from 'redux'
+// Devtools
+import { compose } from 'redux'
+import { devTools, persistState } from 'redux-devtools'
+import { DevTools, DebugPanel, LogMonitor } from 'redux-devtools/lib/react'
+
+let finalCreateStore = compose(devTools(), persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)))(createStore)
+let store = finalCreateStore(reducer)
+
+export let devToolElement = (
+  <DebugPanel top right bottom>
+    <DevTools store={store} monitor={LogMonitor} visibleOnLoad={false}/>
+  </DebugPanel>
+)
+
+// let store = createStore(reducer)
+
+export default store