From b95403b3089e2dde8c03d2295e2f4fe69535117a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tadeusz=20Miesi=C4=85c?= <tadeusz.miesiac@gmail.com>
Date: Wed, 11 Oct 2023 20:39:39 +0800
Subject: [PATCH] feat(search bar): open content drawer search on search query
---
.../SearchBar/SearchBar.component.test.tsx | 22 +++++++------------
.../TopBar/SearchBar/SearchBar.component.tsx | 22 ++++++++++++++++---
.../TopBar/TopBar.component.test.tsx | 10 ++++-----
3 files changed, 31 insertions(+), 23 deletions(-)
diff --git a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx
index f5ac55b0..a8c934f4 100644
--- a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx
+++ b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.test.tsx
@@ -1,12 +1,10 @@
-import searchReducer from '@/redux/search/search.slice';
-import type { SearchState } from '@/redux/search/search.types';
-import { ToolkitStoreWithSingleSlice } from '@/utils/createStoreInstanceUsingSliceReducer';
-import { getReduxWrapperUsingSliceReducer } from '@/utils/testing/getReduxWrapperUsingSliceReducer';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { StoreType } from '@/redux/store';
import { fireEvent, render, screen } from '@testing-library/react';
import { SearchBar } from './SearchBar.component';
-const renderComponent = (): { store: ToolkitStoreWithSingleSlice<SearchState> } => {
- const { Wrapper, store } = getReduxWrapperUsingSliceReducer('search', searchReducer);
+const renderComponent = (): { store: StoreType } => {
+ const { Wrapper, store } = getReduxWrapperWithStore();
return (
render(
@@ -23,8 +21,8 @@ const renderComponent = (): { store: ToolkitStoreWithSingleSlice<SearchState> }
describe('SearchBar - component', () => {
it('should let user type text', () => {
renderComponent();
-
const input = screen.getByTestId<HTMLInputElement>('search-input');
+
fireEvent.change(input, { target: { value: 'test value' } });
expect(input.value).toBe('test value');
@@ -32,13 +30,12 @@ describe('SearchBar - component', () => {
it('should disable button when the user clicks the lens button', () => {
renderComponent();
-
const input = screen.getByTestId<HTMLInputElement>('search-input');
- fireEvent.change(input, { target: { value: 'park7' } });
- expect(input.value).toBe('park7');
+ fireEvent.change(input, { target: { value: 'park7' } });
const button = screen.getByRole('button');
+
fireEvent.click(button);
expect(button).toBeDisabled();
@@ -46,12 +43,9 @@ describe('SearchBar - component', () => {
it('should disable input when the user clicks the Enter', () => {
renderComponent();
-
const input = screen.getByTestId<HTMLInputElement>('search-input');
- fireEvent.change(input, { target: { value: 'park7' } });
-
- expect(input.value).toBe('park7');
+ fireEvent.change(input, { target: { value: 'park7' } });
fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', charCode: 13 });
expect(input).toBeDisabled();
diff --git a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx
index 1932b5a2..77ec065c 100644
--- a/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx
+++ b/src/components/FunctionalArea/TopBar/SearchBar/SearchBar.component.tsx
@@ -1,4 +1,6 @@
import lensIcon from '@/assets/vectors/icons/lens.svg';
+import { isDrawerOpenSelector } from '@/redux/drawer/drawer.selectors';
+import { openDrawer } from '@/redux/drawer/drawer.slice';
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import {
isPendingSearchStatusSelector,
@@ -16,17 +18,31 @@ export const SearchBar = (): JSX.Element => {
const dispatch = useAppDispatch();
const isPendingSearchStatus = useSelector(isPendingSearchStatusSelector);
const prevSearchValue = useSelector(searchValueSelector);
+ const isDrawerOpen = useSelector(isDrawerOpenSelector);
const isSameSearchValue = prevSearchValue === searchValue;
+ const openSearchDrawerIfClosed = (): void => {
+ if (!isDrawerOpen) {
+ dispatch(openDrawer('search'));
+ }
+ };
+
const onSearchChange = (event: ChangeEvent<HTMLInputElement>): void =>
setSearchValue(event.target.value);
- // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
- const onSearchClick = () => !isSameSearchValue && dispatch(getSearchData(searchValue));
+ const onSearchClick = (): void => {
+ if (!isSameSearchValue) {
+ dispatch(getSearchData(searchValue));
+ openSearchDrawerIfClosed();
+ }
+ };
const handleKeyPress = (event: KeyboardEvent<HTMLInputElement>): void => {
- if (!isSameSearchValue && event.code === ENTER_KEY_CODE) dispatch(getSearchData(searchValue));
+ if (!isSameSearchValue && event.code === ENTER_KEY_CODE) {
+ dispatch(getSearchData(searchValue));
+ openSearchDrawerIfClosed();
+ }
};
return (
diff --git a/src/components/FunctionalArea/TopBar/TopBar.component.test.tsx b/src/components/FunctionalArea/TopBar/TopBar.component.test.tsx
index 6ff1d849..e6e44ac1 100644
--- a/src/components/FunctionalArea/TopBar/TopBar.component.test.tsx
+++ b/src/components/FunctionalArea/TopBar/TopBar.component.test.tsx
@@ -1,12 +1,10 @@
-import searchReducer from '@/redux/search/search.slice';
-import type { SearchState } from '@/redux/search/search.types';
-import { ToolkitStoreWithSingleSlice } from '@/utils/createStoreInstanceUsingSliceReducer';
-import { getReduxWrapperUsingSliceReducer } from '@/utils/testing/getReduxWrapperUsingSliceReducer';
+import { StoreType } from '@/redux/store';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
import { render, screen } from '@testing-library/react';
import { TopBar } from './TopBar.component';
-const renderComponent = (): { store: ToolkitStoreWithSingleSlice<SearchState> } => {
- const { Wrapper, store } = getReduxWrapperUsingSliceReducer('search', searchReducer);
+const renderComponent = (): { store: StoreType } => {
+ const { Wrapper, store } = getReduxWrapperWithStore();
return (
render(
--
GitLab