diff --git a/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx b/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx
index 55853dbe..c5eacc01 100644
--- a/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx
+++ b/com.twin.app.shoptime/src/views/TrendingNowPanel/TrendingNowPanel.jsx
@@ -1,34 +1,28 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
import classNames from "classnames";
import { useDispatch } from "react-redux";
import Spotlight from "@enact/spotlight";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
-import {
- notifyEnterContainer,
- setContainerLastFocusedElement,
-} from "@enact/spotlight/src/container";
+import { setContainerLastFocusedElement } from "@enact/spotlight/src/container";
import { sendLogGNB } from "../../actions/logActions";
import { getTop20Show } from "../../actions/mainActions";
-import { popPanel, pushPanel, updatePanel } from "../../actions/panelActions";
+import { pushPanel, updatePanel } from "../../actions/panelActions";
import { finishVideoPreview } from "../../actions/playActions";
import { getBestSeller } from "../../actions/productActions";
import SectionTitle from "../../components/SectionTitle/SectionTitle";
import TBody from "../../components/TBody/TBody";
import TButton, { TYPES } from "../../components/TButton/TButton";
-import TItemCard, {
- removeDotAndColon,
-} from "../../components/TItemCard/TItemCard";
+import TItemCard from "../../components/TItemCard/TItemCard";
import TPanel from "../../components/TPanel/TPanel";
import TVerticalPagenator from "../../components/TVerticalPagenator/TVerticalPagenator";
import usePrevious from "../../hooks/usePrevious";
-import useScrollReset from "../../hooks/useScrollReset";
-import useScrollTo from "../../hooks/useScrollTo";
import useWhyDidYouUpdate from "../../hooks/useWhyDidYouUpdate";
import { LOG_MENU, panel_names } from "../../utils/Config";
-import { $L, scaleH } from "../../utils/helperMethods";
+import { $L } from "../../utils/helperMethods";
+import { SpotlightIds } from "../../utils/SpotlightIds";
import PopularShowIndicator from "./PopularShow/PopularShowIndicator";
import css from "./TrendingNowPanel.module.less";
@@ -44,6 +38,7 @@ const STRING_CONF = {
POPULAR_SHOW: "POPULAR SHOW",
BEST_SELLER: "BEST SELLER",
};
+
const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
const dispatch = useDispatch();
const { USE_SELECTOR, USE_STATE } = useWhyDidYouUpdate(spotlightId, {
@@ -51,249 +46,192 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
isOnTop,
...rest,
});
+
const topInfos = USE_SELECTOR(
"topInfos",
(state) => state.main.top20ShowData?.topInfos
);
- const bestSellerDatas = USE_SELECTOR(
- "bestSellerDatas",
+ const bestSeller = USE_SELECTOR(
+ "bestSeller",
(state) => state.product?.bestSellerData?.bestSeller
);
- const {
- getScrollTo: getScrollToBody,
- scrollTop: scrollTopBody,
- scrollLeft,
- } = useScrollTo();
-
- const { handleScrollReset, handleStopScrolling } = useScrollReset(
- scrollLeft,
- true
- );
-
- const [targetId, setTargetId] = USE_STATE("targetId", null);
- const [firstChk, setFirstChk] = USE_STATE("firstChk", false);
const [showButton, setShowButton] = USE_STATE("showButton", true);
- const timerRef = useRef();
- const { cursorVisible } = USE_SELECTOR(
- "cursorVisible",
- (state) => state.common.appStatus
- );
const [selectedIndex, setSelectedIndex] = USE_STATE("selectedIndex", 0);
+
const cbChangePageRef = useRef(null);
+ const isInitialRef = useRef(true);
const focusedContainerIdRef = useRef(panelInfo?.focusedContainerId);
- const handleCardClick = useCallback(
- (item) => {
- const c = Spotlight.getCurrent();
- let targetSpotlightId = null;
- if (c) {
- targetSpotlightId = c.getAttribute("data-spotlight-id");
- }
- dispatch(
- updatePanel({
- name: panel_names.TRENDING_NOW_PANEL,
- panelInfo: {
- currentSpot: targetSpotlightId,
- focusedContainerId: focusedContainerIdRef.current,
- selectedIndex,
- },
- })
- );
-
- dispatch(
- pushPanel({
- name: panel_names.DETAIL_PANEL,
- panelInfo: { patnrId: item.patnrId, prdtId: item.prdtId },
- })
- );
- },
- [dispatch, selectedIndex]
- );
-
useEffect(() => {
- if (!topInfos && !bestSellerDatas) {
- dispatch(getTop20Show());
- dispatch(getBestSeller());
- }
+ if (!topInfos) dispatch(getTop20Show());
+ if (!bestSeller) dispatch(getBestSeller());
}, [dispatch]);
- const handlePrevClick = useCallback(() => {
- if (topInfos) {
- if (selectedIndex > 0) {
- setSelectedIndex((prev) => prev - 1);
- setContainerLastFocusedElement(null, ["popular-productList"]);
- if (selectedIndex === 1) {
- Spotlight.focus("popular_video");
- }
+ useEffect(() => {
+ if (isInitialRef.current && !panelInfo?.currentSpot) {
+ if (topInfos && bestSeller) {
+ const target =
+ panelInfo?.pageName === "BS"
+ ? SpotlightIds.TRENDING_NOW_BEST_SELLER
+ : SpotlightIds.TRENDING_NOW_POPULAR_SHOW;
+
+ Spotlight.focus(target);
+ isInitialRef.current = false;
}
}
- }, [selectedIndex, topInfos]);
+ }, [topInfos, bestSeller]);
- const handleNextClick = useCallback(() => {
- if (topInfos) {
- if (selectedIndex < topInfos.length - 1) {
- setSelectedIndex((prev) => prev + 1);
- setContainerLastFocusedElement(null, ["popular-productList"]);
- if (selectedIndex === topInfos.length - 2) {
- Spotlight.focus("popular_video");
- }
- }
+ useEffect(() => {
+ if (panelInfo?.currentSpot) Spotlight.focus(panelInfo.currentSpot);
+ }, [panelInfo?.currentSpot]);
+
+ useEffect(() => {
+ if (panelInfo?.selectedIndex) setSelectedIndex(panelInfo.selectedIndex);
+ }, [panelInfo?.selectedIndex]);
+
+ useEffect(() => {
+ if (isOnTop && panelInfo?.focusedContainerId) {
+ const menu =
+ panelInfo?.focusedContainerId === SpotlightIds.TRENDING_NOW_POPULAR_SHOW
+ ? LOG_MENU.TRENDING_NOW_POPULAR_SHOWS
+ : LOG_MENU.TRENDING_NOW_BEST_SELLER;
+
+ dispatch(sendLogGNB(menu));
}
- }, [selectedIndex, topInfos]);
+ }, [isOnTop && panelInfo?.focusedContainerId]);
- const indicatorLeftonSpotlight = useCallback(
- (e) => {
+ const onFocusedContainerId = useCallback((containerId) => {
+ focusedContainerIdRef.current = containerId;
+ }, []);
+
+ const handleScroll = useCallback((e) => {
+ setShowButton(e.scrollTop === 0);
+ if (e.scrollTop !== 0) dispatch(finishVideoPreview());
+ }, []);
+
+ const handleSpotlight = useCallback(
+ (spotlightId) => (e) => {
e.stopPropagation();
- Spotlight.focus("popular_video");
+ if (spotlightId) Spotlight.focus(spotlightId);
},
+ []
+ );
+
+ const handleIndicatorClick = useCallback(
+ (direction) => () => {
+ if (!topInfos) return;
+
+ const isPrev = direction === "prev";
+ const isNext = direction === "next";
+ const isEdgeIndex =
+ (isPrev && selectedIndex === 1) ||
+ (isNext && selectedIndex === topInfos.length - 2);
+
+ if (isEdgeIndex) Spotlight.focus(SpotlightIds.TRENDING_NOW_POPULAR_VIDEO);
+
+ setSelectedIndex((prev) => prev + (isPrev ? -1 : isNext ? 1 : 0));
+ setContainerLastFocusedElement(null, [
+ SpotlightIds.TRENDING_NOW_POPULAR_GRID_LIST,
+ ]);
+ },
+ [selectedIndex, topInfos]
+ );
+
+ const handleBestSellerClick = useCallback(
+ ({ patnrId, prdtId }) =>
+ () => {
+ const currentSpot =
+ Spotlight.getCurrent()?.getAttribute("data-spotlight-id") || null;
+
+ dispatch(
+ updatePanel({
+ name: panel_names.TRENDING_NOW_PANEL,
+ panelInfo: {
+ currentSpot,
+ focusedContainerId: focusedContainerIdRef.current,
+ selectedIndex,
+ },
+ })
+ );
+
+ dispatch(
+ pushPanel({
+ name: panel_names.DETAIL_PANEL,
+ panelInfo: { patnrId, prdtId },
+ })
+ );
+ },
[selectedIndex]
);
- const _onScroll = (e) => {
- if (e.scrollTop !== 0) {
- dispatch(finishVideoPreview());
- setShowButton(false);
- } else {
- setShowButton(true);
- }
- };
+ const handleBestSellerFocus = useCallback(() => {
+ handleItemFocus(LOG_MENU.TRENDING_NOW_BEST_SELLER);
+ }, [handleItemFocus]);
- useEffect(() => {
- if (panelInfo.currentSpot) {
- setTargetId(panelInfo.currentSpot);
- }
- }, [panelInfo]);
+ const handleItemClick = useCallback(() => {
+ const currentSpot =
+ Spotlight.getCurrent()?.getAttribute("data-spotlight-id") || null;
- useEffect(() => {
- if (isOnTop) {
- timerRef.current = setTimeout(() => {
- Spotlight.focus(targetId);
- }, 0);
- }
- return () => clearTimeout(timerRef.current);
- }, [targetId]);
+ dispatch(
+ updatePanel({
+ name: panel_names.TRENDING_NOW_PANEL,
+ panelInfo: {
+ currentSpot,
+ focusedContainerId: focusedContainerIdRef.current,
+ selectedIndex,
+ },
+ })
+ );
+ }, [selectedIndex]);
+
+ const handleItemFocus = useCallback((nowMenu) => {
+ setTimeout(() => dispatch(sendLogGNB(nowMenu)));
+ }, []);
const handleTopButtonClick = useCallback(() => {
if (cbChangePageRef.current) {
cbChangePageRef.current(0, true);
}
- if (topInfos && topInfos.length > 0) {
- Spotlight.focus("popular_video");
- } else {
- if (bestSellerDatas && bestSellerDatas.length > 0) {
- Spotlight.focus(
- "bs-spotlightId-" + removeDotAndColon(bestSellerDatas[0]?.prdtId)
- );
- } else return;
+ let target = SpotlightIds.TRENDING_NOW_POPULAR_VIDEO;
+
+ if (!topInfos && bestSeller && bestSeller.length > 0) {
+ target = SpotlightIds.TRENDING_NOW_BEST_SELLER;
}
- setContainerLastFocusedElement(null, ["trandingnow_bestseller"]);
- }, [targetId, bestSellerDatas, topInfos]);
+ Spotlight.focus(target);
+ setContainerLastFocusedElement(null, [
+ SpotlightIds.TRENDING_NOW_BEST_SELLER,
+ ]);
+ }, [bestSeller, topInfos]);
- useEffect(() => {
- if (panelInfo.currentSpot) {
- Spotlight.focus(panelInfo.currentSpot);
- }
- }, [panelInfo?.currentSpot]);
-
- useEffect(() => {
- if (topInfos && bestSellerDatas) {
- if (panelInfo?.pageName === "BS") {
- if (panelInfo?.linkTpCd) {
- Spotlight.focus("trandingnow_bestseller");
- } else {
- Spotlight.focus(panelInfo?.focusedContainerId);
- }
- } else {
- if (!firstChk && !panelInfo.currentSpot) {
- Spotlight.focus("popular_video");
- setFirstChk(true);
- }
- }
- }
- }, [
- firstChk,
- topInfos,
- bestSellerDatas,
- panelInfo?.focusedContainerId,
- panelInfo.currentSpot,
- panelInfo?.pageName,
- panelInfo?.linkTpCd,
- ]);
-
- const onItemSpotlightDown = useCallback((e) => {
- e.stopPropagation();
- Spotlight.focus("trandingnow_bestseller");
- }, []);
-
- const handleBlur = useCallback((itemIndex) => {
- if (itemIndex === 0) {
- handleStopScrolling();
+ const getFirstLabel = useCallback((rankOrder) => {
+ switch (rankOrder) {
+ case 1:
+ return `${rankOrder}st,`;
+ case 2:
+ return `${rankOrder}nd,`;
+ case 3:
+ return `${rankOrder}rd,`;
+ default:
+ return `${rankOrder}th,`;
}
}, []);
- const handleFocus = useCallback(
- (index) => () => {
- handleItemFocus(LOG_MENU.TRENDING_NOW_BEST_SELLER);
-
- if (cursorVisible) {
- return;
- }
- },
- [cursorVisible, handleItemFocus]
- );
-
- const handleSpotlightRight = useCallback((e) => {
- e.stopPropagation();
- Spotlight.focus("spotlightId-trendingNowTopBtn");
- }, []);
-
- const handleItemFocus = useCallback((nowMenu) => {
- setTimeout(() => dispatch(sendLogGNB(nowMenu)));
- }, []);
-
- const handleItemClick = useCallback(
- (e) => {
- const c = Spotlight.getCurrent();
- let targetSpotlightId = null;
- if (c) {
- targetSpotlightId = c.getAttribute("data-spotlight-id");
- }
- dispatch(
- updatePanel({
- name: panel_names.TRENDING_NOW_PANEL,
- panelInfo: {
- currentSpot: targetSpotlightId,
- focusedContainerId: focusedContainerIdRef.current,
- selectedIndex,
- },
- })
- );
- },
- [selectedIndex]
- );
-
- const onFocusedContainerId = useCallback((containerId) => {
- focusedContainerIdRef.current = containerId;
- }, []);
-
- useEffect(() => {
- if (panelInfo && panelInfo?.selectedIndex) {
- setSelectedIndex(panelInfo?.selectedIndex);
- }
- }, [panelInfo?.selectedIndex]);
-
return (
{selectedIndex >= 1 && showButton && (
)}
@@ -305,9 +243,9 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
>
{
{topInfos && topInfos?.length > 0 && (
{
label="POPULAR SHOW, Heading1"
/>
)}
- {bestSellerDatas && bestSellerDatas?.length > 0 && (
+ {bestSeller && bestSeller?.length > 0 && (
- {bestSellerDatas.map((item, index) => {
- const rankText =
- item.rankOrd === 1
- ? item.rankOrd + "st,"
- : item.rankOrd === 2
- ? item.rankOrd + "nd,"
- : item.rankOrd === 3
- ? item.rankOrd + "rd,"
- : item.rankOrd + "th,";
- return (
- handleBlur(index)}
- onClick={() => handleCardClick(item)}
- offerInfo={item.offerInfo}
- productId={item.prdtId}
- firstLabel={rankText}
- label={index * 1 + 1 + " of " + bestSellerDatas.length}
- lastLabel=" go to detail, button"
- spotlightId={
- "bs-spotlightId-" + removeDotAndColon(item.prdtId)
- }
- data-wheel-point={index >= 5}
- />
- );
- })}
+ {bestSeller.map((item, index) => (
+ = 5}
+ />
+ ))}
)}
{((topInfos && topInfos?.length > 0) ||
- (bestSellerDatas && bestSellerDatas?.length > 10)) && (
+ (bestSeller && bestSeller?.length > 10)) && (
)}
@@ -402,9 +330,11 @@ const TrendingNowPanel = ({ panelInfo, spotlightId, isOnTop, ...rest }) => {
showButton && (
)}