Code Review ETFItem.js

[Yukaii]

https://github.com/KuoMinLi/ETF-DIY-F2E/blob/8ec12f781c7ab16e9053f9a67d940b4332d415bb/src/components/ETFItem.js#L40-L47

可用 useMemo

[Yukaii]

https://github.com/KuoMinLi/ETF-DIY-F2E/blob/8ec12f781c7ab16e9053f9a67d940b4332d415bb/src/components/ETFItem.js#L15-L18

useCallback

[Yukaii]

https://github.com/KuoMinLi/ETF-DIY-F2E/blob/8ec12f781c7ab16e9053f9a67d940b4332d415bb/src/components/ETFItem.js#L28

Array flat 之類的來做

[Yukaii]

https://github.com/KuoMinLi/ETF-DIY-F2E/blob/8ec12f781c7ab16e9053f9a67d940b4332d415bb/src/components/ETFItem.js#L50-L64

• CalculateData -> calculateData
• useCallback

[Yukaii]

calculateData refactoring

  // data = [{
  //   "date": "2017-11-27",
  //   "open": 85.15,
  //   "high": 85.15,
  //   "low": 84.1,
  //   "close": 84.15,
  //   "volume": 2127304,
  //   "turnover": 179561728,
  //   "change": -1
  // }]
  const calculateData = (data) => {
    const totalDays = data.length
    const period = [
      { name: "五年", daysToSubtract: 1200 },
      { name: "三年", daysToSubtract: 960 },
      { name: "一年", daysToSubtract: 240 },
      { name: "半年", daysToSubtract: 120 },
      { name: "一個月", daysToSubtract: 20 },
    ];

    if (data.length === 0) {
      return period.map((item) => ({
        ...item,
        data: 0,
      }))
    }

    return period.map((item) => {
      const daysBeforeNow = totalDays - item.daysToSubtract;

      const closePrice = data[daysBeforeNow].close;
      const todayClosePrice = data.slice(-1)[0].close;

      const earn = todayClosePrice - closePrice;
      const rateOfReturn = (earn / closePrice);

      return {
        ...item,
        // format ror to 2 decimal percentage
        data: (rateOfReturn * 100).toFixed(2) || 0,
      }
    });