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
 };