Merge pull request #73 from codekiln/redux_-_reset_appearance_#67

fix #67 Redux reset appearance

.travis.yml

@@ -10,4 +10,7 @@ cache:
     - node_modules
 script:
   - yarn build
-  - yarn test
+  - yarn test
+dist: trusty
+sudo: required
+group: edge

package.json

@@ -92,7 +92,7 @@
     "jest": "^20.0.4",
     "json-loader": "^0.5.4",
     "mocha": "^3.0.1",
-    "node-sass": "^3.7.0",
+    "node-sass": "3.13.1",
     "nodemon": "^1.10.2",
     "postcss-loader": "^0.13.0",
     "prettier": "^1.5.2",

src/constants.js

@@ -1,4 +1,5 @@
 export const LIST_PATH = '/projects'
+export const TODOS_PATH = '/todos'
 export const DETAIL_PATH = ':projectname'
 export const ACCOUNT_PATH = '/account'
 export const LOGIN_PATH = '/login'
@@ -21,6 +22,7 @@ export const formNames = {
 
 export const paths = {
   list: LIST_PATH,
+  todos: TODOS_PATH,
   account: ACCOUNT_PATH,
   detail: DETAIL_PATH,
   login: LOGIN_PATH,

src/containers/Navbar/Navbar.js

@@ -19,6 +19,7 @@ import FlatButton from 'material-ui/FlatButton'
 import DownArrow from 'material-ui/svg-icons/hardware/keyboard-arrow-down'
 import Avatar from 'material-ui/Avatar'
 import defaultUserImage from 'static/User.png'
+import beetimerLogo from 'static/beetimer_yellow_128.png'
 
 const buttonStyle = {
   color: 'white',
@@ -119,13 +120,14 @@ export default class Navbar extends Component {
             to={accountExists ? `${LIST_PATH}` : '/'}
             className={classes.brand}
           >
-            material example
+            <img className={classes.icon} src={beetimerLogo}/> Beetimer
           </Link>
         }
         showMenuIconButton={false}
         iconElementRight={rightMenu}
         iconStyleRight={accountExists ? avatarStyles.wrapper : {}}
         className={classes.appBar}
+        // style={{ backgroundColor: Theme.palette.accent1Color }}
       />
     )
   }

src/containers/Navbar/Navbar.scss

@@ -6,14 +6,16 @@
   font-weight: 200;
   .icon {
     height: 50px;
-    margin-top: 7px;
+    margin-right: 7px;
     @include mobile {
       width: 3rem;
       height: 3rem;
-      margin-top: 1.1rem;
     }
   }
 }
