shoptime/com.twin.app.shoptime/src/views/HomePanel/BestSeller/BestSeller.jsx

import React, { useCallback, useEffect, useMemo, useState } from "react";

import { useDispatch, useSelector } from "react-redux";

import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator";
import Spottable from "@enact/spotlight/Spottable";

import { pushPanel } from "../../../actions/panelActions";
import SectionTitle from "../../../components/SectionTitle/SectionTitle";
import TItemCard from "../../../components/TItemCard/TItemCard";
import TScroller from "../../../components/TScroller/TScroller";
import useScrollReset from "../../../hooks/useScrollReset";
import useScrollTo from "../../../hooks/useScrollTo";
import { panel_names } from "../../../utils/Config";
import { $L } from "../../../utils/helperMethods";
import css from "./BestSeller.module.less";

const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  "div"
);

const BestSeller = ({ order }) => {
  const dispatch = useDispatch();
  const bestSellerDatas = useSelector(
    (state) => state.product.bestSellerData.bestSeller
  );
  const [drawChk, setDrawChk] = useState(false);
  const { getScrollTo, scrollLeft } = useScrollTo();
  const { handleScrollReset, handleStopScrolling } = useScrollReset(
    scrollLeft,
    true
  );
  useEffect(() => {
    setDrawChk(true);
  }, [bestSellerDatas]);
  const handleCardClick = useCallback((item) => {
    dispatch(
      pushPanel(
        {
          name: panel_names.DETAIL_PANEL,
          panelInfo: { patnrId: item.patnrId, prdtId: item.prdtId },
        },
        [dispatch, item]
      )
    );
  });
  const handleMoreCardClick = useCallback(() => {
    dispatch(
      pushPanel(
        {
          name: panel_names.TRENDING_NOW_PANEL,
        },
        [dispatch]
      )
    );
  });
  const orderStyle = useMemo(() => ({ order: order }), [order]);
  return (
    <Container className={css.bestSellerWrap} style={orderStyle}>
      <SectionTitle title={$L(`BEST SELLER`)} />

      <TScroller
        className={css.homeBestSeller}
        direction="horizontal"
        cbScrollTo={getScrollTo}
        noScrollByWheel
      >
        {bestSellerDatas &&
          bestSellerDatas.map((item, index) => (
            <TItemCard
              key={item.prdtId}
              imageAlt={item.prdtId}
              imageSource={item.imgUrl}
              priceInfo={item.priceInfo}
              productName={item.prdtNm}
              isBestSeller={true}
              rank={item.rankOrd}
              onFocus={index === 0 ? handleScrollReset : null}
              onBlur={handleStopScrolling}
              onClick={() => handleCardClick(item)}
              offerInfo={item.offerInfo}
            />
          ))}

        {drawChk && (
          <SpottableComponent
            className={css.addItem}
            onClick={handleMoreCardClick}
          ></SpottableComponent>
        )}
      </TScroller>
    </Container>
  );
};

export default BestSeller;