version 15: introduced react context

src/App.jsx

@@ -3,73 +3,40 @@ import MyHeader from './component/MyHeader';
 import Footer from './component/Footer';
 import MySidebar from './component/MySidebar';
 import MainContent from './component/MainContent';
+import AppContextProvider from './component/AppContextProvider';
+import AppContext from './component/AppContext';
 import './component/fontLibrary';
-import * as utils from './component/Utils'
 
 class App extends Component {
 
   constructor(props) {
     super(props);
     this.state = {
-      portfolioName: "Retirement",
-      startDate: utils.yesterdayDate(),
-      endDate: utils.todayDate(),
-      data: null
+      portfolioName: "Retirement"
     }
-    this.portfolioChange = this.handlePortfolioChange.bind(this);
-    this.handlePeriodChange = this.handlePeriodChange.bind(this);
-  }
-
-  handlePortfolioChange(name) {
-    this.setState({
-      portfolioName: name
-    });
-  }
-
-  handlePeriodChange(startDate, endDate) {
-    this.setState({
-      startDate: startDate,
-      endDate: endDate
-    },
-      () => this.fetchServiceData());
-
-  } 
-
-  fetchServiceData() {
-    // const data = JSON.parse(utils.mockAssetzService());
-    // console.log(data)
-    // this.setState({
-    //   data: data
-    // });
-    //uncomment below in production.
-    fetch('http://192.168.0.112:8080/assets?startDate=' + this.state.startDate + "&endDate=" + this.state.endDate)
-      .then(res => res.json())
-      .then((data) => {
-        this.setState({ data: data })
-      })
-      .catch(console.log)
-  }
-
-  componentDidMount() {
-    this.fetchServiceData();
   }
 
   render() {
-    const { portfolioName, data } = this.state;
     return (
-      <div className="App container-fluid">
-        <div>
-          <div className="row">
-            <MyHeader data={data} />
-          </div>
-          <div className="row">
-            <MySidebar portfolioName={portfolioName} data={data} handlePortfolioChange={this.portfolioChange.bind(this)} />
-            <MainContent portfolioName={portfolioName} data={data} handlePeriodChange={this.handlePeriodChange.bind(this)} />
-          </div>
-        </div>
-        <Footer />
+      <AppContextProvider>
+        <div className="App container-fluid">
+          <AppContext.Consumer>
+            {context => (
+              <div>
+                <div className="row">
+                  <MyHeader data={context.assetzSummaryData} />
+                </div>
+                <div className="row">
+                  <MySidebar portfolioName={context.portfolioName} data={context.assetzSummaryData}  />
+                  <MainContent portfolioName={context.portfolioName} data={context.assetzSummaryData} />
+                </div>
+              </div>
+            )}
+          </AppContext.Consumer>
+          <Footer />
 
-      </div>
+        </div>
+      </AppContextProvider>
     );
   }
 }

src/component/AppContext.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+// this is the equivalent to the createStore method of Redux
+// https://redux.js.org/api/createstore
+
+const AppContext = React.createContext();
+
+export default AppContext;

src/component/AppContextProvider.jsx

@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import AppContext from './AppContext';
+import * as utils from './Utils'
+
+class AppContextProvider extends Component {
+    state = {
+        startDate: utils.yesterdayDate(),
+        endDate: utils.todayDate(),
+        assetzSummaryData: {},
+        portfolioName: "Retirement"
+    };
+
+    componentDidMount() {
+        console.log("App.js componentDidMount called");
+        this.fetchServiceData();
+    }
+
+    fetchServiceData() {
+        // const data = JSON.parse(utils.mockAssetzService());
+        // console.log(data)
+        // this.setState({
+        //   data: data
+        // });
+        //uncomment below in production.
+        debugger
+        console.log("fetch assetz summary data service called");
+        fetch('http://192.168.0.112:8080/assets?startDate=' + this.state.startDate + "&endDate=" + this.state.endDate)
+            .then(res => res.json())
+            .then((data) => {
+                this.setState({ assetzSummaryData: data })
+            })
+            .catch(console.log)
+    }
+
+    render() {
+        return (
+            <AppContext.Provider
+                value={{
+                    startDate: this.state.startDate,
+                    assetzSummaryData: this.state.assetzSummaryData,
+                    portfolioName: this.state.portfolioName,
+                    endDate: this.state.endDate,
+
+                    setStartDate: startDate => {
+                        console.log("startDate changed to:" + startDate)
+                        this.setState({
+                            startDate: startDate
+                        }, () => { this.fetchServiceData() });
+                    },
+
+                    setEndDate: endDate => {
+                        console.log("endDate changed to:" + endDate)
+                        this.setState({
+                            endDate: endDate
+                        }, () => { this.fetchServiceData() });
+                    },
+
+                    setPortfolioName: portfolioName => {
+                        console.log("portfolioName changed to:" + portfolioName)
+                        this.setState({
+                            portfolioName: portfolioName
+                        });
+                    },
+                }}
+            >
+                {this.props.children}
+            </AppContext.Provider>
+        );
+    }
+}
+
+export default AppContextProvider;

