From fbf57415ada6d59c9ea2657ec20717530063a887 Mon Sep 17 00:00:00 2001 From: Nishitbariya <85815172+Nishitbaria@users.noreply.github.com> Date: Fri, 28 Jul 2023 23:55:01 +0530 Subject: [PATCH 1/4] =?UTF-8?q?Refactor:=20Search.tsx=20=E2=9C=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/search.tsx | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/pages/search.tsx b/pages/search.tsx index 30131d154..e46267510 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -10,9 +10,6 @@ import useFilterSearch from 'hooks/useFilterSearch' const Search = () => { const router = useRouter() - const title = `LinksHub - ${router.asPath - .charAt(1) - .toUpperCase()}${router.asPath.slice(2)}` const query = router.query.query const { filterSearch } = useFilterSearch() @@ -20,25 +17,26 @@ const Search = () => { if (!query || query === '') router.replace('/') }, [query, router]) - let content: JSX.Element[] | JSX.Element - - const data = filterSearch(query as string) + const renderContent = () => { + const data = filterSearch(query as string) + return data.length > 0 ? : + } - if (data.length > 0) { - content = - } else { - content = + const generateTitle = () => { + const capitalizedPath = + router.asPath.charAt(1).toUpperCase() + router.asPath.slice(2) + return `LinksHub - ${capitalizedPath}` } return ( <> - {title} + {generateTitle()}
- {content} + {renderContent()}
) From 2ef520c8bd671564c9e3fe22ac7b7ff7ca72547d Mon Sep 17 00:00:00 2001 From: Nishitbariya <85815172+Nishitbaria@users.noreply.github.com> Date: Tue, 8 Aug 2023 13:57:01 +0530 Subject: [PATCH 2/4] Update search.tsx --- pages/search.tsx | 180 ++++++++++++++++++++++++----------------------- 1 file changed, 92 insertions(+), 88 deletions(-) diff --git a/pages/search.tsx b/pages/search.tsx index 8f31471c7..4fac09903 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -1,98 +1,102 @@ -import Head from 'next/head' -import React, { useEffect } from 'react' -import { useRouter } from 'next/router' +import React, { useState, useRef, useEffect } from 'react'; +import SearchIcon from 'assets/icons/SearchIcon'; +import { useRouter } from 'next/router'; +import { subcategoryArray } from '../../types'; -import CardsList from 'components/Cards/CardsList' -import { TopBar } from 'components/TopBar/TopBar' -import ComingSoon from 'components/NewIssue/NewIssue' +interface SearchbarProps { + setSearch: (search: string) => void; +} -import useFilterSearch from 'hooks/useFilterSearch' +export const Searchbar: React.FC = ({ setSearch }) => { + const router = useRouter(); + const query = router.query.query; + const [searchQuery, setSearchQuery] = useState((query as string) ?? ''); + const [errorMessage, setErrorMessage] = useState(''); + const [suggestions, setSuggestions] = useState([]); + const dropdownRef = useRef(null); -const Search = () => { - const router = useRouter() - const query = router.query.query - const { filterSearch } = useFilterSearch() + const handleSearchChange = (e: React.ChangeEvent) => { + const value = e.target.value; + setSearchQuery(value); + }; - useEffect(() => { - if (!query || query === '') router.replace('/') - }, [query, router]) + const handleSuggestionClick = (suggestion: string) => { + setSearchQuery(suggestion); + setSearch(suggestion); + setSuggestions([]); + }; - const renderContent = () => { - const data = filterSearch(query as string) - return data.length > 0 ? : - } + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (searchQuery.trim() === '') { + setErrorMessage('Please enter a search query'); + } else { + setErrorMessage(''); + setSearch(searchQuery); + } + }; - const generateTitle = () => { - const capitalizedPath = - router.asPath.charAt(1).toUpperCase() + router.asPath.slice(2) - return `LinksHub - ${capitalizedPath}` - } + const handleClickOutsideDropdown = (e: MouseEvent) => { + if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) { + setSuggestions([]); + } + }; - return ( - <> - - {generateTitle()} - - - - - - - - + useEffect(() => { + document.addEventListener('mousedown', handleClickOutsideDropdown); + return () => { + document.removeEventListener('mousedown', handleClickOutsideDropdown); + }; + }, []); - {/* Open Graph */} - - - - - - + const filteredSuggestions = subcategoryArray.filter((option) => + option.toLowerCase().includes(searchQuery.trim().toLowerCase()) + ); - {/* Twitter */} - - - - - - - - - - - -
- {renderContent()} + return ( +
+
+
+ + + +
+ {filteredSuggestions.length > 0 && ( +
    + {filteredSuggestions.map((suggestion) => ( +
  • handleSuggestionClick(suggestion)} + > + {suggestion.split('-').join(' ')} +
    • + ))} +
+ )}
- - ) -} - -export default Search + {errorMessage &&

{errorMessage}

} +
+ ); +}; From d2ea393672415c4488f366be28a538834a66d810 Mon Sep 17 00:00:00 2001 From: Nishitbariya <85815172+Nishitbaria@users.noreply.github.com> Date: Tue, 8 Aug 2023 14:00:40 +0530 Subject: [PATCH 3/4] Fixing deploy --- pages/search.tsx | 182 +++++++++++++++++++++++------------------------ 1 file changed, 90 insertions(+), 92 deletions(-) diff --git a/pages/search.tsx b/pages/search.tsx index 4fac09903..9ea5f755c 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -1,102 +1,100 @@ -import React, { useState, useRef, useEffect } from 'react'; -import SearchIcon from 'assets/icons/SearchIcon'; -import { useRouter } from 'next/router'; -import { subcategoryArray } from '../../types'; +import Head from 'next/head' +import React, { useEffect } from 'react' +import { useRouter } from 'next/router' -interface SearchbarProps { - setSearch: (search: string) => void; -} - -export const Searchbar: React.FC = ({ setSearch }) => { - const router = useRouter(); - const query = router.query.query; - const [searchQuery, setSearchQuery] = useState((query as string) ?? ''); - const [errorMessage, setErrorMessage] = useState(''); - const [suggestions, setSuggestions] = useState([]); - const dropdownRef = useRef(null); +import CardsList from 'components/Cards/CardsList' +import { TopBar } from 'components/TopBar/TopBar' +import ComingSoon from 'components/NewIssue/NewIssue' - const handleSearchChange = (e: React.ChangeEvent) => { - const value = e.target.value; - setSearchQuery(value); - }; +import useFilterSearch from 'hooks/useFilterSearch' - const handleSuggestionClick = (suggestion: string) => { - setSearchQuery(suggestion); - setSearch(suggestion); - setSuggestions([]); - }; +const Search = () => { + const router = useRouter() + const title = `LinksHub - ${router.asPath + .charAt(1) + .toUpperCase()}${router.asPath.slice(2)}` + const query = router.query.query + const { filterSearch } = useFilterSearch() - const handleSubmit = (e: React.FormEvent) => { - e.preventDefault(); - if (searchQuery.trim() === '') { - setErrorMessage('Please enter a search query'); - } else { - setErrorMessage(''); - setSearch(searchQuery); - } - }; + useEffect(() => { + if (!query || query === '') router.replace('/') + }, [query, router]) - const handleClickOutsideDropdown = (e: MouseEvent) => { - if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) { - setSuggestions([]); - } - }; + let content: JSX.Element[] | JSX.Element - useEffect(() => { - document.addEventListener('mousedown', handleClickOutsideDropdown); - return () => { - document.removeEventListener('mousedown', handleClickOutsideDropdown); - }; - }, []); + const data = filterSearch(query as string) - const filteredSuggestions = subcategoryArray.filter((option) => - option.toLowerCase().includes(searchQuery.trim().toLowerCase()) - ); + if (data.length > 0) { + content = + } else { + content = + } return ( -
-
-
- - - -
- {filteredSuggestions.length > 0 && ( -
    - {filteredSuggestions.map((suggestion) => ( -
  • handleSuggestionClick(suggestion)} - > - {suggestion.split('-').join(' ')} -
    • - ))} -
- )} + <> + + {title} + + + + + + + + + + {/* Open Graph */} + + + + + + + + {/* Twitter */} + + + + + + + + + + + +
+ {content}
- {errorMessage &&

{errorMessage}

} - - ); -}; + + ) +} + +export default Search From f725cc3e956077ac80d35bf5b4fed80616912c5d Mon Sep 17 00:00:00 2001 From: Nishitbariya <85815172+Nishitbaria@users.noreply.github.com> Date: Tue, 8 Aug 2023 14:04:48 +0530 Subject: [PATCH 4/4] Fixing --- pages/search.tsx | 52 +++++++++++++++++++++++------------------------- 1 file changed, 25 insertions(+), 27 deletions(-) diff --git a/pages/search.tsx b/pages/search.tsx index 9ea5f755c..bea5b6097 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -1,34 +1,31 @@ -import Head from 'next/head' -import React, { useEffect } from 'react' -import { useRouter } from 'next/router' - -import CardsList from 'components/Cards/CardsList' -import { TopBar } from 'components/TopBar/TopBar' -import ComingSoon from 'components/NewIssue/NewIssue' - -import useFilterSearch from 'hooks/useFilterSearch' +import React, { useEffect } from 'react'; +import { useRouter } from 'next/router'; +import Head from 'next/head'; +import CardsList from 'components/Cards/CardsList'; +import { TopBar } from 'components/TopBar/TopBar'; +import ComingSoon from 'components/NewIssue/NewIssue'; +import useFilterSearch from 'hooks/useFilterSearch'; const Search = () => { - const router = useRouter() - const title = `LinksHub - ${router.asPath - .charAt(1) - .toUpperCase()}${router.asPath.slice(2)}` - const query = router.query.query - const { filterSearch } = useFilterSearch() + const router = useRouter(); + const query = router.query.query; + const { filterSearch } = useFilterSearch(); useEffect(() => { - if (!query || query === '') router.replace('/') - }, [query, router]) + if (!query || query === '') router.replace('/'); + }, [query, router]); - let content: JSX.Element[] | JSX.Element + const data = filterSearch(query as string); - const data = filterSearch(query as string) + const title = `LinksHub - ${ + router.asPath.charAt(1).toUpperCase() + router.asPath.slice(2) + }`; - if (data.length > 0) { - content = - } else { - content = - } + const content = data.length > 0 ? ( + + ) : ( + + ); return ( <> @@ -88,13 +85,14 @@ const Search = () => { property="discord:invite" content="https://discord.com/invite/NvK67YnJX5" /> +
{content}
- ) -} + ); +}; -export default Search +export default Search;