add example feature template to docs folder

5 files changed, 97 insertions, 0 deletions

diff --git a/docs/example-feature/actions.js b/docs/example-feature/actions.js
new file mode 100644
index 000000000..c4d49b708
--- /dev/null
+++ b/docs/example-feature/actions.js
@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../src/actions/lib/actions';
+
+export const exampleFeatureActions = createActionsFromDefinitions({
+  greet: {
+    name: PropTypes.string.isRequired,
+  },
+}, PropTypes.checkPropTypes);
+
+export default exampleFeatureActions;
diff --git a/docs/example-feature/api.js b/docs/example-feature/api.js
new file mode 100644
index 000000000..65207e877
--- /dev/null
+++ b/docs/example-feature/api.js
@@ -0,0 +1,5 @@
+export default {
+  async getName() {
+    return Promise.resolve('Franz');
+  },
+};
diff --git a/docs/example-feature/index.js b/docs/example-feature/index.js
new file mode 100644
index 000000000..af859af26
--- /dev/null
+++ b/docs/example-feature/index.js
@@ -0,0 +1,36 @@
+import { reaction, runInAction } from 'mobx';
+import { ExampleFeatureStore } from './store';
+import state, { resetState } from './state';
+import api from './api';
+
+const debug = require('debug')('Franz:feature:EXAMPLE_FEATURE');
+
+let store = null;
+
+export default function initAnnouncements(stores, actions) {
+  const { features } = stores;
+
+  // Toggle workspace feature
+  reaction(
+    () => (
+      features.features.isExampleFeatureEnabled
+    ),
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `EXAMPLE_FEATURE` feature');
+        store = new ExampleFeatureStore(stores, api, actions, state);
+        store.initialize();
+        runInAction(() => { state.isFeatureActive = true; });
+      } else if (store) {
+        debug('Disabling `EXAMPLE_FEATURE` feature');
+        runInAction(() => { state.isFeatureActive = false; });
+        store.teardown();
+        store = null;
+        resetState(); // Reset state to default
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/docs/example-feature/state.js b/docs/example-feature/state.js
new file mode 100644
index 000000000..676717da7
--- /dev/null
+++ b/docs/example-feature/state.js
@@ -0,0 +1,14 @@
+import { observable } from 'mobx';
+
+const defaultState = {
+  name: null,
+  isFeatureActive: false,
+};
+
+export const exampleFeatureState = observable(defaultState);
+
+export function resetState() {
+  Object.assign(exampleFeatureState, defaultState);
+}
+
+export default exampleFeatureState;
diff --git a/docs/example-feature/store.js b/docs/example-feature/store.js
new file mode 100644
index 000000000..d8acfdca3
--- /dev/null
+++ b/docs/example-feature/store.js
@@ -0,0 +1,32 @@
+import { action, observable, reaction } from 'mobx';
+import Store from '../../src/stores/lib/Store';
+import Request from '../../src/stores/lib/Request';
+
+const debug = require('debug')('Franz:feature:EXAMPLE_FEATURE:store');
+
+export class ExampleFeatureStore extends Store {
+  @observable getNameRequest = new Request(this.api, 'getName');
+
+  constructor(stores, api, actions, state) {
+    super(stores, api, actions);
+    this.state = state;
+  }
+
+  setup() {
+    debug('fetching name from api');
+    this.getNameRequest.execute();
+
+    // Update the name on the state when the request resolved
+    reaction(
+      () => this.getNameRequest.result,
+      name => this._setName(name),
+    );
+  }
+
+  @action _setName = (name) => {
+    debug('setting name', name);
+    this.state.name = name;
+  };
+}
+
+export default ExampleFeatureStore;