From 1056c943d3de790cb96ddd829eb0e65c9d576a50 Mon Sep 17 00:00:00 2001
From: fadingNA <nplodthong@myseneca.ca>
Date: Sun, 10 Nov 2024 14:39:56 -0500
Subject: [PATCH] fix remove button on navigation sidebar and setting/document

---
 frontend/src/Navigation.tsx                   |  9 +++++
 .../src/components/DocumentPagination.tsx     |  8 +++--
 frontend/src/models/misc.ts                   |  1 +
 frontend/src/settings/Documents.tsx           | 33 ++++++++++---------
 frontend/src/settings/index.tsx               | 28 ++++++++++++----
 5 files changed, 55 insertions(+), 24 deletions(-)

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 72c0d57a..324d5aa0 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -34,10 +34,12 @@ import {
   selectSelectedDocs,
   selectSelectedDocsStatus,
   selectSourceDocs,
+  selectPaginatedDocuments,
   setConversations,
   setModalStateDeleteConv,
   setSelectedDocs,
   setSourceDocs,
+  setPaginatedDocuments,
 } from './preferences/preferenceSlice';
 import Spinner from './assets/spinner.svg';
 import SpinnerDark from './assets/spinner-dark.svg';
@@ -72,6 +74,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const conversations = useSelector(selectConversations);
   const modalStateDeleteConv = useSelector(selectModalStateDeleteConv);
   const conversationId = useSelector(selectConversationId);
+  const paginatedDocuments = useSelector(selectPaginatedDocuments);
   const [isDeletingConversation, setIsDeletingConversation] = useState(false);
 
   const { isMobile } = useMediaQuery();
