note

package.json

   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "node_modules/.bin/webpack-dev-server --progress --colors --hot --config ./webpack.config.js",
-    "server": "NODE_ENV=production node_modules/babel-cli/bin/babel-node.js --presets env server.js",
-    "build": "node_modules/.bin/webpack",
-    "start": "npm run build && npm run server"
+    "build": "NODE_ENV=production node_modules/.bin/webpack",
+    "start": "npm run dev"
   },
   "repository": {
     "type": "git",
   },
   "dependencies": {
     "@blueprintjs/core": "^1.16.0",
+    "axios": "^0.16.1",
     "babel-cli": "^6.24.1",
     "classnames": "^2.2.5",
-    "express": "^4.15.2",
+    "firebase": "^3.9.0",
     "font-awesome": "^4.7.0",
+    "lodash": "^4.17.4",
+    "markdown-it": "^8.3.1",
     "react": "^15.5.4",
     "react-addons-css-transition-group": "^15.5.2",
     "react-dom": "^15.5.4",

server.js

-import path from 'path';
-import Express from 'express';
-
-// initialize the server and configure support for ejs templates
-const app = new Express();
-app.set('views', path.join(__dirname, 'views'));
-
-// define the folder that will be used for static assets
-app.use(Express.static(path.join(__dirname, 'dist')));
-
-// universal routing and rendering
-app.get('/user', () => console.log('api call'));
-
-// start the server
-const port = process.env.PORT || 3000;
-const env = process.env.NODE_ENV || 'production';
-app.listen(port, err => {
-  if (err) {
-    return console.error(err);
-  }
-  console.info(`Server running on http://localhost:${port} [${env}]`);
-});

src/App.jsx

 import Login from './Pages/Login/Login'
 import './assets'
 
-const USER = {
-    username: 'Coldiary',
-    email: 'coldiary@orange.fr',
-    links: {
-        twitter: 'coldiary'
-    }
-}
-
 const App = ({ user, login }) => {
     if (!user)
         return <Login login={() => login(USER)} />

src/App.scss

 @import '~@blueprintjs/core/dist/variables.scss';
 
+html, body {
+    margin: 0;
+}
+
+.pt-toast-container.pt-toast-container-top.app-toaster {
+    top: $pt-navbar-height;
+}
+
+.pt-non-ideal-state {
+    height: inherit;
+}
+
 .flex-frame {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     background: $pt-app-background-color;
 
-    
-
     main {
         flex: 1;
         padding: 50px;

src/Header/NavLinkBP.jsx

 import React from 'react'
 import { NavLink } from 'react-router-dom'
 
-const NavLinkBP = ({path, label, icon, exact}) =>
+const NavLinkBP = ({ path, label, icon, exact, location }) =>
     <NavLink to={path} {...{exact}}
         activeClassName="pt-active"
         className={"pt-button pt-minimal pt-icon-" + icon}>

src/Header/Topbar.jsx

 import React from 'react'
 import { connect } from 'react-redux'
+import { withRouter } from 'react-router'
 import { Popover, PopoverInteractionKind, Position } from '@blueprintjs/core'
 import { Navbar, NavbarGroup, NavbarDivider, NavbarHeading } from './Navbar'
 import NavLinkBP from './NavLinkBP'
 import { LOGOUT } from '../Store/Actions'
 import Notifications from './Notifications'
 
-const TopbarTemplate = ({ logout }) =>
-    <div>
+const TopbarTemplate = ({ username, logout }) =>
         <Navbar dark>
             <NavbarGroup align="left">
                 <NavbarHeading>Lighthouse</NavbarHeading>
                 <NavLinkBP path="/" label="Home" icon="home" exact/>
-                <NavLinkBP path="/projects" label="Projects" icon="document"/>
+                <NavLinkBP path="/projects" label="Projects" icon="projects"/>
+                <NavLinkBP path="/notes" label="Notes" icon="clipboard"/>
+                <NavLinkBP path="/todos" label="Todos" icon="property"/>
             </NavbarGroup>
             <NavbarGroup align="right">
                 <input className="pt-input" placeholder="Search files..." type="text" />
                         interactionKind={PopoverInteractionKind.HOVER}>
                     <button className="pt-button pt-minimal pt-icon-notifications"></button>
                 </Popover>
-                <Popover content={UserMenu({logout})} position={Position.BOTTOM_RIGHT}
+                <Popover content={<UserMenu />} position={Position.BOTTOM_RIGHT}
                         interactionKind={PopoverInteractionKind.CLICK}>
-                    <button className="pt-button pt-minimal pt-icon-user"></button>
+                    <button className="pt-button pt-minimal pt-icon-user">{username}</button>
                 </Popover>
             </NavbarGroup>
         </Navbar>
-    </div>
 
-const mapDispatchToProps = dispatch => ({ logout: () => { console.log('dispatching'); dispatch(LOGOUT()) } })
-const Topbar = connect(null, mapDispatchToProps)(TopbarTemplate)
+const Topbar = withRouter(connect(state => ({ username: state.user.displayName }))(TopbarTemplate))
 
 export default Topbar

src/Header/UserMenu.jsx

 import React from 'react'
 import classNames from 'classnames'
+import firebase from 'firebase'
 import { Menu, MenuItem, MenuDivider } from "@blueprintjs/core"
 import { MenuLink } from '../Shared/Components'
 
-const userMenu = ({ logout }) => 
-    <Menu>
-        <MenuLink to="/user" iconName="user">Profile</MenuLink>
-        <MenuLink to="/settings" iconName="cog">Settings</MenuLink>
-        <MenuDivider />
-        <MenuItem text="Log out" iconName="power" onClick={() => { console.log('loginout'); logout() }} />
-    </Menu>
+const UserMenu = () => {
+    const logout = () => firebase.auth().signOut()
+    return (
+        <Menu>
+            <MenuLink to="/user" iconName="user">Profile</MenuLink>
+            <MenuLink to="/settings" iconName="cog">Settings</MenuLink>
+            <MenuDivider />
+            <MenuItem text="Log out" iconName="power" onClick={logout} />
+        </Menu>
+    )
+}
 
-export default userMenu
+export default UserMenu

src/Pages/Login/Login.jsx

 import React from 'react'
 import { connect } from 'react-redux'
+import axios from 'axios'
+import firebase from 'firebase'
 import { Card } from '../../Shared/Components'
 import { InputGroup, Tooltip, Button, Classes, Intent } from '@blueprintjs/core'
 import { LOGIN } from '../../Store/Actions'
 import './Login.scss'
+import { Map } from '../../utils'
 
 const PasswordToggler = ({show, toggle}) => 
     <Tooltip content={`${show ? "Hide" : "Show"} Password`}>
         <Logo />
         <Card>
             <form onSubmit={e => connect('test', e)}>
-                <InputGroup name="username" placeholder="Username" leftIconName="user"/>
+                <InputGroup name="email" placeholder="Email" leftIconName="user"/>
                 <InputGroup name="password" placeholder="Enter your password..." leftIconName="lock" 
                     type={showPassword ? "text" : "password"}
                     rightElement={<PasswordToggler show={showPassword} toggle={togglePassword} />}
         </Card>
     </div>
 
-export default class Login extends React.Component {
+class LoginContainer extends React.Component {
     state = { showPassword: false }
 
     togglePassword = () => this.setState({ showPassword: !this.state.showPassword })
 
-    connect(test, e) {
-        e.preventDefault();
-        let data = new Map(new FormData(e.target));
-        console.log(data);
-        return false;
+    connect = (test, e) => {
+        e.preventDefault()
+        let data = (new Map(new FormData(e.target))).toObj()
+        firebase.auth().signInWithEmailAndPassword(data.email, data.password)
+                .catch(e => { console.error(`Firebase auth error: [${e.code}] ${e.message}`) })
     }
 
     render() {
             connect={this.connect}
         />
     }
-}
+}
+
+const Login = connect(null, dispatch => ({ login: user => dispatch(LOGIN(user)) }))(LoginContainer)
+
+export default Login

src/Pages/Login/Login.scss

             .pt-input-group {
                 margin-bottom: $pt-grid-size;
             }
+
+            form {
+                margin: 0;
+            }
         }
 
 

src/Pages/Notes/Notes.jsx

+import React from 'react'
+import { connect } from 'react-redux'
+import MarkdownIt from 'markdown-it'
+import { Card, Placeholder, Icon } from '../../Shared/Components'
+import { Menu, MenuDivider, MenuItem, EditableText, Intent, Button, Alert } from '@blueprintjs/core'
+import { SELECT_NOTE, UPDATE_NOTE, UPDATE_SELECTED_NOTE, ADD_NOTE, REMOVE_NOTE, UNSELECT_NOTE } from '../../Store/Actions'
+import './Notes.scss'
+
+const md = new MarkdownIt()
+
+const NotesList = ({ notes, select }) =>
+    <div>
+        { notes.map(e => <MenuItem key={e.id} text={e.title} onClick={() => select(e)}></MenuItem>) }
+    </div>
+
+class AlertButton extends React.Component {
+    state = { open: false }
+
+    close = () => this.setState({ open: false })
+
+    show = () => this.setState({ open: true })
+
+    confirm = () => {
+        this.props.onConfirm()
+        this.close();
+    }
+
+    render() {
+        return (
+            <Button iconName={this.props.iconName} className={this.props.className} onClick={this.show}>
+                <Alert intent={Intent.DANGER} isOpen={this.state.open}
+                    confirmButtonText={this.props.confirmButtonText} cancelButtonText={this.props.cancelButtonText}
+                    onConfirm={this.confirm} onCancel={this.close} >
+                    {this.props.children}
+                </Alert>
+            </Button>
+        );
+    }
+}
+
+const Note = ({ note, update, remove }) =>
+    <div className="Note">
+        <AlertButton iconName="trash" className="trash-btn"
+            confirmButtonText="delete" cancelButtonText={"Cancel"}
+            onConfirm={() => remove(note)}>
+            Do you really want to delete this note ? You won't be able to recover it.
+        </AlertButton>
+        <h2>{note.title}</h2>
+        <div className="editor">
+            <EditableText className="source" multiline value={note.content} onChange={value => update({...note, content: value})}></EditableText>
+            <div className="preview" dangerouslySetInnerHTML={{__html: md.render(note.content)}}></div>
+        </div>
+    </div>
+
+
+const NotesTemplate = ({ notes, selectedNote, selectNote, updateNote, addNote, removeNote }) =>
+    <div className="Notes">
+        <Card className="List">
+            <Menu>
+                <MenuDivider title="Notes"/>
+                <NotesList notes={notes} select={selectNote}/>
+                <MenuDivider />
+                <MenuItem iconName="plus" text="New note" onClick={addNote}/>
+            </Menu>
+        </Card>
+        <Card className="content">
+            { selectedNote ? <Note note={selectedNote} update={updateNote} remove={removeNote} /> :
+                <Placeholder iconName="clipboard" title="No note selected" description="Choose one in the list on the left"/> }
+        </Card>
+    </div>
+
+const Notes = connect(
+    state => ({ notes: state.note.notes, selectedNote: state.note.selectedNote }),
+    dispatch => ({
+        addNote: () => dispatch(ADD_NOTE()),
+        selectNote: note => dispatch(SELECT_NOTE(note)),
+        removeNote: note => {
+            dispatch(REMOVE_NOTE(note))
+            dispatch(UNSELECT_NOTE())
+        },
+        updateNote: note => {
+            dispatch(UPDATE_NOTE(note))
+            dispatch(UPDATE_SELECTED_NOTE(note))
+        }
+    })
+)(NotesTemplate)
+
+export default Notes

src/Pages/Notes/Notes.scss

+@import '~@blueprintjs/core/dist/variables.scss';
+
+.Notes {
+    display: flex;
+    align-items: flex-start;
+
+    .list {
+        width: 200px;
+        margin-right: $pt-grid-size;
+        box-sizing: content-box;
+    }
+
+    .content {
+        margin-left: $pt-grid-size;
+        flex: 1;
+        max-height: 300px;
+
+        .Note {
+            .trash-btn {
+                float: right;
+            }
+            
+            .editor {
+                display: flex;
+                flex-direction: row;
+                margin-top: $pt-grid-size * 4;
+
+                .source, .preview {
+                    flex: 1;
+                    margin: 30px;
+                }
+            }
+        }
+    }
+
+}

src/Pages/User/User.scss

 .User {
-    display: flex;
-    flex-direction: row;
-    align-content: flex-start;
-    justify-content: flex-start;
-
     .profile-pic {
         width: 200px;
         height: 200px;
+        float: left;
+        margin-right: 50px;
+
+        img { width: 100%; }
     }
 
     .profile-info {
         display: flex;
-        margin-left: 50px;
+        
         flex-direction: column;
         justify-content: space-around;
 
-        h3 {
-            margin-bottom: 30px;
-        }
+        h3 { margin-bottom: 30px; }
 
         .social-columns {
             display: flex;
             flex-wrap: wrap;
 
-            & > h4 {
-                margin: 20px;
-            }
+            & > h4 { margin: 20px; }
 
             .fa {
                 margin-right: 20px;
             }
         }
 
+        .actions {
+            text-align: right;
+        }
+
 
         .pt-label > input.pt-input {
             margin-left: 20px;

src/Pages/User/UserInfo.jsx

 import React from 'react'
+import { connect } from 'react-redux'
 import FontAwesome from 'react-fontawesome'
-import { EditableText } from "@blueprintjs/core"
+import firebase from 'firebase'
+import { EditableText, Button, Intent } from "@blueprintjs/core"
+import { Card } from '../../Shared/Components'
+import AppToaster from '../../Shared/Toaster'
 
 const SocialLink = ({ iconName, ...otherProps }) => <h4><FontAwesome name={iconName} /><EditableText {...otherProps}/></h4>
 
-const UserInfo = () => 
-    <div className="profile-info">
-        <h3><EditableText placeholder="Username"/></h3>
-        <h3><EditableText placeholder="Email"/></h3>
+const UserInfoTemplate = ({ user, changeProfile, changeEmail, save }) => 
+    <Card className="profile-info">
+        <h3><EditableText placeholder="Display Name" value={user.displayName}
+            onChange={value => changeProfile({ displayName: value})}/></h3>
+        <h3><EditableText placeholder="Email" value={user.email}
+            onChange={value => changeEmail(value)}/></h3>
         <div className="social-columns">
             <SocialLink iconName="twitter" placeholder="Twitter" />
             <SocialLink iconName="facebook" placeholder="Facebook"/>
             <SocialLink iconName="github" placeholder="Github"/>
             <SocialLink iconName="globe" placeholder="Website"/>
         </div>
-    </div>
+        <div className="actions">
+            <Button onClick={save} intent={Intent.PRIMARY}>Save</Button>
+        </div>
+    </Card>
+
+class UserInfoContainer extends React.Component {
+    state = { user: this.props.user }
+
+    changeEmail = email => this.setState({ user: {...this.state.user, email } })
     
+    changeProfile = profile => this.setState({ user: {...this.state.user, ...profile } })
+
+    save = () => {
+        if (this.state.user.email != this.props.user.email)
+            firebase.auth().currentUser.updateEmail(this.state.user.email)
+                    .then(AppToaster.show({ message: 'Email updated'}))
+        if (this.state.user.displayName != this.props.user.displayName)
+            firebase.auth().currentUser.updateProfile({ displayName: this.state.user.displayName })
+                    .then(AppToaster.show({ message: 'Display name updated'}))
+    }
+
+    render() {
+        return <UserInfoTemplate user={this.state.user} save={this.save} 
+            changeEmail={this.changeEmail} changeProfile={this.changeProfile}
+        />
+    }
+}
+
+const UserInfo = connect(state => ({ user: state.user }))(UserInfoContainer)
 
 export default UserInfo

src/Pages/User/UserPic.jsx

 import React from 'react'
-import { Card, Placeholder } from '../../Shared/Components'
+import firebase from 'firebase'
+import { connect } from 'react-redux'
+import { Card, ProfilePic } from '../../Shared/Components'
+import UserPicChange from './UserPicChange'
+import { CHANGE_PIC } from '../../Store/Actions'
+import AppToaster from '../../Shared/Toaster'
 
-const UserPic = () => 
-    <Card className="profile-pic" interactive>
-        <Placeholder iconName="mugshot" title="No picture" description="Click to change"/>
+const UserPicTemplate = ({ pic, dialogOpen, toggleDialog, changePic }) => 
+    <Card className="profile-pic" interactive onClick={toggleDialog}>
+        <ProfilePic src={pic} />
+        <UserPicChange save={changePic} cancel={toggleDialog} open={dialogOpen}/>
     </Card>
 
+class UserPicContainer extends React.Component {
+    state = { dialogOpen: false }
+
+    toggleDialog = () => this.setState({ dialogOpen: !this.state.dialogOpen })
+
+    changePic = url => firebase.auth().currentUser.updateProfile({ photoURL: url })
+                               .then(() => this.props.updatePic(url))
+                               .then(this.toggleDialog)
+                               .then(AppToaster.show({ message: 'Picture updated'}))
+
+    render() {
+        return <UserPicTemplate pic={this.props.pic} dialogOpen={this.state.dialogOpen}
+            toggleDialog={this.toggleDialog} changePic={this.changePic}/>
+    }
+}
+
+const UserPic = connect(
+    state => ({ pic: state.user.photoURL }),
+    dispatch => ({ updatePic: url => dispatch(CHANGE_PIC(url)) })
+)(UserPicContainer)
+
 export default UserPic;

src/Pages/User/UserPicChange.jsx

+import React from 'react'
+import { InputGroup, Dialog, Intent, Button } from '@blueprintjs/core'
+
+const UserPicChangeTemplate = ({ value, change, save, cancel, open }) =>
+    <Dialog iconName="inbox" isOpen={open} onClose={cancel} title="Change profile picture">
+        <div className="pt-dialog-body">
+            <InputGroup name="picURL" placeholder="Picture URL" leftIconName="mugshot" value={value} onChange={e => change(e.target.value)} />
+        </div>
+        <div className="pt-dialog-footer">
+            <div className="pt-dialog-footer-actions">
+                <Button text="Cancel" onClick={cancel} />
+                <Button intent={Intent.PRIMARY} onClick={save} text="Save" />
+            </div>
+        </div>
+    </Dialog>
+
+class UserPicChange extends React.Component {
+    state = { value: '' }
+
+    render() {
+        return <UserPicChangeTemplate open={this.props.open}
+            value={this.state.value} change={value => this.setState({ value })}
+            save={() => this.props.save(this.state.value)} cancel={this.props.cancel} 
+        />
+    }
+}
+
+export default UserPicChange

src/Routes.jsx

 import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
 
 import User from './Pages/User/User'
+import Notes from './Pages/Notes/Notes'
 
 const Home = () => <div>Home</div>
 const Projects = () => <div>Projects</div>
+const Todos = () => <div>Todos</div>
 const Settings = () => <div>Settings</div>
 
 const Routes = () => 
     <div>
         <Route path="/"         component={Home} exact />
-        <Route path="/projects"    component={Projects} />
+        <Route path="/projects" component={Projects} />
+        <Route path="/notes"    component={Notes} />
+        <Route path="/todos"    component={Todos} />
         <Route path="/user"     component={User} />
         <Route path="/settings" component={Settings} />
     </div>

src/Shared/Components.jsx

 import cl from 'classnames'
 import { Link } from 'react-router-dom'
 
-export const Card = ({ className, children, interactive }) => 
-    <div className={cl(["pt-card", className, {'pt-interactive': interactive}])}>{children}</div>
+export const Icon = ({ name, size, intent, className, ...otherProps }) => {
+    const classes = cl({
+        [`pt-icon-${size}`]: size,
+        [`pt-icon-${name}`]: name,
+        [`pt-intent-${intent}`]: intent,
+        [className]: true
+    })
+    return <span className={classes} {...otherProps}></span>
+}
 
-export const Placeholder = ({ iconName, title, description }) => 
-    <div className="pt-non-ideal-state">
+export const Card = ({ className, children, interactive, ...otherProps }) => 
+    <div className={cl(["pt-card", className, {'pt-interactive': interactive}])} {...otherProps}>{children}</div>
+
+export const Placeholder = ({ iconName, title, description, ...otherProps }) => 
+    <div className="pt-non-ideal-state" {...otherProps} >
         <div className="pt-non-ideal-state-visual pt-non-ideal-state-icon">
             <span className={`pt-icon pt-icon-${iconName}`}></span>
         </div>
         </div>
     </div>
 
-const MenuLink = ({ to, iconName, children, ...otherProps }) => {
+export const MenuLink = ({ to, iconName, children, ...otherProps }) => {
     let classes = cl(["pt-menu-item","pt-popover-dismiss", {[`pt-icon-${iconName}`]: iconName}]);
     return <li><Link to={to} className={classes} {...otherProps}>{children}</Link></li>
-}
+}
+
+export const ProfilePic = ({ src }) => src ? <img src={src} /> :
+    <Placeholder iconName="mugshot" title="No picture" description="Click to change"/>

src/Shared/Toaster.jsx

+import { Position, Toaster } from "@blueprintjs/core";
+ 
+const AppToasts = Toaster.create({
+    className: "app-toaster",
+    position: Position.TOP_RIGHT,
+});
+
+export default AppToasts

src/Store/Actions/index.js

-import { LOGIN, LOGOUT } from './user'
-import { TOGGLE_SHOW_PASSWORD } from './login'
-export { LOGIN, LOGOUT, TOGGLE_SHOW_PASSWORD }
+import { LOGIN, LOGOUT, CHANGE_PIC } from './user'
+import {
+    ADD_NOTE, REMOVE_NOTE, UPDATE_NOTE,
+    SELECT_NOTE, UNSELECT_NOTE, UPDATE_SELECTED_NOTE
+} from './notes'
+export {
+    LOGIN, LOGOUT, CHANGE_PIC,
+    ADD_NOTE, REMOVE_NOTE, UPDATE_NOTE,
+    SELECT_NOTE, UNSELECT_NOTE, UPDATE_SELECTED_NOTE
+}

src/Store/Actions/login.js

-import { createAction } from 'redux-actions'
-export const TOGGLE_SHOW_PASSWORD = createAction('TOGGLE_SHOW_PASSWORD');

src/Store/Actions/notes.js

+import { createAction } from 'redux-actions'
+export const ADD_NOTE = createAction('ADD_NOTE')
+export const REMOVE_NOTE = createAction('REMOVE_NOTE')
+export const UPDATE_NOTE = createAction('UPDATE_NOTE')
+export const SELECT_NOTE = createAction('SELECT_NOTE')
+export const UPDATE_SELECTED_NOTE = createAction('UPDATE_SELECTED_NOTE')
+export const UNSELECT_NOTE = createAction('UNSELECT_NOTE')

src/Store/Actions/user.js

 import { createAction } from 'redux-actions'
-export const LOGIN = createAction('LOGIN');
-export const LOGOUT = createAction('LOGOUT');
+export const LOGIN = createAction('LOGIN')
+export const LOGOUT = createAction('LOGOUT')
+export const CHANGE_PIC = createAction('CHANGE_PIC')

src/Store/Reducers/index.js

 import { combineReducers } from 'redux'
 import user from './user'
-import login from './login'
+import note from './note'
 
-const reducers = combineReducers({ user, login })
+const reducers = combineReducers({ user, note })
 
 export default reducers

src/Store/Reducers/login.js

-import { handleActions } from 'redux-actions'
-import { TOGGLE_SHOW_PASSWORD } from '../Actions'
-
-const login = handleActions({
-  [TOGGLE_SHOW_PASSWORD]: (state, action) => ({ showPassword: !state.showPassword }),
-}, { showPassword: false });
-
-export default login

src/Store/Reducers/note.js

+import { _ } from '../../utils'
+import { handleActions } from 'redux-actions'
+import { combineReducers } from 'redux'
+import {
+    ADD_NOTE, UPDATE_NOTE, UPDATE_SELECTED_NOTE,
+    REMOVE_NOTE, SELECT_NOTE, UNSELECT_NOTE
+} from '../Actions'
+
+const MOCK_NOTES = [
+    {id: _.uniqueId(), title: 'First note', content: 'This is a little note' },
+    {id: _.uniqueId(), title: 'Second note', content: '### This is a little md note' },
+]
+
+const selectedNote = handleActions({
+    [SELECT_NOTE]: (state, action) => state = action.payload,
+    [UPDATE_SELECTED_NOTE]: (state, action) => ({...state, ...action.payload }),
+    [UNSELECT_NOTE]: (state, action) => null
+}, null)
+
+const notes = handleActions({
+    [ADD_NOTE]: (state, action) => [...state, { id: _.uniqueId(), title: 'new_note', content: '' }],
+    [UPDATE_NOTE]: (state, action) => _.updateWhere(state, action.payload, _.idCheck(action.payload.id)),
+    [REMOVE_NOTE]: (state, action) =>  _.reject(state, _.idCheck(action.payload.id)),
+}, MOCK_NOTES)
+
+const note = combineReducers({ notes, selectedNote })
+
+export default note

src/Store/Reducers/user.js

 import { handleActions } from 'redux-actions'
-import { LOGIN, LOGOUT } from '../Actions'
+import { LOGIN, LOGOUT, CHANGE_PIC } from '../Actions'
 
 const user = handleActions({
   [LOGIN]: (state, action) => action.payload,
-  [LOGOUT]: (state, action) => null
+  [LOGOUT]: (state, action) => null,
+  [CHANGE_PIC]: (state, action) => ({ ...state, photoURL: action.payload })
 }, null);
 
 export default user;

src/Store/index.js

+import { createStore } from 'redux'
+import * as actions from './Actions'
+import reducers from './Reducers'
+
+const devToolsEnabled = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+
+let Store = createStore(reducers, devToolsEnabled)
+
+export { actions }
+export default Store

src/assets.js

-import "resetcss/reset.min.css"
 import "@blueprintjs/core/dist/blueprint.css"
 import 'font-awesome/css/font-awesome.min.css'
 import './App.scss'

src/auth.js

+import firebase from 'firebase'
+import { dispatch } from 'redux'
+import Store, { actions } from './Store'
+import config from './config'
+
+firebase.initializeApp(config)
+
+firebase.auth().onAuthStateChanged(user => {
+  if (user) {
+    const { email, displayName, photoURL } = user
+    Store.dispatch(actions.LOGIN({ email, displayName, photoURL }))
+  } else if (Store.getState().user)
+    Store.dispatch(actions.LOGOUT())
+})

src/config.js

+export default {
+    apiKey: "AIzaSyAMKhC-LLCylhigPv2TJgBV5Hl5BGBm8WQ",
+    authDomain: "lighthouse-aba3f.firebaseapp.com",
+    databaseURL: "https://lighthouse-aba3f.firebaseio.com",
+    projectId: "lighthouse-aba3f",
+    storageBucket: "lighthouse-aba3f.appspot.com",
+    messagingSenderId: "224395526411"
+}

src/index.js

 import React from 'react'
 import ReactDOM from 'react-dom'
-import { createStore } from 'redux'
 import { Provider } from 'react-redux'
-import reducers from './Store/Reducers'
 import App from './App'
+import Store from './Store'
+import './auth'
 
-const devToolsEnabled = ENV != 'production' && window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+ReactDOM.render(<Provider store={Store}><App /></Provider>, document.getElementById('root'));
 
-let store = createStore(reducers, devToolsEnabled)
-window.onload = () => ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
-
-if (ENV != 'production') {
-    module.hot.accept();
-}
+if (ENV != 'production')
+    module.hot.accept();

src/utils.js

+import * as _ from 'lodash'
+
+Map.prototype.toObj = function() {
+    return [...this].reduce((o, [k, v]) => (o[k] = v, o), {});
+}
+
+_.updateIndex = (array, value, index) =>
+    [...array.slice(0, index), value, ...array.slice(index + 1)]
+
+_.updateWhere = (array, value, predicate) => {
+     const index = _.findIndex(array, predicate)
+     return _.updateIndex(array, value, index)
+}
+
+_.idCheck = id => e => e.id === id
+
+export { Map, _ }

webpack.config.js

     plugins: [
         new ExtractTextPlugin({ filename: 'style.css', allChunks: true }),
         new webpack.DefinePlugin({
-            ENV: "'test'"
+            ENV: JSON.stringify(process.env.NODE_ENV || 'developpement')
         }),
     ],
     devServer: {

yarn.lock

   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+axios@^0.16.1:
+  version "0.16.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.16.1.tgz#c0b6d26600842384b8f509e57111f0d2df8223ca"
+  dependencies:
+    follow-redirects "^1.2.3"
+
 babel-cli@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.24.1.tgz#207cd705bba61489b2ea41b5312341cf6aca2283"
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
 
+base64url@2.0.0, base64url@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/base64url/-/base64url-2.0.0.tgz#eac16e03ea1438eff9423d69baa36262ed1f70bb"
+
 batch@0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
     caniuse-db "^1.0.30000639"
     electron-to-chromium "^1.2.7"
 
+buffer-equal-constant-time@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz#f8e71132f7ffe6e01a5c9697a4c6f3e48d5cc819"
+
 buffer-shims@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-debug@2.6.1, debug@^2.1.1:
+debug@2.6.1, debug@^2.1.1, debug@^2.2.0, debug@^2.4.5:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.1.tgz#79855090ba2c4e3115cc7d8769491d58f0491351"
   dependencies:
     ms "0.7.2"
 
-debug@2.6.4, debug@^2.2.0:
+debug@2.6.4:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.4.tgz#7586a9b3c39741c0282ae33445c4e8ac74734fe0"
   dependencies:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
+dom-storage@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dom-storage/-/dom-storage-2.0.2.tgz#ed17cbf68abd10e0aef8182713e297c5e4b500b0"
+
 dom4@^1.8:
   version "1.8.3"
   resolved "https://registry.yarnpkg.com/dom4/-/dom4-1.8.3.tgz#2b0aa096b46368e33bbd2c2767f0e32dbb3394cd"
   dependencies:
     jsbn "~0.1.0"
 
+ecdsa-sig-formatter@1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.9.tgz#4bc926274ec3b5abb5016e7e1d60921ac262b2a1"
+  dependencies:
+    base64url "^2.0.0"
+    safe-buffer "^5.0.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   dependencies:
     fill-range "^2.1.0"
 
-express@^4.13.3, express@^4.15.2:
+express@^4.13.3:
   version "4.15.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.15.2.tgz#af107fc148504457f2dca9a6f2571d7129b97b35"
   dependencies:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
 
+faye-websocket@0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.9.3.tgz#482a505b0df0ae626b969866d3bd740cdb962e83"
+  dependencies:
+    websocket-driver ">=0.5.1"
+
 faye-websocket@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
 
+firebase@^3.9.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/firebase/-/firebase-3.9.0.tgz#c4237f50f58eeb25081b1839d6cbf175f8f7ed9b"
+  dependencies:
+    dom-storage "^2.0.2"
+    faye-websocket "0.9.3"
+    jsonwebtoken "^7.3.0"
+    promise-polyfill "^6.0.2"
+    xmlhttprequest "^1.8.0"
+
 flatten@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
 
+follow-redirects@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.2.3.tgz#01abaeca85e3609837d9fcda3167a7e42fdaca21"
+  dependencies:
+    debug "^2.4.5"
+
 font-awesome@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
 
 iconv-lite@~0.4.13:
-  version "0.4.17"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.17.tgz#4fdaa3b38acbc2c031b045d0edcdfe1ecab18c8d"
+  version "0.4.15"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
 
 icss-replace-symbols@^1.0.2:
   version "1.0.2"
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
+isemail@1.x.x:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/isemail/-/isemail-1.2.0.tgz#be03df8cc3e29de4d2c5df6501263f1fa4595e9a"
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   dependencies:
     jsbn "~0.1.0"
 
+joi@^6.10.1:
+  version "6.10.1"
+  resolved "https://registry.yarnpkg.com/joi/-/joi-6.10.1.tgz#4d50c318079122000fe5f16af1ff8e1917b77e06"
+  dependencies:
+    hoek "2.x.x"
+    isemail "1.x.x"
+    moment "2.x.x"
+    topo "1.x.x"
+
 js-base64@^2.1.8, js-base64@^2.1.9:
   version "2.1.9"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.1.9.tgz#f0e80ae039a4bd654b5f281fc93f04a914a7fcce"
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
 
+jsonwebtoken@^7.3.0:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-7.4.0.tgz#515bf2bba070ec615bad97fd2e945027eb476946"
+  dependencies:
+    joi "^6.10.1"
+    jws "^3.1.4"
+    lodash.once "^4.0.0"
+    ms "^0.7.1"
+    xtend "^4.0.1"
+
 jsprim@^1.2.2:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.0.tgz#a3b87e40298d8c380552d8cc7628a0bb95a22918"
     json-schema "0.2.3"
     verror "1.3.6"
 
+jwa@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/jwa/-/jwa-1.1.5.tgz#a0552ce0220742cd52e153774a32905c30e756e5"
+  dependencies:
+    base64url "2.0.0"
+    buffer-equal-constant-time "1.0.1"
+    ecdsa-sig-formatter "1.0.9"
+    safe-buffer "^5.0.1"
+
+jws@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/jws/-/jws-3.1.4.tgz#f9e8b9338e8a847277d6444b1464f61880e050a2"
+  dependencies:
+    base64url "^2.0.0"
+    jwa "^1.1.4"
+    safe-buffer "^5.0.1"
+
 kind-of@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
   dependencies:
     invert-kv "^1.0.0"
 
+linkify-it@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.0.3.tgz#d94a4648f9b1c179d64fa97291268bdb6ce9434f"
+  dependencies:
+    uc.micro "^1.0.1"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
 
+lodash.once@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
+
 lodash.tail@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.0, lodash@^4.2.1:
+lodash@^4.0.0, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
 
+markdown-it@^8.3.1:
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.3.1.tgz#2f4b622948ccdc193d66f3ca2d43125ac4ac7323"
+  dependencies:
+    argparse "^1.0.7"
+    entities "~1.1.1"
+    linkify-it "^2.0.0"
+    mdurl "^1.0.1"
+    uc.micro "^1.0.3"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
 
+mdurl@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
+
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   dependencies:
     minimist "0.0.8"
 
+moment@2.x.x:
+  version "2.18.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
+
 ms@0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
 
-ms@0.7.3:
+ms@0.7.3, ms@^0.7.1:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.3.tgz#708155a5e44e33f5fd0fc53e81d0d40a91be1fff"
 
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
+promise-polyfill@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/promise-polyfill/-/promise-polyfill-6.0.2.tgz#d9c86d3dc4dc2df9016e88946defd69b49b41162"
+
 promise@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf"
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
 
+topo@1.x.x:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/topo/-/topo-1.1.0.tgz#e9d751615d1bb87dc865db182fa1ca0a5ef536d5"
+  dependencies:
+    hoek "2.x.x"
+
 toposort@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.3.tgz#f02cd8a74bd8be2fc0e98611c3bacb95a171869c"
   version "0.7.12"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
 
+uc.micro@^1.0.1, uc.micro@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.3.tgz#7ed50d5e0f9a9fb0a573379259f2a77458d50192"
+
 uglify-js@^2.8.5, uglify-js@~2.8.22:
   version "2.8.23"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.23.tgz#8230dd9783371232d62a7821e2cf9a817270a8a0"
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/xml-char-classes/-/xml-char-classes-1.0.0.tgz#64657848a20ffc5df583a42ad8a277b4512bbc4d"
 
-xtend@^4.0.0:
+xmlhttprequest@^1.8.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc"
+
+xtend@^4.0.0, xtend@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"