Merge pull request #38 from AlexSciFier/links-number-fix

Maximum number of links fixed
AlexSciFier · Mar 30, 2023 · cfe11cb · cfe11cb
2 parents 2a60594 + 28c5fa7
commit cfe11cb
Show file tree

Hide file tree

Showing 7 changed files with 120 additions and 99 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/context/bookmarkList.js b/frontend/src/context/bookmarkList.js
@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useRef, useState } from "react";
 import { deleteJSON, getJSON, putJSON } from "../helpers/fetch";
+import { useInterfaceSettings } from "./interfaceSettingsContext";
 
 const BookMarkList = createContext();
 
@@ -8,6 +9,8 @@ export function useBookMarkList() {
 }
 
 export function BookMarkListProvider({ children }) {
+  const { maxItemsInList } = useInterfaceSettings();
+
   const [bookmarkList, setBookmarkList] = useState([]);
   const [isBookmarksLoading, setIsBookmarksLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
@@ -21,7 +24,7 @@ export function BookMarkListProvider({ children }) {
 
   async function fetchBookmarks({
     offset = 0,
-    limit = 25,
+    limit = maxItemsInList,
     query,
     tag,
     category,

diff --git a/frontend/src/helpers/constants.js b/frontend/src/helpers/constants.js
@@ -1,5 +1,5 @@
 export const APP_NAME = "NeonLink";
-export const VERSION = "1.2.6";
+export const VERSION = "1.2.7";
 export const DEF_MAX_ITEMS = 20;
 export const DEF_COLUMNS = 3;
 export const CARD_HEADER_STYLE = [

diff --git a/frontend/src/pages/link/components/BookmarksHeader.jsx b/frontend/src/pages/link/components/BookmarksHeader.jsx
@@ -5,6 +5,7 @@ import { DEF_MAX_ITEMS } from "../../../helpers/constants";
 import { useLocalStorage } from "../../../hooks/useLocalStorage";
 import { useRef } from "react";
 import { useSearchParams } from "react-router-dom";
+import { useInterfaceSettings } from "../../../context/interfaceSettingsContext";
 
 export default function BookmarksHeader() {
   const [query, setQuery] = useState("");
@@ -13,7 +14,7 @@ export default function BookmarksHeader() {
   const delayedQuery = useCallback(debounce(updateBookmarkList, 800), [query]);
 
   const { fetchBookmarks } = useBookMarkList();
-  const [maxItemsInList] = useLocalStorage("maxItemsInList", DEF_MAX_ITEMS);
+  const { maxItemsInList } = useInterfaceSettings();
   const [searchParams] = useSearchParams();
 
   const firstUpdate = useRef(true);

diff --git a/frontend/src/pages/link/components/BookmarksList.jsx b/frontend/src/pages/link/components/BookmarksList.jsx
@@ -6,12 +6,11 @@ import SceletalBokmarkList from "./SceletalBokmarkList";
 import { useSearchParams } from "react-router-dom";
 import { useBookMarkList } from "../../../context/bookmarkList";
 import NoBookmarks from "./NoBookmarks";
-import { useLocalStorage } from "../../../hooks/useLocalStorage";
-import { DEF_MAX_ITEMS } from "../../../helpers/constants";
+import { useInterfaceSettings } from "../../../context/interfaceSettingsContext";
 
 export default function BookmarksList() {
   const [searchParams] = useSearchParams();
-  const [maxItemsInList] = useLocalStorage("maxItemsInList", DEF_MAX_ITEMS);
+  const { maxItemsInList } = useInterfaceSettings();
   const {
     bookmarkList,
     currentPage,
@@ -27,7 +26,7 @@ export default function BookmarksList() {
     let offset = (page - 1) * limit;
 
     let tag = searchParams.get("tag");
-    let category = searchParams.get("category")
+    let category = searchParams.get("category");
 
     if (tag || category) {
       fetchBookmarks({ offset, limit, tag, category });

diff --git a/frontend/src/pages/link/components/Pagination.jsx b/frontend/src/pages/link/components/Pagination.jsx
@@ -94,9 +94,25 @@ function range(maxPage, currentPage, siblings) {
   if (totalPageNumbers >= maxPage) {
     return [...Array(maxPage).keys()].map((idx) => ++idx);
   }
-  let centerArray = [...Array(siblings * 2 + 1).keys()];
-  centerArray = centerArray.map((idx) => {
+  let padedArray = [...Array(siblings * 2 + 1).keys()];
+
+  let startArray = padedArray.map((idx) => {
+    return idx + 1;
+  });
+
+  let centerArray = padedArray.map((idx) => {
     return idx + currentPage - siblings;
   });
+
+  let endArray = padedArray.reverse().map((idx) => {
+    return maxPage - idx;
+  });
+
+  if (currentPage <= 1 + siblings * 2 - 1) {
+    return [...startArray, "DOTS", maxPage];
+  }
+  if (currentPage > maxPage - siblings * 2) {
+    return [1, "DOTS", ...endArray];
+  }
   return [1, "DOTS", ...centerArray, "DOTS", maxPage];
 }