[FeaturedBrandsPanel] fix issue, SHOPTIME-2507

com.twin.app.shoptime/src/actions/actionTypes.js

@@ -71,6 +71,7 @@ export const types = {
   GET_BRAND_SHOWROOM: "GET_BRAND_SHOWROOM",
   SET_BRAND_LIVE_CHANNEL_UPCOMING: "SET_BRAND_LIVE_CHANNEL_UPCOMING",
   SET_BRAND_CHAN_INFO: "SET_BRAND_CHAN_INFO",
+  RESET_BRAND_STATE: "RESET_BRAND_STATE",
 
   // main actions
   GET_SUB_CATEGORY: "GET_SUB_CATEGORY",

com.twin.app.shoptime/src/reducers/brandReducer.js

@@ -170,37 +170,8 @@ export const brandReducer = (state = initialState, action) => {
         brandLiveChannelInfoData: action.payload,
       };
 
-    case "RESET_BRAND_STATE":
-      return {
-        ...state,
-        brandLayoutInfoData: {
-          data: {},
-        },
-        brandLiveChannelInfoData: {
-          data: {},
-        },
-        brandTsvInfoData: {
-          data: {},
-        },
-        brandRecommendedShowInfoData: {
-          data: {},
-        },
-        brandCreatorsInfoData: {
-          data: {},
-        },
-        brandSeriesInfoData: {
-          data: {},
-        },
-        brandCategoryInfoData: {
-          data: {},
-        },
-        brandBestSellerData: {
-          data: {},
-        },
-        brandShowroomData: {
-          data: {},
-        },
-      };
+    case types.RESET_BRAND_STATE:
+      return initialState;
 
     default:
       return state;

com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx

@@ -11,6 +11,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { Job } from "@enact/core/util";
 import Spotlight from "@enact/spotlight";
 
+import { types } from "../../actions/actionTypes";
 import {
   getBrandBestSeller,
   getBrandCategoryInfo,
@@ -42,7 +43,7 @@ import useLogService from "../../hooks/useLogService";
 import usePrevious from "../../hooks/usePrevious";
 import { ACTIVE_POPUP, panel_names } from "../../utils/Config";
 import { $L } from "../../utils/helperMethods";
-import { SpotlightIds } from "../../utils/SpotlightIds";
+// import { SpotlightIds } from "../../utils/SpotlightIds";
 import Banner from "./Banner/Banner";
 import FeaturedBestSeller from "./FeaturedBestSeller/FeaturedBestSeller";
 import css from "./FeaturedBrandsPanel.module.less";
@@ -227,7 +228,7 @@ export default function FeaturedBrandsPanel({
   const brandShowroomInfo = useSelector(
     (state) => state.brand.brandShowroomData.data.brandShowroomInfo
   );
-  const cbChangePageRef = useRef(null);
+
   const [firstFocusableTargetId, setFirstFocusableTargetId] = useState(null);
   const [isInitialFocusOccurred, setIsInitialFocusOccurred] = useState(false);
   const [isInitialRendered, setIsInitialRendered] = useState(true);
@@ -247,8 +248,8 @@ export default function FeaturedBrandsPanel({
   const focusedContainerIdRef = usePrevious(focusedContainerId);
   const forceUpdateJob = useRef(new Job(() => forceUpdate({}), 300));
   const initialFocusTimeoutJob = useRef(new Job((func) => func(), 600));
-
   const alamTimer = useRef(null);
+  const cbChangePageRef = useRef(null);
 
   const previousPanelIsDetail = useMemo(
     () => Object.keys(panelInfo)?.length >= 6,
@@ -267,6 +268,12 @@ export default function FeaturedBrandsPanel({
     [panelInfo]
   );
 
+  useEffect(() => {
+    if (!panelInfo?.noResetFlag) {
+      dispatch({ type: types.RESET_BRAND_STATE });
+    }
+  }, [panelInfo?.noResetFlag]);
+
   useEffect(() => {
     if (panelInfo) {
       // console.log(
@@ -505,8 +512,6 @@ export default function FeaturedBrandsPanel({
     return () => forceUpdateJobValue.stop();
   }, [selectedCatCdLv1, selectedCatCdLv2, selectedSeriesId]);
 
-  const panels = useSelector((state) => state.panels.panels);
-
   useEffect(() => {
     const initialFocusTimeoutJobValue = initialFocusTimeoutJob.current;
 
@@ -517,8 +522,6 @@ export default function FeaturedBrandsPanel({
         //   "background: dodgerblue; color: white"
         // );
 
-        // dispatch({ type: "RESET_BRAND_STATE" });
-
         const firstTarget = document.querySelector(
           `[data-focusable-index="0"]`
         );
@@ -539,8 +542,9 @@ export default function FeaturedBrandsPanel({
                 brandInfo,
                 exprOrd,
                 firstTargetId,
-                lastFocusedTargetId,
                 focusedContainerId: focusedContainerIdRef.current,
+                lastFocusedTargetId,
+                noResetFlag: true,
               },
             })
           );
@@ -601,6 +605,7 @@ export default function FeaturedBrandsPanel({
     },
     [sendLogGNB]
   );
+
   const onFocusedContainerId = useCallback((containerId) => {
     setFocusedContainerId(containerId);
   }, []);
@@ -612,7 +617,7 @@ export default function FeaturedBrandsPanel({
         scrollable={false}
         spotlightDisabled={spotlightDisabled}
       >
-        {selectedPatnrId && (
+        {
           <TVerticalPagenator
             className={css.tVerticalPagenator}
             spotlightId={"home_verticalPagenator"}
@@ -828,7 +833,7 @@ export default function FeaturedBrandsPanel({
               />
             )}
           </TVerticalPagenator>
-        )}
+        }
       </TBody>
 
       {(activePopup === ACTIVE_POPUP.reminderPopup ||