TASK: refactor System reducer to use TypeScript (#2215)

package.json

@@ -72,7 +72,6 @@
     "tslib": "^1.9.3",
     "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.15.0",
-    "tslint-immutable": "^4.7.0",
     "tslint-react": "^3.6.0",
     "typescript": "^3.0.1",
     "watch": "^1.0.2",
@@ -114,6 +113,7 @@
     "hash-sum": "^1.0.2",
     "hashlru": "2.2.0",
     "he": "^1.1.1",
+    "immer": "^1.7.4",
     "immutable": "^3.8.0",
     "lodash.assign": "^4.2.0",
     "lodash.debounce": "^4.0.8",
@@ -167,6 +167,7 @@
     "redux-saga": "^0.15.0",
     "regenerator": "^0.8.46",
     "reselect": "^3.0.1",
+    "typesafe-actions": "^2.0.4",
     "url-loader": "^1.0.1",
     "uuid": "^3.2.1",
     "whatwg-fetch": "^2.0.0"

packages/neos-ui-redux-store/src/System/index.ts

@@ -0,0 +1,67 @@
+import produce from 'immer';
+import {$get} from 'plow-js';
+import {action as createAction, ActionType} from 'typesafe-actions';
+
+//
+// Export the subreducer state shape interface
+//
+export interface State {
+    readonly authenticationTimeout: boolean;
+}
+
+const defaultState: State = {
+    authenticationTimeout: false
+};
+
+//
+// Export the action types
+//
+export const actionTypes = {
+    BOOT: '@neos/neos-ui/System/BOOT',
+    INIT: '@neos/neos-ui/System/INIT',
+    READY: '@neos/neos-ui/System/READY',
+    AUTHENTICATION_TIMEOUT: '@neos/neos-ui/System/AUTHENTICATION_TIMEOUT',
+    REAUTHENTICATION_SUCCEEDED: '@neos/neos-ui/System/REAUTHENTICATION_SUCCEEDED'
+};
+
+//
+// Export the actions
+//
+export const actions = {
+    boot: () => createAction(actionTypes.BOOT),
+    init: (state: State) => createAction(actionTypes.INIT, state),
+    ready: () => createAction(actionTypes.READY),
+    authenticationTimeout: () => createAction(actionTypes.AUTHENTICATION_TIMEOUT),
+    reauthenticationSucceeded: () => createAction(actionTypes.REAUTHENTICATION_SUCCEEDED)
+};
+
+//
+// Export the union type of all actions
+//
+export type Action = ActionType<typeof actions>;
+
+//
+// Export the reducer
+//
+export const reducer = (state: State = defaultState, action: Action) => {
+    return produce(state, draft => {
+        switch (action.type) {
+            case actionTypes.INIT:
+                draft.authenticationTimeout = false;
+                break;
+            case actionTypes.AUTHENTICATION_TIMEOUT:
+                draft.authenticationTimeout = true;
+                break;
+            case actionTypes.REAUTHENTICATION_SUCCEEDED:
+                draft.authenticationTimeout = false;
+                break;
+        }
+    });
+};
+
+//
+// Export the selectors
+//
+export const selectors = {
+    authenticationTimeout: (state: any) => $get(['system'], state).authenticationTimeout
+};

packages/neos-ui-redux-store/src/index.js

@@ -7,9 +7,28 @@ import * as System from './System/index';
 import * as UI from './UI/index';
 import * as User from './User/index';
 import * as ServerFeedback from './ServerFeedback/index';
+import {$set, $get} from 'plow-js';
 
 const all = {Changes, CR, System, UI, User, ServerFeedback};
 
+// TODO: we'll get rid of untyped reducers soonish, this is just for transition period
+const untypedReducersSubparts = {Changes, CR, UI, User, ServerFeedback};
+const untypedReducers = map(k => untypedReducersSubparts[k].reducer, keys(untypedReducersSubparts));
+
+// We do something similar to `combineReducers` from redux here to pass a subpart of the state to a child reducer
+// Key in this object is the substate path, and the value is the reducer
+const typedReducersSubparts = {
+    system: System.reducer
+};
+const typedReducers = map(
+    k => (state, action) => $set(
+        k,
+        typedReducersSubparts[k]($get(k, state), action),
+        state
+    ),
+    keys(typedReducersSubparts)
+);
+
 //
 // Export the actionTypes
 //
@@ -23,7 +42,7 @@ export const actions = map(a => a.actions, all);
 //
 // Export the reducer
 //
-export const reducer = handleActions(map(k => all[k].reducer, keys(all)));
+export const reducer = handleActions([...untypedReducers, ...typedReducers]);
 
 //
 // Export the selectors

packages/neos-ui/src/plow.d.ts

@@ -0,0 +1,11 @@
+// Temporary Plow typings
+// TODO: move to Plow
+declare module 'plow-js' {
+    export function $get<K1 extends keyof S, S>(path: [K1], state: S): S[K1];
+    export function $get<K1 extends keyof S, K2 extends keyof S[K1], S>(path: [K1, K2], state: S): S[K1][K2];
+    export function $get<K1 extends keyof S, K2 extends keyof S[K1], K3 extends keyof S[K1][K2], S>(path: [K1, K2, K3], state: S): S[K1][K2][K3];
+
+    export function $set<K1 extends keyof S, V extends S[K1], S>(path: [K1], value: V, state: S): S;
+    export function $set<K1 extends keyof S, K2 extends keyof S[K1], V extends S[K1][K2], S>(path: [K1, K2], value: V, state: S): S;
+    export function $set<K1 extends keyof S, K2 extends keyof S[K1], K3 extends keyof S[K1][K2], V extends S[K1][K2][K3], S>(path: [K1, K2, K3], value: V, state: S): S;
+}

packages/utils-redux/src/index.d.ts

@@ -0,0 +1,3 @@
+declare module '@neos-project/utils-redux' {
+    export function handleActions<S>(handlers: Object): (state: S, action: string) => S;
+}

tslint.json

@@ -1,8 +1,10 @@
 {
-  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier", "tslint-immutable"],
+  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
   "rules": {
     "interface-name": false,
     "member-ordering": false,
+    "ordered-imports": false,
+    "object-literal-sort-keys": false,
     "no-console": true,
     "no-debugger": true,
     "no-delete": true,