Unverified Commit d8f9baae authored by Robert Knight's avatar Robert Knight Committed by GitHub

Merge pull request #1674 from hypothesis/convert-sidebar-store-to-es-modules

Convert src/sidebar/store to ES modules
parents db679988 25e5e7fe
const redux = require('redux');
const { default: thunk } = require('redux-thunk');
import * as redux from 'redux';
import thunk from 'redux-thunk';
const { createReducer, bindSelectors } = require('./util');
import { createReducer, bindSelectors } from './util';
/**
* Create a Redux store from a set of _modules_.
......@@ -22,7 +22,7 @@ const { createReducer, bindSelectors } = require('./util');
* @param {any[]} initArgs - Arguments to pass to each state module's `init` function
* @param [any[]] middleware - List of additional Redux middlewares to use.
*/
function createStore(modules, initArgs = [], middleware = []) {
export default function createStore(modules, initArgs = [], middleware = []) {
// Create the initial state and state update function.
// Namespaced objects for initial states.
......@@ -74,5 +74,3 @@ function createStore(modules, initArgs = [], middleware = []) {
return store;
}
module.exports = createStore;
......@@ -8,7 +8,7 @@
* to the console, along with the application state before and after the action
* was handled.
*/
function debugMiddleware(store) {
export default function debugMiddleware(store) {
/* eslint-disable no-console */
let serial = 0;
......@@ -34,5 +34,3 @@ function debugMiddleware(store) {
};
/* eslint-enable no-console */
}
module.exports = debugMiddleware;
......@@ -29,21 +29,20 @@
* 3. Checking that the UI correctly presents a given state.
*/
const createStore = require('./create-store');
const debugMiddleware = require('./debug-middleware');
const activity = require('./modules/activity');
const annotations = require('./modules/annotations');
const directLinked = require('./modules/direct-linked');
const drafts = require('./modules/drafts');
const frames = require('./modules/frames');
const links = require('./modules/links');
const groups = require('./modules/groups');
const realTimeUpdates = require('./modules/real-time-updates');
const selection = require('./modules/selection');
const session = require('./modules/session');
const sidebarPanels = require('./modules/sidebar-panels');
const viewer = require('./modules/viewer');
import createStore from './create-store';
import debugMiddleware from './debug-middleware';
import activity from './modules/activity';
import annotations from './modules/annotations';
import directLinked from './modules/direct-linked';
import drafts from './modules/drafts';
import frames from './modules/frames';
import groups from './modules/groups';
import links from './modules/links';
import realTimeUpdates from './modules/real-time-updates';
import selection from './modules/selection';
import session from './modules/session';
import sidebarPanels from './modules/sidebar-panels';
import viewer from './modules/viewer';
/**
* Redux middleware which triggers an Angular change-detection cycle
......@@ -79,7 +78,7 @@ function angularDigestMiddleware($rootScope) {
* passing the current state of the store.
*/
// @ngInject
function store($rootScope, settings) {
export default function store($rootScope, settings) {
const middleware = [
debugMiddleware,
angularDigestMiddleware.bind(null, $rootScope),
......@@ -101,5 +100,3 @@ function store($rootScope, settings) {
];
return createStore(modules, [settings], middleware);
}
module.exports = store;
......@@ -3,7 +3,7 @@
* need to be reflected in the UI.
*/
const { actionTypes } = require('../util');
import { actionTypes } from '../util';
function init() {
return {
......@@ -93,7 +93,7 @@ function isFetchingAnnotations(state) {
return state.activity.activeAnnotationFetches > 0;
}
module.exports = {
export default {
init,
update,
namespace: 'activity',
......
......@@ -3,15 +3,15 @@
* sidebar.
*/
const { createSelector } = require('reselect');
import { createSelector } from 'reselect';
const arrayUtil = require('../../util/array');
const metadata = require('../../util/annotation-metadata');
const uiConstants = require('../../ui-constants');
import uiConstants from '../../ui-constants';
import * as metadata from '../../util/annotation-metadata';
import * as arrayUtil from '../../util/array';
import * as util from '../util';
const selection = require('./selection');
const drafts = require('./drafts');
const util = require('../util');
import drafts from './drafts';
import selection from './selection';
/**
* Return a copy of `current` with all matching annotations in `annotations`
......@@ -461,7 +461,7 @@ const isWaitingToAnchorAnnotations = createSelector(
annotations => annotations.some(metadata.isWaitingToAnchor)
);
module.exports = {
export default {
init: init,
namespace: 'annotations',
update: update,
......
const util = require('../util');
import * as util from '../util';
function init(settings) {
return {
......@@ -125,7 +125,7 @@ function clearDirectLinkedIds() {
};
}
module.exports = {
export default {
init,
namespace: 'directLinked',
update,
......
const metadata = require('../../util/annotation-metadata');
const util = require('../util');
import * as metadata from '../../util/annotation-metadata';
import * as util from '../util';
/**
* The drafts store provides temporary storage for unsaved edits to new or
......@@ -23,7 +23,7 @@ function init() {
* which are the user's draft changes to the annotation. These are returned
* from the drafts store selector by `drafts.getDraft()`.
*/
class Draft {
export class Draft {
constructor(annotation, changes) {
this.annotation = { id: annotation.id, $tag: annotation.$tag };
this.isPrivate = changes.isPrivate;
......@@ -94,7 +94,8 @@ function createDraft(annotation, changes) {
*/
function deleteNewAndEmptyDrafts() {
const annotations = require('./annotations');
const { default: annotations } = require('./annotations');
return (dispatch, getState) => {
const newDrafts = getState().drafts.filter(draft => {
return (
......@@ -183,7 +184,7 @@ function unsavedAnnotations(state) {
.map(draft => draft.annotation);
}
module.exports = {
export default {
init,
namespace: 'drafts',
update,
......@@ -200,5 +201,4 @@ module.exports = {
getDraftIfNotEmpty,
unsavedAnnotations,
},
Draft,
};
const { createSelector } = require('reselect');
import { createSelector } from 'reselect';
const util = require('../util');
import * as util from '../util';
function init() {
// The list of frames connected to the sidebar app
......@@ -113,7 +113,7 @@ function searchUris(state) {
}, []);
}
module.exports = {
export default {
init: init,
namespace: 'frames',
update: update,
......
const { createSelector } = require('reselect');
import { createSelector } from 'reselect';
const util = require('../util');
const session = require('./session');
import * as util from '../util';
import session from './session';
function init() {
return {
......@@ -189,7 +190,7 @@ const getInScopeGroups = createSelector(
groups => groups.filter(g => g.isScopedToUri)
);
module.exports = {
export default {
init,
namespace: 'groups',
update,
......
......@@ -22,7 +22,7 @@ function updateLinksAction(newLinks) {
return { type: 'UPDATE_LINKS', newLinks: newLinks };
}
module.exports = {
export default {
init: init,
namespace: 'links',
update: { UPDATE_LINKS: updateLinks },
......
......@@ -3,13 +3,13 @@
* WebSocket connection to h's real-time API.
*/
const { createSelector } = require('reselect');
import { createSelector } from 'reselect';
const { actionTypes } = require('../util');
import { actionTypes } from '../util';
const annotations = require('./annotations');
const groups = require('./groups');
const viewer = require('./viewer');
import annotations from './annotations';
import groups from './groups';
import viewer from './viewer';
function init() {
return {
......@@ -172,7 +172,7 @@ function hasPendingDeletion(state, id) {
return state.realTimeUpdates.pendingDeletions.hasOwnProperty(id);
}
module.exports = {
export default {
init,
namespace: 'realTimeUpdates',
update,
......
......@@ -14,15 +14,14 @@
* @property {string} displayName - User's display name
*/
const { createSelector } = require('reselect');
const immutable = require('seamless-immutable');
import { createSelector } from 'reselect';
import immutable from 'seamless-immutable';
const arrayUtil = require('../../util/array');
const metadata = require('../../util/annotation-metadata');
const { toSet } = require('../../util/array');
const uiConstants = require('../../ui-constants');
const util = require('../util');
import uiConstants from '../../ui-constants';
import * as metadata from '../../util/annotation-metadata';
import * as arrayUtil from '../../util/array';
import { toSet } from '../../util/array';
import * as util from '../util';
/**
* Default starting tab.
......@@ -500,7 +499,7 @@ function focusModeUserPrettyName(state) {
}
}
module.exports = {
export default {
init: init,
namespace: 'selection',
update: update,
......
const util = require('../util');
import * as util from '../util';
function init() {
/**
......@@ -65,7 +65,7 @@ function profile(state) {
return state.session;
}
module.exports = {
export default {
init,
namespace: 'session',
update,
......
......@@ -8,7 +8,7 @@
* may be "active" (open) at one time.
*/
const util = require('../util');
import * as util from '../util';
function init() {
return {
......@@ -111,7 +111,7 @@ function isSidebarPanelOpen(state, panelName) {
return state.sidebarPanels.activePanelName === panelName;
}
module.exports = {
export default {
namespace: 'sidebarPanels',
init: init,
update: update,
......
const createStore = require('../../create-store');
const activity = require('../activity');
import createStore from '../../create-store';
import activity from '../activity';
describe('sidebar/store/modules/activity', () => {
let store;
......
const annotations = require('../annotations');
const createStore = require('../../create-store');
const drafts = require('../drafts');
const fixtures = require('../../../test/annotation-fixtures');
const metadata = require('../../../util/annotation-metadata');
const groups = require('../groups');
const selection = require('../selection');
const session = require('../session');
const viewer = require('../viewer');
const uiConstants = require('../../../ui-constants');
import * as fixtures from '../../../test/annotation-fixtures';
import uiConstants from '../../../ui-constants';
import * as metadata from '../../../util/annotation-metadata';
import createStore from '../../create-store';
import annotations from '../annotations';
import drafts from '../drafts';
import groups from '../groups';
import selection from '../selection';
import session from '../session';
import viewer from '../viewer';
const { actions, selectors } = annotations;
......
const createStore = require('../../create-store');
const directLinked = require('../direct-linked');
import createStore from '../../create-store';
import directLinked from '../direct-linked';
describe('sidebar/store/modules/direct-linked', () => {
let store;
......
const immutable = require('seamless-immutable');
import immutable from 'seamless-immutable';
const drafts = require('../drafts');
const annotations = require('../annotations');
const selection = require('../selection');
const { Draft } = require('../drafts');
const createStore = require('../../create-store');
import createStore from '../../create-store';
import annotations from '../annotations';
import drafts from '../drafts';
import { Draft } from '../drafts';
import selection from '../selection';
const fixtures = immutable({
draftWithText: {
......
const frames = require('../frames');
const createStore = require('../../create-store');
import createStore from '../../create-store';
import frames from '../frames';
describe('sidebar/store/modules/frames', function() {
let store;
......
const immutable = require('seamless-immutable');
import immutable from 'seamless-immutable';
const createStore = require('../../create-store');
const groups = require('../groups');
const session = require('../session');
import createStore from '../../create-store';
import groups from '../groups';
import session from '../session';
describe('sidebar/store/modules/groups', () => {
const publicGroup = immutable({
......
const links = require('../links');
import links from '../links';
const init = links.init;
const update = links.update.UPDATE_LINKS;
......
const createStore = require('../../create-store');
const annotations = require('../annotations');
const groups = require('../groups');
const realTimeUpdates = require('../real-time-updates');
const { $imports } = require('../real-time-updates');
const selection = require('../selection');
import createStore from '../../create-store';
import annotations from '../annotations';
import groups from '../groups';
import realTimeUpdates from '../real-time-updates';
import { $imports } from '../real-time-updates';
import selection from '../selection';
const { removeAnnotations } = annotations.actions;
const { focusGroup } = groups.actions;
......@@ -28,13 +27,19 @@ describe('sidebar/store/modules/real-time-updates', () => {
$imports.$mock({
'./annotations': {
selectors: { annotationExists: fakeAnnotationExists },
default: {
selectors: { annotationExists: fakeAnnotationExists },
},
},
'./groups': {
selectors: { focusedGroupId: fakeFocusedGroupId },
default: {
selectors: { focusedGroupId: fakeFocusedGroupId },
},
},
'./viewer': {
selectors: { isSidebar: fakeIsSidebar },
default: {
selectors: { isSidebar: fakeIsSidebar },
},
},
});
});
......
const annotations = require('../annotations');
const createStore = require('../../create-store');
const selection = require('../selection');
const uiConstants = require('../../../ui-constants');
import uiConstants from '../../../ui-constants';
import createStore from '../../create-store';
import annotations from '../annotations';
import selection from '../selection';
describe('sidebar/store/modules/selection', () => {
let store;
......
const createStore = require('../../create-store');
const session = require('../session');
import createStore from '../../create-store';
import session from '../session';
const { init } = session;
......
const createStore = require('../../create-store');
const sidebarPanels = require('../sidebar-panels');
import createStore from '../../create-store';
import sidebarPanels from '../sidebar-panels';
describe('sidebar/store/modules/sidebar-panels', () => {
let store;
......
const viewer = require('../viewer');
const createStore = require('../../create-store');
import createStore from '../../create-store';
import viewer from '../viewer';
describe('store/modules/viewer', function() {
let store;
......
const util = require('../util');
import * as util from '../util';
/**
* This module defines actions and state related to the display mode of the
......@@ -50,7 +50,7 @@ function isSidebar(state) {
return state.viewer.isSidebar;
}
module.exports = {
export default {
init: init,
namespace: 'viewer',
update: update,
......
const createStore = require('../create-store');
import createStore from '../create-store';
const A = 0;
......
/* eslint-disable no-console */
const redux = require('redux');
import * as redux from 'redux';
const debugMiddleware = require('../debug-middleware');
import debugMiddleware from '../debug-middleware';
function id(state) {
return state;
......
const immutable = require('seamless-immutable');
import immutable from 'seamless-immutable';
const storeFactory = require('../index');
const annotationFixtures = require('../../test/annotation-fixtures');
const uiConstants = require('../../ui-constants');
import * as annotationFixtures from '../../test/annotation-fixtures';
import uiConstants from '../../ui-constants';
import storeFactory from '../index';
const defaultAnnotation = annotationFixtures.defaultAnnotation;
const newAnnotation = annotationFixtures.newAnnotation;
......
const { mount } = require('enzyme');
const { createStore } = require('redux');
const { createElement } = require('preact');
const { act } = require('preact/test-utils');
import { mount } from 'enzyme';
import { createElement } from 'preact';
import { act } from 'preact/test-utils';
import { createStore } from 'redux';
const useStore = require('../use-store');
const { $imports } = useStore;
import useStore, { $imports } from '../use-store';
const initialState = { value: 10, otherValue: 20 };
const reducer = (state = initialState, action) => {
......
const util = require('../util');
import * as util from '../util';
const fixtures = {
update: {
......
/* global process */
const shallowEqual = require('shallowequal');
const { useEffect, useRef, useReducer } = require('preact/hooks');
import { useEffect, useRef, useReducer } from 'preact/hooks';
import shallowEqual from 'shallowequal';
const { useService } = require('../util/service-context');
const warnOnce = require('../../shared/warn-once');
import warnOnce from '../../shared/warn-once';
import { useService } from '../util/service-context';
/**
* Hook for accessing state or actions from the store inside a component.
......@@ -35,7 +35,7 @@ const warnOnce = require('../../shared/warn-once');
* and/or actions extracted from the store.
* @return {T} - The result of `callback(store)`
*/
function useStore(callback) {
export default function useStore(callback) {
const store = useService('store');
// Store the last-used callback in a ref so we can access it in the effect
......@@ -84,5 +84,3 @@ function useStore(callback) {
return lastResult.current;
}
module.exports = useStore;
/**
* Return an object where each key in `updateFns` is mapped to the key itself.
*/
function actionTypes(updateFns) {
export function actionTypes(updateFns) {
return Object.keys(updateFns).reduce(function(types, key) {
types[key] = key;
return types;
......@@ -15,7 +15,7 @@ function actionTypes(updateFns) {
* @param {Object} actionToUpdateFn - Object mapping action names to update
* functions.
*/
function createReducer(actionToUpdateFn) {
export function createReducer(actionToUpdateFn) {
return (state = {}, action) => {
const fn = actionToUpdateFn[action.type];
if (!fn) {
......@@ -39,7 +39,7 @@ function createReducer(actionToUpdateFn) {
* level. The keys to this object are functions that call the original
* selectors with the `state` argument set to the current value of `getState()`.
*/
function bindSelectors(namespaces, getState) {
export function bindSelectors(namespaces, getState) {
const totalSelectors = {};
Object.keys(namespaces).forEach(namespace => {
const selectors = namespaces[namespace].selectors;
......@@ -53,9 +53,3 @@ function bindSelectors(namespaces, getState) {
});
return totalSelectors;
}
module.exports = {
actionTypes,
bindSelectors,
createReducer,
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment