feat: disable create page btn if the page name is missing

components/atoms/TextInput/text-input.tsx

@@ -1,24 +1,15 @@
 import { CheckCircleFillIcon, XCircleFillIcon } from "@primer/octicons-react";
-import React, { useRef, useState } from "react";
+import React, { useRef } from "react";
 import clsx from "clsx";
-interface TextInputProps {
+
+interface TextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
-  placeholder?: string;
-  name?: string;
   state?: "default" | "valid" | "invalid";
-  id?: string;
-  disabled?: boolean;
-  autoFocus?: boolean;
   borderless?: boolean;
   descriptionText?: string;
   classNames?: string;
   errorMsg?: string;
-  value?: string;
-  defaultValue?: string;
-  required?: boolean;
   fieldRef?: React.RefObject<HTMLInputElement>;
-  pattern?: string;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 const TextInput = ({
@@ -27,54 +18,46 @@ const TextInput = ({
   placeholder,
   state = "default",
   id,
+  value,
   descriptionText,
   classNames,
+  fieldRef,
   disabled = false,
-  autoFocus,
   borderless = false,
-  value,
-  defaultValue,
-  onChange,
-  required,
-  fieldRef,
-  pattern,
-  errorMsg = ""
+  errorMsg = "",
+  ...props
 }: TextInputProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const handleResetInput = () => {
     fieldRef ? fieldRef.current!.value = ""
       :
       inputRef.current!.value = "";
   };
+
   return (
     <>
       <label className="flex w-full flex-col">
-        {label && <p className="mb-2   text-light-slate-9 text-sm">{label}</p>}
+        {label && <p className="mb-2 text-light-slate-9 text-sm">{label}</p>}
         <div
           className={clsx(
             "flex-1 px-3 text-light-slate-12 bg-white shadow-input border transition rounded-lg py-1 flex items-center",
             borderless && "!border-none",
-            state === "invalid" ? " focus-within:border-light-red-10 " : "focus-within:border-light-orange-9 ",
+            state === "invalid" ? "focus-within:border-light-red-10" : "focus-within:border-light-orange-9 ",
             disabled && "bg-light-slate-3 text-light-slate-6",
             classNames
           )}
         >
           <input
+            {...props}
             ref={fieldRef || inputRef}
             type="text"
             name={name}
             id={id || name || ""}
             placeholder={placeholder || ""}
-            onChange={onChange}
-            value={value}
-            defaultValue={defaultValue}
             className={`flex-1 focus:outline-none  ${classNames} ${
               disabled && "bg-light-slate-3 cursor-not-allowed  text-light-slate-9"
             }`}
-            autoFocus={autoFocus}
             disabled={disabled}
-            required={required}
-            pattern={pattern}
           />
           {!disabled && (
             <>

components/organisms/InsightPage/InsightPage.tsx

@@ -37,7 +37,7 @@ const InsightPage = ({ edit, insight, pageRepos }: InsightPageProps) => {
   }
 
   const [name, setName] = useState(insight?.name || "");
-  const [nameError, setNameError] = useState("");
+  const [isNameValid, setIsNameValid] = useState(false);
   const [submitted, setSubmitted] = useState(false);
   const [repoToAdd, setRepoToAdd] = useState("");
   const [repos, setRepos] = useState<DbRepo[]>(receivedData);
@@ -70,17 +70,19 @@ const InsightPage = ({ edit, insight, pageRepos }: InsightPageProps) => {
   });
 
   const handleOnNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setName(event.target.value);
-  };
+    const { value } = event.target;
 
-  const handleCreateInsightPage = async () => {
-    setSubmitted(true);
+    setName(value);
 
-    if (!name) {
-      setNameError("Insight name is a required field");
-      setSubmitted(false);
-      return;
+    if (!value || value.trim().length <= 3) setIsNameValid(false);
+
+    if (value.trim().length > 3) {
+      setIsNameValid(true);
     }
+  };;
+
+  const handleCreateInsightPage = async () => {
+    setSubmitted(true);
 
     const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/user/insights`, {
       method: "POST",
@@ -106,12 +108,6 @@ const InsightPage = ({ edit, insight, pageRepos }: InsightPageProps) => {
   const handleUpdateInsightPage = async () => {
     setSubmitted(true);
 
-    if (!name) {
-      setNameError("Insight name is a required field");
-      setSubmitted(false);
-      return;
-    }
-
     const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/user/insights/${insight?.id}`, {
       method: "PATCH",
       headers: {
@@ -229,8 +225,11 @@ const InsightPage = ({ edit, insight, pageRepos }: InsightPageProps) => {
             Page Name
           </Title>
 
-          <TextInput placeholder="Page Name (ex: My Team)" value={name} onChange={handleOnNameChange} />
-          {submitted && nameError ? <Text>{nameError}</Text> : ""}
+          <TextInput
+            placeholder="Page Name (ex: My Team)"
+            value={name}
+            onChange={handleOnNameChange}
+          />
           {/* <Text>insights.opensauced.pizza/pages/{username}/{`{pageId}`}/dashboard</Text> */}
         </div>
 
@@ -283,7 +282,7 @@ const InsightPage = ({ edit, insight, pageRepos }: InsightPageProps) => {
           handleUpdatePage={handleUpdateInsightPage}
           handleAddToCart={handleReAddRepository}
           history={reposRemoved}
-          createPageButtonDisabled={submitted}
+          createPageButtonDisabled={submitted || !isNameValid}
         >
           {repos.map((repo) => {
             const totalPrs =

components/organisms/RepositoriesCart/repositories-cart.tsx

@@ -1,4 +1,5 @@
 import { Children } from "react";
+import clsx from "clsx";
 
 import { BiPlus } from "react-icons/bi";
 
@@ -41,7 +42,7 @@ const RepositoriesCart = ({
     if (handleUpdatePage) {
       handleUpdatePage();
     }
-  };  
+  };
 
   const onAddToCart = (fullRepoName: string) => {
     if (handleAddToCart) {
@@ -96,7 +97,11 @@ const RepositoriesCart = ({
           <button
             disabled={createPageButtonDisabled}
             onClick={() => edit ? onHandleUpdatePage() : onHandleCreatePage()}
-            className="w-full text-sm text-white flex justify-center items-center py-3 px-5 bg-light-orange-9 rounded-lg"
+            className={clsx(
+              "w-full text-sm flex justify-center items-center py-3 px-5 rounded-lg",
+              "text-white bg-light-orange-9",
+              createPageButtonDisabled && "bg-light-orange-6 cursor-not-allowed"
+            )}
           >
             { edit ? "Update" : "Create" } Page
           </button>