optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FeaturedBrandsPanel] edited, for deep link

Browse Source
This commit is contained in:
younghoon100.park
2024-06-16 16:35:26 +09:00
parent 5f617066d0
commit 73e82abc3b
2 changed files with 64 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
com.twin.app.shoptime/src/actions/brandActions.js
View File

@@ -71,6 +71,7 @@ export const getBrandLiveChannelInfo = (props) => (dispatch, getState) => {
const onSuccess = (response) => {
// console.log("getBrandLiveChannelInfo onSuccess ", response.data);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
dispatch({
type: types.GET_BRAND_LIVE_CHANNEL_INFO,
@@ -78,13 +79,10 @@ export const getBrandLiveChannelInfo = (props) => (dispatch, getState) => {
data: response.data.data,
},
});
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
const onFail = (error) => {
console.error("getBrandLiveChannelInfo onFail ", error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
@@ -169,6 +167,7 @@ export const getBrandRecommendedShowInfo = (props) => (dispatch, getState) => {
const onSuccess = (response) => {
// console.log("getBrandRecommendedShowInfo onSuccess", response.data);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
dispatch({
type: types.GET_BRAND_RECOMMENDED_SHOW_INFO,
@@ -176,13 +175,10 @@ export const getBrandRecommendedShowInfo = (props) => (dispatch, getState) => {
data: response.data.data,
},
});
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
const onFail = (error) => {
console.error("getBrandRecommendedShowInfo onFail", error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
@@ -206,6 +202,7 @@ export const getBrandCreatorsInfo = (props) => (dispatch, getState) => {
const onSuccess = (response) => {
// console.log("getBrandCreatorsInfo onSuccess ", response.data);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
dispatch({
type: types.GET_BRAND_CREATORS_INFO,
@@ -213,13 +210,10 @@ export const getBrandCreatorsInfo = (props) => (dispatch, getState) => {
data: response.data.data,
},
});
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};
const onFail = (error) => {
console.error("getBrandCreatorsInfo onFail ", error);
dispatch(changeAppStatus({ showLoadingPanel: { show: false } }));
};

130
com.twin.app.shoptime/src/views/FeaturedBrandsPanel/FeaturedBrandsPanel.jsx
View File

@@ -1,10 +1,4 @@
import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
@@ -247,20 +241,21 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
const alamTimer = useRef(null);
const cbChangePageRef = useRef(null);
const hasPatnrId = Object.prototype.hasOwnProperty.call(panelInfo, "patnrId");
const hasLinkTpCd = Object.entries(panelInfo) //
const previousPanelIsDetail = Object.keys(panelInfo).length >= 6;
const previousActionOccurredInGNB =
Object.keys(panelInfo).length === 1 &&
Object.prototype.hasOwnProperty.call(panelInfo, "patnrId");
const isCameThroughDeepLink = Object.entries(panelInfo) //
.some(([key, value]) => key === "linkTpCd" && value);
const panelInfoLength = Object.keys(panelInfo).length;
const previousPanelIsDetail = useMemo(
() => panelInfoLength >= 6,
[panelInfoLength]
);
const previousActionOccurredInGNB = useMemo(
() => hasPatnrId && panelInfoLength === 1,
[hasPatnrId, panelInfoLength]
);
const isCameThroughDeepLink = useMemo(() => hasLinkTpCd, [hasLinkTpCd]);
// useEffect(() => {
// console.log(
// "%c pyh panelInfo",
// "background: dodgerblue; color: white ",
// panelInfo,
// Object.keys(panelInfo)?.length
// );
// }, [panelInfo]);
useEffect(() => {
if (!panelInfo?.noResetFlag) {
@@ -269,30 +264,27 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
}, [dispatch, panelInfo?.noResetFlag]);
useEffect(() => {
if (panelInfo) {
console.log(
"%c pyh panelInfo",
"background: dodgerblue; color: white ",
panelInfo,
Object.keys(panelInfo)?.length
);
if (
panelInfo?.patnrId &&
(previousActionOccurredInGNB || isCameThroughDeepLink)
) {
// console.log("%c pyh from effect", "background: dodgerblue; color: white");
if (previousActionOccurredInGNB || isCameThroughDeepLink) {
setIsInitialRendered(true);
setIsInitialFocusOccurred(false);
if (cbChangePageRef.current) {
cbChangePageRef.current(0, false);
}
setIsInitialRendered(true);
setIsInitialFocusOccurred(false);
if (cbChangePageRef.current) {
cbChangePageRef.current(0, false);
}
}
}, [panelInfo, previousActionOccurredInGNB, isCameThroughDeepLink]);
}, [panelInfo?.patnrId, previousActionOccurredInGNB, isCameThroughDeepLink]);
useEffect(() => {
if (!brandInfo) {
console.log(
"%c pyh 0 brandInfo & upcomAlamUseFlag effect",
"background: dodgerblue; color: white"
);
// console.log(
// "%c pyh brandInfo & upcomAlamUseFlag effect",
// "background: dodgerblue; color: white"
// );
dispatch(getBrandList());
dispatch(getMyUpcomingAlertShow());
@@ -301,25 +293,11 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
useEffect(() => {
if (brandInfo && isInitialRendered && panelInfo) {
if (previousPanelIsDetail) {
console.log(
"%c pyh 1 initial Detail effect",
"background: dodgerblue; color: white"
);
setSelectedBrandInfo(
findItemByValue(panelInfo?.brandInfo, panelInfo?.patnrId)
);
setFirstFocusableTargetId(panelInfo?.firstTargetId);
setIsInitialRendered(false);
return;
}
if (previousActionOccurredInGNB || isCameThroughDeepLink) {
console.log(
"%c pyh 1 initial GNB or QuickMenu effect",
"background: dodgerblue; color: white"
);
// console.log(
// "%c pyh initial GNB or QuickMenu effect",
// "background: dodgerblue; color: white"
// );
setSelectedPatncNm(
findItemByValue(brandInfo, panelInfo?.patnrId)?.patncNm
@@ -328,6 +306,19 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
setFirstFocusableTargetId("spotlightId-" + brandInfo[0]?.patnrId);
setIsInitialRendered(false);
}
if (previousPanelIsDetail) {
// console.log(
// "%c pyh initial Detail effect",
// "background: dodgerblue; color: white"
// );
setSelectedBrandInfo(
findItemByValue(panelInfo?.brandInfo, panelInfo?.patnrId)
);
setFirstFocusableTargetId(panelInfo?.firstTargetId);
setIsInitialRendered(false);
}
}
}, [
brandInfo,
@@ -340,10 +331,10 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
useEffect(() => {
if (brandInfo && selectedPatnrId) {
console.log(
"%c pyh 2 selectedPatnrId effect",
"background: dodgerblue; color: white"
);
// console.log(
// "%c pyh selectedPatnrId effect",
// "background: dodgerblue; color: white"
// );
dispatch(getBrandLayoutInfo({ patnrId: selectedPatnrId }));
dispatch(getBrandLiveChannelInfo({ patnrId: selectedPatnrId }));
@@ -374,20 +365,15 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
useEffect(() => {
if (firstFocusableTargetId && !isInitialFocusOccurred) {
console.log(
"%c pyh focus effect",
"background: dodgerblue; color: white"
);
let targetId;
targetId = "spotlightId-" + panelInfo?.patnrId;
if (previousPanelIsDetail) {
console.log(
"%c pyh detail focus effect",
"background: dodgerblue; color: white"
);
// console.log(
// "%c pyh detail focus effect",
// "background: dodgerblue; color: white"
// );
setSelectedPatncNm(
findItemByValue(panelInfo?.brandInfo, panelInfo?.patnrId)?.patncNm
@@ -406,6 +392,11 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
}
targetId = panelInfo?.lastFocusedTargetId;
} else {
// console.log(
// "%c pyh focus effect",
// "background: dodgerblue; color: white"
// );
}
initialFocusTimeoutJob.current.start(() => {
@@ -615,7 +606,7 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
{
<TVerticalPagenator
className={css.tVerticalPagenator}
spotlightId={"home_verticalPagenator"}
spotlightId={"brand_verticalPagenator"}
// enableFocusAction={false}
defaultContainerId={panelInfo?.focusedContainerId}
onFocusedContainerId={onFocusedContainerId}
@@ -826,6 +817,7 @@ export default function FeaturedBrandsPanel({ panelInfo, spotlightId }) {
onClick={handleTopButtonClick}
size={null}
type={TYPES.topButton}
data-wheel-point
/>
)}
</TVerticalPagenator>