Skip to content

Commit

Permalink
fix bug pagination and search
Browse files Browse the repository at this point in the history
  • Loading branch information
@Alihaghighattalab
Alihaghighattalab committed Feb 19, 2024
1 parent b486e0d commit 3c6c5ab
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 89 deletions.
10 changes: 5 additions & 5 deletions components/Home/LazyBook.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
export default function LazyBookComponent() {
return (

<div class="min-h-[15rem] flex flex-col bg-transparent dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="flex flex-auto flex-col justify-center items-center p-4 md:p-5">
<div class="flex justify-center">
<div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-blue-600 rounded-full dark:text-blue-500" role="status" aria-label="loading">
<span class="sr-only">Loading...</span>
<div className="min-h-[15rem] flex flex-col bg-transparent dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div className="flex flex-auto flex-col justify-center items-center p-4 md:p-5">
<div className="flex justify-center">
<div className="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-blue-600 rounded-full dark:text-blue-500" role="status" aria-label="loading">
<span className="sr-only">Loading...</span>
</div>
</div>
</div>
Expand Down
130 changes: 46 additions & 84 deletions components/Home/Main.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,35 +11,29 @@ import LazyBookComponent from "./LazyBook";

export default function MainComponent() {
const router = useRouter(); // new instance for router
const { bookName, libraryId, pageId, subCategoryId, categoryId } =
const { bookName, libraryId, pageId, categoryId } =
router.query; //Load Params as Query

//CURRENT STATE

const [currentBookName, setCurrentBookName] = useState(
bookName != undefined ? bookName : ""
bookName ? bookName : ""
);

const [currentLibraryId, setCurrentLibraryId] = useState(
libraryId != undefined ? parseInt(libraryId) : null
libraryId ? parseInt(libraryId) : null
);

const [currentCategoryId, setCurrentCategoryId] = useState(
categoryId != undefined ? parseInt(categoryId) : null
);

const [currentSubCategoryId, setCurrentSubCategoryId] = useState(
subCategoryId != undefined ? parseInt(subCategoryId) : null
);

const [currenPageId, setCurrentPageId] = useState(
pageId ? parseInt(pageId) : 1
pageId != undefined ? parseInt(pageId) : 1
);

const [currenLoading, setCurrentLoading] = useState(true);

const [nearsetLibrary, setNearsetLibrary] = useState("");

const [defaultValueLibrary, setDefaultValueLibrary] = useState(libraryId);

const [books, setBooks] = useState([]);
Expand All @@ -50,10 +44,6 @@ export default function MainComponent() {

const [categories, setCategories] = useState([]);

const [subCategories, setSubCategories] = useState([]);

const [defaultValueLibraryName, setDefaultValueLibraryName] = useState(null);

//For GetAll Libraries
useEffect(() => {
AxiosInstance.get("/home/libraries").then((res) => {
Expand All @@ -70,43 +60,17 @@ export default function MainComponent() {
.catch((e) => console.log(e));
}, [currentLibraryId]);

//For GetAll Subcategories For CategoryId
useEffect(() => {
currentCategoryId &&
AxiosInstance.get(
`/home/subcategories?categoryId=${currentCategoryId}`
).then((res) => {
setSubCategories(res.data);
});
}, [currentCategoryId, currentLibraryId, categoryId, subCategoryId]);

useEffect(async () => {
//Load For One Step
setCurrentLoading(true);

await new Promise((resolve) => setTimeout(resolve, 500));

if (currentBookName.length < 1 && !libraryId) {
const storedArray =
(await JSON.parse(localStorage.getItem("last_search"))) || [];
console.log(storedArray);
const data = await suggestionService(storedArray);
setCurrentLoading(false);
setBooks(data);
}
}, []);

//LOGIC SEARCH AND CHANGE ROUTER
const bookSearch = () => {
const params = new URLSearchParams();
params.append("bookName", currentBookName);
const newPageNumber = 1
setCurrentPageId(newPageNumber)
currentBookName && params.append("bookName", currentBookName);
currentLibraryId && params.append("libraryId", currentLibraryId);
currenPageId && params.append("pageId", 1);
currentSubCategoryId &&
params.append("subCategoryId", currentSubCategoryId);
params.append("pageId", newPageNumber);
currentCategoryId && params.append("categoryId", currentCategoryId);

if (currentBookName.length > 1) {
if (currentBookName?.length > 1) {
setSearchToLocalStorage(currentBookName);
}

Expand All @@ -116,13 +80,12 @@ export default function MainComponent() {
};

const bookSearchLoadingPrevius = () => {
setCurrentPageId(currenPageId - 1);
const newPageNumber = currenPageId - 1
setCurrentPageId(newPageNumber);
const params = new URLSearchParams();
params.append("bookName", currentBookName);
currentBookName && params.append("bookName", currentBookName);
currentLibraryId && params.append("libraryId", currentLibraryId);
currenPageId && params.append("pageId", currenPageId);
currentSubCategoryId &&
params.append("subCategoryId", currentSubCategoryId);
currenPageId && params.append("pageId", newPageNumber);
currentCategoryId && params.append("categoryId", currentCategoryId);

const queryString = params.toString();
Expand All @@ -131,14 +94,12 @@ export default function MainComponent() {
};

const bookSearchLoading = () => {
setCurrentPageId(currenPageId + 1);

const newPageNumber = currenPageId + 1
setCurrentPageId(newPageNumber);
const params = new URLSearchParams();
params.append("bookName", currentBookName);
currentBookName && params.append("bookName", currentBookName);
currentLibraryId && params.append("libraryId", currentLibraryId);
currenPageId && params.append("pageId", currenPageId);
currentSubCategoryId &&
params.append("subCategoryId", currentSubCategoryId);
currenPageId && params.append("pageId", newPageNumber);
currentCategoryId && params.append("categoryId", currentCategoryId);

const queryString = params.toString();
Expand All @@ -153,12 +114,16 @@ export default function MainComponent() {
setCurrentLoading(true);
await new Promise((resolve) => setTimeout(resolve, 500));

const { bookName, libraryId, pageId, subCategoryId } = router.query;
const { bookName, libraryId, pageId, categoryId } = router.query;
console.log(router.query)
setCurrentCategoryId(categoryId)
setCurrentBookName(bookName)
setCurrentLibraryId(libraryId)
setCurrentPageId(parseInt(pageId))
const result = await last_search(
bookName,
libraryId,
pageId,
subCategoryId,
categoryId
);
setCurrentLoading(false);
Expand All @@ -181,7 +146,7 @@ export default function MainComponent() {
storedArray.splice(0, startIndex);
}


localStorage.setItem("last_search", JSON.stringify(storedArray));
};

Expand All @@ -200,14 +165,14 @@ export default function MainComponent() {
keyName="libraryName"
items={libraries}
label={"همه کتابخانه ها"}
defaultValue={defaultValueLibrary}
defaultValue={currentLibraryId}
onChange={(v) => setCurrentLibraryId(Number(v))}
ClassName={
"md:w-1/4 text-gray-900 rounded-lg bg-gray-50 border border-gray-300 focus:ring-green-500 focus:border-green-500 "
}
/>
<Select
defaultValue={categoryId}
defaultValue={currentCategoryId}
keyName="categoryName"
items={categories}
onChange={(v, keyName) => {
Expand All @@ -226,12 +191,9 @@ export default function MainComponent() {
type="search"
id="default-search"
className=" py-5 pr-5 pl-10 w-full md:text-base outline-none text-sm rounded-lg text-gray-900 bg-gray-50 border border-gray-300 focus:ring-green-500 focus:border-green-500"
placeholder={
bookName != undefined && bookName.length > 1
? bookName
: "جست و جو در بین 40 هزار جلد کتاب"
}
placeholder={"جست و جو در بین 40 هزار جلد کتاب"}
onChange={(e) => setCurrentBookName(e.target.value)}
value={currentBookName}
/>
<button
onClick={bookSearch}
Expand All @@ -248,28 +210,28 @@ export default function MainComponent() {



{currenLoading && <div className="flex items-center justify-center ">
<LazyBookComponent/>
{currenLoading && <div className="flex items-center justify-center ">
<LazyBookComponent />

</div>}
</div>}



{!currenLoading && <section className="grid md:grid-cols-2 lg:w-2/3 lg:mx-auto bg-white shadow-lg rounded-md p-2 lg:grid-cols-4 2xl:grid-cols-5 sm:grid-cols-3 grid-cols-3">
{books.map((value, index) => {
return (
<SingleRowBook
key={value.id}
imageSource={value.imageSource}
bookId={value.id}
categoryName={value.subCategory.category.categoryName}
bookName={value.bookName}
publisherName={value.publisherName}
seen={value.seen}
/>
);
})}
</section> }
{!currenLoading && <section className="grid md:grid-cols-2 lg:w-2/3 lg:mx-auto bg-white shadow-lg rounded-md p-2 lg:grid-cols-4 2xl:grid-cols-5 sm:grid-cols-3 grid-cols-3">
{books.map((value, index) => {
return (
<SingleRowBook
key={value.id}
imageSource={value.imageSource}
bookId={value.id}
categoryName={value.subCategory.category.categoryName}
bookName={value.bookName}
publisherName={value.publisherName}
seen={value.seen}
/>
);
})}
</section>}
<>
{!currenLoading && (
<div className="flex justify-center mx-auto my-16">
Expand Down

0 comments on commit 3c6c5ab

Please sign in to comment.