Update regex checker for images with .jpeg extension and made image_url optional when editing a node

src/components/ModalsContainer/EditNodeNameModal/Body/index.tsx

@@ -61,7 +61,7 @@
 
         setActualTopicNode(node)
       } catch (error) {
         console.log(error)
       } finally {
         setTopicIsLoading(false)
       }
@@ -108,6 +108,9 @@
 
   const isNodeNameChanged = getValues().name && actualTopicNode?.name !== getValues().name
 
+  const shouldDisableSave =
+    loading || topicIsLoading || (!!imageUrl && !isValidImageUrl) || (!imageUrl && !isNodeNameChanged)
+
   return (
     <Wrapper>
       <FormProvider {...form}>
@@ -116,7 +119,7 @@
             <Skeleton />
           </Flex>
         ) : (
-          <TitleEditor isValidImageUrl={isValidImageUrl} />
+          <TitleEditor />
         )}
         <Flex direction="row" mb={6}>
           <DeleteButton
@@ -131,7 +134,7 @@
           </DeleteButton>
           <Button
             color="secondary"
-            disabled={loading || topicIsLoading || !isNodeNameChanged || !isValidImageUrl}
+            disabled={shouldDisableSave}
             onClick={handleSave}
             size="large"
             style={{ flex: 1 }}

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>

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,
     )

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)) {

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}>