feat : add Commenti nput

src/components/Forms/IconForm.tsx

@@ -13,9 +13,8 @@ type props = {
   placeholder: string;
   disabled?: boolean;
   iconType?: React.ComponentProps<typeof MaterialIcons>["name"];
-  password?: boolean;
-  search?: boolean;
   errorMessage?: string;
+  type?: "password" | "search" | "comment";
   onPress?: () => void;
   onEndEditing?: () => void;
 };
@@ -27,14 +26,13 @@ const IconForm = ({
   placeholder,
   disabled = false,
   iconType,
-  password = false,
-  search = false,
+  type,
   errorMessage,
   onPress,
   onEndEditing,
 }: props) => {
   const [isFocused, setIsFocused] = useState(false);
-  const [showPass, setShowPass] = useState(password);
+  const [showPass, setShowPass] = useState(true);
   const [isError, setIsError] = useState(false);
 
   let backgroundColor: string;
@@ -58,7 +56,7 @@ const IconForm = ({
 
   const endEdit = () => {
     setIsFocused(false);
-    if (search || disabled) {
+    if (type === "search" || disabled) {
       setIsError(false);
     } else {
       if (!validateEmpty(text)) {
@@ -71,9 +69,11 @@ const IconForm = ({
   };
 
   let iconName: React.ComponentProps<typeof MaterialIcons>["name"];
-  if (search) {
+  if (type === "search") {
     iconName = "search";
-  } else if (password) {
+  } else if (type === "comment") {
+    iconName = "send";
+  } else if (type === "password") {
     if (showPass) {
       iconName = "visibility";
     } else if (!showPass) {
@@ -120,15 +120,15 @@ const IconForm = ({
             editable={!disabled}
             secureTextEntry={showPass}
             testID="Input"
-            autoCapitalize={password ? "none" : "sentences"}
+            autoCapitalize={type === "password" ? "none" : "sentences"}
           />
         </View>
         <TouchableOpacity
-          onPress={() => password && setShowPass(!showPass)}
+          onPress={() => type === "password" && setShowPass(!showPass)}
           testID="Touchable"
         >
-          {iconName === "search" && (
-            <TouchableOpacity onPress={() => onPress()}>
+          {(type === "comment" || type === "search") && (
+            <TouchableOpacity testID="TouchableIcon" onPress={() => onPress()}>
               <MaterialIcons
                 name={iconName}
                 size={21}
@@ -137,7 +137,7 @@ const IconForm = ({
               />
             </TouchableOpacity>
           )}
-          {iconName !== "search" && (
+          {!(type === "comment" || type === "search") && (
             <MaterialIcons
               name={iconName}
               size={21}

src/components/__tests__/Buttons/SmallButton.test.tsx

@@ -27,6 +27,12 @@ describe("Small Button Test", () => {
     const { getByTestId } = render(<SmallButtonWrapper colors="secondary" />);
     expect(getByTestId("Text")).not.toBeNull();
   });
+  it("Should detect a disabled  condition", () => {
+    const { getByTestId } = render(
+      <SmallButtonWrapper colors="primary" disabled={true} />
+    );
+    expect(getByTestId("Text")).not.toBeNull();
+  });
   it("Should detect an onPress function", () => {
     const { getByTestId } = render(<SmallButtonWrapper colors="primary" />);
     fireEvent(getByTestId("Touchable"), "onPress");

src/components/__tests__/Forms/IconForm.test.tsx

@@ -40,8 +40,12 @@ describe("Icon Form Test", () => {
     const { getByTestId } = render(<IconFormWrapper />);
     expect(getByTestId("Touchable")).not.toBeNull();
   });
-  it("Should detect a MaterialIcon", () => {
-    const { getByTestId } = render(<IconFormWrapper />);
+  it("Should detect a MaterialIcon for password", () => {
+    const { getByTestId } = render(<IconFormWrapper type="password" />);
+    expect(getByTestId("MaterialIcon")).not.toBeNull();
+  });
+  it("Should detect a MaterialIcon for search or comment", () => {
+    const { getByTestId } = render(<IconFormWrapper type="comment" />);
     expect(getByTestId("MaterialIcon")).not.toBeNull();
   });
   it("Should not detect a container title", () => {
@@ -58,24 +62,24 @@ describe("Icon Form Test", () => {
     expect(getByTestId("Input").props.value).toEqual("Hello");
   });
   it("Should detect a password form", () => {
-    const { getByTestId } = render(<IconFormWrapper password />);
+    const { getByTestId } = render(<IconFormWrapper type="password" />);
     expect(getByTestId("Icon")).not.toBeNull();
   });
   it("Should detect a search form", () => {
-    const { getByTestId } = render(<IconFormWrapper search />);
+    const { getByTestId } = render(<IconFormWrapper type="search" />);
     expect(getByTestId("Icon")).not.toBeNull();
   });
   it("Should detect a disabled form", () => {
-    const { getByTestId } = render(<IconFormWrapper disabled />);
+    const { getByTestId } = render(<IconFormWrapper type="disabled" />);
     expect(getByTestId("Icon")).not.toBeNull();
   });
   it("Should detect a visible password form", () => {
-    const { getByTestId } = render(<IconFormWrapper password />);
+    const { getByTestId } = render(<IconFormWrapper type="password" />);
     fireEvent(getByTestId("Touchable"), "onPress");
     expect(getByTestId("Icon")).not.toBeNull();
   });
   it("Should not detect a visible password form", () => {
-    const { getByTestId } = render(<IconFormWrapper password />);
+    const { getByTestId } = render(<IconFormWrapper type="password" />);
     fireEvent(getByTestId("Touchable"), "onPress");
     fireEvent(getByTestId("Touchable"), "onPress");
     expect(getByTestId("Icon")).not.toBeNull();
@@ -103,7 +107,7 @@ describe("Icon Form Test", () => {
     expect(getByTestId("Icon")).not.toBeNull();
   });
   it("Should not detect an error on a search form", () => {
-    const { getByTestId } = render(<IconFormWrapper search />);
+    const { getByTestId } = render(<IconFormWrapper type="search" />);
     fireEvent(getByTestId("Input"), "onEndEditing");
     expect(getByTestId("Icon")).not.toBeNull();
   });

src/components/button/SmallButton.tsx

@@ -6,8 +6,9 @@ type props = {
   text: string;
   colors: string;
   onPress: () => void;
+  disabled?: boolean;
 };
-const SmallButton = ({ text, colors, onPress }: props) => {
+const SmallButton = ({ text, colors, onPress, disabled }: props) => {
   return (
     <TouchableOpacity
       onPress={() => onPress()}
@@ -16,10 +17,13 @@ const SmallButton = ({ text, colors, onPress }: props) => {
         {
           backgroundColor:
             colors === "primary"
-              ? Colors.button.primary.bg
+              ? disabled
+                ? "rgba(7, 145, 249, 0.4)"
+                : Colors.button.primary.bg
               : Colors.button.warning.bg,
         },
       ]}
+      disabled={disabled}
       testID="Touchable"
     >
       <Text

src/screens/auth/LoginScreen.tsx

@@ -55,7 +55,7 @@ const LoginScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
           text={password}
           setText={setPassword}
           placeholder={"Masukkan Password"}
-          password
+          type="password"
           errorMessage={"Silahkan masukkan password"}
         />
       </View>

src/screens/auth/RegisterScreen.tsx

@@ -119,7 +119,7 @@ const RegisterScreen = ({ navigation }: RootTabScreenProps<"TabOne">) => {
           text={password}
           setText={setPassword}
           placeholder={"Masukkan Password"}
-          password
+          type="password"
           errorMessage={"Tolong masukkan password"}
         />
       </View>

src/screens/ecosystem/CategoryEcosystemListScreen.tsx

@@ -80,7 +80,7 @@ const CategoryEcosystemListScreen = ({
             text={search}
             setText={setSearch}
             placeholder={"Cari di kategori ini"}
-            search
+            type="search"
             onPress={onSearch}
             onEndEditing={onSearch}
           />

src/screens/ecosystem/EcosystemSearch.tsx

@@ -123,7 +123,7 @@ const EcosystemSearch = ({ route }: EcosystemStackScreenProps<"Search">) => {
             text={search}
             setText={setSearch}
             placeholder={"Cari dengan kata kunci ini.."}
-            search
+            type="search"
             onPress={onSearch}
             onEndEditing={onSearch}
           />