Merge branch 'reactplay:main' into fix-createplay-in-prod

package.json

@@ -6,7 +6,7 @@
  "@emotion/react": "^11.9.3",
  "@emotion/styled": "^11.9.3",
  "@giscus/react": "^2.0.3",
- "@mui/material": "^5.8.7",
+ "@mui/material": "^5.9.1",
  "@nhost/react": "^0.9.0",
  "@types/lodash": "^4.14.182",
  "@types/react": "^18.0.6",

src/meta/play-meta.js

@@ -27,7 +27,8 @@ import {
  NavBar,
  ContextWithRealUsecases,
  GitHubUserSearch,
- //import play here
+ DevJokes,
+//import play here
 } from "plays";
 
 export const plays = [
@@ -469,5 +470,18 @@ export const plays = [
  blog: "",
  video: "",
  language: "js",
+ }, {
+ id: 'pl-dev-jokes', 
+ name: 'Dev Jokes', 
+ description: 'Developer jokes is a app where a random developer joke pops up every time you open it or click next joke',
+ component: () => {return <DevJokes />},
+ path: '/plays/dev-jokes',
+ level: 'Intermediate',
+ tags: '',
+ github: 'yung-coder',
+ cover: '',
+ blog: '',
+ video: '',
+ language: 'js'
  }, //replace new play item here
 ];

src/plays/dev-jokes/DevJokes.jsx

