84 lines
2.4 KiB
JavaScript
84 lines
2.4 KiB
JavaScript
import React, { useCallback, useEffect, useState, useRef } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import TInput, { KINDS, ICONS } from "../../components/TInput/TInput";
|
|
import TPanel from "../../components/TPanel/TPanel";
|
|
import TButton from "../../components/TButton/TButton";
|
|
import { $L } from "../../utils/helperMethods";
|
|
import css from "./SearchPanel.module.less";
|
|
import TIconButton, {
|
|
ICON_TYPES,
|
|
SIZES,
|
|
} from "../../components/TIconButton/TIconButton";
|
|
import classNames from "classnames";
|
|
|
|
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
|
|
|
|
const Container = SpotlightContainerDecorator(
|
|
{ enterTo: "last-focused" },
|
|
"div"
|
|
);
|
|
|
|
const ITEMS_PER_PAGE = 9;
|
|
|
|
export default function SearchPanel() {
|
|
const recommandedKeywords = useSelector(
|
|
(state) => state.myPage.recommandedKeywordData.data?.keywords
|
|
);
|
|
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [paginatedKeywords, setPaginatedKeywords] = useState([]);
|
|
|
|
useEffect(() => {
|
|
if (recommandedKeywords) {
|
|
const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
|
|
const endIndex = startIndex + ITEMS_PER_PAGE;
|
|
|
|
setPaginatedKeywords(recommandedKeywords.slice(startIndex, endIndex));
|
|
}
|
|
}, [recommandedKeywords, currentPage]);
|
|
|
|
const handleNext = useCallback(() => {
|
|
setCurrentPage((prev) => prev + 1);
|
|
}, [currentPage]);
|
|
|
|
const handlePrev = useCallback(() => {
|
|
setCurrentPage((prev) => (prev > 1 ? prev - 1 : prev));
|
|
}, [currentPage]);
|
|
|
|
const hasPrevPage = currentPage > 1;
|
|
const hasNextPage =
|
|
currentPage * ITEMS_PER_PAGE < recommandedKeywords?.length;
|
|
|
|
return (
|
|
<TPanel className={css.panel}>
|
|
<TInput
|
|
className={css.input}
|
|
autoFocus
|
|
kind={KINDS.withIcon}
|
|
icon={ICONS.search}
|
|
/>
|
|
{hasPrevPage && (
|
|
<TIconButton
|
|
iconType={ICON_TYPES.leftArrow}
|
|
className={classNames(css.arrow, css.arrowLeft)}
|
|
onClick={handlePrev}
|
|
/>
|
|
)}
|
|
<Container className={css.keywordsGrid}>
|
|
{paginatedKeywords.map((keyword, index) => (
|
|
<TButton key={index} className={css.keywordBox}>
|
|
{keyword.keywd}
|
|
</TButton>
|
|
))}
|
|
</Container>
|
|
{hasNextPage && (
|
|
<TIconButton
|
|
iconType={ICON_TYPES.rightArrow}
|
|
className={classNames(css.arrow, css.arrowRight)}
|
|
onClick={handleNext}
|
|
/>
|
|
)}
|
|
</TPanel>
|
|
);
|
|
}
|