From cb3555b61fbbcd745c1e7bf7d92586a3ea042f33 Mon Sep 17 00:00:00 2001 From: emmanuelonah Date: Sat, 22 Jun 2024 20:57:39 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=94=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- src/__image-engine__/.gitkeep | 0 src/__image-engine__/view.tsx | 13 ++++++++ src/__text-engine__/.gitkeep | 0 src/__text-engine__/view.tsx | 13 ++++++++ src/__video-engine__/.gitkeep | 0 src/__video-engine__/view.tsx | 13 ++++++++ src/app.tsx | 33 ++++++++++++++++++- src/configs/index.ts | 1 - src/configs/seo.ts | 1 - src/design-system/assets/index.ts | 1 - src/design-system/design-tokens.ts | 3 -- .../search-widget/index.component.tsx | 10 ++++-- .../components/search-widget/index.model.ts | 1 - .../useSearchWidget.presenter.ts | 9 +++-- src/shared/services/index.ts | 2 +- src/views/home/__test__/config.test.tsx | 14 ++++---- src/views/home/config.tsx | 10 ++++-- src/views/home/index.view.tsx | 7 +--- 19 files changed, 101 insertions(+), 32 deletions(-) delete mode 100644 src/__image-engine__/.gitkeep create mode 100644 src/__image-engine__/view.tsx delete mode 100644 src/__text-engine__/.gitkeep create mode 100644 src/__text-engine__/view.tsx delete mode 100644 src/__video-engine__/.gitkeep create mode 100644 src/__video-engine__/view.tsx delete mode 100644 src/configs/seo.ts delete mode 100644 src/design-system/assets/index.ts delete mode 100644 src/shared/components/search-widget/index.model.ts diff --git a/README.md b/README.md index 09acb15..c73e301 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,7 @@ yarn run test:coverage``` script - [Staging URL](https://x10.netlify.app/) -- [Production URL](https://x10.dev) +- [Production URL](https://x10.com) ## PR convention diff --git a/src/__image-engine__/.gitkeep b/src/__image-engine__/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/__image-engine__/view.tsx b/src/__image-engine__/view.tsx new file mode 100644 index 0000000..91ce1d7 --- /dev/null +++ b/src/__image-engine__/view.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +import { useSearchWidgetContext } from 'shared/components'; + +export function ImageEngineView() { + const { searchQuery, searchImage } = useSearchWidgetContext(); + + return ( +
+ This is Image Search engine {searchQuery} {searchImage} +
+ ); +} diff --git a/src/__text-engine__/.gitkeep b/src/__text-engine__/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/__text-engine__/view.tsx b/src/__text-engine__/view.tsx new file mode 100644 index 0000000..83859e2 --- /dev/null +++ b/src/__text-engine__/view.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +import { useSearchWidgetContext } from 'shared/components'; + +export function TextEngineView() { + const { searchQuery, searchImage } = useSearchWidgetContext(); + + return ( +
+ This is Text Search engine {searchQuery} {searchImage} +
+ ); +} diff --git a/src/__video-engine__/.gitkeep b/src/__video-engine__/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/__video-engine__/view.tsx b/src/__video-engine__/view.tsx new file mode 100644 index 0000000..ad2be58 --- /dev/null +++ b/src/__video-engine__/view.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +import { useSearchWidgetContext } from 'shared/components'; + +export function VideoEngineView() { + const { searchQuery, searchImage } = useSearchWidgetContext(); + + return ( +
+ This is Video Search engine {searchQuery} {searchImage} +
+ ); +} diff --git a/src/app.tsx b/src/app.tsx index 83e11b7..107af24 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,7 +1,38 @@ import React from 'react'; +import { Helmet } from 'react-helmet'; + import { Router } from 'routes/index.route'; export function App() { - return ; + return ( + <> + + + + + + + + + + + + + + + + ); } diff --git a/src/configs/index.ts b/src/configs/index.ts index e6724ec..aa51bc7 100644 --- a/src/configs/index.ts +++ b/src/configs/index.ts @@ -1,3 +1,2 @@ -export * from './seo'; export * from './natives'; export * from './report-web-vitals'; diff --git a/src/configs/seo.ts b/src/configs/seo.ts deleted file mode 100644 index cb0ff5c..0000000 --- a/src/configs/seo.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/src/design-system/assets/index.ts b/src/design-system/assets/index.ts deleted file mode 100644 index cb0ff5c..0000000 --- a/src/design-system/assets/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {}; diff --git a/src/design-system/design-tokens.ts b/src/design-system/design-tokens.ts index 5f663c7..0fb282d 100644 --- a/src/design-system/design-tokens.ts +++ b/src/design-system/design-tokens.ts @@ -1,10 +1,7 @@ -import * as assets from './assets'; - import { colors } from './colors'; import { typography } from './typography'; export const designTokens = { colors, typography, - assets, }; diff --git a/src/shared/components/search-widget/index.component.tsx b/src/shared/components/search-widget/index.component.tsx index 8bc6696..ae21292 100644 --- a/src/shared/components/search-widget/index.component.tsx +++ b/src/shared/components/search-widget/index.component.tsx @@ -1,6 +1,8 @@ -import React, { useId } from 'react'; +import React, { useId, useRef } from 'react'; import { ArrowRightIcon, ImageIcon } from '@radix-ui/react-icons'; +import { useComposeRefs } from 'shared/hooks'; + import { useSearchWidgetContext } from '.'; import { useSearchWidgetPresenter } from './useSearchWidget.presenter'; import { Form, ChatBox, ImageInput, ImageInputLabel, SubmitButton } from './index.styles'; @@ -14,11 +16,13 @@ interface SearchWidgetPropTypes extends Omit export const SearchWidget = React.forwardRef( function SearchWidget(props, forwardedRef) { const imgSearchId = useId(); - const formSubmitHandler = useSearchWidgetPresenter(props.onSubmit); + const formRef = useRef(null); + const composedRefs = useComposeRefs(formRef, forwardedRef); + const formSubmitHandler = useSearchWidgetPresenter(formRef, props.onSubmit); const { searchQuery, handleImageChange, handleSearchQueryChange } = useSearchWidgetContext(); return ( -
+ (formData: Record) => Promise

; -export function useSearchWidgetPresenter(onSubmit?: OnSubmit) { +export function useSearchWidgetPresenter( + formRef: React.RefObject, + onSubmit?: OnSubmit +) { return useCallback( async (event: React.FormEvent) => { event.preventDefault(); @@ -10,8 +13,8 @@ export function useSearchWidgetPresenter(onSubmit?: OnSubmit) { const formData = Object.fromEntries(form.entries()); await onSubmit?.(formData); - event.currentTarget.reset(); + formRef.current?.reset(); }, - [onSubmit] + [formRef, onSubmit] ); } diff --git a/src/shared/services/index.ts b/src/shared/services/index.ts index cb0ff5c..cc9747c 100644 --- a/src/shared/services/index.ts +++ b/src/shared/services/index.ts @@ -1 +1 @@ -export {}; +export * from './http-services/index.service'; diff --git a/src/views/home/__test__/config.test.tsx b/src/views/home/__test__/config.test.tsx index 13f9a1b..1f63d9b 100644 --- a/src/views/home/__test__/config.test.tsx +++ b/src/views/home/__test__/config.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { render, screen } from 'test'; +import { renderWithOptions, screen } from 'test'; import { config } from '../config'; @@ -8,24 +8,24 @@ describe('config object', () => { it('should have a textSearch property with a page view that renders correctly', () => { const Page = config.textSearch.page; - render(); + renderWithOptions(); - expect(screen.getByText('Text Search')).toBeInTheDocument(); + expect(screen.getByTestId('textEngineView')).toBeInTheDocument(); }); it('should have an imageSearch property with a page view that renders correctly', () => { const Page = config.imageSearch.page; - render(); + renderWithOptions(); - expect(screen.getByText('Image Search')).toBeInTheDocument(); + expect(screen.getByTestId('imageEngineView')).toBeInTheDocument(); }); it('should have a videoSearch property with a page view that renders correctly', () => { const Page = config.videoSearch.page; - render(); + renderWithOptions(); - expect(screen.getByText('Video Search')).toBeInTheDocument(); + expect(screen.getByTestId('videoEngineView')).toBeInTheDocument(); }); }); diff --git a/src/views/home/config.tsx b/src/views/home/config.tsx index ad501a3..8ba184f 100644 --- a/src/views/home/config.tsx +++ b/src/views/home/config.tsx @@ -1,11 +1,15 @@ +import { TextEngineView } from '__text-engine__/view'; +import { ImageEngineView } from '__image-engine__/view'; +import { VideoEngineView } from '__video-engine__/view'; + export const config = { textSearch: { - page: () =>

Text Search

, + page: TextEngineView, }, imageSearch: { - page: () =>

Image Search

, + page: ImageEngineView, }, videoSearch: { - page: () =>

Video Search

, + page: VideoEngineView, }, }; diff --git a/src/views/home/index.view.tsx b/src/views/home/index.view.tsx index 9838c0d..9020b53 100644 --- a/src/views/home/index.view.tsx +++ b/src/views/home/index.view.tsx @@ -8,10 +8,5 @@ export function Home() { const Page = config[searchType].page; - return ( - <> - Welcome Home - - - ); + return ; }