@@ -0,0 +1,51 @@
+import PlayHeader from "common/playlists/PlayHeader";
+import "./devJokes.css";
+import axios from "axios";
+import { useEffect, useState } from "react";
+import Spinner from "./Spinner";
+function DevJokes(props) {
+ const [joke, setjoke] = useState([]);
+ const [spinner, setspinner] = useState(false);
+ const fetch = () => {
+ setspinner(true);
+ axios
+ .get("https://backend-omega-seven.vercel.app/api/getjoke")
+ .then((response) => {
+ setjoke(response.data);
+ setspinner(false);
+ });
+ };
+ useEffect(() => {
+ fetch();
+ }, []);
+ return (
+ <>
+ <div className="play-details">
+ <PlayHeader play={props} />
+ <div className="maincontanier">
+ <div className="jokecontanier">
+ {spinner ? (
+ <Spinner />
+ ) : (
+ <div>
+ {joke.map((value) => {
+ return (
+ <div key={value}>
+ <h1>{value.question}</h1>
+ <p>{value.punchline}</p>
+ </div>
+ );
+ })}
+ </div>
+ )}
+ </div>
+ <button onClick={fetch} className="dev-jokes-btn">
+ Next joke
+ </button>
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default DevJokes;

src/plays/dev-jokes/Readme.md

@@ -0,0 +1,15 @@
+# Dev jokes
+
+Developer jokes is a app where a random developer joke pops up every time you open it or click next joke
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: yung-coder
+- Gihub Link: https://github.com/yung-coder
+- Blog: 
+- Video: 

src/plays/dev-jokes/Spinner.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import "./spinner.css";
+
+export default function LoadingSpinner() {
+ return (
+ <div className="spinner-container">
+ <div className="loading-spinner">
+ </div>
+ </div>
+ );
+}

src/plays/dev-jokes/devJokes.css

@@ -0,0 +1,74 @@
+.maincontanier {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ background-image: url("background.jpg");
+ background-position: center;
+ background-size: cover;
+ height: 100%;
+ width: 100%;
+}
+.jokecontanier {
+ padding: 20px;
+ width: 600px;
+ min-height: 400px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 10px;
+ box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
+ transition: all 0.2s;
+ margin: 30px 20px 20px;
+ background-color: rgba(199, 183, 183, 0.4);
+ font-size: x-large;
+}
+
+.jokecontanier:hover {
+ box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4);
+ transform: scale(1.01);
+}
+
+.dev-jokes-btn {
+ padding: 1em 2.1em 1.1em;
+ border-radius: 3px;
+ margin: 8px;
+ color: black;
+ background-color: #c2fbd7;
+ display: inline-block;
+ -webkit-transition: 0.3s;
+ -moz-transition: 0.3s;
+ -o-transition: 0.3s;
+ transition: 0.3s;
+ font-family: sans-serif;
+ font-weight: 800;
+ font-size: 0.85em;
+ text-transform: uppercase;
+ text-align: center;
+ text-decoration: none;
+ box-shadow: rgba(44, 187, 99, 0.2) 0 -25px 18px -14px inset,
+ rgba(44, 187, 99, 0.15) 0 1px 2px, rgba(44, 187, 99, 0.15) 0 2px 4px,
+ rgba(44, 187, 99, 0.15) 0 4px 8px, rgba(44, 187, 99, 0.15) 0 8px 16px,
+ rgba(44, 187, 99, 0.15) 0 16px 32px;
+ position: relative;
+}
+
+.dev-jokes-btn:hover {
+ box-shadow: rgba(44, 187, 99, 0.35) 0 -25px 18px -14px inset,
+ rgba(44, 187, 99, 0.25) 0 1px 2px, rgba(44, 187, 99, 0.25) 0 2px 4px,
+ rgba(44, 187, 99, 0.25) 0 4px 8px, rgba(44, 187, 99, 0.25) 0 8px 16px,
+ rgba(44, 187, 99, 0.25) 0 16px 32px;
+ transform: scale(1.05) rotate(-1deg);
+}
+@media screen and (max-width: 764px) {
+ .jokecontanier {
+ width: 75%;
+ min-height: 40%;
+ margin-top: 50px;
+ font-size: larger;
+ word-break: break-all;
+ }
+ .dev-jokes-btn {
+ padding: 0.5rem 1rem 0.5rem;
+ }
+}

src/plays/dev-jokes/spinner.css

@@ -0,0 +1,16 @@
+@keyframes spinner {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+ .loading-spinner {
+ width: 40px;
+ height: 40px;
+ border: 10px solid #fefefe; /* Light grey */
+ border-top: 10px solid #383636; /* Black */
+ border-radius: 50%;
+ animation: spinner 1.5s linear infinite;
+ }

src/plays/git-hub-profile-search/GithubProfileSearch.js

@@ -0,0 +1,36 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import './styles.css';
+import Input from './components/Input';
+import Results from './components/Results';
+import { ResultContextProvider } from './context/ResultContextProvider';
+
+// WARNING: Do not change the entry componenet name
+function GithubProfileSearch(props) {
+
+ // Your Code Start below.
+
+ return (
+ <>
+ <div className="play-details nirban-github-profile">
+ <PlayHeader play={props} />
+ <div className="play-details-body">
+ {/* Your Code Starts Here */}
+ <div className='play-body nirban-github-profile-body'>
+ <ResultContextProvider>
+ <h1 className='play-heading nirban-github-profile-heading'>
+ Github Profile Search
+ </h1>
+ <Input />
+ <div className='nirban-github-profile-result'>
+ <Results />
+ </div>
+ </ResultContextProvider>
+ </div>
+ {/* Your Code Ends Here */}
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default GithubProfileSearch;

src/plays/git-hub-profile-search/Readme.md

@@ -0,0 +1,22 @@
+# GitHub Profile Search
+
+A play where you can search anybody's public github profile. I have made it using Context Api for showing basic implementation which you can practice in order to get comfortable with using Context Api for bigger projects.
+
+The search result provides you with one user whose username matches with his/her profile link, bio, followers, as well as the current 5 public repositories made by the user starting from the latest.
+
+## Play Demographic
+
+- Language: js
+- Level: Beginner
+
+## Creator Information
+
+- User: nirban256
+- Gihub Link: https://github.com/nirban256
+- Blog: NA
+- Video: NA
+
+
+## Resources
+
+[GitHub RESST API](https://docs.github.com/rest)

src/plays/git-hub-profile-search/components/Input.jsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { useResultContext } from '../context/ResultContextProvider';
+
+const Input = () => {
+
+ const { getRepos, getUser } = useResultContext();
+ const [username, setUsername] = useState('');
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ getUser(username);
+ getRepos(username);
+ setUsername('');
+ }
+
+ return (
+ <form className='nirban-github-profile-form'>
+ <input tabIndex={0} autoFocus value={username} placeholder="Search Username" onChange={(e) => setUsername(e.target.value)} className="nirban-github-profile-search" />
+ <button type="submit" onClick={handleSubmit} className="nirban-github-profile-btn">
+ Search
+ </button>
+ </form>
+ )
+}
+
+export default Input

src/plays/git-hub-profile-search/components/Results.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { useResultContext } from '../context/ResultContextProvider';
+
+const Results = () => {
+
+ const { results, repoDetails } = useResultContext();
+
+ const showRepo = (repo) => {
+ return (
+ <div key={repo.id}>
+ <h2 className='nirban-github-profile-repo-link'>
+ <strong>
+ <a href={`${repo.html_url}`} target="_blank" rel='noreferrer'>
+ {repo.name.length > 15 ? repo.name.slice(0, 15) : repo.name}
+ </a>
+ </strong>
+ </h2>
+ </div>
+ )
+ }
+
+ return (
+
+ <div>
+ {results ? (
+ <div className="nirban-github-profile-results" >
+ <div className='nirban-github-profile-results-body'>
+ <div>
+ <div className='nirban-github-profile-details'>
+ <img src={`${results.avatar_url}`} alt={`${results.name}`} className="nirban-github-profile-avatar" />
+ <a href={`${results.html_url}`} target="_blank" rel='noreferrer'>
+ <h2 className='nirban-github-profile-link'>{results.name === '' ? results.login : results.name}</h2>
+ </a>
+ </div>
+ <div className="nirban-github-profile-results-info">
+ <div>
+ {results.bio === '' ? '' : <h2 className='nirban-github-profile-bio'><strong>Bio:</strong> {results.bio}</h2>}
+ {results.location === '' ? '' : <p className='nirban-github-profile-location'><strong>Location:</strong> {results.location}</p>}
+ {results.twitter_username === '' ? '' : <p className='nirban-github-profile-twitter'><strong>Twitter:</strong> <a href={`https://twitter.com/${results.twitter_username}`} target="_blank" rel='noreferrer'>{results.twitter_username}</a></p>}
+ <ul className='nirban-github-profile-socials'>
+ <li><strong>{results.followers}</strong> Followers</li>
+ <li><strong>{results.following}</strong> Following</li>
+ <li><strong>{results.public_repos}</strong> Repos</li>
+ </ul>
+ </div>
+ <div>
+ <h2 className='nirban-github-profile-repos-heading'>
+ Latest repositories
+ </h2>
+ <div className='nirban-github-profile-repos'>
+ {repoDetails?.map(showRepo).slice(0, 5)}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ )
+ :
+ (
+ <div className='nirban-github-profile-no-user'>
+ <p>
+ No users to show
+ </p >
+ </div >
+ )}
+ </div>
+ )
+}
+
+export default Results