@@ -143,6 +146,12 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
       })
       .then((updatedDocs) => {
         dispatch(setSourceDocs(updatedDocs));
+        const updatedPaginatedDocs = paginatedDocuments?.filter(
+          (document) => document.id !== doc.id,
+        );
+        dispatch(
+          setPaginatedDocuments(updatedPaginatedDocs || paginatedDocuments),
+        );
         dispatch(
           setSelectedDocs(
             Array.isArray(updatedDocs) &&
diff --git a/frontend/src/components/DocumentPagination.tsx b/frontend/src/components/DocumentPagination.tsx
index 3edeff9d..b0532362 100644
--- a/frontend/src/components/DocumentPagination.tsx
+++ b/frontend/src/components/DocumentPagination.tsx
@@ -48,10 +48,14 @@ const Pagination: React.FC<PaginationProps> = ({
         <select
           value={rowsPerPage}
           onChange={(e) => onRowsPerPageChange(Number(e.target.value))}
-          className="border border-gray-300 rounded px-2 py-1 dark:bg-transparent dark:text-gray-50"
+          className="border border-gray-300 rounded px-2 py-1 dark:bg-dark-charcoal dark:text-gray-50"
         >
           {rowsPerPageOptions.map((option) => (
-            <option key={option} value={option}>
+            <option
+              className="bg-white dark:bg-dark-charcoal dark:text-gray-50"
+              key={option}
+              value={option}
+            >
               {option}
             </option>
           ))}
diff --git a/frontend/src/models/misc.ts b/frontend/src/models/misc.ts
index 46af487c..0d9c8931 100644
--- a/frontend/src/models/misc.ts
+++ b/frontend/src/models/misc.ts
@@ -29,6 +29,7 @@ export type PromptProps = {
 };
 
 export type DocumentsProps = {
+  paginatedDocuments: Doc[] | null;
   handleDeleteDocument: (index: number, document: Doc) => void;
 };
 
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index 26af09d5..eaee879e 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -1,20 +1,20 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
-
 import userService from '../api/services/userService';
 import SyncIcon from '../assets/sync.svg';
 import Trash from '../assets/trash.svg';
 import caretSort from '../assets/caret-sort.svg';
 import DropdownMenu from '../components/DropdownMenu';
-import { Doc, DocumentsProps, ActiveState } from '../models/misc'; // Ensure ActiveState type is imported
 import SkeletonLoader from '../components/SkeletonLoader';
-import { getDocs, getDocsWithPagination } from '../preferences/preferenceApi';
-import { setSourceDocs } from '../preferences/preferenceSlice';
 import Input from '../components/Input';
 import Upload from '../upload/Upload'; // Import the Upload component
 import Pagination from '../components/DocumentPagination';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { Doc, DocumentsProps, ActiveState } from '../models/misc'; // Ensure ActiveState type is imported
+import { getDocs, getDocsWithPagination } from '../preferences/preferenceApi';
+import { setSourceDocs } from '../preferences/preferenceSlice';
+import { setPaginatedDocuments } from '../preferences/preferenceSlice';
 
 // Utility function to format numbers
 const formatTokens = (tokens: number): string => {
@@ -33,7 +33,10 @@ const formatTokens = (tokens: number): string => {
   }
 };
 
-const Documents: React.FC<DocumentsProps> = ({ handleDeleteDocument }) => {
+const Documents: React.FC<DocumentsProps> = ({
+  paginatedDocuments,
+  handleDeleteDocument,
+}) => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   // State for search input
@@ -48,10 +51,9 @@ const Documents: React.FC<DocumentsProps> = ({ handleDeleteDocument }) => {
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [rowsPerPage, setRowsPerPage] = useState<number>(10);
   const [totalPages, setTotalPages] = useState<number>(1);
-  const [totalDocuments, setTotalDocuments] = useState<number>(0);
-  const [fetchedDocuments, setFetchedDocuments] = useState<Doc[]>([]);
+  // const [totalDocuments, setTotalDocuments] = useState<number>(0);
   // Filter documents based on the search term
-  const filteredDocuments = fetchedDocuments?.filter((document) =>
+  const filteredDocuments = paginatedDocuments?.filter((document) =>
     document.name.toLowerCase().includes(searchTerm.toLowerCase()),
   );
   // State for documents
@@ -84,9 +86,9 @@ const Documents: React.FC<DocumentsProps> = ({ handleDeleteDocument }) => {
     getDocsWithPagination(sortField, sortOrder, page, rowsPerPg)
       .then((data) => {
         //dispatch(setSourceDocs(data ? data.docs : []));
-        setFetchedDocuments(data ? data.docs : []);
+        dispatch(setPaginatedDocuments(data ? data.docs : []));
         setTotalPages(data ? data.totalPages : 0);
-        setTotalDocuments(data ? data.totalDocuments : 0);
+        //setTotalDocuments(data ? data.totalDocuments : 0);
       })
       .catch((error) => console.error(error))
       .finally(() => {
@@ -258,13 +260,12 @@ const Documents: React.FC<DocumentsProps> = ({ handleDeleteDocument }) => {
         rowsPerPage={rowsPerPage}
         onPageChange={(page) => {
           setCurrentPage(page);
-          refreshDocs(sortField, page, rowsPerPage); // Pass `true` to reset lastID if not using cursor
+          refreshDocs(sortField, page, rowsPerPage);
         }}
         onRowsPerPageChange={(rows) => {
-          console.log('Pagination - Rows per Page Change:', rows);
           setRowsPerPage(rows);
-          setCurrentPage(1); // Reset to page 1 on rows per page change
-          refreshDocs(sortField, 1, rows); // Reset lastID for fresh pagination
+          setCurrentPage(1);
+          refreshDocs(sortField, 1, rows);
         }}
       />
     </div>
diff --git a/frontend/src/settings/index.tsx b/frontend/src/settings/index.tsx
index 24ea2681..15c7ce08 100644
--- a/frontend/src/settings/index.tsx
+++ b/frontend/src/settings/index.tsx
@@ -8,6 +8,8 @@ import i18n from '../locale/i18n';
 import { Doc } from '../models/misc';
 import {
   selectSourceDocs,
+  selectPaginatedDocuments,
+  setPaginatedDocuments,
   setSourceDocs,
 } from '../preferences/preferenceSlice';
 import Analytics from './Analytics';
@@ -26,20 +28,29 @@ export default function Settings() {
   );
 
   const documents = useSelector(selectSourceDocs);
+  const paginatedDocuments = useSelector(selectPaginatedDocuments);
   const updateWidgetScreenshot = (screenshot: File | null) => {
     setWidgetScreenshot(screenshot);
   };
 
+  const updateDocumentsList = (documents: Doc[], index: number) => [
+    ...documents.slice(0, index),
+    ...documents.slice(index + 1),
+  ];
+
   const handleDeleteClick = (index: number, doc: Doc) => {
     userService
       .deletePath(doc.id ?? '')
       .then((response) => {
         if (response.ok && documents) {
-          const updatedDocuments = [
-            ...documents.slice(0, index),
-            ...documents.slice(index + 1),
-          ];
-          dispatch(setSourceDocs(updatedDocuments));
+          if (paginatedDocuments) {
+            dispatch(
+              setPaginatedDocuments(
+                updateDocumentsList(paginatedDocuments, index),
+              ),
+            );
+          }
+          dispatch(setSourceDocs(updateDocumentsList(documents, index)));
         }
       })
       .catch((error) => console.error(error));
@@ -70,7 +81,12 @@ export default function Settings() {
       case t('settings.general.label'):
         return <General />;
       case t('settings.documents.label'):
-        return <Documents handleDeleteDocument={handleDeleteClick} />;
+        return (
+          <Documents
+            paginatedDocuments={paginatedDocuments}
+            handleDeleteDocument={handleDeleteClick}
+          />
+        );
       case 'Widgets':
         return (
           <Widgets