Issue 1044 play filter by url params (reactplay#1045)

* Filter implementation

* intermediate

* wiring up and style changes

* lint fix

* no need of loading text

* checking in missed out elements

* removed tapas-test play

* photoshopapp reset

* analog-clock reset

* registration-form reset

* photoshopapp reset

* photoshopapp reset

* lint fix

src/common/header/Header.jsx

@@ -1,10 +1,9 @@
-import FilterPlays from 'common/search/FilterPlays';
-import SearchPlays from 'common/search/SearchPlays';
 import HeaderNav from './HeaderNav';
 import { useEffect, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import Countdown from 'react-countdown';
 import './header.css';
+import { SearchBox } from 'common/search/SearchBox';
 
 const Header = () => {
  const location = useLocation();
@@ -119,12 +118,7 @@ const Header = () => {
  </Link>
  </span>
  <div className="app-header-search">
- {showHideBits.showSearch && (
- <>
- <SearchPlays reset={reset} />
- <FilterPlays reset={reset} />
- </>
- )}
+ {showHideBits.showSearch && <SearchBox reset={reset} />}
  </div>
  <HeaderNav showBrowse={showHideBits.showBrowse} />
  </header>

src/common/hooks/index.js

@@ -1,6 +1,5 @@
 export * from './useContributors';
 export * from './useFeaturedPlays';
 export * from './useFetch';
-export * as useGetPlays from './useGetPlays';
 export * from './useGitHub';
 export * from './useLocalStorage';

src/common/playlists/PlayList.jsx

@@ -4,50 +4,88 @@ import React, { Fragment, useEffect, useState } from 'react';
 import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';
 import Loader from 'common/spinner/spinner';
 import * as all_plays from 'plays';
-import useGetPlays from 'common/hooks/useGetPlays';
 
 import './playlist.css';
 import { toSanitized } from 'common/services/string';
 import DynamicBanner from './DynamicBanner';
+import { useLocation } from 'react-router-dom';
+import { ParseQuery, QueryDBTranslator } from 'common/search/search-helper';
+import { getPlaysByFilter } from 'common/services/plays';
 
 const PlayList = () => {
  const [randomPlay, setRandomPlay] = useState({});
- const [loading, error, plays] = useGetPlays();
+ const [loading, setLoading] = useState();
+ const [plays, setPlays] = useState();
+ const [isFiltered, setIsFiltered] = useState(false);
+ let location = useLocation();
+
  useEffect(() => {
- const filteredPlays = plays.filter(
- (play) => all_plays[play.component ? play.component : toSanitized(play.title_name)]
- );
- // If the filtered array has at least one item, select a random play from the filtered array
- if (filteredPlays && filteredPlays.length > 0) {
- // generate a random index to select a random play
- const randomIndex = Math.floor(Math.random() * filteredPlays.length);
- setRandomPlay(filteredPlays[randomIndex]);
- }
- }, [plays]);
+ const getPlays = async () => {
+ setLoading(true);
+ const parsedQuery = ParseQuery(location.search);
+ let translatedQuery;
+ if (parsedQuery) {
+ translatedQuery = QueryDBTranslator(parsedQuery);
+ }
+ const res = await getPlaysByFilter(translatedQuery);
+ const found_plays = [];
+ if (res) {
+ res.forEach((res_play) => {
+ if (
+ all_plays[res_play.component ? res_play.component : toSanitized(res_play.title_name)]
+ ) {
+ found_plays.push(res_play);
+ }
+ });
+ setPlays(found_plays);
+ }
+ if (!translatedQuery) {
+ // If the filtered array has at least one item, select a random play from the filtered array
+ if (found_plays && found_plays.length > 0) {
+ // generate a random index to select a random play
+ const randomIndex = Math.floor(Math.random() * found_plays.length);
+ setRandomPlay(found_plays[randomIndex]);
+ }
+ } else {
+ setIsFiltered(true);
+ }
+ setLoading(false);
+ };
+ getPlays();
+ }, [location.search]);
 
  if (loading) {
  return <Loader />;
  }
 
- if (plays?.length === 0 || error) {
+ if (plays?.length === 0) {
  return (
  <div className="play-not-found">
  <ImageOops className="play-not-found-image" />
  <p className="page-404-lead">Play not found</p>
- <p className="page-404-desc">Please change your search or adjust filters to find plays.</p>
+ {location.search ? (
+ <p className="page-404-desc">
+ You migh want to adjust the search criteria or{' '}
+ <a className="underline" href="/plays">
+ clear
+ </a>{' '}
+ it.
+ </p>
+ ) : (
+ <p className="page-404-desc">Something went wrong</p>
+ )}
  </div>
  );
  }
 
  return (
  <Fragment>
- <DynamicBanner randomPlay={randomPlay} />
+ {isFiltered ? null : <DynamicBanner randomPlay={randomPlay} />}
+
  <ol className="list-plays">
  {plays?.map((play, index) => (
  <React.Fragment key={index}>
- {all_plays[play.component ? play.component : toSanitized(play.title_name)] && (
- <PlayThumbnail key={play.id} play={play} />
- )}
+ <PlayThumbnail key={play.id} play={play} />
  </React.Fragment>
  ))}
  </ol>