From 4e3df63dcda37c9cb3255fcafd5a080cd4e0b31b Mon Sep 17 00:00:00 2001
From: Zamil Majdy <zamil.majdy@agpt.co>
Date: Mon, 30 Sep 2024 10:41:31 +0200
Subject: [PATCH] fix lint errors

---
 .../frontend/src/components/CreditButton.tsx     | 14 ++++++++------
 .../src/components/node-input-components.tsx     |  8 ++++----
 .../frontend/src/components/ui/render.tsx        | 16 +++++++++-------
 .../frontend/src/hooks/useAgentGraph.ts          |  3 +++
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/autogpt_platform/frontend/src/components/CreditButton.tsx b/autogpt_platform/frontend/src/components/CreditButton.tsx
index d806153982..0a8d9d446c 100644
--- a/autogpt_platform/frontend/src/components/CreditButton.tsx
+++ b/autogpt_platform/frontend/src/components/CreditButton.tsx
@@ -1,21 +1,23 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { Button } from "@/components/ui/button";
-import { IconRefresh, IconCoin } from "@/components/ui/icons";
+import { IconRefresh } from "@/components/ui/icons";
 import AutoGPTServerAPI from "@/lib/autogpt-server-api";
 
+const api = new AutoGPTServerAPI();
+
 export default function CreditButton() {
   const [credit, setCredit] = useState<number | null>(null);
-  const api = new AutoGPTServerAPI();
 
-  const fetchCredit = async () => {
+  const fetchCredit = useCallback(async () => {
     const response = await api.getUserCredit();
     setCredit(response.credits);
-  };
+  }, []);
+
   useEffect(() => {
     fetchCredit();
-  }, [api]);
+  }, [fetchCredit]);
 
   return (
     credit !== null && (
diff --git a/autogpt_platform/frontend/src/components/node-input-components.tsx b/autogpt_platform/frontend/src/components/node-input-components.tsx
index d9b7d54009..814f3d73a5 100644
--- a/autogpt_platform/frontend/src/components/node-input-components.tsx
+++ b/autogpt_platform/frontend/src/components/node-input-components.tsx
@@ -312,7 +312,7 @@ const NodeCredentialsInput: FC<{
   );
 };
 
-const getInputRef = (value: any): React.RefObject<HTMLInputElement> => {
+const InputRef = (value: any): React.RefObject<HTMLInputElement> => {
   const inputRef = React.useRef<HTMLInputElement>(null);
   if (inputRef.current && value && inputRef.current.value !== value) {
     inputRef.current.value = value;
@@ -423,7 +423,7 @@ const NodeKeyValueInput: FC<{
                 <Input
                   type="text"
                   placeholder="Value"
-                  ref={getInputRef(value ?? "")}
+                  ref={InputRef(value ?? "")}
                   onBlur={(e) =>
                     updateKeyValuePairs(
                       keyValuePairs.toSpliced(index, 1, {
@@ -607,7 +607,7 @@ const NodeStringInput: FC<{
           <Input
             type="text"
             id={selfKey}
-            ref={getInputRef(
+            ref={InputRef(
               schema.secret && value ? "*".repeat(value.length) : value,
             )}
             readOnly={schema.secret}
@@ -704,7 +704,7 @@ const NodeNumberInput: FC<{
         <Input
           type="number"
           id={selfKey}
-          ref={getInputRef(value)}
+          ref={InputRef(value)}
           onBlur={(e) => handleInputChange(selfKey, parseFloat(e.target.value))}
           placeholder={
             schema.placeholder || `Enter ${beautifyString(displayName)}`
diff --git a/autogpt_platform/frontend/src/components/ui/render.tsx b/autogpt_platform/frontend/src/components/ui/render.tsx
index b6147130d2..137645d1fa 100644
--- a/autogpt_platform/frontend/src/components/ui/render.tsx
+++ b/autogpt_platform/frontend/src/components/ui/render.tsx
@@ -45,13 +45,15 @@ const VideoRenderer: React.FC<{ videoUrl: string }> = ({ videoUrl }) => {
 
 const ImageRenderer: React.FC<{ imageUrl: string }> = ({ imageUrl }) => (
   <div className="w-full p-2">
-    <img
-      src={imageUrl}
-      alt="Image"
-      className="h-auto max-w-full"
-      width="100%"
-      height="auto"
-    />
+    <picture>
+      <img
+        src={imageUrl}
+        alt="Image"
+        className="h-auto max-w-full"
+        width="100%"
+        height="auto"
+      />
+    </picture>
   </div>
 );
 
diff --git a/autogpt_platform/frontend/src/hooks/useAgentGraph.ts b/autogpt_platform/frontend/src/hooks/useAgentGraph.ts
index c4ef9fbf0a..5898b71bdd 100644
--- a/autogpt_platform/frontend/src/hooks/useAgentGraph.ts
+++ b/autogpt_platform/frontend/src/hooks/useAgentGraph.ts
@@ -747,6 +747,9 @@ export default function useAgentGraph(
       api,
       nodes,
       edges,
+      pathname,
+      router,
+      searchParams,
       savedAgent,
       agentName,
       agentDescription,