From 2ae9a4bb9b057998549476a0d43ecbfc0a0fbd14 Mon Sep 17 00:00:00 2001
From: Vitali Karpuk <vitalikkarpuk652@gmail.com>
Date: Thu, 29 Feb 2024 19:14:33 +0300
Subject: [PATCH] Implement logic for getting status of domain reservation.

---
 ui/app/actions.ts                             | 13 +++++++++++
 ui/components/atoms/resultItem/resultItem.tsx | 13 +++++++++--
 .../sections/homeSection/homeSection.tsx      | 22 ++++++++++++-------
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/ui/app/actions.ts b/ui/app/actions.ts
index 97eb498..d734d87 100644
--- a/ui/app/actions.ts
+++ b/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();
+}
diff --git a/ui/components/atoms/resultItem/resultItem.tsx b/ui/components/atoms/resultItem/resultItem.tsx
index 715be8a..d472442 100644
--- a/ui/components/atoms/resultItem/resultItem.tsx
+++ b/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} />
diff --git a/ui/components/sections/homeSection/homeSection.tsx b/ui/components/sections/homeSection/homeSection.tsx
index f737a37..686340a 100644
--- a/ui/components/sections/homeSection/homeSection.tsx
+++ b/ui/components/sections/homeSection/homeSection.tsx
@@ -8,17 +8,21 @@ 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;
@@ -26,9 +30,11 @@ const HomeSection = () => {
       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>