From e3d1c483cf12010316b0e1d536b76113deed74e8 Mon Sep 17 00:00:00 2001
From: Janvi Bajoria <34344234+janvi01@users.noreply.github.com>
Date: Wed, 1 Nov 2023 08:34:08 +0530
Subject: [PATCH] feat: play search result summary (#1350)

* feat: search result summary

* fix: responsiveness

* replace URLSearchParams with useSearchParams

---------

Co-authored-by: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
---
 src/common/playlists/PlayList.jsx | 20 +++++++++++++++++---
 src/common/playlists/playlist.css |  8 ++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/common/playlists/PlayList.jsx b/src/common/playlists/PlayList.jsx
index 391ef4fd7..29694c069 100644
--- a/src/common/playlists/PlayList.jsx
+++ b/src/common/playlists/PlayList.jsx
@@ -8,7 +8,7 @@ import { SORT_BY } from 'constants';
 import './playlist.css';
 import { toSanitized } from 'common/services/string';
 import DynamicBanner from './DynamicBanner';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useSearchParams } from 'react-router-dom';
 import { ParseQuery, QueryDBTranslator } from 'common/search/search-helper';
 import { getPlaysByFilter } from 'common/services/plays';
 
@@ -18,7 +18,10 @@ const PlayList = () => {
   const [plays, setPlays] = useState();
   const [isFiltered, setIsFiltered] = useState(false);
   const [sortBy, setSortBy] = useState(localStorage.getItem('sortByPlay') || 'Newest');
-  let location = useLocation();
+  const [searchTerm, setSearchTerm] = useState('');
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const text = searchParams.get('text');
 
   const onChange = (e) => {
     const { value } = e.target;
@@ -62,9 +65,12 @@ const PlayList = () => {
         setIsFiltered(true);
       }
       setLoading(false);
+
+      // gets Search Term from url to display in the search summary
+      setSearchTerm(text);
     };
     getPlays();
-  }, [location.search, sortBy]);
+  }, [location.search, sortBy, text]);
 
   if (loading) {
     return <Loader />;
@@ -93,6 +99,14 @@ const PlayList = () => {
   return (
     <Fragment>
       {isFiltered ? null : <DynamicBanner randomPlay={randomPlay} />}
+      {searchTerm ? (
+        <div className="search-summary">
+          <b>{plays?.length}</b>&nbsp;results for plays matching&nbsp;<b>{searchTerm}</b>
+          &nbsp;sorted by&nbsp;<b>{sortBy}</b>
+        </div>
+      ) : (
+        ''
+      )}
       <div className="sort-by-plays-wrapper">
         Sort By :
         <select id="sort-by-plays" name="sort-by-plays" value={sortBy} onChange={onChange}>
diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css
index 828b99def..fd2150779 100644
--- a/src/common/playlists/playlist.css
+++ b/src/common/playlists/playlist.css
@@ -803,6 +803,14 @@
   color: #25a0a7;
 }
 
+.search-summary{
+  padding: 1.6rem 2rem 0rem 2rem;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
 .sort-by-plays-wrapper {
   padding: 1.6rem 2rem 0rem 2rem;
   display: flex;