From 42acc324dcdd3d8657365b8033719e31c7fdb132 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Thu, 17 Oct 2024 01:27:28 -0700
Subject: [PATCH] Handle correctly setting file filters as array when API call
 fails

- Only set addedFiles to selectedFiles when selectedFiles is an array
- Only set seleectedFiles, addedFiles to API response json when
  response succeeded. Previously we set it to response json
  on errors as well. This made the variables into json objects instead
  of arrays on API call failure
- Check if selectedFiles, addedFiles are arrays before running
  operations on them. Previously the addedFiles.includes was where the
  code would fail
---
 src/interface/web/app/common/chatFunctions.ts |  6 ++++-
 .../sidePanel/chatHistorySidePanel.tsx        | 27 ++++++++++---------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/interface/web/app/common/chatFunctions.ts b/src/interface/web/app/common/chatFunctions.ts
index 6d7c9bc1..b2dd75fd 100644
--- a/src/interface/web/app/common/chatFunctions.ts
+++ b/src/interface/web/app/common/chatFunctions.ts
@@ -175,7 +175,11 @@ export function modifyFileFilterForConversation(
         },
         body: JSON.stringify(body),
     })
-        .then((response) => response.json())
+        .then((res) => {
+            if (!res.ok)
+                throw new Error(`Failed to call API at ${addUrl} with error ${res.statusText}`);
+            return res.json();
+        })
         .then((data) => {
             setAddedFiles(data);
         })
diff --git a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
index 4786f2a1..6c447377 100644
--- a/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
+++ b/src/interface/web/app/components/sidePanel/chatHistorySidePanel.tsx
@@ -98,7 +98,11 @@ import { KhojLogoType } from "@/app/components/logo/khojLogo";
 import NavMenu from "@/app/components/navMenu/navMenu";
 
 // Define a fetcher function
-const fetcher = (url: string) => fetch(url).then((res) => res.json());
+const fetcher = (url: string) =>
+    fetch(url).then((res) => {
+        if (!res.ok) throw new Error(`Failed to call API at ${url} with error ${res.statusText}`);
+        return res.json();
+    });
 
 interface GroupedChatHistory {
     [key: string]: ChatHistory[];
@@ -181,20 +185,15 @@ function FilesMenu(props: FilesMenuProps) {
     useEffect(() => {
         if (!files) return;
 
-        const uniqueFiles = Array.from(new Set(files));
+        let sortedUniqueFiles = Array.from(new Set(files)).sort();
 
-        // First, sort lexically
-        uniqueFiles.sort();
-
-        let sortedFiles = uniqueFiles;
-
-        if (addedFiles) {
-            sortedFiles = addedFiles.concat(
-                sortedFiles.filter((filename: string) => !addedFiles.includes(filename)),
+        if (Array.isArray(addedFiles)) {
+            sortedUniqueFiles = addedFiles.concat(
+                sortedUniqueFiles.filter((filename: string) => !addedFiles.includes(filename)),
             );
         }
 
-        setUnfilteredFiles(sortedFiles);
+        setUnfilteredFiles(sortedUniqueFiles);
     }, [files, addedFiles]);
 
     useEffect(() => {
@@ -204,8 +203,10 @@ function FilesMenu(props: FilesMenuProps) {
     }, [props.uploadedFiles]);
 
     useEffect(() => {
-        if (selectedFiles) {
+        if (Array.isArray(selectedFiles)) {
             setAddedFiles(selectedFiles);
+        } else {
+            setAddedFiles([]);
         }
     }, [selectedFiles]);
 
@@ -269,7 +270,7 @@ function FilesMenu(props: FilesMenuProps) {
                             </CommandItem>
                         )}
                         {unfilteredFiles.map((filename: string) =>
-                            addedFiles && addedFiles.includes(filename) ? (
+                            Array.isArray(addedFiles) && addedFiles.includes(filename) ? (
                                 <CommandItem
                                     key={filename}
                                     value={filename}