From 60ca6d21d5252cc62db14d9860630f6c73031310 Mon Sep 17 00:00:00 2001 From: Raul Kele Date: Thu, 9 Mar 2023 16:21:31 +0200 Subject: [PATCH] fix: fixed the bugs present in explore page Signed-off-by: Raul Kele --- src/components/Explore/Explore.jsx | 6 ++--- src/components/Header/Header.jsx | 4 ++-- src/components/Header/SearchSuggestion.jsx | 22 +++++++++--------- src/components/Repo/RepoDetails.jsx | 26 ++++++++++------------ src/components/Shared/RepoCard.jsx | 24 +++++++++----------- src/pages/ExplorePage.jsx | 6 +++-- 6 files changed, 42 insertions(+), 46 deletions(-) diff --git a/src/components/Explore/Explore.jsx b/src/components/Explore/Explore.jsx index 87c37875..b6239a84 100644 --- a/src/components/Explore/Explore.jsx +++ b/src/components/Explore/Explore.jsx @@ -17,7 +17,7 @@ import { host } from '../../host'; import { mapToRepo } from 'utilities/objectModels.js'; import { useSearchParams } from 'react-router-dom'; import FilterCard from '../Shared/FilterCard.jsx'; -import { isEmpty } from 'lodash'; +import { isEmpty, isNil } from 'lodash'; import filterConstants from 'utilities/filterConstants.js'; import { sortByCriteria } from 'utilities/sortCriteria.js'; import { EXPLORE_PAGE_SIZE } from 'utilities/paginationConstants.js'; @@ -63,7 +63,7 @@ const useStyles = makeStyles((theme) => ({ } })); -function Explore() { +function Explore({ searchInputValue }) { const [isLoading, setIsLoading] = useState(true); const [exploreData, setExploreData] = useState([]); const [sortFilter, setSortFilter] = useState(sortByCriteria.relevance.value); @@ -119,7 +119,7 @@ function Explore() { api .get( `${host()}${endpoints.globalSearch({ - searchQuery: search, + searchQuery: !isNil(searchInputValue) ? searchInputValue : search, pageNumber, pageSize: EXPLORE_PAGE_SIZE, sortBy: sortFilter, diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index f5c5ca58..ecd8982c 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -103,7 +103,7 @@ function setNavShow() { return show; } -function Header() { +function Header({ setSearchCurrentValue = () => {} }) { const show = setNavShow(); const classes = useStyles(); const path = useLocation().pathname; @@ -122,7 +122,7 @@ function Header() { - {path !== '/' && } + {path !== '/' && }
{''}
diff --git a/src/components/Header/SearchSuggestion.jsx b/src/components/Header/SearchSuggestion.jsx index 4df4129a..fb628511 100644 --- a/src/components/Header/SearchSuggestion.jsx +++ b/src/components/Header/SearchSuggestion.jsx @@ -6,7 +6,7 @@ import React, { useEffect, useMemo, useState } from 'react'; import { api, endpoints } from 'api'; import { host } from 'host'; import { mapToImage, mapToRepo } from 'utilities/objectModels'; -import { createSearchParams, useLocation, useNavigate, useSearchParams } from 'react-router-dom'; +import { createSearchParams, useNavigate, useSearchParams } from 'react-router-dom'; import { debounce, isEmpty } from 'lodash'; import { useCombobox } from 'downshift'; import { HEADER_SEARCH_PAGE_SIZE } from 'utilities/paginationConstants'; @@ -95,16 +95,14 @@ const useStyles = makeStyles(() => ({ } })); -function SearchSuggestion() { - const [queryParams, setQueryParams] = useSearchParams(); - const search = queryParams.get('search'); - - const [searchQuery, setSearchQuery] = useState(search || ''); +function SearchSuggestion({ setSearchCurrentValue = () => {} }) { + const [searchQuery, setSearchQuery] = useState(''); const [suggestionData, setSuggestionData] = useState([]); + const [queryParams] = useSearchParams(); + const search = queryParams.get('search'); const [isLoading, setIsLoading] = useState(false); const [isFailedSearch, setIsFailedSearch] = useState(false); const navigate = useNavigate(); - const location = useLocation(); const abortController = useMemo(() => new AbortController(), []); const classes = useStyles(); @@ -175,15 +173,15 @@ function SearchSuggestion() { const handleSeachChange = (event) => { const value = event?.inputValue; setSearchQuery(value); + // used to lift up the state for pages that need to know the current value of the search input (currently only Explore) not used in other cases + // one way binding, other components shouldn't set the value of the search input, but using this prop can read it + setSearchCurrentValue(value); setIsFailedSearch(false); setIsLoading(true); setSuggestionData([]); }; const searchCall = (value) => { - if (location.pathname?.includes('explore')) { - setQueryParams((prevState) => createSearchParams({ ...prevState, search: searchQuery })); - } if (value !== '') { // if search term inclused the ':' character, search for images, if not, search repos if (value?.includes(':')) { @@ -224,7 +222,7 @@ function SearchSuggestion() { items: suggestionData, onInputValueChange: handleSeachChange, onSelectedItemChange: handleSuggestionSelected, - initialInputValue: search ?? '', + initialInputValue: !isEmpty(searchQuery) ? searchQuery : search, itemToString: (item) => item.name ?? item }); @@ -281,7 +279,7 @@ function SearchSuggestion() { className={isOpen && !isLoading && !isFailedSearch ? classes.resultsWrapper : classes.resultsWrapperHidden} > {isOpen && suggestionData?.length > 0 && renderSuggestions()} - {isOpen && isEmpty(searchQuery) && ( + {isOpen && isEmpty(searchQuery) && isEmpty(suggestionData) && ( <> ({ }, platformChipsContainer: { alignItems: 'center', - padding: '0.5rem 0 0 4rem', + padding: '0.5rem 0 0 1rem', [theme.breakpoints.down('md')]: { padding: '0.5rem 0 0 0' } @@ -201,18 +201,16 @@ function RepoDetails() { const filteredPlatforms = platforms?.flatMap((platform) => [platform.Os, platform.Arch]); return uniq(filteredPlatforms).map((platform, index) => ( - - - + )); }; @@ -283,7 +281,7 @@ function RepoDetails() { {repoDetailData?.title || 'Title not available'} - + {platformChips()} diff --git a/src/components/Shared/RepoCard.jsx b/src/components/Shared/RepoCard.jsx index c32a3f80..2641a308 100644 --- a/src/components/Shared/RepoCard.jsx +++ b/src/components/Shared/RepoCard.jsx @@ -121,18 +121,16 @@ function RepoCard(props) { const platformChips = () => { const filteredPlatforms = platforms?.flatMap((platform) => [platform.Os, platform.Arch]); return uniq(filteredPlatforms).map((platform, index) => ( - - - + )); }; @@ -188,7 +186,7 @@ function RepoCard(props) { {description || 'Description not available'} - + {platformChips()} diff --git a/src/pages/ExplorePage.jsx b/src/pages/ExplorePage.jsx index bfa50ca5..232c2626 100644 --- a/src/pages/ExplorePage.jsx +++ b/src/pages/ExplorePage.jsx @@ -5,6 +5,7 @@ import Header from '../components/Header/Header.jsx'; import makeStyles from '@mui/styles/makeStyles'; import { Container, Grid, Stack } from '@mui/material'; import Explore from 'components/Explore/Explore.jsx'; +import { useState } from 'react'; const useStyles = makeStyles(() => ({ container: { @@ -27,14 +28,15 @@ const useStyles = makeStyles(() => ({ function ExplorePage() { const classes = useStyles(); + const [searchCurrentValue, setSearchCurrentValue] = useState(); return ( -
+
- +