refactor: clean the code PE-5161

src/App.tsx

@@ -1,12 +1,10 @@
-import { useState } from "react";
 import "./App.css";
 import { ArDriveLogo } from "./ArDriveLogo";
 import { GiftForm } from "./GiftForm";
+import { useErrorMessage } from "./hooks/useErrorMessage";
 
 function App() {
-  const [errorMessage, setErrorMessage] = useState<string | undefined>(
-    undefined
-  );
+  const [errorMessage, setErrorMessage] = useErrorMessage();
 
   // TODO: Router for different pages. We only need a gift form for now
 

src/hooks/useErrorMessage.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+
+const errorMessageTimeout = 5_000; // 5 seconds
+
+export function useErrorMessage(): [
+  string | undefined,
+  (message: string | undefined) => void,
+] {
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(
+    undefined,
+  );
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setErrorMessage(undefined);
+    }, errorMessageTimeout);
+    return () => clearTimeout(timeout);
+  }, [errorMessage]);
+
+  return [errorMessage, setErrorMessage];
+}