✨ Better warning for long logo data uri

.changeset/lucky-terms-protect.md

@@ -0,0 +1,5 @@
+---
+"socialify": minor
+---
+
+Added error handling for long svg data uri input, also added jest unit test cases for this.

src/components/configuration/config.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import React, { useContext, useEffect } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 
 import { getOptionalConfig } from '@/common/configHelper'
 import { RepoQueryResponse } from '@/common/github/repoQuery'
@@ -25,6 +25,8 @@ const Config = ({ repository }: ConfigProp) => {
 
   const { config, setConfig } = useContext(ConfigContext)
 
+  const [isSvgUriError, setIsSvgUriError] = useState<boolean>(false)
+
   const handleChanges = (changes: { value: any; key: keyof ConfigType }[]) => {
     let newConfig: ConfigType = { ...config }
     const urlParams = router.query
@@ -69,6 +71,10 @@ const Config = ({ repository }: ConfigProp) => {
   }
 
   const handleChange = (value: any, key: keyof ConfigType) => {
+    if (key === 'logo') {
+      setIsSvgUriError(!!value?.val && value?.val?.length > 1600)
+    }
+
     handleChanges([{ value, key }])
   }
 
@@ -169,6 +175,8 @@ const Config = ({ repository }: ConfigProp) => {
           placeholder="Optional"
           value={config.logo}
           handleChange={handleChange}
+          isError={isSvgUriError}
+          errorMessage="URI is too long, please use an SVG image URL instead."
         />
 
         <div className="columns-2">

src/components/configuration/configuration.test.tsx

@@ -0,0 +1,49 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import InputWrapper from './inputWrapper'
+
+describe('svg data uri error checking', () => {
+  const mockHandleChange = jest.fn()
+
+  const baseProps = {
+    title: 'SVG Logo',
+    keyName: 'logo' as any,
+    value: '',
+    placeholder: 'SVG Data URI',
+    handleChange: mockHandleChange,
+  }
+
+  test('shows error message for svg data uri having more that 1600 characters', () => {
+    const invalidInput = 'a'.repeat(1601)
+
+    render(
+      <InputWrapper
+        {...baseProps}
+        isError={true}
+        errorMessage="URI is too long, please use an SVG image URL instead."
+      />
+    )
+
+    const input = screen.getByPlaceholderText('SVG Data URI')
+    fireEvent.change(input, { target: { value: invalidInput } })
+
+    const errorMessage = screen.getByText(
+      'URI is too long, please use an SVG image URL instead.'
+    )
+    expect(errorMessage).toBeInTheDocument()
+  })
+
+  test('does not show error message for svg data uri having less than 1601 characters', () => {
+    const validInput = 'a'.repeat(1600)
+
+    render(<InputWrapper {...baseProps} isError={false} />)
+
+    const input = screen.getByPlaceholderText('SVG Data URI')
+    fireEvent.change(input, { target: { value: validInput } })
+
+    const errorMessage = screen.queryByText(
+      /URI is too long, please use an SVG image URL instead./i
+    )
+    expect(errorMessage).not.toBeInTheDocument()
+  })
+})

src/components/configuration/inputWrapper.tsx

@@ -8,6 +8,8 @@ type InputProps = {
   placeholder: string
   disabled?: boolean
   handleChange: (value: any, key: keyof ConfigType) => void
+  isError?: boolean
+  errorMessage?: string
 }
 
 const InputWrapper = ({
@@ -18,6 +20,8 @@ const InputWrapper = ({
   placeholder,
   disabled,
   handleChange,
+  isError,
+  errorMessage,
 }: InputProps) => {
   return (
     <div className="form-control w-full">
@@ -26,7 +30,7 @@ const InputWrapper = ({
         {alt && <span className="label-text-alt font-semibold">{alt}</span>}
       </label>
       <input
-        className="input input-sm input-bordered font-semibold w-full"
+        className={`input input-sm input-bordered font-semibold w-full ${isError && 'input-error'}`}
         type="text"
         value={value || ''}
         disabled={!!disabled}
@@ -35,6 +39,13 @@ const InputWrapper = ({
           handleChange({ val: e.target.value, required: true }, keyName)
         }}
       />
+      {isError && (
+        <div className="label">
+          <span className="label-text-alt text-red-400 italic">
+            {errorMessage}
+          </span>
+        </div>
+      )}
     </div>
   )
 }