[fix] autocomplete empty input request

__tests__/utils.test.js

@@ -1,10 +1,11 @@
-import { parsePackageString } from '../utils/common.utils'
+const { parsePackageString, isEmpty } = require('../utils/common.utils')
 
 describe('parsePackageString', () => {
  it('handles scoped packages correctly', () => {
  expect(parsePackageString('@babel/[email protected]')).toEqual({
  scoped: true,
  name: '@babel/core',
+ scope: 'babel',
  version: '9.8.0',
  })
  })
@@ -13,6 +14,7 @@ describe('parsePackageString', () => {
  expect(parsePackageString('@babel/core')).toEqual({
  scoped: true,
  name: '@babel/core',
+ scope: 'babel',
  version: null,
  })
  })
@@ -49,3 +51,15 @@ describe('parsePackageString', () => {
  })
  })
 })
+
+describe('isEmpty', () => {
+ it('should return true for empty string', () => {
+ expect(isEmpty('')).toBe(true)
+ expect(isEmpty(' ')).toBe(true)
+ })
+
+ it('should return false for non-empty string', () => {
+ expect(isEmpty('Hello')).toBe(false)
+ expect(isEmpty(' Hello ')).toBe(false)
+ })
+})

client/components/AutocompleteInput/AutocompleteInput.scss

@@ -8,6 +8,34 @@
  width: 100%;
 }
 
+.autocomplete-input__container--error {
+ animation-duration: 0.75s;
+ animation-fill-mode: both;
+ animation-name: shakeX;
+}
+
+@keyframes shakeX {
+ from,
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+
+ 10%,
+ 30%,
+ 50%,
+ 70%,
+ 90% {
+ transform: translate3d(-6px, 0, 0);
+ }
+
+ 20%,
+ 40%,
+ 60%,
+ 80% {
+ transform: translate3d(6px, 0, 0);
+ }
+}
+
 .autocomplete-input {
  width: 40vw;
  border: none;

client/components/AutocompleteInput/AutocompleteInput.tsx

@@ -34,6 +34,8 @@ export const AutocompleteInput = ({
  handleInputChange,
  setIsMenuVisible,
  setSuggestions,
+ isValidationError,
+ errorClearHandler,
  } = useAutocompleteInput({ initialValue, onSubmit: onSearchSubmit })
  const { searchFontSize } = useFontSize({ value })
 
@@ -51,7 +53,9 @@ export const AutocompleteInput = ({
  className={cx('autocomplete-input__container', className, {
  'autocomplete-input__container--menu-visible':
  isMenuVisible && !!suggestions.length,
+ 'autocomplete-input__container--error': isValidationError,
  })}
+ onAnimationEnd={errorClearHandler}
  >
  <AutoComplete
  getItemValue={item => item.package.name}

client/components/AutocompleteInput/hooks/useAutocompleteInput.ts

@@ -1,7 +1,7 @@
 import React from 'react'
 import debounce from 'debounce'
 
-import { parsePackageString } from '../../../../utils/common.utils'
+import { parsePackageString, isEmpty } from '../../../../utils/common.utils'
 import API from '../../../api'
 
 interface UseAutocompleteInputArgs {
@@ -16,6 +16,7 @@ export function useAutocompleteInput({
  const [value, setValue] = React.useState(initialValue)
  const [suggestions, setSuggestions] = React.useState<any[]>([])
  const [isMenuVisible, setIsMenuVisible] = React.useState(false)
+ const [isValidationError, setIsValidationError] = React.useState(false)
 
  const getSuggestions = React.useMemo(
  () =>
@@ -27,9 +28,17 @@ export function useAutocompleteInput({
  []
  )
 
+ const errorClearHandler = () => {
+ setIsValidationError(false)
+ }
+
  const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault()
- onSubmit(value)
+ if (!isEmpty(value)) {
+ onSubmit(value)
+ } else {
+ setIsValidationError(true)
+ }
  }
 
  const handleInputChange = (
@@ -57,5 +66,7 @@ export function useAutocompleteInput({
  handleInputChange,
  setIsMenuVisible,
  setSuggestions,
+ isValidationError,
+ errorClearHandler,
  }
 }

utils/common.utils.js

@@ -50,4 +50,13 @@ function sanitizeHTML(html) {
  })
 }
 
-module.exports = { parsePackageString, daysFromToday, sanitizeHTML }
+/**
+ * replace it when refactor to TS
+ * @param {string} str - input string
+ * @returns boolean
+ * */
+function isEmpty(str) {
+ return !str.trim().length
+}
+
+module.exports = { parsePackageString, daysFromToday, sanitizeHTML, isEmpty }