blsmedia/bot
2
0
Fork 0
Code Activity

🐛 (bubbles) Fix giphy search input buggy

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-10-06 09:03:49 +02:00
parent bfed599695
commit 88c4076664
2 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/builder/components/shared/ImageUploadContent/GiphySearchForm.tsx
View File

@ -3,6 +3,7 @@ import { GiphyFetch } from '@giphy/js-fetch-api'
import { Grid } from '@giphy/react-components' import { Grid } from '@giphy/react-components'
import { GiphyLogo } from 'assets/logos' import { GiphyLogo } from 'assets/logos'
import React, { useState } from 'react' import React, { useState } from 'react'
import { useDebounce } from 'use-debounce'
import { env, isEmpty } from 'utils' import { env, isEmpty } from 'utils'
import { Input } from '../Textbox' import { Input } from '../Textbox'
@ -14,6 +15,7 @@ const giphyFetch = new GiphyFetch(env('GIPHY_API_KEY') as string)
export const GiphySearchForm = ({ onSubmit }: GiphySearchFormProps) => { export const GiphySearchForm = ({ onSubmit }: GiphySearchFormProps) => {
const [inputValue, setInputValue] = useState('') const [inputValue, setInputValue] = useState('')
const [debouncedInputValue] = useDebounce(inputValue, 500)
const fetchGifs = (offset: number) => const fetchGifs = (offset: number) =>
giphyFetch.search(inputValue, { offset, limit: 10 }) giphyFetch.search(inputValue, { offset, limit: 10 })
@ -38,12 +40,12 @@ export const GiphySearchForm = ({ onSubmit }: GiphySearchFormProps) => {
</Flex> </Flex>
<Flex overflowY="scroll" maxH="400px"> <Flex overflowY="scroll" maxH="400px">
<Grid <Grid
key={inputValue} key={debouncedInputValue}
onGifClick={(gif, e) => { onGifClick={(gif, e) => {
e.preventDefault() e.preventDefault()
onSubmit(gif.images.downsized.url) onSubmit(gif.images.downsized.url)
}} }}
fetchGifs={inputValue === '' ? fetchGifsTrending : fetchGifs} fetchGifs={debouncedInputValue === '' ? fetchGifsTrending : fetchGifs}
width={475} width={475}
columns={3} columns={3}
className="my-4" className="my-4"

3
apps/builder/playwright/tests/bubbles/image.spec.ts
View File

@ -85,7 +85,8 @@ test.describe.parallel('Image bubble block', () => {
) )
const trendingfirstImageSrc = await firstGiphyImage.getAttribute('src') const trendingfirstImageSrc = await firstGiphyImage.getAttribute('src')
expect(trendingfirstImageSrc).toMatch(new RegExp('giphy.com/media', 'gm')) expect(trendingfirstImageSrc).toMatch(new RegExp('giphy.com/media', 'gm'))
await page.fill('[placeholder="Search..."]', 'fun') await page.type('[placeholder="Search..."]', 'fun')
await expect(page.locator('[placeholder="Search..."]')).toHaveValue('fun')
await page.waitForTimeout(500) await page.waitForTimeout(500)
await expect(firstGiphyImage).toHaveAttribute( await expect(firstGiphyImage).toHaveAttribute(
'src', 'src',