+.appBar {
+  //border: dashed firebrick 3px;
+}
 .appBar > div {
   @extend .flex-row;
   align-items: center;

src/routes/Home/containers/HomeContainer.js

@@ -1,55 +1,32 @@
-import React, { Component, PropTypes } from 'react'
-import { connect } from 'react-redux'
-import { map } from 'lodash'
+import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux'
 import Theme from 'theme'
-import {
-  firebaseConnect,
-  isLoaded,
-  pathToJS,
-  dataToJS, // needed for full list and once
-  // orderedToJS, // needed for ordered list
-  // populatedDataToJS // needed for populated list
-} from 'react-redux-firebase'
-import CircularProgress from 'material-ui/CircularProgress'
+import {dataToJS, firebaseConnect, isLoaded, pathToJS,} from 'react-redux-firebase'
 import Snackbar from 'material-ui/Snackbar'
-import { List } from 'material-ui/List'
-import Paper from 'material-ui/Paper'
-import Subheader from 'material-ui/Subheader'
-import TodoItem from '../components/TodoItem'
-import NewTodoPanel from '../components/NewTodoPanel'
 import classes from './HomeContainer.scss'
 
-const populates = [{ child: 'owner', root: 'users', keyProp: 'uid' }]
+const populates = [{child: 'owner', root: 'users', keyProp: 'uid'}]
 
 @firebaseConnect([
   // 'todos' // sync full list of todos
   // { path: 'todos', type: 'once' } // for loading once instead of binding
-  { path: 'todos', queryParams: ['orderByKey', 'limitToLast=5'] } // 10 most recent
+  // { path: 'todos', queryParams: ['orderByKey', 'limitToLast=5'] } // 10 most recent
   // { path: 'todos', populates } // populate
   // { path: 'todos', storeAs: 'myTodos' } // store elsewhere in redux
 ])
-@connect(({ firebase }) => ({
-  auth: pathToJS(firebase, 'auth'),
+@connect(({firebase}) => ({
+  auth:    pathToJS(firebase, 'auth'),
   account: pathToJS(firebase, 'profile'),
-  todos: dataToJS(firebase, 'todos'),
-  // todos: orderedToJS(firebase, 'todos') // if looking for array
-  // todos: dataToJS(firebase, 'myTodos'), // if using storeAs
-  // todos: populatedDataToJS(firebase, 'todos', populates), // if populating
-  // todos: orderedToJS(firebase, '/todos') // if using ordering such as orderByChild
 }))
 export default class Home extends Component {
   static propTypes = {
-    todos: PropTypes.oneOfType([
-      PropTypes.object, // object if using dataToJS
-      PropTypes.array // array if using orderedToJS
-    ]),
     firebase: PropTypes.shape({
-      set: PropTypes.func.isRequired,
-      remove: PropTypes.func.isRequired,
-      push: PropTypes.func.isRequired,
+      set:      PropTypes.func.isRequired,
+      remove:   PropTypes.func.isRequired,
+      push:     PropTypes.func.isRequired,
       database: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
     }),
-    auth: PropTypes.shape({
+    auth:     PropTypes.shape({
       uid: PropTypes.string
     })
   }
@@ -58,93 +35,23 @@ export default class Home extends Component {
     error: null
   }
 
-  toggleDone = (todo, id) => {
-    const { firebase, auth } = this.props
-    if (!auth || !auth.uid) {
-      return this.setState({ error: 'You must be Logged into Toggle Done' })
-    }
-    return firebase.set(`/todos/${id}/done`, !todo.done)
-  }
-
-  deleteTodo = id => {
-    const { todos, auth, firebase } = this.props
-    if (!auth || !auth.uid) {
-      return this.setState({ error: 'You must be Logged into Delete' })
-    }
-    // return this.setState({ error: 'Delete example requires using populate' })
-    // only works if populated
-    if (todos[id].owner !== auth.uid) {
-      return this.setState({ error: 'You must own todo to delete' })
-    }
-    return firebase.remove(`/todos/${id}`).catch(err => {
-      console.error('Error removing todo: ', err) // eslint-disable-line no-console
-      this.setState({ error: 'Error Removing todo' })
-      return Promise.reject(err)
-    })
-  }
-
-  handleAdd = newTodo => {
-    // Attach user if logged in
-    if (this.props.auth) {
-      newTodo.owner = this.props.auth.uid
-    } else {
-      newTodo.owner = 'Anonymous'
-    }
-    // attach a timestamp
-    newTodo.createdAt = this.props.firebase.database.ServerValue.TIMESTAMP
-    // using this.props.firebase.pushWithMeta here instead would automatically attach createdBy and createdAt
-    return this.props.firebase.push('/todos', newTodo)
-  }
-
   render() {
-    const { todos } = this.props
-    const { error } = this.state
+    const {todos} = this.props
+    const {error} = this.state
 
     return (
       <div
         className={classes.container}
-        style={{ color: Theme.palette.primary2Color }}
+        style={{color: Theme.palette.primary2Color}}
       >
         {error
           ? <Snackbar
-              open={!!error}
-              message={error}
-              autoHideDuration={4000}
-              onRequestClose={() => this.setState({ error: null })}
-            />
+            open={!!error}
+            message={error}
+            autoHideDuration={4000}
+            onRequestClose={() => this.setState({error: null})}
+          />
           : null}
-        <div className={classes.info}>
-          <span>data loaded from</span>
-          <span>
-            <a href="https://redux-firebasev3.firebaseio.com/">
-              redux-firebasev3.firebaseio.com
-            </a>
-          </span>
-          <span style={{ marginTop: '2rem' }}>
-            <strong>Note: </strong>
-            old data is removed
-          </span>
-        </div>
-        <div className={classes.todos}>
-          <NewTodoPanel onNewClick={this.handleAdd} disabled={false} />
-          {!isLoaded(todos)
-            ? <CircularProgress />
-            : <Paper className={classes.paper}>
-                <Subheader>Todos</Subheader>
-                <List className={classes.list}>
-                  {todos &&
-                    map(todos, (todo, id) =>
-                      <TodoItem
-                        key={id}
-                        id={id}
-                        todo={todo}
-                        onCompleteClick={this.toggleDone}
-                        onDeleteClick={this.deleteTodo}
-                      />
-                    )}
-                </List>
-              </Paper>}
-        </div>
       </div>
     )
   }

src/routes/Home/containers/HomeContainer.scss

@@ -3,14 +3,7 @@
   @extend .flex-column-center;
   padding-top: 4rem;
 }
-.todos {
-  @extend .flex-column-center;
-  margin-top: 4rem;
-}
 .paper {
   padding: 1rem;
   margin-bottom: 4rem;
-}
-.info {
-  @extend .flex-column-center;
-}
+}