Port stock-ticker scenario

Author: markerikson

src/scenarios/stock-ticker/App.jsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import Slice from "./Slice";
+import { updateRandomPairInSlice } from "./pairActions";
+
+let slices;
+
+const mapState = state => {
+  if (!slices) {
+    slices = Array(Object.keys(state).length).fill(0);
+  }
+
+  return { slices };
+};
+
+const mapDispatch = { updateRandomPairInSlice };
+
+class App extends React.Component {
+  render() {
+    return (
+      <div>
+        <button onClick={this.props.updateRandomPairInSlice}>
+          Update Random Pair
+        </button>
+        <div className="row">
+          {this.props.slices.map((slice, idx) => {
+            return (
+              <div className="col-lg-4" key={idx}>
+                <Slice idx={idx} />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+}
+App.displayName = "App";
+
+export default connect(
+  mapState,
+  mapDispatch
+)(App);

src/scenarios/stock-ticker/Pair.jsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { connect } from "react-redux";
+
+const mapState = (state, props) => state[props.sliceId][props.pairId];
+
+class Pair extends React.Component {
+  state = {
+    direction: "up",
+    value: this.props.value
+  };
+
+  static getDerivedStateFromProps(props, state) {
+    if (props.value === state.value) return null;
+
+    const direction = props.value > state.value ? "up" : "down";
+
+    return {
+      value: props.value,
+      direction
+    };
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.value !== nextProps.value;
+  }
+
+  render() {
+    const { direction } = this.state;
+
+    return (
+      <li className="list-group-item">
+        <span>{this.props.name}</span>
+        <span
+          className={
+            "pull-right " +
+            (direction === "up" ? "text-success" : "text-warning")
+          }
+        >
+          <span
+            className={
+              "glyphicon " +
+              (direction === "up"
+                ? "glyphicon-arrow-up"
+                : "glyphicon-arrow-down")
+            }
+          />
+          <span>{this.props.value}</span>
+        </span>
+      </li>
+    );
+  }
+}
+Pair.displayName = "Pair";
+
+export default connect(mapState)(Pair);

src/scenarios/stock-ticker/Slice.jsx

@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+
+import Pair from "./Pair";
+import { fillPairs } from "./pairActions";
+
+const actions = { fillPairs };
+
+const mapStateToProps = (state, props) => {
+  return {
+    slice: state[props.idx]
+  };
+};
+
+class Slice extends Component {
+  state = {};
+
+  componentDidMount = () => {
+    //this.props.fillPairs(this.props.idx);
+  };
+
+  render() {
+    const { slice, idx } = this.props;
+    return (
+      <ul className="list-group">
+        {slice.map(pair => {
+          return <Pair key={pair.id} sliceId={idx} pairId={pair.id} />;
+        })}
+      </ul>
+    );
+  }
+}
+Slice.displayName = "Slice";
+
+export default connect(
+  mapStateToProps,
+  actions
+)(Slice);

src/scenarios/stock-ticker/constants.js

@@ -0,0 +1,5 @@
+export const FILL_PAIRS = "fill-pairs";
+export const UPDATE_PAIR = "update-pair";
+
+export const NUMBER_OF_SLICES = 4;
+export const NUM_ENTRIES = 3500;

src/scenarios/stock-ticker/index.tsx

@@ -0,0 +1,76 @@
+import React, { useLayoutEffect } from 'react'
+import { configureStore, AnyAction } from '@reduxjs/toolkit'
+
+import { renderApp } from '../../common'
+
+import App from './App'
+import * as c from './constants'
+import { updatePair, updateRandomPairInSlice, fillPairs } from './pairActions'
+
+const initialState: any = []
+
+const highOrderSliceReducer =
+  (sliceId = '') =>
+  (state = initialState, action: AnyAction) => {
+    switch (action.type) {
+      case `${c.FILL_PAIRS}_${sliceId}`: {
+        return [...action.pairs]
+      }
+      case `${c.UPDATE_PAIR}_${sliceId}`: {
+        return state.map((pair: any) => {
+          return pair.id === action.id ? { ...pair, value: action.value } : pair
+        })
+      }
+      default: {
+        return state
+      }
+    }
+  }
+
+const reducers = Array(c.NUMBER_OF_SLICES)
+  .fill(0)
+  .reduce((acc, curr, i) => {
+    acc[i] = highOrderSliceReducer(i.toString())
+    return acc
+  }, {})
+
+const store = configureStore({
+  reducer: reducers,
+  middleware: (gdm) =>
+    gdm({
+      immutabilityCheck: false,
+      serializableCheck: false,
+    }),
+})
+
+for (let i = 0; i < c.NUMBER_OF_SLICES; i++) {
+  // @ts-ignore
+  store.dispatch(fillPairs(i))
+}
+
+function addTweetInRandomSlice() {
+  const sliceId = Math.floor(Math.random() * c.NUMBER_OF_SLICES)
+  // @ts-ignore
+  store.dispatch(addTweet(sliceId))
+}
+
+function doRandomUpdate() {
+  store.dispatch(updateRandomPairInSlice())
+}
+
+const StockTickerApp = () => {
+  useLayoutEffect(() => {
+    setInterval(doRandomUpdate, 13)
+
+    setInterval(doRandomUpdate, 21)
+
+    setInterval(doRandomUpdate, 34)
+
+    setInterval(doRandomUpdate, 55)
+  }, [])
+
+  return <App />
+}
+
+// @ts-ignore
+renderApp(StockTickerApp, store)

src/scenarios/stock-ticker/pairActions.js

@@ -0,0 +1,48 @@
+import Chance from "chance";
+import * as c from "./constants";
+
+const chance = new Chance();
+
+function createPairs() {
+  const pairs = [];
+  const entries = Math.floor(c.NUM_ENTRIES / c.NUMBER_OF_SLICES);
+  for (let i = 0; i < entries; i++) {
+    const pair = chance.currency_pair();
+    pairs.push({
+      id: i,
+      value: Math.random(),
+      name: pair[0].code + pair[1].code
+    });
+  }
+  return pairs;
+}
+
+export function fillPairs(id) {
+  return {
+    type: `${c.FILL_PAIRS}_${id}`,
+    pairs: createPairs()
+  };
+}
+
+// function getRandIndex () {
+//     return Math.floor(Math.random() * Math.floor(c.NUM_ENTRIES / c.NUMBER_OF_SLICES))
+// }
+
+export function updatePair(sliceId, pairId) {
+  //console.log(sliceId, pairId);
+  return {
+    type: `${c.UPDATE_PAIR}_${sliceId}`,
+    id: pairId,
+    value: Math.random()
+  };
+}
+
+export function updateRandomPairInSlice() {
+  return (dispatch, getState) => {
+    const pairId = Math.floor(
+      Math.random() * (c.NUM_ENTRIES / c.NUMBER_OF_SLICES)
+    );
+    const sliceId = Math.floor(Math.random() * c.NUMBER_OF_SLICES);
+    dispatch(updatePair(sliceId, pairId));
+  };
+}

src/scenarios/stock-ticker/pairsReducer.js

@@ -0,0 +1,32 @@
+import { combineReducers } from "redux";
+import * as c from "./constants";
+
+const initialState = [];
+
+const highOrderSliceReducer = (sliceId = "") => (
+  state = initialState,
+  action
+) => {
+  switch (action.type) {
+    case `${c.FILL_PAIRS}_${sliceId}`: {
+      return [...action.pairs];
+    }
+    case `${c.UPDATE_PAIR}_${sliceId}`: {
+      return state.map(pair => {
+        return pair.id === action.id ? { ...pair, value: action.value } : pair;
+      });
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+const reducers = Array(c.NUMBER_OF_SLICES)
+  .fill(0)
+  .reduce((acc, curr, i) => {
+    acc[i] = highOrderSliceReducer(i);
+    return acc;
+  }, {});
+
+export default combineReducers(reducers);