@reactables/examples 0.4.0-alpha.1

package/README.md

@@ -0,0 +1,7 @@
+# Reactables Examples 
+
+## Description
+
+Three examples using [Reactables Core](https://github.com/reactables/reactables/tree/main/packages/core)
+
+See [Reactables Examples](https://github.com/reactables/reactables/tree/main/packages/core#examples)

package/dist/Models/ObservableOrPromise.d.ts

@@ -0,0 +1,2 @@
+import { Observable } from 'rxjs';
+export type ObservableOrPromise<T> = Observable<T> | Promise<T>;

package/dist/RxCounter/RxCounter.d.ts

@@ -0,0 +1,10 @@
+import { Reactable } from '@reactables/core';
+interface CounterState {
+    count: number;
+}
+type CounterActions = {
+    increment: () => void;
+    reset: () => void;
+};
+export declare const RxCounter: () => Reactable<CounterState, CounterActions>;
+export {};

package/dist/RxCounter/RxCounter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/RxCounter/index.d.ts

@@ -0,0 +1 @@
+export { RxCounter } from './RxCounter';

package/dist/RxEventTickets/Models/EventTypes.d.ts

@@ -0,0 +1,9 @@
+export declare enum EventTypes {
+    ChiliCookOff = "Chili Cook Off",
+    GrammarRodeo = "Grammar Rodeo",
+    ItchyAndScratchyMovie = "Itchy And Scratchy Movie"
+}
+export interface FetchPricePayload {
+    event: EventTypes;
+    qty: number;
+}

package/dist/RxEventTickets/RxEventTickets.d.ts

@@ -0,0 +1,19 @@
+import { Reactable } from '@reactables/core';
+import { EventTypes, FetchPricePayload } from './Models/EventTypes';
+import { ObservableOrPromise } from '../Models/ObservableOrPromise';
+export interface ControlState {
+    selectedEvent: EventTypes;
+    qty: number;
+}
+export interface EventTicketsState {
+    controls: ControlState;
+    calculating: boolean;
+    price: number | null;
+}
+export declare const initialState: EventTicketsState;
+type EventTicketsActions = {
+    selectEvent: (event: EventTypes) => void;
+    setQty: (qty: number) => void;
+};
+export declare const RxEventTickets: (getPriceApi: (payload: FetchPricePayload) => ObservableOrPromise<number>) => Reactable<EventTicketsState, EventTicketsActions>;
+export {};

package/dist/RxEventTickets/RxEventTickets.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/RxEventTickets/index.d.ts

@@ -0,0 +1,2 @@
+export { RxEventTickets, EventTicketsState } from './RxEventTickets';
+export { EventTypes, FetchPricePayload } from './Models/EventTypes';

package/dist/RxTodoUpdates/Models/Todos.d.ts

@@ -0,0 +1,12 @@
+export type TodoStatus = 'done' | 'incomplete' | 'in progress';
+export interface Todo {
+    id: number;
+    description: string;
+    status: TodoStatus;
+    updating: boolean;
+}
+export type UpdateTodoPayload = {
+    todoId: number;
+    status: TodoStatus;
+};
+export type UpdateTodoPayloadSuccess = UpdateTodoPayload;

package/dist/RxTodoUpdates/RxTodoUpdates.d.ts

@@ -0,0 +1,12 @@
+import { Reactable } from '@reactables/core';
+import { UpdateTodoPayload, UpdateTodoPayloadSuccess, Todo } from './Models/Todos';
+import { ObservableOrPromise } from '../Models/ObservableOrPromise';
+interface TodoUpdatesState {
+    todos: Todo[];
+}
+export declare const initialState: TodoUpdatesState;
+type TodoUpdatesActions = {
+    sendTodoStatusUpdate: (payload: UpdateTodoPayload) => void;
+};
+export declare const RxTodoUpdates: (updateTodoApi: (payload: UpdateTodoPayload) => ObservableOrPromise<UpdateTodoPayloadSuccess>) => Reactable<TodoUpdatesState, TodoUpdatesActions>;
+export {};

package/dist/RxTodoUpdates/RxTodoUpdates.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/RxTodoUpdates/index.d.ts

@@ -0,0 +1,2 @@
+export { RxTodoUpdates } from './RxTodoUpdates';
+export { TodoStatus, Todo, UpdateTodoPayload } from './Models/Todos';

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './RxCounter';
+export * from './RxTodoUpdates';
+export * from './RxEventTickets';

package/dist/index.js

@@ -0,0 +1,175 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@reactables/core');
+var operators = require('rxjs/operators');
+
+var RxCounter = function () {
+    return core.RxBuilder({
+        initialState: { count: 0 },
+        reducers: {
+            increment: function (state) { return ({ count: state.count + 1 }); },
+            reset: function () { return ({ count: 0 }); }
+        }
+    });
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var initialState$1 = {
+    todos: [
+        {
+            id: 1,
+            description: 'Pick Up Bart',
+            status: 'incomplete',
+            updating: false
+        },
+        {
+            id: 2,
+            description: 'Moe the lawn',
+            status: 'incomplete',
+            updating: false
+        },
+    ]
+};
+var RxTodoUpdates = function (updateTodoApi) {
+    return core.RxBuilder({
+        initialState: initialState$1,
+        reducers: {
+            sendTodoStatusUpdate: {
+                reducer: function (state, _a) {
+                    var todoId = _a.payload.todoId;
+                    return ({
+                        todos: state.todos.reduce(function (acc, todo) { return acc.concat(todo.id === todoId ? __assign(__assign({}, todo), { updating: true }) : todo); }, [])
+                    });
+                },
+                effects: function (payload) { return ({
+                    key: payload.todoId,
+                    effects: [
+                        function (actions$) {
+                            return actions$.pipe(
+                            // Call todo API Service - switchMap operator cancels previous pending call if a new one is initiated
+                            operators.switchMap(function (_a) {
+                                var payload = _a.payload;
+                                return updateTodoApi(payload);
+                            }), 
+                            // Map success response to appropriate action
+                            operators.map(function (payload) { return ({ type: 'todoStatusUpdateSuccess', payload: payload }); }));
+                        },
+                    ]
+                }); }
+            },
+            todoStatusUpdateSuccess: function (state, _a) {
+                var _b = _a.payload, todoId = _b.todoId, status = _b.status;
+                return ({
+                    todos: state.todos.reduce(function (acc, todo) {
+                        return acc.concat(todo.id === todoId ? __assign(__assign({}, todo), { status: status, updating: false }) : todo);
+                    }, [])
+                });
+            }
+        }
+    });
+};
+
+exports.EventTypes = void 0;
+(function (EventTypes) {
+    EventTypes["ChiliCookOff"] = "Chili Cook Off";
+    EventTypes["GrammarRodeo"] = "Grammar Rodeo";
+    EventTypes["ItchyAndScratchyMovie"] = "Itchy And Scratchy Movie";
+})(exports.EventTypes || (exports.EventTypes = {}));
+
+var initialState = {
+    controls: null,
+    calculating: false,
+    price: null
+};
+var RxEventTickets = function (getPriceApi) {
+    // Create a reactable for the controls
+    var rxControls = core.RxBuilder({
+        initialState: {
+            selectedEvent: exports.EventTypes.ChiliCookOff,
+            qty: 0
+        },
+        reducers: {
+            selectEvent: function (state, _a) {
+                var payload = _a.payload;
+                return (__assign(__assign({}, state), { selectedEvent: payload }));
+            },
+            setQty: function (state, _a) {
+                var payload = _a.payload;
+                return (__assign(__assign({}, state), { qty: payload }));
+            }
+        }
+    });
+    // Create reactable for combining controls and price info.
+    var state$ = core.RxBuilder({
+        // Add control changes as a source for second reactable
+        sources: [
+            rxControls.state$.pipe(operators.map(function (payload) { return ({ type: 'controlChange', payload: payload }); })),
+        ],
+        initialState: initialState,
+        reducers: {
+            controlChange: {
+                reducer: function (state, _a) {
+                    var payload = _a.payload;
+                    return (__assign(__assign({}, state), { controls: payload, calculating: true }));
+                },
+                effects: function () { return ({
+                    // Add effect for fetching price on controlChange
+                    effects: [
+                        function (actions$) {
+                            return actions$.pipe(operators.switchMap(function (_a) {
+                                var _b = _a.payload, event = _b.selectedEvent, qty = _b.qty;
+                                return getPriceApi({ event: event, qty: qty });
+                            }), 
+                            // Map success response to success action
+                            operators.map(function (price) { return ({ type: 'fetchPriceSuccess', payload: price }); }));
+                        },
+                    ]
+                }); }
+            },
+            fetchPriceSuccess: function (state, _a) {
+                var payload = _a.payload;
+                return (__assign(__assign({}, state), { calculating: false, price: payload }));
+            }
+        }
+    }).state$;
+    return {
+        state$: state$,
+        actions: rxControls.actions
+    };
+};
+
+exports.RxCounter = RxCounter;
+exports.RxEventTickets = RxEventTickets;
+exports.RxTodoUpdates = RxTodoUpdates;

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@reactables/examples",
+  "description": "Examples with reactables",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "jest",
+    "build": "rimraf dist && rollup --config",
+    "lint": "eslint --max-warnings 0 \"src/**/*.ts*\" && prettier --check src/",
+    "fix": "eslint --fix \"src/**/*.ts*\" && prettier --write \"src/**/*.(ts*|scss)\""
+  },
+  "author": "David Lai",
+  "license": "ISC",
+  "dependencies": {
+    "@reactables/core": "^0.4.0-alpha.1"
+  },
+  "peerDependencies": {
+    "rxjs": "^6.0.0 || ^7.0.0"
+  },
+  "version": "0.4.0-alpha.1"
+}