From 1a82a9b4be0e2ee6d8d1456209c227ec3551495c Mon Sep 17 00:00:00 2001 From: SNUPI Date: Sun, 18 Jun 2023 02:50:16 +0900 Subject: [PATCH 1/6] [ feat ] card collection url :: all --- .../hooks/useNavigateCardCollection.ts | 2 +- .../CardCollectionPage/hooks/useCardLists.ts | 19 ++++++++++++++++++- src/@components/CardCollectionPage/index.tsx | 6 +----- 3 files changed, 20 insertions(+), 7 deletions(-) diff --git a/src/@components/@common/hooks/useNavigateCardCollection.ts b/src/@components/@common/hooks/useNavigateCardCollection.ts index 56ee66af..271d605b 100644 --- a/src/@components/@common/hooks/useNavigateCardCollection.ts +++ b/src/@components/@common/hooks/useNavigateCardCollection.ts @@ -19,7 +19,7 @@ export default function useNavigateCardCollection(locationType: LocationType) { switch (locationType) { case LocationType.ALL: return (sliderIdx = 0) => { - navigate(routePaths.CardCollection, { state: { type: LocationType.ALL } }); + navigate(`${routePaths.CardCollection}?type=${LocationType.ALL}`); setSliderIdx(sliderIdx); }; diff --git a/src/@components/CardCollectionPage/hooks/useCardLists.ts b/src/@components/CardCollectionPage/hooks/useCardLists.ts index 7a07d046..1191b55b 100644 --- a/src/@components/CardCollectionPage/hooks/useCardLists.ts +++ b/src/@components/CardCollectionPage/hooks/useCardLists.ts @@ -1,4 +1,5 @@ import qs from "qs"; +import { useLocation } from "react-router-dom"; import useSWR from "swr"; import { realReq } from "../../../core/api/common/axios"; @@ -12,9 +13,13 @@ interface ExtendedCardList extends Array { cards?: CardList[]; // with medly id } -export function useCardLists(cardsTypeLocation: CardsTypeLocation) { +export function useCardLists() { + const location = useLocation(); + const cardsTypeLocation = getLocationInfoByQueries(location.search); + const fetchingKeyByLocation = getSWRFetchingKeyByLocation(cardsTypeLocation); const optionsByLocation = getSWROptionsByLocation(cardsTypeLocation); + const { data } = useSWR>( fetchingKeyByLocation, realReq.GET_SWR, @@ -43,6 +48,18 @@ function getReturnCardLists( } } +function getLocationInfoByQueries(queries: string): CardsTypeLocation { + return queries + .split("?") + .splice(1) + .reduce((acc: { [key: string]: string }, query) => { + const [key, value] = query.split("="); + acc[key] = value; + + return acc; + }, {}) as unknown as CardsTypeLocation; +} + function getSWRFetchingKeyByLocation(cardsTypeLocation: CardsTypeLocation) { switch (cardsTypeLocation.type) { case LocationType.CATEGORY: diff --git a/src/@components/CardCollectionPage/index.tsx b/src/@components/CardCollectionPage/index.tsx index f2bc0a1b..65248149 100644 --- a/src/@components/CardCollectionPage/index.tsx +++ b/src/@components/CardCollectionPage/index.tsx @@ -1,8 +1,6 @@ -import { useLocation } from "react-router-dom"; import { useRecoilValue } from "recoil"; import { isSliderDownState } from "../../core/atom/slider"; -import { CardsTypeLocation } from "../../types/cardCollection"; import { GTM_CLASS_NAME } from "../../util/const/gtm"; import HeadlessCTAButton from "../@common/CTABtn/HeadlessCTAButton"; import Header from "../@common/Header"; @@ -30,9 +28,7 @@ function CardCollectionContent() { useGTMPage(); useScroll(); - const location = useLocation(); - const cardsTypeLoaction = location.state as CardsTypeLocation; - const { cardLists, fetchCardListsWithFilter } = useCardLists(cardsTypeLoaction); + const { cardLists, fetchCardListsWithFilter } = useCardLists(); const { isVisibleCTAButton, intersectionObserverRef: lastCardObsvRef } = useCTAFilter(); From dcf0bd890a54ae12eb6e190b6d119a1fafd9ff35 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Sun, 18 Jun 2023 02:54:20 +0900 Subject: [PATCH 2/6] [ feat ] card collection url :: best, bookmark --- src/@components/@common/Header/index.tsx | 5 +---- src/@components/@common/hooks/useNavigateCardCollection.ts | 4 ++-- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/@components/@common/Header/index.tsx b/src/@components/@common/Header/index.tsx index a259038c..e83741bf 100644 --- a/src/@components/@common/Header/index.tsx +++ b/src/@components/@common/Header/index.tsx @@ -1,13 +1,10 @@ -import { lazy } from "react"; - import { IcHamburger, IcLogo } from "../../../asset/icon"; import { routePaths } from "../../../core/routes/path"; import { GTM_CLASS_NAME } from "../../../util/const/gtm"; import useModal from "../hooks/useModal"; +import MenuBar from "../MenuBar"; import * as St from "./style"; -const MenuBar = lazy(() => import("../MenuBar")); - export default function Header() { const { isModalOpen, toggleModal } = useModal(); diff --git a/src/@components/@common/hooks/useNavigateCardCollection.ts b/src/@components/@common/hooks/useNavigateCardCollection.ts index 271d605b..1583662a 100644 --- a/src/@components/@common/hooks/useNavigateCardCollection.ts +++ b/src/@components/@common/hooks/useNavigateCardCollection.ts @@ -25,13 +25,13 @@ export default function useNavigateCardCollection(locationType: LocationType) { case LocationType.BEST: return (sliderIdx = 0) => { - navigate(routePaths.CardCollection, { state: { type: LocationType.BEST } }); + navigate(`${routePaths.CardCollection}?type=${LocationType.BEST}`); setSliderIdx(sliderIdx); }; case LocationType.BOOKMARK: return (sliderIdx = 0) => { - navigate(routePaths.CardCollection, { state: { type: LocationType.BOOKMARK } }); + navigate(`${routePaths.CardCollection}?type=${LocationType.BOOKMARK}`); setSliderIdx(sliderIdx); }; From 7266bfc4e8228cec66e7a6ecad3ef6aa819b7511 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Sun, 18 Jun 2023 02:56:16 +0900 Subject: [PATCH 3/6] [ feat ] card collection url :: category --- src/@components/@common/hooks/useNavigateCardCollection.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/@components/@common/hooks/useNavigateCardCollection.ts b/src/@components/@common/hooks/useNavigateCardCollection.ts index 1583662a..8f581260 100644 --- a/src/@components/@common/hooks/useNavigateCardCollection.ts +++ b/src/@components/@common/hooks/useNavigateCardCollection.ts @@ -37,7 +37,7 @@ export default function useNavigateCardCollection(locationType: LocationType) { case LocationType.CATEGORY: return (categoryId: string, sliderIdx = 0) => { - navigate(routePaths.CardCollection, { state: { type: LocationType.CATEGORY, categoryId } }); + navigate(`${routePaths.CardCollection}?type=${LocationType.CATEGORY}?categoryId=${categoryId}`); setSliderIdx(sliderIdx); }; From 2e65e370a2d95dcf0564d2fb2066356e9288bda1 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Sun, 18 Jun 2023 02:57:14 +0900 Subject: [PATCH 4/6] [ feat ] card collection url :: medley --- src/@components/@common/hooks/useNavigateCardCollection.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/@components/@common/hooks/useNavigateCardCollection.ts b/src/@components/@common/hooks/useNavigateCardCollection.ts index 8f581260..8f7106ff 100644 --- a/src/@components/@common/hooks/useNavigateCardCollection.ts +++ b/src/@components/@common/hooks/useNavigateCardCollection.ts @@ -51,7 +51,7 @@ export default function useNavigateCardCollection(locationType: LocationType) { case LocationType.MEDLEY: return (medleyId: string, sliderIdx = 0) => { - navigate(routePaths.CardCollection, { state: { type: LocationType.MEDLEY, medleyId } }); + navigate(`${routePaths.CardCollection}?type=${LocationType.MEDLEY}?medleyId=${medleyId}`); setSliderIdx(sliderIdx); }; } From 781e199af9556c8ba25272fa2386a8817122636d Mon Sep 17 00:00:00 2001 From: SNUPI Date: Sun, 18 Jun 2023 03:35:49 +0900 Subject: [PATCH 5/6] [ feat ] card collection url :: filter --- .../hooks/useNavigateCardCollection.ts | 22 ++++++-- .../CardCollectionPage/hooks/useCardLists.ts | 56 ++++++++++--------- src/types/cardCollection.ts | 2 +- 3 files changed, 48 insertions(+), 32 deletions(-) diff --git a/src/@components/@common/hooks/useNavigateCardCollection.ts b/src/@components/@common/hooks/useNavigateCardCollection.ts index 8f7106ff..a3d753f2 100644 --- a/src/@components/@common/hooks/useNavigateCardCollection.ts +++ b/src/@components/@common/hooks/useNavigateCardCollection.ts @@ -1,3 +1,4 @@ +import qs from "qs"; import { useNavigate } from "react-router-dom"; import { useSetRecoilState } from "recoil"; @@ -37,22 +38,33 @@ export default function useNavigateCardCollection(locationType: LocationType) { case LocationType.CATEGORY: return (categoryId: string, sliderIdx = 0) => { - navigate(`${routePaths.CardCollection}?type=${LocationType.CATEGORY}?categoryId=${categoryId}`); + navigate(`${routePaths.CardCollection}?type=${LocationType.CATEGORY}&categoryId=${categoryId}`); setSliderIdx(sliderIdx); }; case LocationType.FILTER: return (filterTypes: string[], sliderIdx = 0) => { - navigate(routePaths.CardCollection, { - state: { type: LocationType.FILTER, filterTypes }, - }); + navigate( + `${routePaths.CardCollection}?type=${LocationType.FILTER}&filterTypes=${parseFilterTypesToString( + filterTypes, + )}`, + ); setSliderIdx(sliderIdx); }; case LocationType.MEDLEY: return (medleyId: string, sliderIdx = 0) => { - navigate(`${routePaths.CardCollection}?type=${LocationType.MEDLEY}?medleyId=${medleyId}`); + navigate(`${routePaths.CardCollection}?type=${LocationType.MEDLEY}&medleyId=${medleyId}`); setSliderIdx(sliderIdx); }; } } + +function parseFilterTypesToString(filterTypes: string[]): string { + return qs.stringify( + { + search: filterTypes, + }, + { arrayFormat: "repeat" }, + ); +} diff --git a/src/@components/CardCollectionPage/hooks/useCardLists.ts b/src/@components/CardCollectionPage/hooks/useCardLists.ts index 1191b55b..65abfb00 100644 --- a/src/@components/CardCollectionPage/hooks/useCardLists.ts +++ b/src/@components/CardCollectionPage/hooks/useCardLists.ts @@ -15,11 +15,12 @@ interface ExtendedCardList extends Array { export function useCardLists() { const location = useLocation(); - const cardsTypeLocation = getLocationInfoByQueries(location.search); + const cardsTypeLocation = getLocationInfoByQueryString(location.search); const fetchingKeyByLocation = getSWRFetchingKeyByLocation(cardsTypeLocation); const optionsByLocation = getSWROptionsByLocation(cardsTypeLocation); + console.log("cardsTypeLocation", cardsTypeLocation); const { data } = useSWR>( fetchingKeyByLocation, realReq.GET_SWR, @@ -48,16 +49,31 @@ function getReturnCardLists( } } -function getLocationInfoByQueries(queries: string): CardsTypeLocation { - return queries - .split("?") - .splice(1) - .reduce((acc: { [key: string]: string }, query) => { - const [key, value] = query.split("="); - acc[key] = value; +type Obj = { [key: string]: string }; +function getLocationInfoByQueryString(queryString: string): CardsTypeLocation { + const exclusiveQuestionMarkQueryString = queryString.slice(1); + const firstAndMarkIdx = exclusiveQuestionMarkQueryString.indexOf("&"); - return acc; - }, {}) as unknown as CardsTypeLocation; + if (firstAndMarkIdx === -1) { + const [key, value] = exclusiveQuestionMarkQueryString.split("="); + + const locationInfo: Obj = {}; + locationInfo[key] = value; + + return locationInfo as unknown as CardsTypeLocation; + } + + // ?A=B&C=DDD 2개까지 + return [ + exclusiveQuestionMarkQueryString.slice(0, firstAndMarkIdx), + exclusiveQuestionMarkQueryString.slice(firstAndMarkIdx + 1), + ].reduce((acc: Obj, query) => { + const firstEqualMarkIdx = query.indexOf("="); + const [key, value] = [query.slice(0, firstEqualMarkIdx), query.slice(firstEqualMarkIdx + 1)]; + acc[key] = value; + + return acc; + }, {}) as unknown as CardsTypeLocation; } function getSWRFetchingKeyByLocation(cardsTypeLocation: CardsTypeLocation) { @@ -70,24 +86,10 @@ function getSWRFetchingKeyByLocation(cardsTypeLocation: CardsTypeLocation) { return `${PATH.USERS_}${PATH.USERS_BOOKMARK}`; case LocationType.MEDLEY: return `${PATH.MEDLEY}/${cardsTypeLocation.medleyId}`; - case LocationType.ALL: { - const searchParams = qs.stringify( - { - search: ["태그"], - }, - { arrayFormat: "repeat" }, - ); - return `${PATH.CATEGORIES_}${PATH.CATEGORIES_CARDS}?${searchParams}`; - } case LocationType.FILTER: { - const searchParams = qs.stringify( - { - search: cardsTypeLocation.filterTypes, - }, - { arrayFormat: "repeat" }, - ); - return `${PATH.CATEGORIES_}${PATH.CATEGORIES_CARDS}?${searchParams}`; + return `${PATH.CATEGORIES_}${PATH.CATEGORIES_CARDS}?${cardsTypeLocation.filterTypes}`; } + case LocationType.ALL: default: { const searchParams = qs.stringify( { @@ -106,6 +108,8 @@ function getSWROptionsByLocation(cardsTypeLocation: CardsTypeLocation) { case LocationType.BOOKMARK: case LocationType.MEDLEY: return { suspense: true }; + // case LocationType.FILTER: + // return { suspense: true, revalidateOnMount: false }; default: return { suspense: true, revalidateOnMount: true, dedupingInterval: 700 }; } diff --git a/src/types/cardCollection.ts b/src/types/cardCollection.ts index 391f6b6b..a1e1db75 100644 --- a/src/types/cardCollection.ts +++ b/src/types/cardCollection.ts @@ -25,7 +25,7 @@ interface CategoryTypeLocation { interface FilterTypeLocation { type: LocationType.FILTER; - filterTypes: string[]; + filterTypes: string; } interface MedleyTypeLocation { From b6ddcfee8a798cadbfea854ec0119e052ef2b2c7 Mon Sep 17 00:00:00 2001 From: SNUPI Date: Sun, 18 Jun 2023 03:42:14 +0900 Subject: [PATCH 6/6] [ chore ] remove unused code --- src/@components/CardCollectionPage/hooks/useCardLists.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/@components/CardCollectionPage/hooks/useCardLists.ts b/src/@components/CardCollectionPage/hooks/useCardLists.ts index 65abfb00..d795e73a 100644 --- a/src/@components/CardCollectionPage/hooks/useCardLists.ts +++ b/src/@components/CardCollectionPage/hooks/useCardLists.ts @@ -20,7 +20,6 @@ export function useCardLists() { const fetchingKeyByLocation = getSWRFetchingKeyByLocation(cardsTypeLocation); const optionsByLocation = getSWROptionsByLocation(cardsTypeLocation); - console.log("cardsTypeLocation", cardsTypeLocation); const { data } = useSWR>( fetchingKeyByLocation, realReq.GET_SWR, @@ -108,8 +107,6 @@ function getSWROptionsByLocation(cardsTypeLocation: CardsTypeLocation) { case LocationType.BOOKMARK: case LocationType.MEDLEY: return { suspense: true }; - // case LocationType.FILTER: - // return { suspense: true, revalidateOnMount: false }; default: return { suspense: true, revalidateOnMount: true, dedupingInterval: 700 }; }