"Clear All" Button added to clear applied Filters (reactplay#562)

* Cancel btn enabled * Filter cancel btn problem fixed * onCancel and onClose separate functions for closing filter modal * Changed cancel to close button * Clear All filter btn added * :active is enabled when clear all btn is clicked * If no filters applied, click Clear All will not re-render the same page * storing the cond of empty filter in a variable * removing code that caused the error * Problem Persists * checking if clear filters is causing the error * clear filter function restored * Clear All Filter button added * Button changed to link for 'Clear All' * resetFilter passed through filterPlayModal component * filterQuery is not updated | condition for empty filters removed * filterQuery is not updated | condition for empty filters removed * commented before clear all link * special scenario for clear filter not applied but clicked * scenario updated * scenario updated * renamed ifFilterApplied to isFilterApplied * onClose logic moved to function Co-authored-by: mayukh551 <[email protected]> Co-authored-by: Sachin Chaurasiya <[email protected]> Co-authored-by: Tapas Adhikary <[email protected]>
villAsh · Oct 5, 2022 · aa7ed53 · aa7ed53
1 parent 3f77bf2
commit aa7ed53
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 40 deletions.
diff --git a/src/common/modal/index.jsx b/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>

diff --git a/src/common/search/FilterPlays.jsx b/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,29 +231,51 @@ 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 } });
  showModal && setShowModal(false);
  };
 
+ const filterModalCloseBtnHandler = () => {
+ 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));
+ }
+ }
+
  return (
  <div className='search-filter'>
  <Modal
  title='Filter Plays By'
- onClose={() => setShowModal(false)}
+ onClose={filterModalCloseBtnHandler}
  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)' />

diff --git a/src/common/search/search.css b/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;
+}