Drag and drop

app/components/toasts.js

@@ -0,0 +1,17 @@
+import {Toast} from "cx/widgets";
+
+export function toast(options) {
+    Toast
+        .create({
+            timeout: 3000,
+            ...options,
+        })
+        .open();
+}
+
+export function showErrorToast(err) {
+    toast({
+        message: String(err),
+        mod: 'error'
+    })
+}

app/data/db/auth.js

@@ -0,0 +1,4 @@
+import "firebase/auth";
+import { firebase } from "./firebase";
+
+export const auth = firebase.auth();

app/data/db/config.js

@@ -0,0 +1,8 @@
+export default {
+    apiKey: "AIzaSyCx3Mhxvx49iE9DafqLfVrM-D3ZnvmqaPk",
+    authDomain: "tdo-tasks.firebaseapp.com",
+    databaseURL: "https://tdo-tasks.firebaseio.com",
+    projectId: "tdo-tasks",
+    storageBucket: "tdo-tasks.appspot.com",
+    messagingSenderId: "923290013261"
+};

app/data/db/firebase.js

@@ -0,0 +1,11 @@
+import * as firebase from "firebase";
+
+import config from "./config";
+
+firebase.initializeApp(config);
+
+export {
+    firebase
+}
+
+

app/data/db/firestore.js

@@ -0,0 +1,13 @@
+import "firebase/firestore";
+
+import { firebase } from "./firebase";
+
+const settings = {
+    timestampsInSnapshots: true
+};
+
+export const firestore = firebase.firestore();
+
+firestore.settings(settings);
+
+

app/data/middleware/boardNavigation.js

@@ -1,17 +1,18 @@
 import { GOTO_BOARD, GOTO_ANY_BOARD } from '../actions';
