From c75c65de54fd0990c803985c708b7246577e4254 Mon Sep 17 00:00:00 2001 From: "hyunwoo93.cha" Date: Sat, 3 Feb 2024 02:06:14 +0900 Subject: [PATCH] =?UTF-8?q?searchPanel=20=EA=B2=80=EC=83=89=20=ED=9B=84=20?= =?UTF-8?q?ui=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EB=A1=9C=EC=A7=81?= =?UTF-8?q?=20=EB=B3=80=EA=B2=BD=20/=20reducer,=20action=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/actions/searchActions.js | 92 +++++++++++-------- .../src/reducers/searchReducer.js | 31 ++++--- com.twin.app.shoptime/src/utils/Config.js | 3 + .../NoSearchResults/NoSearchResults.jsx | 4 +- .../NoSearchResults.module.less | 11 +++ .../src/views/SearchPanel/SearchPanel.jsx | 13 ++- .../SearchItemResults/SearchItemResults.jsx | 1 - 7 files changed, 98 insertions(+), 57 deletions(-) diff --git a/com.twin.app.shoptime/src/actions/searchActions.js b/com.twin.app.shoptime/src/actions/searchActions.js index 0daf7219..5109ed04 100644 --- a/com.twin.app.shoptime/src/actions/searchActions.js +++ b/com.twin.app.shoptime/src/actions/searchActions.js @@ -1,51 +1,71 @@ import { URLS } from "../api/apiConfig"; import { TAxios } from "../api/TAxios"; +import { SEARCH_DATA_MAX_RESULTS_LIMIT } from "../utils/Config"; import { types } from "./actionTypes"; // Search 통합검색 (IBS) 데이터 조회 IF-LGSP-090 -export const getSearch = (params) => (dispatch, getState) => { - const { service, query, startIndex, maxResults, domain } = params; +let getSearchKey = null; +export const getSearch = + (params, startIndex = 1, key) => + (dispatch, getState) => { + const { service, query, domain } = params; + const maxResults = SEARCH_DATA_MAX_RESULTS_LIMIT; - const onSuccess = (response) => { - console.log("getSearch onSuccess: ", response.data); + let currentKey = key; + const onSuccess = (response) => { + console.log("getSearch onSuccess: ", response.data); - dispatch({ - type: types.GET_SEARCH, - payload: response.data, - }); + if (startIndex === 1) { + getSearchKey = new Date(); + currentKey = getSearchKey; - const processedData = response.data.data.result.results.reduce( - (acc, current) => { - acc.data[current.type] = current.docs; - acc.totalCount[current.type] = current.total_count; + dispatch({ + type: types.GET_SEARCH, + payload: response.data, + }); + } else if (getSearchKey === currentKey) { + dispatch({ + type: types.GET_SEARCH, + payload: response.data, + append: true, + }); + } - return acc; - }, - { data: {}, totalCount: {} } + const stateBeforeLoop = getState(); + const nextStartIndex = response.data.data.result.results.reduce( + (acc, category) => { + const { type, total_count } = category; + const fetchedCount = + stateBeforeLoop.search.searchDatas[type]?.length || + 0 + category.docs.length; + const remainingData = total_count - fetchedCount; + + return remainingData > 0 ? Math.max(acc, fetchedCount + 1) : acc; + }, + startIndex + ); + + if (nextStartIndex > startIndex) { + dispatch(getSearch(params, nextStartIndex, currentKey)); + } + }; + + const onFail = (error) => { + console.error("getSearch onFail: ", error); + }; + + TAxios( + dispatch, + getState, + "post", + URLS.GET_SEARCH, + {}, + { service, query, startIndex, maxResults, domain }, + onSuccess, + onFail ); - - dispatch({ - type: types.GET_SEARCH_PROCESSED, - payload: processedData, - }); }; - const onFail = (error) => { - console.error("getSearch onFail: ", error); - }; - - TAxios( - dispatch, - getState, - "post", - URLS.GET_SEARCH, - {}, - { service, query, startIndex, maxResults, domain }, - onSuccess, - onFail - ); -}; - export const resetSearch = (status) => ({ type: types.RESET_SEARCH, payload: status, diff --git a/com.twin.app.shoptime/src/reducers/searchReducer.js b/com.twin.app.shoptime/src/reducers/searchReducer.js index 2c881e68..93286e6c 100644 --- a/com.twin.app.shoptime/src/reducers/searchReducer.js +++ b/com.twin.app.shoptime/src/reducers/searchReducer.js @@ -2,28 +2,35 @@ import { types } from "../actions/actionTypes"; const initialState = { searchDatas: {}, - processedDatas: { - data: {}, - totalCount: {}, - }, + totalCount: {}, searchPerformed: false, }; export const searchReducer = (state = initialState, action) => { switch (action.type) { - case types.GET_SEARCH: - return { - ...state, - searchDatas: action.payload, - searchPerformed: true, - }; + case types.GET_SEARCH: { + const newResults = action.payload.data.result.results; + + const updatedSearchDatas = action.append ? { ...state.searchDatas } : {}; + newResults.forEach(({ type, docs }) => { + updatedSearchDatas[type] = + action.append && updatedSearchDatas[type] + ? updatedSearchDatas[type].concat(docs) + : docs; + }); + + const updatedTotalCount = action.append ? { ...state.totalCount } : {}; + newResults.forEach(({ type, total_count }) => { + updatedTotalCount[type] = total_count; + }); - case types.GET_SEARCH_PROCESSED: return { ...state, - processedDatas: action.payload, + searchDatas: updatedSearchDatas, + totalCount: updatedTotalCount, searchPerformed: true, }; + } case types.RESET_SEARCH: return { diff --git a/com.twin.app.shoptime/src/utils/Config.js b/com.twin.app.shoptime/src/utils/Config.js index 36fca8f9..aeb2a6ab 100644 --- a/com.twin.app.shoptime/src/utils/Config.js +++ b/com.twin.app.shoptime/src/utils/Config.js @@ -29,3 +29,6 @@ export const panel_names = { //button export const TBUTTON_PRESS_DELAY = 100; + +//search data +export const SEARCH_DATA_MAX_RESULTS_LIMIT = 30; diff --git a/com.twin.app.shoptime/src/views/SearchPanel/NoSearchResults/NoSearchResults.jsx b/com.twin.app.shoptime/src/views/SearchPanel/NoSearchResults/NoSearchResults.jsx index 7771a5a9..61fe545c 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/NoSearchResults/NoSearchResults.jsx +++ b/com.twin.app.shoptime/src/views/SearchPanel/NoSearchResults/NoSearchResults.jsx @@ -17,7 +17,9 @@ export default function NoSearchResults() { return (
- No Datas +
+ No Datas +

