From 5333ba9088fd27e23e19802c35ae1af5aa617810 Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Fri, 12 Aug 2022 08:34:53 +0200 Subject: [PATCH] fix(giphy): search --- .../shared/ImageUploadContent/GiphySearch.tsx | 60 ------------------- .../ImageUploadContent/GiphySearchForm.tsx | 54 +++++++++++++++++ .../ImageUploadContent/ImageUploadContent.tsx | 18 ++---- apps/builder/package.json | 2 +- .../playwright/tests/bubbles/image.spec.ts | 18 +++++- apps/viewer/package.json | 2 +- pnpm-lock.yaml | 18 +++--- 7 files changed, 87 insertions(+), 85 deletions(-) delete mode 100644 apps/builder/components/shared/ImageUploadContent/GiphySearch.tsx create mode 100644 apps/builder/components/shared/ImageUploadContent/GiphySearchForm.tsx diff --git a/apps/builder/components/shared/ImageUploadContent/GiphySearch.tsx b/apps/builder/components/shared/ImageUploadContent/GiphySearch.tsx deleted file mode 100644 index 20bc17c13..000000000 --- a/apps/builder/components/shared/ImageUploadContent/GiphySearch.tsx +++ /dev/null @@ -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 ( - - - setInputValue(e.target.value)} - value={inputValue} - /> - - - - { - e.preventDefault() - updateUrl(gif.images.downsized.url) - }} - key={searchKey} - fetchGifs={searchKey === '' ? fetchGifsTrending : fetchGifs} - width={475} - columns={3} - className="my-4" - /> - - - ) -} diff --git a/apps/builder/components/shared/ImageUploadContent/GiphySearchForm.tsx b/apps/builder/components/shared/ImageUploadContent/GiphySearchForm.tsx new file mode 100644 index 000000000..98f650437 --- /dev/null +++ b/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')) ? ( + NEXT_PUBLIC_GIPHY_API_KEY is missing in environment + ) : ( + + + + + + + { + e.preventDefault() + onSubmit(gif.images.downsized.url) + }} + fetchGifs={inputValue === '' ? fetchGifsTrending : fetchGifs} + width={475} + columns={3} + className="my-4" + /> + + + ) +} diff --git a/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx b/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx index 5b04fddbd..45435f1f8 100644 --- a/apps/builder/components/shared/ImageUploadContent/ImageUploadContent.tsx +++ b/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 { SearchContextManager } from '@giphy/react-components' +import { Button, Flex, HStack, Stack } from '@chakra-ui/react' 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) => ( ) -const GiphyContent = ({ onNewUrl }: ContentProps) => { - if (isEmpty(env('GIPHY_API_KEY'))) - return NEXT_PUBLIC_GIPHY_API_KEY is missing in environment - return ( - - - - ) -} +const GiphyContent = ({ onNewUrl }: ContentProps) => ( + +) diff --git a/apps/builder/package.json b/apps/builder/package.json index 20f798ba8..13dc556e0 100644 --- a/apps/builder/package.json +++ b/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", diff --git a/apps/builder/playwright/tests/bubbles/image.spec.ts b/apps/builder/playwright/tests/bubbles/image.spec.ts index 3cb2c346c..de1b3b851 100644 --- a/apps/builder/playwright/tests/bubbles/image.spec.ts +++ b/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 }, }) diff --git a/apps/viewer/package.json b/apps/viewer/package.json index 261af9c65..538b70f4a 100644 --- a/apps/viewer/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 609fc85f4..8a4a06182 100644 --- a/pnpm-lock.yaml +++ b/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: - resolution: {integrity: sha512-Q4X224pRHw4Dtkk5PoNJplZCokLNvVbXD9wDQEMrHcEuvWpJWEQDeJ9gEwkZ3iCWSFSWBshIX177B231XW4wOQ==} + /@playwright/test/1.25.0: + 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: - resolution: {integrity: sha512-zfAoDoPY/0sDLsgSgLZwWmSCevIg1ym7CppBwllguVBNiHeixZkc1AdMuYUPZC6AdEYc4CxWEyLMBTw2YcmRrA==} + /playwright-core/1.25.0: + resolution: {integrity: sha512-kZ3Jwaf3wlu0GgU0nB8UMQ+mXFTqBIFz9h1svTlNduNKjnbPXFxw7mJanLVjqxHJRn62uBfmgBj93YHidk2N5Q==} engines: {node: '>=14'} hasBin: true dev: true