fix(giphy): search

apps/builder/components/shared/ImageUploadContent/GiphySearch.tsx

@@ -1,60 +0,0 @@
-import { Flex, Input, Stack } from '@chakra-ui/react'
-import { GiphyFetch } from '@giphy/js-fetch-api'
-import { Grid, SearchContext } from '@giphy/react-components'
-import { GiphyLogo } from 'assets/logos'
-import React, { useContext, useState, useEffect } from 'react'
-import { useDebounce } from 'use-debounce'
-import { env } from 'utils'
-
-type GiphySearchProps = {
-  onSubmit: (url: string) => void
-}
-
-const giphyFetch = new GiphyFetch(env('GIPHY_API_KEY') as string)
-
-export const GiphySearch = ({ onSubmit }: GiphySearchProps) => {
-  const { fetchGifs, searchKey, setSearch } = useContext(SearchContext)
-  const fetchGifsTrending = (offset: number) =>
-    giphyFetch.trending({ offset, limit: 10 })
-
-  const [inputValue, setInputValue] = useState('')
-  const [debouncedInputValue] = useDebounce(inputValue, 300)
-
-  useEffect(() => {
-    if (debouncedInputValue === '') return
-    setSearch(debouncedInputValue)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedInputValue])
-
-  const updateUrl = (url: string) => {
-    onSubmit(url)
-  }
-
-  return (
-    <Stack>
-      <Flex align="center">
-        <Input
-          flex="1"
-          autoFocus
-          placeholder="Search..."
-          onChange={(e) => setInputValue(e.target.value)}
-          value={inputValue}
-        />
-        <GiphyLogo w="100px" />
-      </Flex>
-      <Flex overflowY="scroll" maxH="400px">
-        <Grid
-          onGifClick={(gif, e) => {
-            e.preventDefault()
-            updateUrl(gif.images.downsized.url)
-          }}
-          key={searchKey}
-          fetchGifs={searchKey === '' ? fetchGifsTrending : fetchGifs}
-          width={475}
-          columns={3}
-          className="my-4"
-        />
-      </Flex>
-    </Stack>
-  )
-}

apps/builder/components/shared/ImageUploadContent/GiphySearchForm.tsx

@@ -0,0 +1,54 @@
+import { Flex, Stack, Text } from '@chakra-ui/react'
+import { GiphyFetch } from '@giphy/js-fetch-api'
+import { Grid } from '@giphy/react-components'
+import { GiphyLogo } from 'assets/logos'
+import React, { useState } from 'react'
+import { env, isEmpty } from 'utils'
+import { Input } from '../Textbox'
+
+type GiphySearchFormProps = {
+  onSubmit: (url: string) => void
+}
+
+const giphyFetch = new GiphyFetch(env('GIPHY_API_KEY') as string)
+
+export const GiphySearchForm = ({ onSubmit }: GiphySearchFormProps) => {
+  const [inputValue, setInputValue] = useState('')
+
+  const fetchGifs = (offset: number) =>
+    giphyFetch.search(inputValue, { offset, limit: 10 })
+
+  const fetchGifsTrending = (offset: number) =>
+    giphyFetch.trending({ offset, limit: 10 })
+
+  return isEmpty(env('GIPHY_API_KEY')) ? (
+    <Text>NEXT_PUBLIC_GIPHY_API_KEY is missing in environment</Text>
+  ) : (
+    <Stack>
+      <Flex align="center">
+        <Input
+          flex="1"
+          autoFocus
+          placeholder="Search..."
+          onChange={setInputValue}
+          value={inputValue}
+          withVariableButton={false}
+        />
+        <GiphyLogo w="100px" />
+      </Flex>
+      <Flex overflowY="scroll" maxH="400px">
+        <Grid
+          key={inputValue}
+          onGifClick={(gif, e) => {
+            e.preventDefault()
+            onSubmit(gif.images.downsized.url)
+          }}
+          fetchGifs={inputValue === '' ? fetchGifsTrending : fetchGifs}
+          width={475}
+          columns={3}
+          className="my-4"
+        />
+      </Flex>
+    </Stack>
+  )
+}

apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx

@@ -1,11 +1,9 @@
 import { useState } from 'react'
-import { Button, Flex, HStack, Stack, Text } from '@chakra-ui/react'
+import { Button, Flex, HStack, Stack } from '@chakra-ui/react'
-import { SearchContextManager } from '@giphy/react-components'
 import { UploadButton } from '../buttons/UploadButton'
-import { GiphySearch } from './GiphySearch'
+import { GiphySearchForm } from './GiphySearchForm'
 import { useTypebot } from 'contexts/TypebotContext'
 import { Input } from '../Textbox/Input'
