Merge pull request #824 from muhammedsaidckr/fix

Optimize FileUpload Component
assafelovic · Sep 15, 2024 · 6a75c73 · 6a75c73
2 parents d5838bc + 748f1e8
commit 6a75c73
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/frontend/nextjs/app/page.tsx b/frontend/nextjs/app/page.tsx
@@ -308,7 +308,7 @@ export default function Home() {
       } else if (data.type === 'langgraphButton') {
         const uniqueKey = `langgraphButton-${index}`;
         return (
-          <div></div>
+          <div key={uniqueKey}></div>
           // <div key={uniqueKey} className="flex justify-center py-4">
           //   <a
           //     href={data.link}

diff --git a/frontend/nextjs/components/Settings/FileUpload.js b/frontend/nextjs/components/Settings/FileUpload.js
@@ -1,24 +1,24 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from "react";
 import axios from 'axios';
 import { useDropzone } from 'react-dropzone';
-import {getHost} from '../../helpers/getHost'
+import {getHost} from "@/helpers/getHost"
 
 const FileUpload = () => {
   const [files, setFiles] = useState([]);
   const host = getHost();
-  
-  const fetchFiles = async () => {
+
+  const fetchFiles = useCallback(async () => {
     try {
       const response = await axios.get(`${host}/files/`);
       setFiles(response.data.files);
     } catch (error) {
       console.error('Error fetching files:', error);
     }
-  };
+  }, [host]);
 
   useEffect(() => {
     fetchFiles();
-  }, []);
+  }, [fetchFiles]);
 
   const onDrop = async (acceptedFiles) => {
     const formData = new FormData();
@@ -63,9 +63,9 @@ const FileUpload = () => {
                 <li key={file} className={"flex justify-between gap-x-6 py-1"}>
                   <span className={"flex-1"}>{file}</span>
                   <button onClick={(e) => { e.preventDefault(); deleteFile(file) }}>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5"
                          stroke="currentColor" className="size-6">
-                      <path stroke-linecap="round" stroke-linejoin="round"
+                      <path strokeLinecap="round" strokeLinejoin="round"
                             d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/>
                     </svg>
                   </button>