fix: fixed the bugs present in explore page

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>

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,

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() {
               </Link>
             </Grid>
             <Grid item xs={8}>
-              {path !== '/' && <SearchSuggestion />}
+              {path !== '/' && <SearchSuggestion setSearchCurrentValue={setSearchCurrentValue} />}
             </Grid>
             <Grid item md={2} xs={0}>
               <div>{''}</div>

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) && (
           <>
             <ListItem
               className={classes.searchItem}

src/components/Repo/RepoDetails.jsx

@@ -134,7 +134,7 @@ const useStyles = makeStyles((theme) => ({
   },
   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) => (
-      <Stack key={`stack${platform}`} alignItems="center" direction="row" spacing={2}>
-        <Chip
-          key={`${name}${platform}${index}`}
-          label={platform}
-          onClick={handlePlatformChipClick}
-          sx={{
-            backgroundColor: '#E0E5EB',
-            color: '#52637A',
-            fontSize: '0.8125rem'
-          }}
-        />
-      </Stack>
+      <Chip
+        key={`${name}${platform}${index}`}
+        label={platform}
+        onClick={handlePlatformChipClick}
+        sx={{
+          backgroundColor: '#E0E5EB',
+          color: '#52637A',
+          fontSize: '0.625rem'
+        }}
+      />
     ));
   };
 
@@ -283,7 +281,7 @@ function RepoDetails() {
                   <Typography gutterBottom className={classes.repoTitle}>
                     {repoDetailData?.title || 'Title not available'}
                   </Typography>
-                  <Stack direction="row" spacing={2} className={classes.platformChipsContainer}>
+                  <Stack direction="row" spacing={1} className={classes.platformChipsContainer}>
                     {platformChips()}
                   </Stack>
                 </Grid>

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) => (
-      <Stack key={`stack${platform}`} alignItems="center" direction="row" spacing={2}>
-        <Chip
-          key={`${name}${platform}${index}`}
-          label={platform}
-          onClick={handlePlatformChipClick}
-          sx={{
-            backgroundColor: '#E0E5EB',
-            color: '#52637A',
-            fontSize: '0.8125rem'
-          }}
-        />
-      </Stack>
+      <Chip
+        key={`${name}${platform}${index}`}
+        label={platform}
+        onClick={handlePlatformChipClick}
+        sx={{
+          backgroundColor: '#E0E5EB',
+          color: '#52637A',
+          fontSize: '0.625rem'
+        }}
+      />
     ));
   };
 
@@ -188,7 +186,7 @@ function RepoCard(props) {
                   {description || 'Description not available'}
                 </Typography>
               </Tooltip>
-              <Stack alignItems="center" direction="row" spacing={2} pt={1}>
+              <Stack alignItems="center" direction="row" spacing={1} pt={1}>
                 {platformChips()}
               </Stack>
               <Stack alignItems="center" direction="row" spacing={1} pt={2}>

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 (
     <Stack className={classes.pageWrapper} direction="column" data-testid="explore-container">
-      <Header />
+      <Header setSearchCurrentValue={setSearchCurrentValue} />
       <Container className={classes.container}>
         <Grid container className={classes.gridWrapper}>
           <Grid item className={classes.tile}>
-            <Explore />
+            <Explore searchInputValue={searchCurrentValue} />
           </Grid>
         </Grid>
       </Container>