diff --git a/packages/web/components/MegaMenu.tsx b/packages/web/components/MegaMenu.tsx index 6f6c9e57..0279c8ae 100644 --- a/packages/web/components/MegaMenu.tsx +++ b/packages/web/components/MegaMenu.tsx @@ -54,7 +54,7 @@ import { MetaLink } from 'components/Link'; import { PlayerFragmentFragment } from 'graphql/autogen/types'; import { usePSeedBalance } from 'lib/hooks/balances'; import Image from 'next/image'; -import router from 'next/router'; +import { useRouter } from 'next/router'; import React, { useCallback } from 'react'; import AsyncSelect from 'react-select/async'; import { useDebouncedCallback } from 'use-debounce'; @@ -324,15 +324,22 @@ export type SearchOption = { // const Control = (props: any) => ({ children, ...rest }: any) => ( // 👍 {children} // ); -const SeeAllComponent = ({ text, url }: { text: string; url: string }) => ( - +const SeeAllComponent = ({ + text, + handleClick, +}: { + text: string; + handleClick: any; +}) => ( + See all {text} - + ); // Search -- not working yet const Search = () => { const [inputValue, setValue] = React.useState(''); const [selectedValue, setSelectedValue] = React.useState(''); + const router = useRouter(); const debounced = useDebouncedCallback(async () => { const { players } = await getPlayersByText(`%${inputValue}%`); @@ -340,17 +347,18 @@ const Search = () => { let mappedPlayersOptions = players.map((player) => ({ label: ( - - - - {player.username} - - + router.push(`/player/${player.username}`)} + > + + {player.username} + ), value: player.username, })); @@ -358,12 +366,18 @@ const Search = () => { let mappedGuildsOptions = guilds.map((guild) => ({ value: guild.guildname, label: ( - - - - {guild.guildname} - - + router.push(`/guild/${guild.guildname}`)} + > + + {guild.guildname} + ), })); @@ -374,7 +388,9 @@ const Search = () => { label: ( + router.push(`/search/players?q=${encodeURI(inputValue)}`) + } /> ), value: '', @@ -389,7 +405,9 @@ const Search = () => { label: ( + router.push(`/search/guilds?q=${encodeURI(inputValue)}`) + } /> ), value: '', @@ -418,8 +436,8 @@ const Search = () => { }; // handle selection - const handleChange = (value: string) => { - setSelectedValue(value); + const handleChange = () => { + setSelectedValue(''); }; return ( @@ -443,10 +461,10 @@ const Search = () => { // ), }} cacheOptions - defaultOptions + // defaultOptions value={selectedValue} - getOptionLabel={(e) => e?.label} - getOptionValue={(e) => e?.value} + getOptionLabel={(e: { label: string }) => e.label} + getOptionValue={(e: { value: string }) => e.value} loadOptions={() => debounced()} onInputChange={handleInputChange} onChange={handleChange} @@ -556,12 +574,13 @@ const PlayerStats: React.FC = ({ player }) => { export const MegaMenu: React.FC = () => { const { connected, connect } = useWeb3(); - const handleLoginClick = useCallback(async () => { await connect(); }, [connect]); const { user, fetching } = useUser(); + const router = useRouter(); + const { isOpen, onOpen, onClose } = useDisclosure(); const menuToggle = () => { if (isOpen) {