60 lines
1.7 KiB
JavaScript
60 lines
1.7 KiB
JavaScript
import React, { useCallback, useEffect, useState } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import TInput 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";
|
|
|
|
const ITEMS_PER_PAGE = 9;
|
|
|
|
export default function SearchPanel() {
|
|
const dispatch = useDispatch();
|
|
|
|
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]);
|
|
|
|
return (
|
|
<TPanel className={css.panel}>
|
|
<TInput className={css.input} autoFocus />
|
|
<div>
|
|
{paginatedKeywords.map((keyword, index) => (
|
|
<div key={index}>{keyword.keywd}</div>
|
|
))}
|
|
</div>
|
|
<div>
|
|
<TButton onClick={handlePrev} disabled={currentPage === 1}>
|
|
PREV
|
|
</TButton>
|
|
<TButton
|
|
onClick={handleNext}
|
|
disabled={currentPage * ITEMS_PER_PAGE >= recommandedKeywords?.length}
|
|
>
|
|
NEXT
|
|
</TButton>
|
|
</div>
|
|
</TPanel>
|
|
);
|
|
}
|