Merge branch 'main' into 340-bug-report-footer-enhancements

.all-contributorsrc

@@ -283,6 +283,15 @@
  "contributions": [
  "code"
  ]
+ },
+ {
+ "login": "TejasShekar",
+ "name": "Tejas Shekar",
+ "avatar_url": "https://avatars.githubusercontent.com/u/68545229?v=4",
+ "profile": "https://tejasshekar.netlify.app/",
+ "contributions": [
+ "code"
+ ]
  }
  ],
  "contributorsPerLine": 7,

.github/FUNDING.yml

@@ -1,3 +1,3 @@
 # These are supported funding model platforms
 
-github: [atapas]
+github: [reactplay]

README.md

@@ -1,6 +1,6 @@
 # ReactPlay(Repo: `react-play`)
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-31-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-32-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <p align="center">
@@ -86,6 +86,14 @@ Or
 yarn install
 ```
 
+### ⛓️ Create a `.env` file at the root of your project folder with the following content,
+
+```bash
+REACT_APP_NHOST_BACKEND_URL=https://rgkjmwftqtbpayoyolwh.nhost.run/
+REACT_APP_NHOST_VERSION=v1
+REACT_APP_NHOST_ENDPOINT=graphql
+```
+
 ### 🦄 Start the Development Mode
 Use the following command to start the app in the development mode:
 
@@ -217,6 +225,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
  <td align="center"><a href="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/yung-coder"><img src="https://avatars.githubusercontent.com/u/94097778?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Saksham chandel</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=yung-coder" title="Code">💻</a></td>
  <td align="center"><a href="http:https://linkedin.com/in/luca-pizzini"><img src="https://avatars.githubusercontent.com/u/15077781?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Luca Pizzini</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=lpizzinidev" title="Code">💻</a></td>
  <td align="center"><a href="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/ShivamBhasin2002"><img src="https://avatars.githubusercontent.com/u/57500840?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Shivam Bhasin</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=ShivamBhasin2002" title="Code">💻</a></td>
+ <td align="center"><a href="https://tejasshekar.netlify.app/"><img src="https://avatars.githubusercontent.com/u/68545229?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tejas Shekar</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=TejasShekar" title="Code">💻</a></td>
  </tr>
 </table>
 

package.json

@@ -11,6 +11,7 @@
  "@types/lodash": "^4.14.182",
  "@types/react": "^18.0.6",
  "@types/react-dom": "^18.0.2",
+ "axios": "^0.27.2",
  "date-fns": "^2.28.0",
  "firebase": "^9.8.2",
  "graphql": "^16.5.0",

src/common/404/404.css

@@ -12,6 +12,10 @@
  height: auto;
 }
 
+.under-development {
+ max-width: 600px;
+}
+
 .page-404-lead {
  margin: 0;
  font-family: var(--ff-accent);
@@ -24,6 +28,9 @@
  line-height: var(--lh-rg);
  margin-bottom: 1rem;
  }
+ .under-development {
+ max-width: calc(100vw - 100px);
+ }
 }
 
 .page-404-desc {

src/common/404/PageNotFound.jsx

@@ -1,23 +1,25 @@
-import { Link } from 'react-router-dom';
 import { ReactComponent as Image404 } from "images/img-404.svg";
 import "./404.css";
-import Loader from 'common/spinner/spinner';
-
-const PageNotFound = ({loading}) => {
+import Loader from "common/spinner/spinner";
 
+const PageNotFound = ({ loading, msg, details, Image }) => {
  if (loading) {
- return <Loader />
+ return <Loader />;
  }
 
- return(
+ return (
  <main className='page-404'>
- <Image404 className="page-404-image" />
- <p className='page-404-lead'>Look like you are lost</p>
- <p className='page-404-desc'>
- Why don't you go back to <Link to="/" className='page-404-link'>home</Link>?
- </p>
+ {Image ? <img src={Image} alt="under-development" className='under-development' /> : <Image404 className='page-404-image' />}
+ <p className='page-404-lead'>{msg}</p>
+ <p className='page-404-desc'>{details}</p>
  </main>
  );
 };
 
-export default PageNotFound;
+PageNotFound.defaultProps = {
+ msg: "Looks like you are lost",
+ details: "Why don't you go back to home.",
+ Image: null
+};
+
+export default PageNotFound;

src/common/hooks/useGetPlays.js

@@ -10,7 +10,7 @@ import { submit } from "common/services/request";
  * @returns [loading, error, plays]
  */
 
-const useGetPlays = () => {
+function useGetPlays() {
  const [loading, setLoading] = useState(true);
  const [plays, setPlays] = useState([]);
  const [error, setError] = useState(null);
@@ -29,7 +29,6 @@ const useGetPlays = () => {
 
  const re_filterPlaysByMultiTagsLevelLang = useCallback((filterQuery) => {
  const callIt = filterPlaysByMultiTagsLevelLang(filterQuery)
- console.log(callIt)
  return callIt
  },[filterPlaysByMultiTagsLevelLang])
 
@@ -50,7 +49,7 @@ const useGetPlays = () => {
  const payload = re_filterPlaysByMultiTagsLevelLang(filterQuery);
  res = await submit(payload);
  } else {
- res = await submit(FetchPlaysSimple[0]);
+ res = await submit(FetchPlaysSimple());
  }
  setPlays(res);
  } catch (error) {

src/common/playideas/ideas.json

@@ -137,6 +137,12 @@
  "title": "Image Gallery",
  "description": "Build a responsive image gallery with search functionality by using Unsplash free API.",
  "level": "Intermediate"
+ },
+ {
+ "id": "idea-24",
+ "title": "Color Guess Game",
+ "description": "Build a Color Guess Game that you can give the user a color and he will choose from 6 squares + there are two levels Hard and Easy, Easy has 3 squares and hard has 6 squares.",
+ "level": "Intermediate"
  }
  ]
 }

src/common/playlists/PlayMeta.jsx

@@ -1,10 +1,24 @@
 import { cloneElement } from "react";
 import { Helmet } from "react-helmet";
+import { PageNotFound } from "plays";
+import underDevelopment from 'images/underdevelpoment.png'
 
 function PlayMeta({ play }) {
  const { name, description, path, cover, component } = play;
  const playFolder = path.split("/")[2];
- const RenderPlay = require(`../../plays/${playFolder}/${component}`).default;
+
+ let RenderPlay = null;
+ try {
+ RenderPlay = require(`../../plays/${playFolder}/${component}`).default;
+ } catch {
+ RenderPlay = () => (
+ <PageNotFound
+ msg='Play is Under Development'
+ details='Most likely this play is being developed by another creator. You can ignore and continue to build your play.'
+ Image={underDevelopment}
+ />
+ );
+ }
 
  let metaImage; // Initialize metaImage variable
  if (cover) {

src/common/playlists/PlayThumbnail.jsx

@@ -3,11 +3,24 @@ import { Link } from "react-router-dom";
 import { BsPlayCircleFill } from "react-icons/bs";
 import thumbPlay from "images/thumb-play.png";
 import Shimmer from "react-shimmer-effect";
+import userImage from "images/user.png";
 
 const Author = ({ user }) => {
  return (
  <div className='play-author flex items-center gap-2'>
- <img className="rounded-full" src={user?.avatarUrl} width="25px" height="25px" alt="avatar" />
+ <img
+ className='rounded-full border border-zink-400'
+ src={
+ user?.avatarUrl
+ ? !!user?.avatarUrl.length
+ ? user?.avatarUrl
+ : userImage
+ : userImage
+ }
+ width='25px'
+ height='25px'
+ alt='avatar'
+ />
  <div className='author-anchor'>{user?.displayName}</div>
  </div>
  );