diff --git a/src/common/home/Home.jsx b/src/common/home/Home.jsx
index 30e3b0013..8964b77a3 100644
--- a/src/common/home/Home.jsx
+++ b/src/common/home/Home.jsx
@@ -26,6 +26,7 @@ const Home = () => {
level: "",
tags: [],
creator: "",
+ language: ""
});
}, [data, setSearchTerm, searchTerm, setFilterQuery]);
diff --git a/src/common/search/FilterPlays.jsx b/src/common/search/FilterPlays.jsx
index 3489695a8..406b35216 100644
--- a/src/common/search/FilterPlays.jsx
+++ b/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}
>
- {labels.map((label) => (
-
))}
@@ -66,6 +67,23 @@ const FilterPlaysModalBody = ({ filterQuery, setFilterQuery }) => {
))}
+
+
+
+
>
);
};
@@ -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,9 +115,10 @@ 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);
@@ -111,32 +126,32 @@ const FilterPlays = () => {
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 (
setShowModal(false)}
onSubmit={handleFilter}
show={showModal}
diff --git a/src/common/search/hooks/useSearchFilter.js b/src/common/search/hooks/useSearchFilter.js
index 56f887956..369086935 100644
--- a/src/common/search/hooks/useSearchFilter.js
+++ b/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;
diff --git a/src/common/search/search-context.js b/src/common/search/search-context.js
index fc4d3a3ad..048499695 100644
--- a/src/common/search/search-context.js
+++ b/src/common/search/search-context.js
@@ -6,7 +6,8 @@ export const SearchContext = React.createContext({
filterQuery: {
level: '',
tags: [],
- creator: ''
+ creator: '',
+ language: ''
},
setSearchTerm: () => {},
setFilterQuery: () => {}
diff --git a/src/index.js b/src/index.js
index 0eba3eb35..f65000934 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,6 +11,7 @@ const Index = () => {
level: "",
tags: [],
creator: "",
+ language: ""
});
const value = { searchTerm, setSearchTerm, filterQuery, setFilterQuery };
diff --git a/src/meta/play-meta-util.js b/src/meta/play-meta-util.js
index 94f4f51bb..995be2980 100644
--- a/src/meta/play-meta-util.js
+++ b/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
};