feat: imp of useSearch + small changes

yearn · Aug 7, 2024 · 1ba8a46 · 1ba8a46
1 parent f70a5bd
commit 1ba8a46
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 43 deletions.
diff --git a/apps/common/components/AppsCarousel.tsx b/apps/common/components/AppsCarousel.tsx
@@ -2,7 +2,7 @@ import {type ForwardedRef, forwardRef, type ReactElement} from 'react';
 
 import {FeaturedApp} from './FeaturedApp';
 
-import type {TApp} from 'pages/home/[category]';
+import type {TApp} from '@common/types/category';
 
 export const AppsCarousel = forwardRef((props: {apps: TApp[]}, ref: ForwardedRef<HTMLDivElement>): ReactElement => {
 	return (

diff --git a/apps/common/components/FeaturedApp.tsx b/apps/common/components/FeaturedApp.tsx
@@ -3,24 +3,24 @@ import Link from 'next/link';
 import {cl} from '@builtbymom/web3/utils';
 import {IconShare} from '@common/icons/IconShare';
 
-import type {TApp} from 'pages/home/[category]';
 import type {ReactElement} from 'react';
+import type {TApp} from '@common/types/category';
 
 export function FeaturedApp(props: {app: TApp}): ReactElement {
 	return (
 		<Link
 			href={props.app.appURI}
 			target={'_blank'}
 			className={cl(
-				'group relative flex h-[376px] w-full min-w-[280px] cursor-pointer flex-col justify-end px-6 py-10 z-20 overflow-hidden outline outline-1 outline-gray-500/50  md:h-[520px] md:min-w-[384px]'
+				'group relative flex h-[376px] w-full min-w-[280px] cursor-pointer flex-col justify-end px-6 py-10 z-20 overflow-hidden outline outline-1 outline-gray-500/50 md:h-[520px] md:min-w-[384px]'
 			)}>
 			<Image
 				src={props.app.logoURI}
 				alt={props.app.name}
 				width={1400}
 				height={2000}
 				className={
-					'absolute right-0 top-0 size-full bg-center object-cover transition-shadow duration-200 group-hover:scale-105'
+					'absolute right-0 top-0 size-full bg-center object-cover transition-all duration-200 group-hover:scale-105'
 				}
 			/>
 			<div

diff --git a/apps/common/components/MobileNavbar.tsx b/apps/common/components/MobileNavbar.tsx
@@ -17,13 +17,7 @@ const iconsDict = {
 	'yearn-x': <IconYearnXApps />
 };
 
-export function MobileNavbar({
-	set_isNavbarOpen,
-	set_isSearchOpen
-}: {
-	set_isNavbarOpen: (value: boolean) => void;
-	set_isSearchOpen: (value: boolean) => void;
-}): ReactElement {
+export function MobileNavbar({onClose}: {onClose: VoidFunction}): ReactElement {
 	const pathName = usePathname();
 
 	const currentTab = pathName?.startsWith('/home/') ? pathName?.split('/')[2] : '/';
@@ -39,10 +33,7 @@ export function MobileNavbar({
 							'text-base flex items-center gap-x-2 py-2 text-gray-400',
 							currentTab === tab.route ? 'text-white' : 'text-gray-400'
 						)}
-						onClick={() => {
-							set_isSearchOpen(false);
-							set_isNavbarOpen(false);
-						}}
+						onClick={onClose}
 						href={tab.route === '/' ? tab.route : `/home/${tab.route}`}>
 						<div className={'flex size-6 items-center justify-center'}>
 							{iconsDict[tab.route as '/' | 'community' | 'yearn-x']}

diff --git a/apps/common/components/Sidebar.tsx b/apps/common/components/Sidebar.tsx
@@ -46,7 +46,7 @@ export function Sidebar(props: TSidebarProps): ReactElement {
 						searchPlaceholder={'Search Apps'}
 						searchValue={configuration.searchValue}
 						onSearch={(value: string) => {
-							dispatch({type: 'SET_SEARCH', payload: value});
+							dispatch({searchValue: value});
 						}}
 						shouldSearchByClick
 						onSearchClick={onSearchClick}

diff --git a/apps/common/contexts/useSearch.tsx b/apps/common/contexts/useSearch.tsx
@@ -1,47 +1,38 @@
-import {createContext, useContext, useReducer} from 'react';
+import {createContext, useContext, useState} from 'react';
 import {useDeepCompareMemo} from '@react-hookz/web';
 import {optionalRenderProps} from '@common/types/optionalRenderProps';
 
-import type {Dispatch, ReactElement} from 'react';
+import type {Dispatch, ReactElement, SetStateAction} from 'react';
 import type {TOptionalRenderProps} from '@common/types/optionalRenderProps';
 
 type TSearchContext = {
 	configuration: TSearchConfiguration;
-	dispatch: Dispatch<TSearchActions>;
+	dispatch: Dispatch<SetStateAction<TSearchConfiguration>>;
 };
 
 type TSearchConfiguration = {
 	searchValue: string;
 };
 
-type TSearchActions = {
-	type: 'SET_SEARCH';
-	payload: string;
-};
-
 const defaultProps = {
 	configuration: {
 		searchValue: ''
 	},
 	dispatch: (): void => undefined
 };
 
-const configurationReducer = (state: TSearchConfiguration, action: TSearchActions): TSearchConfiguration => {
-	switch (action.type) {
-		case 'SET_SEARCH':
-			return {...state, searchValue: action.payload};
-	}
-};
-
 const SearchContext = createContext<TSearchContext>(defaultProps);
 export const SearchContextApp = ({
 	children
 }: {
 	children: TOptionalRenderProps<TSearchContext, ReactElement>;
 }): ReactElement => {
-	const [configuration, dispatch] = useReducer(configurationReducer, defaultProps.configuration);
+	const [configuration, set_configuration] = useState(defaultProps.configuration);
 
-	const contextValue = useDeepCompareMemo((): TSearchContext => ({configuration, dispatch}), [configuration]);
+	const contextValue = useDeepCompareMemo(
+		(): TSearchContext => ({configuration, dispatch: set_configuration}),
+		[configuration]
+	);
 
 	return (
 		<SearchContext.Provider value={contextValue}>

diff --git a/apps/common/types/category.ts b/apps/common/types/category.ts
@@ -18,3 +18,10 @@ export type TVaultListHeroCategory = (typeof VAULT_CATEGORIES)[number];
 export function isValidCategory<T extends string>(input: string): input is T {
 	return VAULT_CATEGORIES.includes(input as TVaultListHeroCategory);
 }
+
+export type TApp = {
+	name: string;
+	description?: string;
+	logoURI: string;
+	appURI: string;
+};
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -75,8 +75,10 @@ const WithLayout = memo(function WithLayout(props: {supportedNetworks: Chain[]}
 								transition={{type: 'tween', stiffness: 300, damping: 30}} // Add transition for smooth animation
 							>
 								<MobileNavbar
-									set_isNavbarOpen={set_isNavbarOpen}
-									set_isSearchOpen={set_isSearchOpen}
+									onClose={() => {
+										set_isNavbarOpen(false);
+										set_isSearchOpen(false);
+									}}
 								/>
 							</motion.nav>
 						)}

diff --git a/pages/home/[category].tsx b/pages/home/[category].tsx
@@ -4,13 +4,6 @@ import {CATEGORIES_DICT} from '@common/utils/constants';
 
 import type {ReactElement} from 'react';
 
-export type TApp = {
-	name: string;
-	description?: string;
-	logoURI: string;
-	appURI: string;
-};
-
 export default function Index(): ReactElement {
 	const pathName = usePathname();
 	const currentTab = pathName?.startsWith('/home/') ? pathName?.split('/')[2] : '/';

diff --git a/pages/home/index.tsx b/pages/home/index.tsx
@@ -120,7 +120,7 @@ export default function Home(): ReactElement {
 	};
 
 	useMountEffect(() => {
-		dispatch({type: 'SET_SEARCH', payload: ''});
+		dispatch({searchValue: ''});
 	});
 
 	return (