Convert state of drafts and frames store modules to objects

Change the state of the drafts and frames store modules from arrays to objects
containing a single array-valued field. This will allow additional fields to be
added to these modules in future. It also means that store modules are now more
uniform, as all modules now have an object, rather than array, for their
`initialState`.

src/sidebar/store/modules/drafts.js

@@ -13,8 +13,10 @@ import { removeAnnotations } from './annotations';
  * existing annotations.
  */
 
-/** @type {Draft[]} */
-const initialState = [];
+const initialState = {
+  /** @type {Draft[]} */
+  drafts: [],
+};
 
 /** @typedef {typeof initialState} State */
 
@@ -72,7 +74,7 @@ export class Draft {
 
 const reducers = {
   DISCARD_ALL_DRAFTS() {
-    return [];
+    return { drafts: [] };
   },
 
   /**
@@ -80,10 +82,10 @@ const reducers = {
    * @param {{ annotation: AnnotationID }} action
    */
   REMOVE_DRAFT(state, action) {
-    const drafts = state.filter(draft => {
+    const drafts = state.drafts.filter(draft => {
       return !draft.match(action.annotation);
     });
-    return drafts;
+    return { drafts };
   },
 
   /**
@@ -92,11 +94,11 @@ const reducers = {
    */
   UPDATE_DRAFT(state, action) {
     // removes a matching existing draft, then adds
-    const drafts = state.filter(draft => {
+    const drafts = state.drafts.filter(draft => {
       return !draft.match(action.draft.annotation);
     });
     drafts.push(action.draft); // push ok since its a copy
-    return drafts;
+    return { drafts };
   },
 };
 
@@ -124,7 +126,7 @@ function deleteNewAndEmptyDrafts() {
    * @param {() => { drafts: State }} getState
    */
   return (dispatch, getState) => {
-    const newDrafts = getState().drafts.filter(draft => {
+    const newDrafts = getState().drafts.drafts.filter(draft => {
       return (
         !draft.annotation.id &&
         !getDraftIfNotEmpty(getState().drafts, draft.annotation)
@@ -161,7 +163,7 @@ function removeDraft(annotation) {
  * @param {State} state
  */
 function countDrafts(state) {
-  return state.length;
+  return state.drafts.length;
 }
 
 /**
@@ -171,7 +173,7 @@ function countDrafts(state) {
  * @param {AnnotationID} annotation
  */
 function getDraft(state, annotation) {
-  const drafts = state;
+  const drafts = state.drafts;
   for (let i = 0; i < drafts.length; i++) {
     const draft = drafts[i];
     if (draft.match(annotation)) {
@@ -202,7 +204,7 @@ function getDraftIfNotEmpty(state, annotation) {
  */
 const unsavedAnnotations = createSelector(
   /** @param {State} state */
-  state => state,
+  state => state.drafts,
   drafts => drafts.filter(d => !d.annotation.id).map(d => d.annotation)
 );
 

src/sidebar/store/modules/frames.js

@@ -20,8 +20,10 @@ import { createStoreModule, makeAction } from '../create-store';
  * @prop {boolean} [isAnnotationFetchComplete]
  */
 
-/** @type {Frame[]} */
-const initialState = [];
+const initialState = {
+  /** @type {Frame[]} */
+  frames: [],
+};
 
 /** @typedef {typeof initialState} State */
 
@@ -31,14 +33,16 @@ const reducers = {
    * @param {{ frame: Frame }} action
    */
   CONNECT_FRAME(state, action) {
-    const frameIndex = state.findIndex(frame => frame.id === action.frame.id);
-    const newFrames = [...state];
+    const frameIndex = state.frames.findIndex(
+      frame => frame.id === action.frame.id
+    );
+    const newFrames = [...state.frames];
     if (frameIndex !== -1) {
       newFrames[frameIndex] = action.frame;
     } else {
       newFrames.push(action.frame);
     }
-    return newFrames;
+    return { frames: newFrames };
   },
 
   /**
@@ -46,7 +50,8 @@ const reducers = {
    * @param {{ frame: Frame }} action
    */
   DESTROY_FRAME(state, action) {
-    return state.filter(f => f !== action.frame);
+    const frames = state.frames.filter(f => f !== action.frame);
+    return { frames };
   },
 
   /**
@@ -54,7 +59,7 @@ const reducers = {
    * @param {{ uri: string, isAnnotationFetchComplete: boolean }} action
    */
   UPDATE_FRAME_ANNOTATION_FETCH_STATUS(state, action) {
-    const frames = state.map(frame => {
+    const frames = state.frames.map(frame => {
       const match = frame.uri && frame.uri === action.uri;
       if (match) {
         return Object.assign({}, frame, {
@@ -64,7 +69,7 @@ const reducers = {
         return frame;
       }
     });
-    return frames;
+    return { frames };
   },
 };
 
@@ -108,7 +113,7 @@ function updateFrameAnnotationFetchStatus(uri, isFetchComplete) {
  * @param {State} state
  */
 function frames(state) {
-  return state;
+  return state.frames;
 }
 
 /**
@@ -123,7 +128,7 @@ function frames(state) {
  */
 const mainFrame = createSelector(
   /** @param {State} state */
-  state => state,
+  state => state.frames,
 
   // Sub-frames will all have a "frame identifier" set. The main frame is the
   // one with a `null` id.
@@ -164,9 +169,9 @@ const createShallowEqualSelector = createSelectorCreator(
  * values of the array change (are not shallow-equal).
  */
 const searchUris = createShallowEqualSelector(
-  /** @param {State} frames */
-  frames =>
-    frames.reduce(
+  /** @param {State} state */
+  state =>
+    state.frames.reduce(
       (uris, frame) => uris.concat(searchUrisForFrame(frame)),
       /** @type {string[]} */ ([])
     ),