{"size": 1344, "ext": "js", "max_stars_repo_path": "src/components/stock-details/stock-details.js", "max_stars_repo_name": "leun0426/stock-app", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/stock-details/stock-details.js", "max_issues_repo_name": "leun0426/stock-app", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/stock-details/stock-details.js", "max_forks_repo_name": "leun0426/stock-app", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.0327868852, "max_line_length": 99, "alphanum_fraction": 0.5602678571}
import isEmpty from 'lodash/isEmpty';
import React from 'react';

import {useSelector} from 'react-redux';

/**
 * Stock details - shows the stock name, symbol, and description through redux state.stockOverview
 * @param {object} props - 
 */
function StockDetails(props) {

  const stockDetails = useSelector(state => state.stockOverview);

  const getStockDetails = () => {
    const elements = [];
    elements.push(getTitle());
    if (!isEmpty(stockDetails)) {
      elements.push(getSymbol())
      elements.push(getStockDescription())
    }
    return elements;
  }

  const getStockDescription = () => {
    return (
      <div key="stock-description">
        <label><strong>Description:</strong></label>
        <div>
            {stockDetails.Description}
        </div>
      </div>
    )
  }

  const getSymbol = () => {
    return (
      <div key="stock-symbol">
        <h5>Symbol: {stockDetails.Symbol}</h5>
      </div>
    )
  }

  const getTitle = () => {
    let title = "Welcome to Stock App";
    if (!isEmpty(stockDetails)) {
      title = stockDetails.Name;
    }
    return (
      <div key="stock-title">
        <h4 data-id='stock-title'>
          {title}
        </h4>
      </div>
    );
  }

  return getStockDetails();
}

export default StockDetails;
