Update exercise, add exercise and update the capstone

Author: tyroprogrammer

src/api/DataApi.js

@@ -15,7 +15,7 @@ export default class DataApi {
             .then(res => pick(res, COMPANY_PROFILE_FIELDS));
     }
 
-    static async getComapnyFinancial(company) {
+    static async getCompanyFinancial(company) {
         return DataApi.getFullCompanyProfile(company)
         .then(res => pick(res, COMPANY_FINANCIAL_FIELDS));
     }

src/capstone/Capstone.js

@@ -6,85 +6,76 @@ import CompanyProfile from './CompanyProfile';
 import CompanyFinancial from './CompanyFinancial';
 import style from './solution/style';
 
-import DataApi from '../api/DataApi';
-
 const EMPTY_TICKER_MSG = 'Please type a stock ticker and click Search button.';
-const ERROR_MSG = 'Couldn\'t find the ticker. Please search for appropriate ticker like - AAPL for Apple, AMZN for Amazon.'
 
+/**
+ * 🏆
+ * The goal of this capstone project is to bring together most of the 
+ * concepts you have learned in this tutorial together by building this feature.
+ * The feature we are building is pretty straight forward. There's an input
+ * field and a search button. When the user types in a valid stock ticker and
+ * clicks Search button, it will display the company profile as well as
+ * company financial for the given stock ticker selected.
+ */
 class Capstone extends Component {
     constructor(props) {
         super(props);
+        //💡 Always initialize the state with whatever you think is appropriate default value
         this.state = {
-            company: '',
-            companyFinancial: {},
-            companyProfile: {}
+            stockTicker: ''
         }
 
-        this.handleInputChange = this.handleInputChange.bind(this);
-        this.handleSearch = this.handleSearch.bind(this);
-        this.updateCompanyFinancial = this.updateCompanyFinancial.bind(this);
-        this.updateCompanyProfile = this.updateCompanyProfile.bind(this);
-        this.handleError = this.handleError.bind(this);
-    }
-
-    handleInputChange({ target: { value } }) {
-        this.setState({
-            company: value,
-            errorMsg: '',
-            companyFinancial: '',
-            companyProfile: ''
-        })
+        //✏️  Bind the handleSearch function below to appropriate `this`
+        // this.handleSearch = this.handleSearch.bind(this);
     }
 
-    handleSearch() {
-        DataApi.getCompanyProfile(this.state.company)
-            .then(this.updateCompanyProfile)
-            .catch(this.handleError);
-
-        DataApi.getComapnyFinancial(this.state.company)
-            .then(this.updateCompanyFinancial)
-            .catch(this.handleError);
-    }
-
-    handleError() {
-        this.setState({ errorMsg: ERROR_MSG })
-    }
-
-    updateCompanyProfile(companyProfile) {
-        this.setState({ companyProfile })
-    }
-
-    updateCompanyFinancial(companyFinancial) {
-        this.setState({ companyFinancial })
+    handleSearch(stockTicker) {
+        /**
+         * ✏️ 
+         * When this method is called, it will be given a stockTicker 
+         * as an argument. You need to call setState to set the stockTicker
+         * state to the value provided to this function
+         */
     }
 
     render() {
-        const CompanyProfileComponent = (
-            !isEmpty(this.state.companyProfile) &&
-            !this.state.errorMsg &&
-            <CompanyProfile companyProfile={this.state.companyProfile} />
-        );
-        const CompanyFinancialComponent = (
-            !isEmpty(this.state.companyProfile) &&
-            !this.state.errorMsg &&
-            <CompanyFinancial companyFinancial={this.state.companyFinancial} />
-        );
-        const ErrorMessage = (
-            this.state.errorMsg &&
-            <div>{this.state.errorMsg}</div>
-        )
-        const EmptyTickerMessage = (
-            isEmpty(this.state.companyProfile) &&
-            isEmpty(this.state.companyFinancial) &&
-            <div>{EMPTY_TICKER_MSG}</div>
-        )
+        /**
+         * ✏️ 
+         * We want to render a message if no stock ticker has been searched.
+         * We want to conditionally render the EMPTY_TICKER_MSG that's already provided
+         * 🧭 There's an isEmpty function that's already imported. Use that
+         *  to check if the stockTicker state is empty
+         *      Like: isEmpty(this.state.stockTicker)
+         * 🧭  If it is empty assign <div>{EMPTY_TICKER_MSG}</div> to EmptyTickerMessage
+         * 🧭  If the stockTicker is not empty assign null to EmptyTickerMessage
+         * You can either use ternery operator - 
+         *      const a = isEmpty(b) ? c : null;
+         * OR you can use '&&' operator -
+         *      const a = isEmpty(b) && c;
+         * Both ways you are telling EmptyTickerMessage to display the div with the
+         * error message only when the stockTicker state is empty
+         */
+        const EmptyTickerMessage = null;
+
+        /**
+         * 💡 Some things to note below inside the return:
+         * 1. We are passing `handleSearch` function to `Search` component as `onSearch` props.
+         *    `Search` component will execute this props when the user clicks Search button.
+         *     and it will pass the current value on the input field as an argument to this function.
+         *     Remeber above we we updated the state when this function is called
+         * 2. We are passing `stockTicker` props to both `CompanyProfile` and 
+         *    `CompanyFinancial` components. These components should use the `stockTicker`
+         *    props to fetch the appropriate data from the API provided and render it.
+         * 3. We have a line like {EmptyTickerMessage}. It's the constant we defined above.
+         *    We assigned a JSX to a constant and rendered it here inside curly braces.
+         *    This is a cool thing about JSX. They can be passed around like any object or function or data.
+         */
         return (
             <div style={style.container}>
-                <Search searchValue={this.state.company} onInputChange={this.handleInputChange} onSearch={this.handleSearch} />
-                {CompanyProfileComponent}
-                {CompanyFinancialComponent}
-                {this.state.errorMsg && ErrorMessage}
-                {!this.state.company && EmptyTickerMessage}
+                <Search onSearch={this.handleSearch} />
+                <CompanyProfile stockTicker={this.state.stockTicker} />
+                <CompanyFinancial stockTicker={this.state.stockTicker} />
+                {EmptyTickerMessage}
             </div>
         );
     }

src/capstone/CompanyFinancial.jsx

@@ -1,30 +1,189 @@
 import React, { Component } from 'react';
+import isEmpty from 'lodash/isEmpty';
+
+import DataAPI from '../api/DataApi';
 import style from './solution/style';
 
+const ERROR_MSG = `Error when fetching company financial data. Please check if you entered valid stock ticker`;
+
+/**
+ * 🏆
+ * This component is responsible for displaying the financial of the stock ticker
+ * provided to it as a `props` by it's parent.
+ * Here we will see how to fetch data using some lifecycle methods and also potential
+ * way to handle an error if it were to arise. We will conditionally render different
+ * things based on some state values.
+ */
 class CompanyFinancial extends Component {
+    constructor(props) {
+        super(props);
+        /**
+         * 💡 
+         * Initialized the state with empty values
+         */
+        this.state = {
+            companyFinancial: {},
+            errorMsg: ''
+        }
+
+        /**
+         * 💡 
+         * These functions are already bound for you with `this`
+         */
+        this.updateCompanyFinancial = this.updateCompanyFinancial.bind(this);
+        this.handleError = this.handleError.bind(this);
+    }
+
+    /**
+     * 💡 
+     * This is a lifecycle method. React will invoke this lifecyle method
+     * after the component is mounted to the DOM for the first time
+     */
+    componentDidMount() {
+        /**
+         * ✏️ 
+         * You need to fetch the financial data here.
+         * There's a fetchCompanyFinancial function already defined below
+         * that will fetch the data from the given API
+         * You just need to invoke it here
+         */
+    }
+
+    /* 
+    * 💡 
+    * This is another lifecycle method. React will invoke this lifecyle method
+    * after the component is updated. Remember the component will be updated
+    * every time either the props changes or the state changes for this component
+    */
+    componentDidUpdate(prevProps, prevState) {
+    /**
+     * ✏️ 
+     * You need to call the fetchCompanyFinancial method to fetch the 
+     * comanyFinancial data when the parent passes you a different stockTicker
+     * 🧭  Remember to check if the stockTicker props changed before calling the 
+     *     fetchCompanyFinancial method though. You DON'T want to fetch the data
+     *     if the stockTicker hasn't changed. If you don't check whether props
+     *     changed your component will go in an infinite loop - it will be
+     *     fetching the same data over and over again.
+     * This lifecycle method will be given multiple arguments.
+     * First argument is the value of props before this component updated
+     * Second argument is the value of the state before this component updated
+     * In our case we just want to check props to see if value for stockTicker 
+     * changed and the way to do this is:
+     *  if (this.props.stockTicker !== prevProps.stockTicker) {
+     *     //Fetch data here only if the current props is not same as previous props
+     *  }
+     */
+    }
+
+    /**
+     * 💡 
+     * This is a method to fetch the company financial data from the API.
+     * Couple things to note here:
+     * 1. We are updating the errorMsg state to empty string. This is jus to 
+     *    reset any error message we might have from previous search
+     * 2. We invoke the API only when the stockTicker is truthy. No point in
+     *    calling the API if we don't have any value for stockTicker
+     * 3. We use the data received from the API to update companyFinancial state
+     *    (look below for updateCompanyFinancial function implementation)
+     * 4. We catch any Error we get from the API and call handleError method
+     *    to handle the error.
+     */
+    fetchCompanyFinancial() {
+        const { stockTicker } = this.props;
+        this.updateErrorMsg('');
+        if (stockTicker) {
+            DataAPI.getCompanyFinancial(this.props.stockTicker)
+                .then(this.updateCompanyFinancial)
+                .catch(this.handleError)
+        }
+    }
+
+    /**
+     * 💡
+     * Updates the companyFinancial state with the argument provided
+     */
+    updateCompanyFinancial(companyFinancial) {
+        this.setState({ companyFinancial })
+    }
+
+    /**
+     * 💡
+     * Updates the errorMsg state with the argument provided
+     */
+    updateErrorMsg(errorMsg) {
+        this.setState({ errorMsg });
+    }
+
+    /**
+     * 💡 
+     * This is used to handle any error that we might get when we call the API
+     * The API throws an error when for example the stockTicker provided
+     * is not a valid stockTicker.
+     */
+    handleError(error) {
+        //This sets the state `errorMsg` with the ERROR_MSG defined at the very top
+        this.updateErrorMsg(ERROR_MSG);
+        //Since there's an error we want to reset the companyFincial state
+        //with empty object. We don't want to display stale data
+        this.updateCompanyFinancial({});
+    }
+
     render() {
-        const { companyFinancial } = this.props;
-        return (
-            <div style={style.financialContainer}>
-                <div>
-                    <div style={style.financialTitle}>Financial</div>
-                    <div style={style.financialContent}>
-                        {
-                            Object.keys(companyFinancial)
-                                .map(prop => {
-                                    return <div key={prop} style={style.financialMetricRow}>
-                                        <div style={style.financialMetric}>
-                                            {prop}
-                                        </div>
-                                        <div>
-                                            {companyFinancial[prop]}
-                                        </div>
-                                    </div>
-                                })
-                        }
-                    </div>
+        const { companyFinancial } = this.state;
+        /**
+         * ✏️ 
+         * We want to render an error message if the API returns some error.
+         * We want to check if we have `errorMsg` state is not empty and 
+         * if it's not render the message inside a div
+         * 🧭 There's an `isEmpty` function that's already imported. Use that
+         *  to check if the `errorMsg` state is empty
+         *      Like: isEmpty(this.state.errorMsg)
+         * 🧭  If it is empty assign null to ErrorMsg
+         * 🧭  If the errorMsg is not empty assign <div>{this.state.errorMsg}</div>
+         *     to the ErrorMsg constant.
+         * You can either use ternery operator - 
+         *      const a = isEmpty(b) ? c : null;
+         * OR you can use '&&' operator -
+         *      const a = isEmpty(b) && c;
+         * Either ways you are telling ErrorMsg to display the div with the
+         * error message only when the `erroMsg` state is not empty
+         */
+        const ErrorMsg = null;
 
+        /**
+         * 💡 
+         * Here we are doing same thing as the ErrorMsg above
+         * Instead of checking for `errorMsg` we are checking for `companyFinancial`
+         * state. We are displaying the `div` only if the `companyFinancial` 
+         * state is not empty.
+         */
+        const CompanyFinancialSection = (
+            !isEmpty(this.state.companyFinancial) &&
+            <div>
+                <div style={style.financialTitle}>Financial</div>
+                <div style={style.financialContent}>
+                    {
+                        Object.keys(companyFinancial)
+                            .map(prop => {
+                                return <div key={prop} style={style.financialMetricRow}>
+                                    <div style={style.financialMetric}>
+                                        {prop}
+                                    </div>
+                                    <div>
+                                        {companyFinancial[prop]}
+                                    </div>
+                                </div>
+                            })
+                    }
                 </div>
+
+            </div>
+        )
+        return (
+            <div style={style.financialContainer}>
+                {ErrorMsg}
+                {CompanyFinancialSection}
             </div>
         );
     }