+import {History} from "cx/ui";
 
 export default store => next => action => {
     switch (action.type) {
 
         case GOTO_BOARD:
-            window.location.hash = '#' + action.id;
+            History.pushState({}, null, `~/b/${action.id}`);
             return;
 
         case GOTO_ANY_BOARD:
             if (action.forced || (window.location.hash || '#') == '#') {
-                var {tdo} = store.getState();
+                const {tdo} = store.getState();
                 if (tdo.boards.length > 0)
-                    window.location.hash = '#' + tdo.boards[0].id;
+                    History.pushState({}, null, `~/b/${tdo.boards[0].id}`);
             }
             return;
 

app/data/reducers/index.js

@@ -5,10 +5,11 @@ import dummy from './dummyReducer';
 
 export default combineReducers({
     tdo,
-    hash: dummy('#'),
+    url: dummy(''),
     search: dummy({}),
     pages: dummy({}),
-    layout: dummy({})
+    layout: dummy({}),
+    user: dummy({}),
 });
 
 

app/data/reducers/tdo/boards/index.js

@@ -1,7 +1,7 @@
 import { append, updateArray } from 'cx/data';
 import { ADD_BOARD, REMOVE_BOARD } from '../../../actions';
 
-export default function(state = [], action) {
+export default function (state = [], action) {
     switch (action.type) {
         case 'ADD_BOARD':
             return append(state, action.data);
@@ -13,7 +13,7 @@ export default function(state = [], action) {
                     deleted: true,
                     deletedDate: new Date().toISOString()
                 }),
-                b=>b.id == action.id);
+                b => b.id == action.id);
 
         default:
             return state;

app/index.js

@@ -1,103 +1,77 @@
-import { startAppLoop, Widget, FocusManager } from 'cx/ui';
-import { Debug } from 'cx/util';
-import {createStore, ReduxStoreView} from 'cx-redux';
-import { applyMiddleware } from 'redux';
-import Routes from './routes';
-import './index.scss';
-import reducer from './data//reducers';
-import middleware from './data/middleware';
+import { startHotAppLoop, History, FocusManager } from "cx/ui";
+import { Debug } from "cx/util";
+import { createStore, ReduxStoreView } from "cx-redux";
+import { applyMiddleware } from "redux";
+import Routes from "./routes";
+import "./index.scss";
+import reducer from "./data/reducers";
+import middleware from "./data/middleware";
+import { Store } from "cx/data";
 
-const reduxStore = createStore(
-    reducer,
-    applyMiddleware(...middleware)
-);
-
-const store = new ReduxStoreView(reduxStore);
-
-var stop;
-if (module.hot) {
-    // accept itself
-    module.hot.accept();
-
-    // remember data on dispose
-    module.hot.dispose(function (data) {
-        data.state = store.getData();
-        if (stop)
-            stop();
-    });
+const reduxStore = createStore(reducer, applyMiddleware(...middleware));
 
-    // apply data on hot replace
-    if (module.hot.data)
-        store.load(module.hot.data.state);
-}
+const store = new Store();
 
-function updateHash() {
-    store.set('hash', window.location.hash || '#')
-}
-
-updateHash();
-setInterval(updateHash, 100);
+History.connect(
+  store,
+  "url"
+);
 
-Widget.resetCounter(); //preserve React keys
-Debug.enable('app-data');
+Debug.enable("app-data");
 
-stop = startAppLoop(document.getElementById('app'), store, Routes);
+startHotAppLoop(module, document.getElementById("app"), store, Routes);
 
 // is there a better way to do this
-document.body.addEventListener('keyup', e => {
+document.body.addEventListener("keyup", e => {
+  switch (e.key) {
+    case "?":
+      if (e.target.tagName != "INPUT" && e.target.tagName != "TEXTAREA") {
+        e.preventDefault();
+        e.stopPropagation();
+        window.location.hash = "#help";
+      }
+      break;
 
-    switch (e.key) {
-        case '?':
-            if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
-                e.preventDefault();
-                e.stopPropagation();
-                window.location.hash = '#help';
-            }
-            break;
+    case "Escape":
+      if (!document.activeElement.classList.contains("cxb-task")) {
+        e.preventDefault();
+        e.stopPropagation();
+        var els = document.getElementsByClassName("cxb-task");
+        if (els && els.length > 0) FocusManager.focusFirst(els[0]);
+      }
+      break;
 
-        case 'Escape':
-            if (!document.activeElement.classList.contains('cxb-task')) {
-                e.preventDefault();
-                e.stopPropagation();
-                var els = document.getElementsByClassName('cxb-task');
-                if (els && els.length > 0)
-                    FocusManager.focusFirst(els[0]);
-            }
-            break;
+    case "/":
+      if (e.target.tagName != "INPUT" && e.target.tagName != "TEXTAREA") {
+        e.preventDefault();
+        e.stopPropagation();
+        var el = document.getElementById("search");
+        FocusManager.focusFirst(el);
+      }
+      break;
 
-        case '/':
-            if (e.target.tagName != 'INPUT' && e.target.tagName != 'TEXTAREA') {
-                e.preventDefault();
-                e.stopPropagation();
-                var el = document.getElementById('search');
-                    FocusManager.focusFirst(el);
-            }
-            break;
-
-        case '{':
-            {
-                if(!e.ctrlKey) break;
-                let {hash, tdo} = store.getData();
-                hash = hash.split('#').join('');
-                var boardInd = tdo.boards.findIndex(a=>a.id == hash);
-                if(boardInd == -1) break;
-                var prevInd = (boardInd - 1);
-                if(prevInd < 0) prevInd = tdo.boards.length - 1;
-                var nextBoard = tdo.boards[prevInd];
-                window.location = '#' + nextBoard.id;
-                break;
-            }
+    case "{": {
+      if (!e.ctrlKey) break;
+      let { hash, tdo } = store.getData();
+      hash = hash.split("#").join("");
+      var boardInd = tdo.boards.findIndex(a => a.id == hash);
+      if (boardInd == -1) break;
+      var prevInd = boardInd - 1;
+      if (prevInd < 0) prevInd = tdo.boards.length - 1;
+      var nextBoard = tdo.boards[prevInd];
+      window.location = "#" + nextBoard.id;
+      break;
+    }
 
-        case '}':
-            {
-                if(!e.ctrlKey) break;
-                let {hash, tdo} = store.getData();
-                hash = hash.split('#').join('');
-                var boardInd = tdo.boards.findIndex(a=>a.id == hash);
-                if(boardInd == -1) break;
-                var nextBoard = tdo.boards[(boardInd + 1) % tdo.boards.length];
-                window.location = '#' + nextBoard.id;
-                break;
-            }
+    case "}": {
+      if (!e.ctrlKey) break;
+      let { hash, tdo } = store.getData();
+      hash = hash.split("#").join("");
+      var boardInd = tdo.boards.findIndex(a => a.id == hash);
+      if (boardInd == -1) break;
+      var nextBoard = tdo.boards[(boardInd + 1) % tdo.boards.length];
+      window.location = "#" + nextBoard.id;
+      break;
     }
+  }
 });