src/component/AssetsDetails.jsx

@@ -37,16 +37,13 @@ function percentFormatter(cell, row) {
     );
 }
 
-
-
 class AssetsDetails extends Component {
     constructor(props) {
         super(props);
         this.state = {
             data: null,
-            startDate: utils.yesterdayDate(),
-            endDate: utils.todayDate()
-        }
+            activePortfolioName: null
+        };
     }
 
     fetchServiceData() {
@@ -57,24 +54,21 @@ class AssetsDetails extends Component {
         // });
         //uncomment below in production.
         console.log("fetch service in assets details called");
-        const { assetType, portfolioName } = this.props;
+        const { assetType, portfolioName, startDate, endDate } = this.props;
+        debugger
         if (assetType && assetType != null && portfolioName && portfolioName != null) {
-            fetch('http://192.168.0.112:8080/assets/types/' + assetType + '/portfolios/' + portfolioName + '?startDate=' + this.state.startDate + "&endDate=" + this.state.endDate)
+            fetch('http://192.168.0.112:8080/assets/types/' + assetType + '/portfolios/' + portfolioName + '?startDate=' + startDate + "&endDate=" + endDate)
                 .then(res => res.json())
                 .then((data) => {
                     this.setState({ data: data })
                 })
                 .catch(console.log)
         }
-
     }
 
     componentDidMount() {
         console.log("inside componentDidMount for assets details");
-        debugger
-        if (this.props.reloadAssetDetails && this.props.reloadAssetDetails === true) {
-            this.fetchServiceData();
-        }
+        this.fetchServiceData();
     }
 
     render() {
@@ -147,7 +141,6 @@ class AssetsDetails extends Component {
                 text: 'Gain/Loss',
                 sort: true,
                 formatter: lossGainFormatter,
-                sort: true,
                 align: "left"
             },
             {

src/component/AssetsSummary.jsx

@@ -107,7 +107,7 @@ class AssetsSummary extends Component {
     return (
       <div>
         <h2 className="text-left">Assets Summary</h2>
-        <BootstrapTable keyField="assetType" wrapperClasses="table-responsive text-nowrap" keyField='assetType' data={details} columns={columns} rowEvents={ rowEvents } />
+        <BootstrapTable keyField="assetType" wrapperClasses="table-responsive text-nowrap" data={details} columns={columns} rowEvents={ rowEvents } />
       </div>
     );
   }

src/component/MainContent.jsx

@@ -6,6 +6,7 @@ import AssetsSummary from './AssetsSummary';
 import * as utils from './Utils';
 import GoalsContainer from './GoalsContainer';
 import AssetsDetails from './AssetsDetails';
+import AppContext from './AppContext';
 
 class MainContent extends Component {
     constructor(props) {
@@ -14,25 +15,12 @@ class MainContent extends Component {
             fromDate: utils.yesterdayDate(),
             toDate: utils.todayDate(),
             assetType: null,
-            activeTab: "valuation",
-            reloadAssetDetails: false
+            activeTab: "valuation"
         }
         this.selectAssetType = this.selectAssetType.bind(this);
     }
 
-    handlePeriodChange(fromDate, toDate) {
-        const startDate = fromDate != null ? fromDate : this.state.fromDate;
-        const endDate = toDate != null ? toDate : this.state.toDate;
-        this.setState({
-            fromDate: startDate,
-            toDate: endDate
-        });
-        if (startDate != null && startDate != "" && endDate != null && endDate != "") {
-            this.props.handlePeriodChange(startDate, endDate);
-        }
-    }
-
-    handleTabChange(eventKey){
+    handleTabChange(eventKey) {
         console.log("tab is changed")
         this.setState({
             activeTab: eventKey
@@ -42,10 +30,9 @@ class MainContent extends Component {
     selectAssetType(assetType) {
         console.log("selectAssetType is called")
         this.setState({
-            assetType: assetType,
-            reloadAssetDetails: true
+            assetType: assetType
         }, () => this.handleTabChange("details"));
-      }
+    }
 
     // componentDidMount(){
     //     console.log("inside componentDidMount for mainContent");
@@ -75,42 +62,46 @@ class MainContent extends Component {
         }
 
         return (
-            <main role="main" className="col-md-10 ml-sm-auto col-lg-10 pt-auto px-auto">
-                <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
-                    <h1 className="h2">{this.props.portfolioName}</h1>
-                    <div className="form-group mb-md-0">
-                        <label >From Date:</label>
-                        <input type="date" name="fromDate" max="2099-12-31" value={this.state.fromDate}
-                            min="2020-01-01" onChange={(val) => this.handlePeriodChange(val.target.value, null)} />
-                    </div>
-                    <div className="form-group mb-md-0">
-                        <label>To Date:
-                            <input className="border border-grey" type="date" name="toDate" min="2020-01-01" value={this.state.toDate}
-                                max="2099-12-31" onChange={(val) => this.handlePeriodChange(null, val.target.value)} />
-                        </label>
-                    </div>
-                    <div className="btn-toolbar mb-2 mb-md-0">
-                        <div className="btn-group mr-2">
-                            <button className="btn btn-sm btn-outline-secondary">Share</button>
-                            <button className="btn btn-sm btn-outline-secondary">Export</button>
-                        </div>
-                    </div>
-                </div>
-                <Tabs activeKey={this.state.activeTab} id="main-tabs" onSelect={(k) => this.handleTabChange(k)} unmountOnExit="true">
-                    <Tab eventKey="valuation" title="Valuation">
-                        <div className="card-columns">
-                            {cards}
+            <AppContext.Consumer>
+                {context => (
+                    <main role="main" className="col-md-10 ml-sm-auto col-lg-10 pt-auto px-auto">
+                        <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
+                            <h1 className="h2">{this.props.portfolioName}</h1>
+                            <div className="form-group mb-md-0">
+                                <label >From Date:</label>
+                                <input type="date" name="fromDate" max="2099-12-31" value={context.startDate}
+                                    min="2020-01-01" onChange={(val) => context.setStartDate(val.target.value)} />
+                            </div>
+                            <div className="form-group mb-md-0">
+                                <label>To Date:
+                            <input className="border border-grey" type="date" name="toDate" min="2020-01-01" value={context.endDate}
+                                        max="2099-12-31" onChange={(val) => context.setEndDate(val.target.value)} />
+                                </label>
+                            </div>
+                            <div className="btn-toolbar mb-2 mb-md-0">
+                                <div className="btn-group mr-2">
+                                    <button className="btn btn-sm btn-outline-secondary">Share</button>
+                                    <button className="btn btn-sm btn-outline-secondary">Export</button>
+                                </div>
+                            </div>
                         </div>
-                        <AssetsSummary assets={assets} selectAssetType={this.selectAssetType.bind(this)}/>
-                    </Tab>
-                    <Tab eventKey="details" title="Details">
-                        <AssetsDetails portfolioName={this.props.portfolioName} assetType={this.state.assetType} reloadAssetDetails={this.state.reloadAssetDetails}/>
-                    </Tab>
-                    <Tab eventKey="goal" title="Goal">
-                        <GoalsContainer />
-                    </Tab>
-                </Tabs>
-            </main>
+                        <Tabs activeKey={this.state.activeTab} id="main-tabs" onSelect={(k) => this.handleTabChange(k)} unmountOnExit={true}>
+                            <Tab eventKey="valuation" title="Valuation">
+                                <div className="card-columns">
+                                    {cards}
+                                </div>
+                                <AssetsSummary assets={assets} selectAssetType={this.selectAssetType.bind(this)} />
+                            </Tab>
+                            <Tab eventKey="details" title="Details">
+                                <AssetsDetails portfolioName={context.portfolioName} assetType={this.state.assetType} startDate={context.startDate} endDate={context.endDate} />
+                            </Tab>
+                            <Tab eventKey="goal" title="Goal">
+                                <GoalsContainer />
+                            </Tab>
+                        </Tabs>
+                    </main>
+                )}
+            </AppContext.Consumer>
         );
     }
 }