From 0f1502fe4edf0879f5c258c70b82f243af1d4758 Mon Sep 17 00:00:00 2001
From: ARREY-ETTA BESSONG EKEP OBASI <arreyettaekep@gmail.com>
Date: Thu, 18 Apr 2024 03:21:50 +0100
Subject: [PATCH] feat: updated regex to support .jpeg

---
 .../EditNodeNameModal/Body/index.tsx          |  7 +++--
 .../EditNodeNameModal/Title/index.tsx         | 26 ++++++-------------
 .../utils/__tests__/index.ts                  |  4 +++
 .../EditNodeNameModal/utils/index.ts          |  2 +-
 src/components/common/TextInput/index.tsx     |  4 ++-
 5 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx b/src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx
index 880b38543..d6c0083a5 100644
--- a/src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx
+++ b/src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx
@@ -108,6 +108,9 @@ export const Body = () => {
 
   const isNodeNameChanged = getValues().name && actualTopicNode?.name !== getValues().name
 
+  const shouldDisableSave =
+    loading || topicIsLoading || (!!imageUrl && !isValidImageUrl) || (!imageUrl && !isNodeNameChanged)
+
   return (
     <Wrapper>
       <FormProvider {...form}>
@@ -116,7 +119,7 @@ export const Body = () => {
             <Skeleton />
           </Flex>
         ) : (
-          <TitleEditor isValidImageUrl={isValidImageUrl} />
+          <TitleEditor />
         )}
         <Flex direction="row" mb={6}>
           <DeleteButton
@@ -131,7 +134,7 @@ export const Body = () => {
           </DeleteButton>
           <Button
             color="secondary"
-            disabled={loading || topicIsLoading || !isNodeNameChanged || !isValidImageUrl}
+            disabled={shouldDisableSave}
             onClick={handleSave}
             size="large"
             style={{ flex: 1 }}
diff --git a/src/components/ModalsContainer/EditNodeNameModal/Title/index.tsx b/src/components/ModalsContainer/EditNodeNameModal/Title/index.tsx
index 015bbda8f..1989bd119 100644
--- a/src/components/ModalsContainer/EditNodeNameModal/Title/index.tsx
+++ b/src/components/ModalsContainer/EditNodeNameModal/Title/index.tsx
@@ -1,4 +1,3 @@
-import { FC } from 'react'
 import styled from 'styled-components'
 import { imageUrlRegex, validateImageInputType } from '~/components/ModalsContainer/EditNodeNameModal/utils'
 import { Flex } from '~/components/common/Flex'
@@ -7,11 +6,7 @@ import { TextInput } from '~/components/common/TextInput'
 import { requiredRule } from '~/constants'
 import { colors } from '~/utils'
 
-type Props = {
-  isValidImageUrl?: boolean
-}
-
-export const TitleEditor: FC<Props> = ({ isValidImageUrl }) => (
+export const TitleEditor = () => (
   <Flex>
     <Flex align="center" direction="row" justify="space-between" mb={18}>
       <Flex align="center" direction="row">
@@ -52,18 +47,13 @@ export const TitleEditor: FC<Props> = ({ isValidImageUrl }) => (
         name="image_url"
         placeholder="image_url"
         rules={{
-          ...requiredRule,
-          ...(!isValidImageUrl
-            ? {
-                pattern: {
-                  message: 'Please enter a valid URL',
-                  value: imageUrlRegex,
-                },
-                validate: {
-                  source: validateImageInputType,
-                },
-              }
-            : {}),
+          pattern: {
+            message: 'Please enter a valid URL',
+            value: imageUrlRegex,
+          },
+          validate: {
+            source: validateImageInputType,
+          },
         }}
       />
     </Flex>
diff --git a/src/components/ModalsContainer/EditNodeNameModal/utils/__tests__/index.ts b/src/components/ModalsContainer/EditNodeNameModal/utils/__tests__/index.ts
index 76171ebd4..06d675cac 100644
--- a/src/components/ModalsContainer/EditNodeNameModal/utils/__tests__/index.ts
+++ b/src/components/ModalsContainer/EditNodeNameModal/utils/__tests__/index.ts
@@ -10,6 +10,10 @@ describe('validateImageInputType function', () => {
       true,
     )
 
+    expect(
+      validateImageInputType('https://pbs.twimg.com/profile_images/1729542498006294529/AjwhArl6_normal.jpeg'),
+    ).toBe(true)
+
     expect(validateImageInputType('https://pbs.twimg.com/profile_images/1729542498006294529/AjwhArl6_normal.svg')).toBe(
       true,
     )
diff --git a/src/components/ModalsContainer/EditNodeNameModal/utils/index.ts b/src/components/ModalsContainer/EditNodeNameModal/utils/index.ts
index 1a08fb24c..f883bce52 100644
--- a/src/components/ModalsContainer/EditNodeNameModal/utils/index.ts
+++ b/src/components/ModalsContainer/EditNodeNameModal/utils/index.ts
@@ -1,4 +1,4 @@
-export const imageUrlRegex = /^https:\/\/.*\.(png|jpg|svg)$/
+export const imageUrlRegex = /^https:\/\/.*\.(png|jpe?g|svg)$/
 
 export function validateImageInputType(url: string): boolean {
   if (imageUrlRegex.test(url)) {
diff --git a/src/components/common/TextInput/index.tsx b/src/components/common/TextInput/index.tsx
index a567a6b39..4ecae29bc 100644
--- a/src/components/common/TextInput/index.tsx
+++ b/src/components/common/TextInput/index.tsx
@@ -48,9 +48,11 @@ export const TextInput = ({
     register,
     control,
     formState: { errors },
+    getValues,
   } = useFormContext() || {}
 
   const error = get(errors, name)
+  const feildValue = getValues(name)
 
   useEffect(() => {
     const inputElement = document.getElementById(id)
@@ -118,7 +120,7 @@ export const TextInput = ({
         />
       </Wrapper>
 
-      {error && (
+      {feildValue && error && (
         <Flex pl={4} pt={8} shrink={1} tabIndex={0}>
           <Text color="primaryRed" kind="regularBold">
             <Flex align="center" direction="row" shrink={1}>