fixed filter and search box bug

reactplay · Sep 20, 2022 · c5d9ee6 · c5d9ee6
1 parent 6ccfd2d
commit c5d9ee6
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 113 deletions.
diff --git a/src/common/header/Header.jsx b/src/common/header/Header.jsx
@@ -9,61 +9,66 @@ const Header = () => {
   const location = useLocation();
   const pathName = location.pathname;
 
+  const [reset, setReset] = useState({ search: false, filter: false });
+
+  useEffect(() => {
+    if (location.state) {
+      setReset({...location.state });
+    }
+  }, [location.state]);
+
   const [showHideBits, setShowHideBits] = useState({
     showSearch: false,
     showBrowse: false,
     setHeaderStyle: true,
   });
 
   useEffect(() => {
+    if (pathName !== "/plays") {
+      setReset({ search: false, filter: false });
+    }
     if (pathName === "/") {
-      setShowHideBits((prev) => ({
-        ...prev,
+      setShowHideBits({
         showSearch: false,
         showBrowse: true,
         setHeaderStyle: false,
-      }));
+      });
     } else if (pathName === "/ideas") {
-      setShowHideBits((prev) => ({
-        ...prev,
+      setShowHideBits({
         showSearch: false,
         showBrowse: true,
         setHeaderStyle: true,
-      }));
+      });
     } else if (pathName === "/tech-stacks") {
-      setShowHideBits((prev) => ({
-        ...prev,
+      setShowHideBits({
         showSearch: false,
         showBrowse: true,
         setHeaderStyle: true,
-      }));
+      });
     } else if (pathName.startsWith("/plays")) {
-      setShowHideBits((prev) => ({
-        ...prev,
+      setShowHideBits({
         showSearch: true,
         showBrowse: false,
         setHeaderStyle: true,
-      }));
+      });
     }
   }, [pathName]);
 
   return (
     <header
-      className={`app-header ${
-        showHideBits.setHeaderStyle ? "" : " app-header-home"
-      }`}
-      data-testid="app-header"
+      className={`app-header ${showHideBits.setHeaderStyle ? "" : " app-header-home"}`}
+      data-testid='app-header'
     >
       <span>
-        <Link to="/" className="app-logo" data-testid="app-logo">
-          <span className="sr-only">React Play</span>
+        <Link to='/' className='app-logo' data-testid='app-logo'>
+          <span className='sr-only'>React Play</span>
         </Link>
       </span>
-      <div className="app-header-search">
+      <div className='app-header-search'>
         {showHideBits.showSearch && (
           <>
-            <SearchPlays />
-            <FilterPlays />
+            <SearchPlays reset={reset} />
+            <FilterPlays reset={reset} />
           </>
         )}
       </div>

diff --git a/src/common/search/FilterPlays.jsx b/src/common/search/FilterPlays.jsx
@@ -1,5 +1,5 @@
 import { Modal } from "common";
-import { useContext, useState, useEffect } from "react";
+import { useContext, useState, useEffect, useCallback } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { SearchContext } from "./search-context";
 import "./search.css";
@@ -37,12 +37,12 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
     ...(creators?.map((creator) => ({
       value: creator.user.id,
       label: creator.user.avatarUrl ? (
-        <div className="flex gap-x-2 items-center">
+        <div className='flex gap-x-2 items-center'>
           <img
             alt={creator.user.displayName}
-            className="rounded"
+            className='rounded'
             src={creator.user.avatarUrl}
-            width="32px"
+            width='32px'
           />
           {creator.user.displayName}
         </div>
@@ -77,15 +77,13 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
   ];
 
   const renderCreator = (value) => {
-    const selectedCreator = creatorOptions.find(
-      (option) => option.value === value
-    );
+    const selectedCreator = creatorOptions.find((option) => option.value === value);
     return selectedCreator ? selectedCreator.label : "All";
   };
 
   return (
     <>
-      <div className="form-group">
+      <div className='form-group'>
         {loading && "Loading Data"}
         <label>Level</label>
         <FormControl fullWidth>
@@ -108,7 +106,7 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
           </Select>
         </FormControl>
       </div>
-      <div className="form-group">
+      <div className='form-group'>
         <label>Tags</label>
         <FormControl fullWidth>
           <Select
@@ -130,7 +128,7 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
           </Select>
         </FormControl>
       </div>
-      <div className="form-group">
+      <div className='form-group'>
         <label>Creator</label>
         <FormControl fullWidth>
           <Select
@@ -153,7 +151,7 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
           </Select>
         </FormControl>
       </div>
-      <div className="form-group">
+      <div className='form-group'>
         <label>Language</label>
         <FormControl fullWidth>
           <Select
@@ -182,79 +180,64 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
 const getAppliedFilter = (filterObject) => {
   //for single filter to check whether filter has been applied
   const noOfLevelsApplied =
-    filterObject?.level_id !== undefined && filterObject.level_id.trim() !== ""
-      ? 1
-      : 0;
+    filterObject?.level_id !== undefined && filterObject.level_id.trim() !== "" ? 1 : 0;
   const noOfcreatorsApplied =
-    filterObject.owner_user_id !== undefined &&
-    filterObject.owner_user_id.trim() !== ""
-      ? 1
-      : 0;
+    filterObject.owner_user_id !== undefined && filterObject.owner_user_id.trim() !== "" ? 1 : 0;
   const noOfLanguageApplied =
-    filterObject.language !== undefined && filterObject.language.trim() !== ""
-      ? 1
-      : 0;
-  const noOfTagsApplied = filterObject?.tags?.length
-    ? filterObject.tags.length
-    : 0;
-  let totalTags =
-    noOfLevelsApplied +
-    noOfcreatorsApplied +
-    noOfLanguageApplied +
-    noOfTagsApplied;
+    filterObject.language !== undefined && filterObject.language.trim() !== "" ? 1 : 0;
+  const noOfTagsApplied = filterObject?.tags?.length ? filterObject.tags.length : 0;
+  let totalTags = noOfLevelsApplied + noOfcreatorsApplied + noOfLanguageApplied + noOfTagsApplied;
 
   return totalTags;
 };
 
-const FilterPlays = () => {
+const filterObject = {
+  level_id: "",
+  tags: [],
+  owner_user_id: "",
+  language: "",
+};
+
+const FilterPlays = ({ reset }) => {
   const location = useLocation();
   const navigate = useNavigate();
-  const { setFilterQuery, filterQuery } = useContext(SearchContext);
+  const { setFilterQuery } = useContext(SearchContext);
   const [showModal, setShowModal] = useState(false);
-  const [modifiedFilterQuery, setModifiedFilterQuery] = useState({
-    level_id: "",
-    tags: [],
-    owner_user_id: "",
-    language: "",
-  });
+  const [modifiedFilterQuery, setModifiedFilterQuery] = useState({ ...filterObject });
   const [noOfAppliedFilter, setnoOfAppliedFilter] = useState(0);
 
+  const resetFilter = useCallback(() => {
+    const filterObj = { ...filterObject };
+    setModifiedFilterQuery(filterObj);
+    setFilterQuery(filterObj);
+    setnoOfAppliedFilter(0);
+  }, [setFilterQuery]);
+
   useEffect(() => {
-    if (location.pathname !== '/plays') {
-      setModifiedFilterQuery({
-        level_id: "",
-        tags: [],
-        owner_user_id: "",
-        language: "",
-      });
-      setFilterQuery({
-        level_id: "",
-        tags: [],
-        owner_user_id: "",
-        language: "",
-      });
-      setnoOfAppliedFilter(0);
+    if (location.pathname !== "/plays") {
+      resetFilter();
     }
-  },[location.pathname])
+    if (reset.filter) {
+      resetFilter();
+    }
+  }, [location.pathname, resetFilter, reset.filter]);
 
   const handleFilter = (event) => {
     event.preventDefault();
     setFilterQuery(modifiedFilterQuery);
     setnoOfAppliedFilter(getAppliedFilter(modifiedFilterQuery));
-    if (location.pathname !== "/plays") {
-      navigate("/plays", { replace: true });
-    }
+    navigate("/plays", { replace: true, state: { search: true, filter: false } });
     showModal && setShowModal(false);
   };
 
   return (
-    <div className="search-filter">
+    <div className='search-filter'>
       <Modal
-        title="Filter Plays By"
+        title='Filter Plays By'
         onClose={() => setShowModal(false)}
         onSubmit={handleFilter}
         show={showModal}
-        cname="filter"
+        cname='filter'
         children={
           <FilterPlaysModalBody
             filterQuery={modifiedFilterQuery}
@@ -263,20 +246,10 @@ const FilterPlays = () => {
         }
       />
 
-      <button
-        onClick={() => setShowModal(true)}
-        className="btn-filter"
-        title="Filter Plays"
-      >
-        {noOfAppliedFilter === 0 ? null : (
-          <div className="badge">{noOfAppliedFilter}</div>
-        )}
+      <button onClick={() => setShowModal(true)} className='btn-filter' title='Filter Plays'>
+        {noOfAppliedFilter === 0 ? null : <div className='badge'>{noOfAppliedFilter}</div>}
 
-        <RiFilterFill
-          className="icon"
-          size="28px"
-          color="var(--color-neutral-30)"
-        />
+        <RiFilterFill className='icon' size='28px' color='var(--color-neutral-30)' />
       </button>
     </div>
   );

diff --git a/src/common/search/SearchPlays.jsx b/src/common/search/SearchPlays.jsx
@@ -1,47 +1,50 @@
-import { useContext, useEffect, useRef } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { SearchContext } from "./search-context";
 import "./search.css";
 import { BiSearch } from "react-icons/bi";
 
-const SearchPlays = () => {
+const SearchPlays = ({ reset }) => {
   const location = useLocation();
   const navigate = useNavigate();
   const { setSearchTerm } = useContext(SearchContext);
-  const inputRef = useRef(null);
+  const [searchText, setSearchText] = useState("");
+
+  const resetSearchField = useCallback(() => {
+    setSearchTerm("");
+    setSearchText("");
+  },[setSearchTerm])
 
   useEffect(() => {
-    if (location.pathname !== '/plays') {
-      inputRef.current.value = "";
-      setSearchTerm("");
+    if (location.pathname !== "/plays") {
+      resetSearchField()
+    }
+    if (reset.search) {
+      resetSearchField()
     }
-  },[location.pathname])
+  }, [location.pathname, reset.search, resetSearchField]);
 
   const handleSearch = (event) => {
     event.preventDefault();
     if (event.key === "Enter") {
       setSearchTerm(event.target.value);
-      if (location.pathname !== "/plays") {
-        navigate("/plays", { replace: true });
-      }
+      navigate("/plays", { replace: true, state: { filter: true, search: false } });
     }
   };
 
   return (
     <>
-      <div className="search-input" data-testid="plays-search-box-container">
-        <BiSearch
-          className="search-input-icon"
-          data-testid="plays-search-box-icon"
-          size="24px"
-        />
+      <div className='search-input' data-testid='plays-search-box-container'>
+        <BiSearch className='search-input-icon' data-testid='plays-search-box-icon' size='24px' />
         <input
-          className="search-input-text"
-          data-testid="plays-search-box-input-field"
-          type="text"
-          placeholder="Search for a play..."
+          className='search-input-text'
+          data-testid='plays-search-box-input-field'
+          type='text'
+          placeholder='Search for a play...'
           onKeyUp={handleSearch}
-          ref={inputRef}
+          value={searchText}
+          // ref={inputRef}
+          onChange={e => setSearchText(e.target.value)}
         />
       </div>
     </>