Implement logic for getting status of domain reservation.

ui/app/actions.ts

@@ -72,3 +72,16 @@ export async function getDomains({
   );
   return await res.json();
 }
+
+export async function checkReservedName(domainName: string) {
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_API_URL}/domains/${domainName}/reserved`,
+    {
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": process.env.NEXT_PUBLIC_X_API_KEY,
+      },
+    }
+  );
+  return await res.json();
+}

ui/components/atoms/resultItem/resultItem.tsx

@@ -3,11 +3,20 @@ import { Button } from "../button";
 import { Variant } from "../button/types";
 import style from "./index.module.css";
 
-const ResultItem = ({ text, className }) => {
+const ResultItem = ({
+  statusName,
+  className,
+}: {
+  statusName: {
+    isReserved: boolean;
+    name: string;
+  };
+  className: string;
+}) => {
   return (
     <div className={classNames(style.wrapper, className, "t-inter-medium")}>
       <div>
-        {text}
+        {statusName.name}
         <span>.mina</span>
       </div>
       <Button text="Purchase" variant={Variant.blue} />

ui/components/sections/homeSection/homeSection.tsx

@@ -8,27 +8,33 @@ import { interSemiBold } from "@/app/fonts";
 import { Input } from "@/components/atoms/input";
 import { ResultItem } from "@/components/atoms/resultItem";
 import { InputVariant } from "@/components/atoms/input/input";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { useKeyPress } from "@/hooks/useKeyPress";
-import { checkName } from "@/app/actions";
+import { checkName, checkReservedName } from "@/app/actions";
 
 const HomeSection = () => {
-  const [response, setResponse] = useState(null);
+  const [statusName, setStatusName] = useState<{
+    isReserved: boolean;
+    name: string;
+  }>(null);
   const [value, setValue] = useState("");
   const [resultContent, setResultContent] = useState({
     isShow: false,
     text: "",
   });
+  const ref = useRef();
 
   const handleInput = async () => {
     const isShow = !!value;
     setResultContent({
       text: value,
       isShow: isShow,
     });
-    const res = await checkName(value);
-    const result = await res;
-    setResponse(result);
+    const response = await checkReservedName(value);
+    setStatusName({
+      isReserved: response,
+      name: value,
+    });
   };
 
   useKeyPress("Enter", handleInput);
@@ -51,8 +57,8 @@ const HomeSection = () => {
           onChange={(e) => setValue(e.target.value)}
           variant={InputVariant.search}
         />
-        {response && (
-          <ResultItem text={response.domainName} className={style.resultItem} />
+        {statusName?.name && (
+          <ResultItem statusName={statusName} className={style.resultItem} />
         )}
       </div>
     </div>