Twitterlite refactored (#11)

* setup

* stockticker refactored

* randomized slice and pair to update"

* twitterlite refactored

Author: Taran Vohra

package-lock.json

@@ -10,6 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="bootstrap.min.css" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

sources/twitter-lite/public/bootstrap.min.css

@@ -1,26 +1,26 @@
 import React, { Component } from 'react';
 import './App.css';
-import TwitterLite from './TwitterLite'
-import SpecialContext from './SpecialContext'
-
 import { connect } from 'react-redux'
+import Slice from './Slice';
 
-class App extends Component {
-  componentDidMount() {
-    setInterval(() => this.props.tweet())
-  }
 
+const mapState = (state) => ({  slices: Array(Object.keys(state).length).fill(0) });
+
+class App extends Component {
   render() {
     return (
-      <div>
-        {this.props.tweets.map((tweet, i) => <TwitterLite tweet={tweet} />)}
+      <div className='row'>
+        {this.props.slices.map((slice, idx) => {
+          return (
+              <div className='col-lg-4' key={idx}>
+                  <Slice idx={idx} />
+              </div>
+          )
+        })}
       </div>
     );
   }
 }
 
-function tweet() {
-  return { type: 'tweet', tweet: 'fabulous' }
-}
 
-export default connect(tweets => ({ tweets }), { tweet })(App);
+export default connect(mapState)(App);

sources/twitter-lite/public/index.html

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import TwitterLite from './TwitterLite';
+
+
+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((tweet) => {
+                    return (
+                        <TwitterLite sliceId={idx} tweet={tweet} />
+                    )
+                })}
+            </ul>
+        );
+    }
+}
+
+export default connect(mapStateToProps)(Slice);

sources/twitter-lite/src/App.js

@@ -0,0 +1,8 @@
+import * as c from './constants'
+
+export function addTweet (id) {
+    return {
+      type: `${c.ADD_TWEET}_${id}`,
+      tweet: 'fabulous'
+    }
+  }

sources/twitter-lite/src/Slice.jsx

@@ -0,0 +1,4 @@
+export const ADD_TWEET = 'add-tweet'
+
+export const NUMBER_OF_SLICES = 3;
+// export const NUM_ENTRIES = 3500;

sources/twitter-lite/src/actions.js

@@ -2,21 +2,49 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import 'fps-emit';
-import { createStore } from 'redux'
+import { createStore, combineReducers } from 'redux'
 import { Provider } from 'react-redux'
 import App from './App';
 import SpecialContext from './SpecialContext'
 
-const store = createStore((state = [], action) => {
-  if (action.type === 'tweet') {
-    return [...state, action.tweet]
+import { addTweet } from './actions';
+
+import * as c from './constants';
+
+const highOrderSliceReducer = (sliceId = '') => (state = [], action) => {
+  switch (action.type) {
+    case `${c.ADD_TWEET}_${sliceId}`: {
+      return [...state, action.tweet];
+    }
+    default: {
+      return state
+    }
   }
-  return state
-})
+}
+
+const reducers = Array(c.NUMBER_OF_SLICES).fill(0).reduce((acc, curr, i) => {
+  acc[i] = highOrderSliceReducer(i);
+  return acc;
+}, {});
 
+
+const store = createStore(combineReducers(reducers));
 ReactDOM.render(
   <Provider store={store}>
    <App />
   </Provider>,
   document.getElementById('root')
 );
+
+function addTweetInRandomSlice() {
+  const sliceId = Math.floor(Math.random() * c.NUMBER_OF_SLICES);
+  store.dispatch(addTweet(sliceId));
+}
+
+setInterval(addTweetInRandomSlice, 13)
+
+setInterval(addTweetInRandomSlice, 21)
+
+setInterval(addTweetInRandomSlice, 34)
+
+setInterval(addTweetInRandomSlice, 55)