{$L("SORRY, NO RESULTS MATCHING YOUR SEARCH")}

diff --git a/com.twin.app.shoptime/src/views/SearchPanel/NoSearchResults/NoSearchResults.module.less b/com.twin.app.shoptime/src/views/SearchPanel/NoSearchResults/NoSearchResults.module.less index f1fe0dbc..47fffbb7 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/NoSearchResults/NoSearchResults.module.less +++ b/com.twin.app.shoptime/src/views/SearchPanel/NoSearchResults/NoSearchResults.module.less @@ -7,6 +7,17 @@ .info { text-align: center; + .imageBox { + .size(@w: 360px, @h: 180px); + margin: 0 auto; + background-size: cover; + + > img { + object-fit: cover; + .size(@w: 100%, @h: 100%); + } + } + > p { .font (@fontFamily: @baseFontBold, @fontSize: 36px); color: #a3a3a3; diff --git a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx index e6acb55e..0e0ce885 100644 --- a/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx +++ b/com.twin.app.shoptime/src/views/SearchPanel/SearchPanel.jsx @@ -21,19 +21,20 @@ export default function SearchPanel() { const recommandedKeywords = useSelector( (state) => state.myPage.recommandedKeywordData.data?.keywords ); - const searchDatas = useSelector( - (state) => state.search.searchDatas.data?.result.results + const { searchDatas: searchDatas, totalCount: totalCount } = useSelector( + (state) => state.search ); const { theme: themeDatas, show: showDatas, item: itemDatas, - } = useSelector((state) => state.search.processedDatas.data); + } = searchDatas || {}; const { theme: themeCount, show: showCount, item: itemCount, - } = useSelector((state) => state.search.processedDatas.totalCount); + } = totalCount || {}; + const searchPerformed = useSelector((state) => state.search.searchPerformed); const [currentPage, setCurrentPage] = useState(1); @@ -80,8 +81,6 @@ export default function SearchPanel() { getSearch({ service: "com.lgshop.app", query: query, - startIndex: 1, - maxResults: 10, domain: "theme,show,item", }) ); @@ -119,7 +118,7 @@ export default function SearchPanel() { onIconClick={() => handleSearchSubmit(searchQuery)} /> {searchPerformed ? ( - searchDatas && searchDatas.length > 0 ? ( + (searchDatas && themeDatas) || showDatas || itemDatas ? ( )}