"Clear All" Button added to clear applied Filters

src/common/modal/index.jsx

@@ -16,7 +16,6 @@ const Modal =({ title, show, onClose, onSubmit, children, cname })=> {
 
   if (!show) return null;
 
-
   return ReactDOM.createPortal(
     <>
       <div className="modal-overlay" onClick={ onClose }></div>
@@ -28,7 +27,7 @@ const Modal =({ title, show, onClose, onSubmit, children, cname })=> {
           { children }
         </div>
         <div className={`modal-${cname}-footer`}>
-          <button className="btn-default-light btn-size--sm" onClick={ onClose }><GoX size="16px" className="icon" /> Cancel</button>
+          <button className="btn-default-light btn-size--sm" onClick={ onClose }><GoX size="16px" className="icon" /> Close</button>
           { onSubmit && <button className="btn-primary btn-size--sm" onClick={ onSubmit }><GoCheck size="16px" className="icon" /> Apply</button> }
         </div>
      </div>

src/common/search/FilterPlays.jsx

@@ -10,27 +10,27 @@ import { FormControl, MenuItem, Select } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 
 const useStyles = makeStyles({
-  menuPaper: {
-    maxHeight: "250px !important",
-  },
+    menuPaper: {
+        maxHeight: "250px !important",
+    },
 });
 
-const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
-  const [loading, error, data] = useFetchFilterData();
-  const { tags, levels, creators } = data;
+const FilterPlaysModalBody = ({ filterQuery, setFilterQuery, onClearAppliedFilters }) => {
+    const [loading, error, data] = useFetchFilterData();
+    const { tags, levels, creators } = data;
 
-  const classes = useStyles();
+    const classes = useStyles();
 
-  const languages = ["js", "ts"];
+    const languages = ["js", "ts"];
 
-  if (error) {
-    return <p>{error?.message ?? "Something Went Wrong"}</p>;
-  }
+    if (error) {
+        return <p>{error?.message ?? "Something Went Wrong"}</p>;
+    }
 
-  const defaultOption = {
-    value: " ",
-    label: "All",
-  };
+    const defaultOption = {
+        value: " ",
+        label: "All",
+    };
 
   const creatorOptions = [
     defaultOption,
@@ -52,29 +52,29 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
     })) || []),
   ];
 
-  const levelOptions = [
-    defaultOption,
-    ...(levels?.map((level) => ({
-      label: level.level.name,
-      value: level.level.id,
-    })) || []),
-  ];
+    const levelOptions = [
+        defaultOption,
+        ...(levels?.map((level) => ({
+            label: level.level.name,
+            value: level.level.id,
+        })) || []),
+    ];
 
-  const tagOptions = [
-    defaultOption,
-    ...(tags?.map((tag) => ({
-      label: tag.tag,
-      value: tag.id,
-    })) || []),
-  ];
+    const tagOptions = [
+        defaultOption,
+        ...(tags?.map((tag) => ({
+            label: tag.tag,
+            value: tag.id,
+        })) || []),
+    ];
 
-  const languageOptions = [
-    defaultOption,
-    ...languages?.map((language) => ({
-      label: language === "ts" ? "TypeScript" : "JavaScript",
-      value: language,
-    })),
-  ];
+    const languageOptions = [
+        defaultOption,
+        ...languages?.map((language) => ({
+            label: language === "ts" ? "TypeScript" : "JavaScript",
+            value: language,
+        })),
+    ];
 
   const renderCreator = (value) => {
     const selectedCreator = creatorOptions.find((option) => option.value === value);
@@ -85,6 +85,11 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
     <>
       <div className='form-group'>
         {loading && "Loading Data"}
+        {/* Clear All filters button */}
+        <div className="modal-clear-filter">
+          <span onClick={ onClearAppliedFilters } 
+            className="clear-all-filter-btn">Clear All</span>
+        </div>
         <label>Level</label>
         <FormControl fullWidth>
           <Select
@@ -201,11 +206,13 @@ const filterObject = {
 const FilterPlays = ({ reset }) => {
   const location = useLocation();
   const navigate = useNavigate();
-  const { setFilterQuery } = useContext(SearchContext);
+  const { filterQuery, setFilterQuery } = useContext(SearchContext);
   const [showModal, setShowModal] = useState(false);
   const [modifiedFilterQuery, setModifiedFilterQuery] = useState({ ...filterObject });
   const [noOfAppliedFilter, setnoOfAppliedFilter] = useState(0);
 
+  const [isFilterApplied, setIsFilterApplied] = useState(false);
+
   const resetFilter = useCallback(() => {
     const filterObj = { ...filterObject };
     setModifiedFilterQuery(filterObj);
@@ -224,6 +231,9 @@ const FilterPlays = ({ reset }) => {
 
   const handleFilter = (event) => {
     event.preventDefault();
+    // if Apply button on Filter Modal is clicked then set true
+    setIsFilterApplied(true);
+
     setFilterQuery(modifiedFilterQuery);
     setnoOfAppliedFilter(getAppliedFilter(modifiedFilterQuery));
     navigate("/plays", { replace: true, state: { search: true, filter: false } });
@@ -234,19 +244,36 @@ const FilterPlays = ({ reset }) => {
     <div className='search-filter'>
       <Modal
         title='Filter Plays By'
-        onClose={() => setShowModal(false)}
+        onClose={() => {
+          setShowModal(false);
+          const {level_id, tags, owner_user_id, language} = modifiedFilterQuery;
+          const isFilterEmpty= level_id !== "" || tags.length !== 0 || owner_user_id !== "" || language !== "";
+          // if user closes modal instead of clicking on Apply after clear All filters
+          if(!isFilterApplied && !isFilterEmpty) {
+            setModifiedFilterQuery({...filterQuery});
+            setnoOfAppliedFilter(getAppliedFilter(filterQuery));
+          }
+        }}
         onSubmit={handleFilter}
         show={showModal}
         cname='filter'
         children={
           <FilterPlaysModalBody
             filterQuery={modifiedFilterQuery}
             setFilterQuery={setModifiedFilterQuery}
+            onClearAppliedFilters={() => {
+              setModifiedFilterQuery({...filterObject});
+              setnoOfAppliedFilter(0);
+            }}
           />
         }
       />
 
-      <button onClick={() => setShowModal(true)} className='btn-filter' title='Filter Plays'>
+      <button onClick={() => {
+        setShowModal(true);
+        setIsFilterApplied(false);
+        }} 
+        className='btn-filter' title='Filter Plays'>
         {noOfAppliedFilter === 0 ? null : <div className='badge'>{noOfAppliedFilter}</div>}
 
         <RiFilterFill className='icon' size='28px' color='var(--color-neutral-30)' />

src/common/search/search.css

@@ -205,4 +205,24 @@
   font-size: var(--fs-rg);
 }
 
+/* CSS attributes for clear All button */
+
+.modal-clear-filter {
+  width: 100%;
+  text-align: right;
+  display:flex;
+  justify-content: flex-end;
+}
+
+.clear-all-filter-btn {
+  font-size: smaller;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all .2s
+}
+
+.clear-all-filter-btn:hover{
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}