Merge pull request #182 from atapas/issue-161-filter-plays-lang

Issue 161 filter plays lang

src/common/home/Home.jsx

@@ -26,6 +26,7 @@ const Home = () => {
  level: "",
  tags: [],
  creator: "",
+ language: ""
  });
  }, [data, setSearchTerm, searchTerm, setFilterQuery]);
 

src/common/search/FilterPlays.jsx

@@ -1,5 +1,5 @@
 import { Modal } from "common";
-import { getAllCreators, getAllLevels, getAllTags } from "meta/play-meta-util";
+import { getAllCreators, getAllLevels, getAllTags, getAllLanguages } from "meta/play-meta-util";
 import { useContext, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { SearchContext } from "./search-context";
@@ -10,8 +10,9 @@ import useBackListener from "common/routing/hooks/useBackListener";
 
 const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
  const tags = getAllTags();
- const labels = getAllLevels();
+ const levels = getAllLevels();
  const creators = getAllCreators();
+ const languages = getAllLanguages();
 
  return (
  <>
@@ -25,9 +26,9 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
  value={filterQuery.level}
  >
  <option value="">All</option>
- {labels.map((label) => (
- <option key={label} value={label}>
- {label}
+ {levels.map((level) => (
+ <option key={level} value={level}>
+ {level}
  </option>
  ))}
  </select>
@@ -66,6 +67,23 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
  ))}
  </select>
  </div>
+ <div className="form-group">
+ <label>Language</label>
+ <select
+ className="form-control"
+ onChange={(event) =>
+ setFilterQuery({ ...filterQuery, language: event.target.value })
+ }
+ value={filterQuery.language}
+ >
+ <option value="">All</option>
+ {languages.map((language) => (
+ <option key={language} value={language}>
+ {language === 'ts' ? 'TypeScript' : 'JavaScript'}
+ </option>
+ ))}
+ </select>
+ </div>
  </>
  );
 };
@@ -80,17 +98,13 @@ const getAppliedFilter = (filterObject) => {
  filterObject.creator !== undefined && filterObject.creator.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;
-
- //if the appiled filter is an array form. Useful for handling multi filter
-
- if (filterObject?.tags || filterObject?.labels || filterObject?.creators) {
- totalTags +=
- filterObject?.tags?.length ? filterObject.tags.length : 0 +
- filterObject?.labels?.length ? filterObject.labels.length : 0 +
- filterObject?.creators?.length ? filterObject.creators.length : 0;
- }
+ noOfcreatorsApplied + noOfLanguageApplied + noOfTagsApplied;
 
  return totalTags;
 };
@@ -101,42 +115,43 @@ const FilterPlays = () => {
  const { setFilterQuery, filterQuery } = useContext(SearchContext);
  const [showModal, setShowModal] = useState(false);
  const [modifiedFilterQuery, setModifiedFilterQuery] = useState({
+ level: '',
  tags: [],
- labels: [],
- creators: [],
+ creator: '',
+ language: ''
  });
  const [noOfAppliedFilter, setnoOfAppliedFilter] = useState(0);
 
  useBackListener(({ action }) => {
  if (action === "POP") {
  console.log("POP");
  setModifiedFilterQuery({
- level: "",
+ level: '',
  tags: [],
- creator: "",
- labels: [],
- creators: [],
+ creator: '',
+ language: ''
  });
  setFilterQuery({
- level: "",
+ level: '',
  tags: [],
- creator: "",
- labels: [],
- creators: [],
+ creator: '',
+ language: ''
  });
  setnoOfAppliedFilter(0);
  }
  if (action === "PUSH") {
  console.log("PUSH");
  setModifiedFilterQuery({
- level: "",
+ level: '',
  tags: [],
- creator: "",
+ creator: '',
+ language: ''
  });
  setFilterQuery({
- level: "",
+ level: '',
  tags: [],
- creator: "",
+ creator: '',
+ language: ''
  });
  }
  setnoOfAppliedFilter(0);
@@ -156,7 +171,7 @@ const FilterPlays = () => {
  return (
  <div className="search-filter">
  <Modal
- title="Filter Plays"
+ title="Filter Plays By"
  onClose={() => setShowModal(false)}
  onSubmit={handleFilter}
  show={showModal}

src/common/search/hooks/useSearchFilter.js

@@ -20,7 +20,7 @@ const useSearchFilter = () => {
 
 const filterPlays = (searchTerm, filterQuery) => {
  let filteredPlays = [];
- const { level, tags, creator } = filterQuery;
+ const { level, tags, creator, language } = filterQuery;
 
  const searchedPlays = getPlaysOnSearch(searchTerm);
 
@@ -35,6 +35,11 @@ const filterPlays = (searchTerm, filterQuery) => {
  filteredPlays = filteredPlays.filter(play => {
  return (play.tags.includes(tags[0]) || !tags[0]);
  });
+
+ filteredPlays = filteredPlays.filter(play => {
+ const lang = play.language || 'js';
+ return (lang === language || !language);
+ });
 
 
  return filteredPlays;

src/common/search/search-context.js

@@ -6,7 +6,8 @@ export const SearchContext = React.createContext({
  filterQuery: {
  level: '',
  tags: [],
- creator: ''
+ creator: '',
+ language: ''
  }, 
  setSearchTerm: () => {},
  setFilterQuery: () => {}

src/index.js

@@ -11,6 +11,7 @@ const Index = () => {
  level: "",
  tags: [],
  creator: "",
+ language: ""
  });
 
  const value = { searchTerm, setSearchTerm, filterQuery, setFilterQuery };

src/meta/play-meta-util.js

@@ -34,6 +34,13 @@ const getPlaysByCreator = creator => {
  });
 }
 
+const getPlaysByLanguage = language => {
+ return plays.filter(play => {
+ const lang = play.language || 'js';
+ return lang === language;
+ });
+}
+
 const getAllTags = () => {
  const tags = plays.reduce((acc, play) => {
  return acc.concat(play.tags.split(','));
@@ -59,6 +66,15 @@ const getAllLevels = () => {
  return Array.from(new Set([...levels]));
 }
 
+const getAllLanguages = () => {
+ const languages = plays.reduce((acc, play) => {
+ const lang = play.language || 'js';
+ return acc.concat(lang);
+ }, []);
+
+ return Array.from(new Set([...languages]));
+}
+
 const getFeaturedPlays = () => {
  const featuredPlays = plays.filter(play => {
  return play.featured;
@@ -72,9 +88,11 @@ export {
  getPlaysOnSearch,
  getPlaysByLevel,
  getPlaysByTags,
+ getPlaysByLanguage,
  getPlaysByCreator,
  getAllTags,
  getAllCreators,
  getAllLevels,
+ getAllLanguages,
  getFeaturedPlays
 };