Merge branch 'main' into vasantisuthar

CREATE-PLAY.md

@@ -13,7 +13,7 @@ Welcome developers! We are as excited as you are to know that you are going to c
  npm run create-play
  ```
 - This will ask a few questions about your `Play` and then perform required steps to create the play. The screen shot below shows the output of the command.
-  > **Script Language**: `react-play` is equiped with both `JavaScript` and `TypeScript`. So you can use either of it as base language for your play
+  > **Script Language**: `react-play` is equipped with both `JavaScript` and `TypeScript`. So you can use either of it as base language for your play
  
  <p align="center">
  <img src="./screens/plop-create.png" alt="plop create" />

package.json

@@ -6,6 +6,7 @@
  "@giscus/react": "^2.0.3",
  "@types/react": "^18.0.6",
  "@types/react-dom": "^18.0.2",
+ "node-sass": "^7.0.1",
  "plop": "^3.0.5",
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
@@ -57,5 +58,8 @@
  "devDependencies": {
  "react-snap": "^1.23.0",
  "typescript": "^4.6.4"
+ "typescript": "^4.6.4",
+ "react-snap": "^1.23.0",
+ "puppeteer": "^13.7.0"
  }
 }

src/common/home/Home.jsx

@@ -26,6 +26,7 @@ const Home = () => {
  level: "",
  tags: [],
  creator: "",
+ language: ""
  });
  }, [data, setSearchTerm, searchTerm, setFilterQuery]);
 
@@ -43,7 +44,7 @@ const Home = () => {
  with ReactPlay
  </h2>
  <p className="body-desc">
- ReactPlay is an open-source application to learn, create and share
+ ReactPlay is an open-source platform to learn, create and share
  ReactJS projects with the developer community. Start by browsing the
  plays or exploring the source code.
  </p>

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

src/meta/play-meta.js

@@ -15,6 +15,8 @@ import {
  PasswordGenerator,
  Quizeo,
  WhyTypescript,
+ NetlifyCardGame,
+
 //import play here
 } from "plays";
 
@@ -84,7 +86,7 @@ export const plays = [
  level: "Intermediate",
  tags: "Recursion, Tree",
  github: "green-roots",
- featured: true,
+ featured: false,
  }, {
  id: 'pl-counter', 
  name: 'Counter', 
@@ -94,7 +96,7 @@ export const plays = [
  level: 'Beginner',
  tags: 'JSX, State, Props',
  github: 'murtuzaalisurti',
- featured: true
+ featured: false
  }, {
  id: 'pl-states', 
  name: 'States', 
@@ -170,7 +172,7 @@ export const plays = [
  level: "Beginner",
  tags: "Jsx, useState, hooks, toggle, React, css-transitions",
  github: "Deepak8717",
- featured: true,
+ featured: false,
  cover: "",
  blog: "",
  video: "",
@@ -188,6 +190,7 @@ export const plays = [
  cover: "",
  blog: "",
  video: "",
+ featured: true, 
  }, {
  id: 'pl-password-generator', 
  name: 'Password Generator', 
@@ -199,7 +202,8 @@ export const plays = [
  github: 'Angryman18',
  cover: 'https://securityintelligence.com/wp-content/uploads/2018/10/si-eight-character-password-feature.jpg',
  blog: '',
- video: ''
+ video: '',
+ featured: true,
  }, {
  id: 'pl-quizeo', 
  name: 'Quizeo', 
@@ -225,6 +229,21 @@ export const plays = [
  cover: 'https://res.cloudinary.com/dgtdljyul/image/upload/v1651923177/ts_why_adazpf.png',
  blog: '',
  video: '',
- language: 'ts'
+ language: 'ts',
+ featured: true,
+ }, {
+ id: 'pl-memory-game', 
+ name: 'Memory Game', 
+ description: 'simple memory game or memory testing game build with ReactJS',
+ component: () => {return <NetlifyCardGame />},
+ path: '/plays/memory-game',
+ level: 'Advanced',
+ tags: 'MemoryGame, CardGame, ReactJS',
+ github: 'Angryman18',
+ cover: 'https://cdn.pixabay.com/photo/2017/01/03/16/42/klee-1949946_960_720.jpg',
+ blog: '',
+ video: '',
+ language: 'js',
+ featured: true,
  }, //replace new play item here
 ];

src/plays/index.js

@@ -17,4 +17,5 @@ export { default as AnalogClock } from 'plays/analog-clock/AnalogClock';
 export { default as PasswordGenerator } from 'plays/password-generator/PasswordGenerator';
 export { default as Quizeo } from 'plays/quizeo/src/Quizeo';
 export { default as WhyTypescript } from 'plays/why-typescript/WhyTypescript';
+export { default as NetlifyCardGame } from 'plays/memory-game/NetlifyCardGame';
 //add export here