From fe2f7f16945a382e8fa9bc4032a5e21bfa4c8ba0 Mon Sep 17 00:00:00 2001
From: Abhay Kumar <abhaykv04@gmail.com>
Date: Sun, 16 Apr 2023 15:19:48 +0530
Subject: [PATCH] Fix #150: Disable Go button until input is filled

---
 app/components/UrlForm.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/components/UrlForm.tsx b/app/components/UrlForm.tsx
index 6a57616b..8bcc161b 100644
--- a/app/components/UrlForm.tsx
+++ b/app/components/UrlForm.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Form } from "remix";
 
 export type UrlFormProps = {
@@ -5,6 +6,10 @@ export type UrlFormProps = {
 };
 
 export function UrlForm({ className }: UrlFormProps) {
+  const [inputValue, setInputValue] = useState("");
+
+  const isButtonDisabled = !inputValue.length;
+
   return (
     <Form
       method="post"
@@ -18,11 +23,16 @@ export function UrlForm({ className }: UrlFormProps) {
           id="jsonUrl"
           className="block flex-grow text-base text-slate-200 placeholder:text-slate-300 bg-slate-900/40 border border-slate-600 rounded-l-sm py-2 px-3 transition duration-300 focus:ring-indigo-500 focus:border-indigo-500"
           placeholder="Enter a JSON URL or paste in JSON here..."
+          value={inputValue}
+          onChange={(event) => setInputValue(event.target.value)}
         />
         <button
           type="submit"
           value="Go"
-          className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-r-sm text-white bg-lime-500 transition hover:bg-lime-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500"
+          className={`inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-r-sm text-white bg-lime-500 transition hover:bg-lime-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-lime-500 ${
+            isButtonDisabled && "disabled:opacity-50 disabled:hover:bg-lime-500"
+          }`}
+          disabled={isButtonDisabled}
         >
           Go
         </button>