From 89ac62304119404b06dd8760c50ec10e456a3fd2 Mon Sep 17 00:00:00 2001 From: muhammedsaidckr Date: Thu, 5 Sep 2024 15:35:34 +0300 Subject: [PATCH 1/3] Fix: Add unique key prop to iterator element - Created a uniqueKey variable using the index to ensure unique keys - Added the key prop to the div element in the iterator - Resolves the ESLint warning: Missing "key" prop for element in iterator --- frontend/nextjs/app/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/nextjs/app/page.tsx b/frontend/nextjs/app/page.tsx index 1018a6bd7..97f028f3d 100644 --- 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 ( -
+
//
// Date: Thu, 5 Sep 2024 15:40:00 +0300 Subject: [PATCH 2/3] Refactor: Optimize fetchFiles function with useCallback - Wrapped fetchFiles function in useCallback Hook - Added host to the dependency array of useCallback - Updated useEffect dependency array to include fetchFiles - Resolves the React Hook exhaustive-deps warning --- frontend/nextjs/components/Settings/FileUpload.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/nextjs/components/Settings/FileUpload.js b/frontend/nextjs/components/Settings/FileUpload.js index e7c34a204..998faa769 100644 --- a/frontend/nextjs/components/Settings/FileUpload.js +++ b/frontend/nextjs/components/Settings/FileUpload.js @@ -1,4 +1,4 @@ -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' @@ -6,19 +6,19 @@ 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(); From 748f1e8508a2fb9ddc13811abff1f952d6c48325 Mon Sep 17 00:00:00 2001 From: muhammedsaidckr Date: Thu, 5 Sep 2024 15:43:17 +0300 Subject: [PATCH 3/3] Fixed react svg component props --- frontend/nextjs/components/Settings/FileUpload.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/nextjs/components/Settings/FileUpload.js b/frontend/nextjs/components/Settings/FileUpload.js index 998faa769..49d6df353 100644 --- a/frontend/nextjs/components/Settings/FileUpload.js +++ b/frontend/nextjs/components/Settings/FileUpload.js @@ -1,7 +1,7 @@ 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([]); @@ -63,9 +63,9 @@ const FileUpload = () => {
  • {file}