lazycrypto-cli/dist/components/CryptoData/CryptoData.js

A simple CLI app to view cryptocurrency indicators

import React, { useState, useEffect } from "react";
import { useCryptoData } from "../../hooks/useCryptoData.js";
import { cryptoOptions } from "../../constants/cryptoOptions.js";
import CryptoSelector from "./CryptoSelector.js";
import CryptoDisplay from "./CryptoDisplay.js";
import LoadingSpinner from "./LoadingSpinner.js";
import ErrorDisplay from "./ErrorDisplay.js";
import CryptoDisplayMini from "./CryptoDisplayMini.js";
import { getArgs } from "../../utils/getArgs.js";
const CryptoData = ({
  crypto: initialCrypto,
  ticker: initialTicker,
  onBack,
  apiKey,
  selectedTimeframe,
  isTradesVisible,
  cardNumber,
  totalCards,
  isLastRow,
  cryptosPerRow
}) => {
  const [currentCrypto, setCurrentCrypto] = useState(initialCrypto);
  const [currentTicker, setCurrentTicker] = useState(initialTicker);
  const [showCryptoMenu, setShowCryptoMenu] = useState(false);
  const {
    isMin
  } = getArgs();
  const {
    data,
    loading,
    error,
    historicalData,
    indicators,
    currentPrice,
    prevPrice
  } = useCryptoData(currentCrypto, apiKey, selectedTimeframe);
  useEffect(() => {
    if (initialCrypto && initialCrypto !== currentCrypto) {
      setCurrentCrypto(initialCrypto);
      setCurrentTicker(initialTicker);
    }
  }, [initialCrypto, initialTicker, currentCrypto]);
  const handleCryptoSelect = item => {
    process.stdout.write("\x1B[2J\x1B[0f");
    setCurrentCrypto(item.value);
    setCurrentTicker(item.ticker);
    setShowCryptoMenu(false);
  };
  if (loading) {
    return /*#__PURE__*/React.createElement(LoadingSpinner, {
      ticker: currentTicker || getTicker(currentCrypto)
    });
  }
  if (error) {
    return /*#__PURE__*/React.createElement(ErrorDisplay, {
      error: error
    });
  }
  if (showCryptoMenu) {
    return /*#__PURE__*/React.createElement(CryptoSelector, {
      cryptoOptions: cryptoOptions,
      currentCrypto: currentCrypto,
      onSelect: handleCryptoSelect,
      onCancel: () => setShowCryptoMenu(false)
    });
  }
  if (!currentPrice) return null;
  if (isMin) return /*#__PURE__*/React.createElement(CryptoDisplayMini, {
    data: data,
    ticker: currentTicker || getTicker(currentCrypto),
    historicalData: historicalData,
    indicators: indicators,
    onShowMenu: () => setShowCryptoMenu(true),
    currentPrice: currentPrice,
    prevPrice: prevPrice
  });
  return /*#__PURE__*/React.createElement(CryptoDisplay, {
    currentPrice: currentPrice,
    prevPrice: prevPrice,
    data: data,
    ticker: currentTicker || getTicker(currentCrypto),
    historicalData: historicalData,
    indicators: indicators,
    onShowMenu: () => setShowCryptoMenu(true),
    isTradesVisible: isTradesVisible,
    cardNumber: cardNumber,
    totalCards: totalCards,
    isLastRow: isLastRow,
    cryptosPerRow: cryptosPerRow
  });
};
const getTicker = cryptoId => {
  const cryptoInfo = cryptoOptions.find(option => option.value === cryptoId);
  return cryptoInfo ? cryptoInfo.ticker : cryptoId.toUpperCase();
};
export default CryptoData;