Merge pull request #5 from itReverie/playingWithState

Creating an external store to manage the state.

Author: itReverie

lib/components/App.js

@@ -2,31 +2,93 @@
 // I have my normal class component CLIENT SIDE
 import React from 'react';
 import PropTypes from 'prop-types';
+import pickBy from 'lodash.pickby';
 
 import ArticleList from './ArticleList';
+import SearchBar from './SearchBar';
+import Timestamp from './Timestamp';
 
 class App extends React.Component {
 
     //****** I need the following lines to expose the CONTEXT
     //to make the context api work we need to define the context type
-    static childContextTypes={
+    static childContextTypes = {
         store: PropTypes.object
     };
+
     //Getting the context
-    getChildContext(){
+    getChildContext() {
         return {
-            store:this.props.store};
+            store: this.props.store
+        };
     }
+
     //********
 
-    state= this.props.store.getState();
+    state = this.props.store.getState();
+
+    onStoreChange=()=>{
+        this.setState(this.props.store.getState);
+    }
+
+    componentDidMount(){
+        //we need to update the component state so the app component state is in sync to the store state
+        if(this.subsciptionId) {
+            this.subsciptionId = this.props.store.subscribe(this.onStoreChange);
+        }
+        this.props.store.startClock();
+    }
+
+    componentWillUnmount(){
+        this.props.store.unsubscribe(this.subscriptionId);
+        this.subscriptionId = null;
+    }
+
+    //In react we cannot return two elements unless
+    //Option 1. is in an array so we need to pass a Key elements
+    // render() {
+    //     return [
+    //         <SearchBar key="searchBar"/>,
+    //         <ArticleList key="articleList"
+    //             articles={this.state.articles}
+    //             store={this.props.store}
+    //         />
+    //     ];
+    // }
+
+    //Option 2. Wrap those components in a div
+    // return (
+    //      <div>
+    //          <SearchBar key="searchBar" doSearch={this.props.store.setSearchTerm}/>
+    //          <ArticleList key="articleList" articles={articles}
+    //                      store={this.props.store}/>
+    //      </div>
+    // );
+
+
+    // We can just update when the store state changes..this means we need to subscribe
+    // with a callback
+    // we can  make a StateApi an event emmiter (Flux)
+    // or manage subscriptions in the same object
 
     render() {
+        let { articles , searchTerm}=this.state;
+        //making the search case insensitive
+        const searchRegex = new RegExp(searchTerm, 'i');
+        if(searchTerm){
+            articles= pickBy(articles, (value) => {
+                return value.title.match(searchRegex) ||
+                     value.body.match(searchRegex);
+            });
+        }
         return (
-            <ArticleList
-                articles={this.state.articles}
-                store={this.props.store}
-            />
+            <div>
+                <Timestamp />
+                <SearchBar key="searchBar" />
+                <ArticleList key="articleList"
+                             articles={articles}
+                             />
+            </div>
         );
     }
 }

lib/components/SearchBar.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import debounce from 'lodash.debounce';//NOTE: we are just importing the debounce function from lodash not the whole package
+import storeProvider from './storeProvider';
+
+class SearchBar extends React.Component{
+
+    state={
+        searchTerm: ''
+    };
+
+    //A delay so I dont see every character is type but the end result
+    doSearch = debounce(()=> {
+        this.props.store.setSearchTerm(this.state.searchTerm);
+    },300)
+
+
+    handleSearch = (event) =>{
+        this.setState({ searchTerm: event.target.value}, ()=> {
+            this.doSearch();
+        });
+
+    };
+
+
+    //Option 1. We could read the value of the text typed by ref (getting the current DOM node)
+    // ref={(input) => this.searchInput = input}
+    //However, Option 2. It is more advisable to use the state for that
+    render(){
+        return (<input
+                        type="search"
+                        placeholder="Enter search term"
+                        value={this.state.searchTerm}
+                        onChange={this.handleSearch}/>);
+    }
+}
+
+//Connecting to the store
+export default (storeProvider())(SearchBar);

lib/components/Timestamp.js

@@ -0,0 +1,18 @@
+
+import React from 'react';
+import storeProvider from './storeProvider';
+
+class Timestamp extends React.Component{
+    render(){
+        return(<div>{this.props.timestamp.toString()}</div>);
+    }
+}
+
+function extraProps(store)
+{
+    return {
+        timestamp: store.getState().timestamp
+    };
+}
+
+export default storeProvider(extraProps) (Timestamp);

lib/components/storeProvider.js

@@ -7,12 +7,32 @@ import PropTypes from 'prop-types';
 //The new component could have a couple of new things as well
 //Having a function that calls another function in the arrow functions
 //Allow us to pass more parameters extra props
-const storeProvider = (extraProps) => (Component) => {
+//extraProps = () =>({}) We are making extra props a default parameter of empty if they dont pass me extra props.
 
-    return class extends React.Component{
+const storeProvider = (extraProps = () =>({})) => (Component) => {
+
+    return class extends React.PureComponent{
         static displayName = `${Component.name}Container`;
         static contextTypes = {store: PropTypes.object};
 
+
+        onStoreChange=()=>{
+            //Give the component the signal that it needs to re-render
+            this.forceUpdate();
+        }
+
+        componentDidMount(){
+            //we need to update the component state so the app component state is in sync to the store state
+            if(this.subsciptionId) {
+                this.subsciptionId = this.context.store.subscribe(this.onStoreChange);
+            }
+        }
+
+        componentWillUnmount(){
+            this.context.store.unsubscribe(this.subscriptionId);
+            this.subscriptionId = null;
+        }
+
         render(){
            return <Component
                {...this.props}

lib/state-api/lib/index.js

@@ -1,11 +1,22 @@
-//we are just converting the array data into object data
 class StateApi{
+
     constructor( rawData){
+        //we are  converting the array data into object data
         this.data = {
             articles: this.mapIntoObject(rawData.articles),
-            authors: this.mapIntoObject(rawData.authors)};
+            authors: this.mapIntoObject(rawData.authors),
+            searchTerm :'',
+            timestamp: new Date()};
+
+        this.subscriptions ={};
+
+        this.lastSubscriptionId=0;
+
+
     }
 
+
+
     mapIntoObject(arr){
         return  arr.reduce( (acc, curr)=> {
             acc[curr.id] = curr;
@@ -20,9 +31,53 @@ class StateApi{
     }
 
     // getState(){
+    //Return the data in objects
     getState= ()=>{
         return this.data;
     }
+
+    //The call back is what the subscriber is interested to be executed.
+    //Every time that data changes, please call this call back
+    subscribe =(callback) => {
+        this.lastSubscriptionId ++;
+        this.subscriptions[this.lastSubscriptionId] = callback;
+        return this.lastSubscriptionId;
+    };
+
+    //I am leaving the DOM tree so do not bother in notifying me of changes
+    //Remove me from your list
+    unsubscribe =(subscriptionId) => {
+           delete this.subscriptions[subscriptionId];
+    };
+
+    //Notify to all the places where we are using the state (data) that there have been changes
+    //We do that because react is a one way binding so we need to let him know
+    notifySubscribers =()=>{
+        Object.values(this.subscriptions).forEach((callback) => callback());
+    };
+
+    //Updatet the current state with the  new state changes
+    //Notify everybody
+    mergeWithState = (stateChange) =>{
+        this.data = {...this.data, ...stateChange};
+        this.notifySubscribers();
+    };
+
+
+    //if the state gets bigger or there are too many actions
+    //it is better to deal with the sate separate than the app.js
+    setSearchTerm = (searchTerm) => {
+
+        this.mergeWithState({
+            searchTerm,
+        });
+    };
+
+    startClock = ()=>{
+        setInterval(()=>{this.mergeWithState({timestamp: new Date()
+        });
+        }, 1000);
+    };
 }
 
 export default StateApi;

package.json

@@ -56,6 +56,8 @@
     "babel-preset-stage-2": "^6.24.1",
     "ejs": "^2.5.7",
     "express": "^4.16.2",
+    "lodash.debounce": "^4.0.8",
+    "lodash.pickby": "^4.6.0",
     "pm2": "^2.7.2",
     "prop-types": "^15.6.0",
     "react": "^16.0.0",

yarn.lock

@@ -3297,6 +3297,10 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+
 lodash.findindex@^4.4.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.findindex/-/lodash.findindex-4.6.0.tgz#a3245dee61fb9b6e0624b535125624bb69c11106"
@@ -3313,6 +3317,10 @@ lodash.merge@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5"
 
+lodash.pickby@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/lodash.pickby/-/lodash.pickby-4.6.0.tgz#7dea21d8c18d7703a27c704c15d3b84a67e33aff"
+
 lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"