-import { env, isEmpty } from 'utils'
 import { EmojiSearchableList } from './emoji/EmojiSearchableList'
 
 type Props = {
@@ -123,12 +121,6 @@ const EmbedLinkContent = ({ initialUrl, onNewUrl }: ContentProps) => (
   </Stack>
 )
 
-const GiphyContent = ({ onNewUrl }: ContentProps) => {
+const GiphyContent = ({ onNewUrl }: ContentProps) => (
-  if (isEmpty(env('GIPHY_API_KEY')))
+  <GiphySearchForm onSubmit={onNewUrl} />
-    return <Text>NEXT_PUBLIC_GIPHY_API_KEY is missing in environment</Text>
+)
-  return (
-    <SearchContextManager apiKey={env('GIPHY_API_KEY') as string}>
-      <GiphySearch onSubmit={onNewUrl} />
-    </SearchContextManager>
-  )
-}

apps/builder/package.json

@@ -85,7 +85,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.18.10",
-    "@playwright/test": "1.24.2",
+    "@playwright/test": "1.25.0",
     "@types/canvas-confetti": "^1.4.3",
     "@types/google-spreadsheet": "^3.3.0",
     "@types/jsonwebtoken": "8.5.8",

apps/builder/playwright/tests/bubbles/image.spec.ts

@@ -83,7 +83,23 @@ test.describe.parallel('Image bubble block', () => {
 
       await page.click('text=Click to edit...')
       await page.click('text=Giphy')
-      await page.click('img >> nth=3', {
+      const firstGiphyImage = page.locator('.giphy-gif-img >> nth=0')
+      await expect(firstGiphyImage).toHaveAttribute(
+        'src',
+        new RegExp('giphy.com/media', 'gm')
+      )
+      const trendingfirstImageSrc = await firstGiphyImage.getAttribute('src')
+      expect(trendingfirstImageSrc).toMatch(new RegExp('giphy.com/media', 'gm'))
+      await page.fill('[placeholder="Search..."]', 'fun')
+      await page.waitForTimeout(500)
+      await expect(firstGiphyImage).toHaveAttribute(
+        'src',
+        new RegExp('giphy.com/media', 'gm')
+      )
+      const funFirstImageSrc = await firstGiphyImage.getAttribute('src')
+      expect(funFirstImageSrc).toMatch(new RegExp('giphy.com/media', 'gm'))
+      expect(trendingfirstImageSrc).not.toBe(funFirstImageSrc)
+      await firstGiphyImage.click({
         force: true,
         position: { x: 0, y: 0 },
       })

apps/viewer/package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@types/papaparse": "5.3.3",
-    "@playwright/test": "1.24.2",
+    "@playwright/test": "1.25.0",
     "eslint-plugin-react": "^7.30.1",
     "@types/cors": "^2.8.12",
     "@types/google-spreadsheet": "^3.3.0",

pnpm-lock.yaml

@@ -28,7 +28,7 @@ importers:
       '@giphy/js-types': ^4.2.1
       '@giphy/react-components': 6.0.0
       '@googleapis/drive': ^3.0.1
-      '@playwright/test': 1.24.2
+      '@playwright/test': 1.25.0
       '@sentry/nextjs': 7.9.0
       '@stripe/stripe-js': 1.35.0
       '@tanstack/react-table': 8.5.11
@@ -179,7 +179,7 @@ importers:
       use-debounce: 8.0.3_react@18.2.0
     devDependencies:
       '@babel/core': 7.18.10
-      '@playwright/test': 1.24.2
+      '@playwright/test': 1.25.0
       '@types/canvas-confetti': 1.4.3
       '@types/google-spreadsheet': 3.3.0
       '@types/jsonwebtoken': 8.5.8
@@ -299,7 +299,7 @@ importers:
 
   apps/viewer:
     specifiers:
-      '@playwright/test': 1.24.2
+      '@playwright/test': 1.25.0
       '@sentry/nextjs': 7.9.0
       '@types/cors': ^2.8.12
       '@types/google-spreadsheet': ^3.3.0
@@ -351,7 +351,7 @@ importers:
       sanitize-html: 2.7.1
       stripe: 10.0.0
     devDependencies:
-      '@playwright/test': 1.24.2
+      '@playwright/test': 1.25.0
       '@types/cors': 2.8.12
       '@types/google-spreadsheet': 3.3.0
       '@types/node': 18.6.5
@@ -5788,13 +5788,13 @@ packages:
     resolution: {integrity: sha512-MSAs9t3Go7GUkMhpKC44T58DJ5KGk2vBo+h1cqQeqlMfdGkxaVB78ZWpv9gYi/g2fa4sopag9gJsNvS8XGgWJA==}
     dev: false
 
-  /@playwright/test/1.24.2:
+  /@playwright/test/1.25.0:
-    resolution: {integrity: sha512-Q4X224pRHw4Dtkk5PoNJplZCokLNvVbXD9wDQEMrHcEuvWpJWEQDeJ9gEwkZ3iCWSFSWBshIX177B231XW4wOQ==}
+    resolution: {integrity: sha512-j4EZhTTQI3dBeWblE21EV//swwmBtOpIrLdOIJIRv4uqsLdHgBg1z+JtTg+AeC5o2bAXIE26kDNW5A0TimG8Bg==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
       '@types/node': 18.6.5
-      playwright-core: 1.24.2
+      playwright-core: 1.25.0
     dev: true
 
   /@polka/url/1.0.0-next.21:
@@ -14226,8 +14226,8 @@ packages:
       find-up: 3.0.0
     dev: false
 
-  /playwright-core/1.24.2:
+  /playwright-core/1.25.0:
-    resolution: {integrity: sha512-zfAoDoPY/0sDLsgSgLZwWmSCevIg1ym7CppBwllguVBNiHeixZkc1AdMuYUPZC6AdEYc4CxWEyLMBTw2YcmRrA==}
+    resolution: {integrity: sha512-kZ3Jwaf3wlu0GgU0nB8UMQ+mXFTqBIFz9h1svTlNduNKjnbPXFxw7mJanLVjqxHJRn62uBfmgBj93YHidk2N5Q==}
     engines: {node: '>=14'}
     hasBin: true
     dev: true