Edit collection (#173)

* Collection edit modal

* Add icon

* 💚

* Oh look, some specs

* Delete collection

* Remove from collection

* Handle error responses
Protect against deleting last collection

* Fix key

* 💚

* Keyboard navigate documents list

* Add missing database constraints

frontend/stores/CollectionsStore.js

@@ -1,6 +1,7 @@
 // @flow
 import {
   observable,
+  computed,
   action,
   runInAction,
   ObservableArray,
@@ -14,12 +15,14 @@ import stores from 'stores';
 import Collection from 'models/Collection';
 import ErrorsStore from 'stores/ErrorsStore';
 import CacheStore from 'stores/CacheStore';
+import UiStore from 'stores/UiStore';
 
 const COLLECTION_CACHE_KEY = 'COLLECTION_CACHE_KEY';
 
 type Options = {
   teamId: string,
   cache: CacheStore,
+  ui: UiStore,
 };
 
 class CollectionsStore {
@@ -30,6 +33,13 @@ class CollectionsStore {
   teamId: string;
   errors: ErrorsStore;
   cache: CacheStore;
+  ui: UiStore;
+
+  @computed get active(): ?Collection {
+    return this.ui.activeCollectionId
+      ? this.getById(this.ui.activeCollectionId)
+      : undefined;
+  }
 
   /* Actions */
 
@@ -49,8 +59,8 @@ class CollectionsStore {
     }
   };
 
-  @action getById = async (id: string): Promise<?Collection> => {
-    let collection = _.find(this.data, { id });
+  @action fetchById = async (id: string): Promise<?Collection> => {
+    let collection = this.getById(id);
     if (!collection) {
       try {
         const res = await this.client.post('/collections.info', {
@@ -79,18 +89,23 @@ class CollectionsStore {
     this.data.splice(this.data.indexOf(id), 1);
   };
 
+  getById = (id: string): ?Collection => {
+    return _.find(this.data, { id });
+  };
+
   constructor(options: Options) {
     this.client = client;
     this.errors = stores.errors;
     this.teamId = options.teamId;
     this.cache = options.cache;
-
-    this.cache.getItem(COLLECTION_CACHE_KEY).then(data => {
-      if (data) {
-        this.data.replace(data.map(collection => new Collection(collection)));
-        this.isLoaded = true;
-      }
-    });
+    this.ui = options.ui;
+    //
+    // this.cache.getItem(COLLECTION_CACHE_KEY).then(data => {
+    //   if (data) {
+    //     this.data.replace(data.map(collection => new Collection(collection)));
+    //     this.isLoaded = true;
+    //   }
+    // });
 
     autorunAsync('CollectionsStore.persists', () => {
       if (this.data.length > 0)

frontend/stores/DocumentsStore.js

@@ -16,11 +16,13 @@ import stores from 'stores';
 import Document from 'models/Document';
 import ErrorsStore from 'stores/ErrorsStore';
 import CacheStore from 'stores/CacheStore';
+import UiStore from 'stores/UiStore';
 
 const DOCUMENTS_CACHE_KEY = 'DOCUMENTS_CACHE_KEY';
 
 type Options = {
   cache: CacheStore,
+  ui: UiStore,
 };
 
 class DocumentsStore extends BaseStore {
@@ -31,6 +33,7 @@ class DocumentsStore extends BaseStore {
 
   errors: ErrorsStore;
   cache: CacheStore;
+  ui: UiStore;
 
   /* Computed */
 
@@ -49,6 +52,12 @@ class DocumentsStore extends BaseStore {
     return _.filter(this.data.values(), 'starred');
   }
 
+  @computed get active(): ?Document {
+    return this.ui.activeDocumentId
+      ? this.getById(this.ui.activeDocumentId)
+      : undefined;
+  }
+
   /* Actions */
 
   @action fetchAll = async (request: string = 'list'): Promise<*> => {
@@ -127,6 +136,7 @@ class DocumentsStore extends BaseStore {
 
     this.errors = stores.errors;
     this.cache = options.cache;
+    this.ui = options.ui;
 
     this.cache.getItem(DOCUMENTS_CACHE_KEY).then(data => {
       if (data) {

frontend/stores/UiStore.js

@@ -1,27 +1,23 @@
 // @flow
-import { observable, action, computed } from 'mobx';
+import { observable, action } from 'mobx';
 import Document from 'models/Document';
-import Collection from 'models/Collection';
 
 class UiStore {
-  @observable activeDocument: ?Document;
+  @observable activeDocumentId: ?string;
+  @observable activeCollectionId: ?string;
   @observable progressBarVisible: boolean = false;
   @observable editMode: boolean = false;
 
-  /* Computed */
-
-  @computed get activeCollection(): ?Collection {
-    return this.activeDocument ? this.activeDocument.collection : undefined;
-  }
-
   /* Actions */
 
   @action setActiveDocument = (document: Document): void => {
-    this.activeDocument = document;
+    this.activeDocumentId = document.id;
+    this.activeCollectionId = document.collection.id;
   };
 
   @action clearActiveDocument = (): void => {
-    this.activeDocument = undefined;
+    this.activeDocumentId = undefined;
+    this.activeCollectionId = undefined;
   };
 
   @action enableEditMode() {