Merge branch 'main' of https://github.com/ammaaraslam/react-play

.all-contributorsrc

@@ -310,6 +310,15 @@
  "contributions": [
  "code"
  ]
+ },
+ {
+ "login": "frankiefab100",
+ "name": "Franklin U.O. Ohaegbulam",
+ "avatar_url": "https://avatars.githubusercontent.com/u/46662771?v=4",
+ "profile": "http:https://frankiefab.com",
+ "contributions": [
+ "code"
+ ]
  }
  ],
  "contributorsPerLine": 7,

CREATE-PLAY.md

@@ -24,10 +24,10 @@ Welcome developers! We are as excited as you are to know that you are going to c
 - You should be able to access the application on http:https://localhost:3000
 - Click on `Create` button. Note, its a `beta` feature, feel free to [log issue](https://github.com/reactplay/react-play/issues) (if any) 
 - The application will try to authenticate you
-- If you are NOT alredy logged in with [`NHost`](https://nhost.io), you will be prompted to give permission
+- If you are NOT already logged in with [`NHost`](https://nhost.io), you will be prompted to give permission
  - Log in with your GitHub account
 - Fill the information and submit.
- Paramter details
+ Parameter details
 
  | Field | Mandatory? | Description |
  | --------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
@@ -38,14 +38,14 @@ Welcome developers! We are as excited as you are to know that you are going to c
  | Level | YES | You will be asked to select one of the three levels, Beginner, Intermediate, or Advanced. Please select a level for the play. A level indicates the possible complexity of developing the play using React. |
  | Github Username | YES | Provide your GitHub user name to mark you as the creator of the play. |
  | Tags | NO | Please provide comma-separated list of tags. Example: JSX, Hooks |
- | Cover Image URL | NO | A cover image is used to show your play with a thumbnail in the play list page. Please provide a link a cover image that is publicly accessible using a URL, example: https://res.cloudinary.com/reactplay/image/upload/v1649060528/demos/id-card_pdvyvz.png. Alternatively, you can have a cover.png file in the root of your play folder. If you don't have a cover image, the app will use the default cover image. |
+ | Cover Image URL | NO | A cover image is used to show your play with a thumbnail in the play list page. Please provide a link to a cover image that is publicly accessible using a URL, example: https://res.cloudinary.com/reactplay/image/upload/v1649060528/demos/id-card_pdvyvz.png. Alternatively, you can have a cover.png file in the root of your play folder. If you don't have a cover image, the app will use the default cover image. |
  | Blog URL | NO | If you have written an article about this play, please provide the link to your blog article page. |
  | Video | NO | If you have created a video tutorial about this play, please provide the link to your YouTube video. |
 
 - On successfull submission, you will be redirected to a page where it will prompt you with the `play_id`
 - Stop your application
 - Navigate to the root of the reactplay 
-- Run follwing command
+- Run following command
  ```bash
  npx create-react-play -c <the_play_id>
  ```
@@ -56,8 +56,8 @@ Welcome developers! We are as excited as you are to know that you are going to c
  npm run start
  ```
 - You should now see your play added to the [play list](http:https://localhost:3000/plays) page. You can click on the play thumbnail to see the details of the play.
-- And you will notice a directory create fro your play under `./src/plays/<your_play_name>`
-- Continue developing your play. Happy conding.
+- And you will notice a directory created for your play under `./src/plays/<your_play_name>`
+- Continue developing your play. Happy coding.
 
 ## 👀 Submitting a Play for Review
 After you done with coding for your `Play`, you can submit it for review. Submitting a `Play` for review is a two step process.

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-34-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-35-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <p align="center">
@@ -236,6 +236,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
  <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>
  <td align="center"><a href="https://www.linkedin.com/in/anirban-pratihar-48a591226/"><img src="https://avatars.githubusercontent.com/u/82874704?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Anirban Pratihar</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=Anirban-1490" title="Code">💻</a></td>
  <td align="center"><a href="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/harshsinghatz"><img src="https://avatars.githubusercontent.com/u/51085015?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Harsh Singh</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=harshsinghatz" title="Code">💻</a></td>
+ <td align="center"><a href="http:https://frankiefab.com"><img src="https://avatars.githubusercontent.com/u/46662771?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Franklin U.O. Ohaegbulam</b></sub></a><br /><a href="https://github.com/reactplay/react-play/commits?author=frankiefab100" title="Code">💻</a></td>
  </tr>
 </table>
 

package.json

@@ -19,7 +19,7 @@
  "git-repo-api": "^0.0.17",
  "graphql": "^16.5.0",
  "html-to-image": "^1.9.0",
- "json-graphql-parser": "^0.0.20",
+ "json-graphql-parser": "^0.1.7",
  "lodash": "^4.17.21",
  "node-sass": "^7.0.1",
  "react": "^18.0.0",
@@ -39,7 +39,14 @@
  "redux": "^4.2.0",
  "redux-persist": "^6.0.0",
  "reselect": "^4.1.5",
- "web-vitals": "^2.1.0"
+ "web-vitals": "^2.1.0",
+ "workbox-cacheable-response": "^6.5.4",
+ "workbox-core": "^6.5.4",
+ "workbox-expiration": "^6.5.4",
+ "workbox-precaching": "^6.5.4",
+ "workbox-routing": "^6.5.4",
+ "workbox-strategies": "^6.5.4",
+ "workbox-window": "^6.5.4"
  },
  "scripts": {
  "start": "npx create-react-play -p && react-scripts start",

public/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
  <head>
  <meta charset="utf-8" />
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+ <link rel="icon" href="./favicon.ico" />
  <link rel="canonical" href="https://reactoplay.vercel.app/" />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/og-image.png" />
+ <link rel="apple-touch-icon" href="./logo.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta property="og:type" content="website" />
@@ -14,7 +14,7 @@
  manifest.json provides metadata used when your web app is installed on a
  user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
  -->
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+ <link rel="manifest" href="./manifest.json" />
  <!--
  Notice the use of %PUBLIC_URL% in the tags above.
  It will be replaced with the URL of the `public` folder during the build.

public/manifest.json

@@ -1,21 +1,27 @@
 {
- "short_name": "React App",
- "name": "Create React App Sample",
+ "short_name": "ReactPlay",
+ "name": "ReactPlay",
  "icons": [
  {
  "src": "favicon.ico",
  "sizes": "64x64 32x32 24x24 16x16",
  "type": "image/x-icon"
  },
  {
- "src": "logo192.png",
+ "src": "logo192x192.png",
  "type": "image/png",
  "sizes": "192x192"
  },
  {
- "src": "logo512.png",
+ "src": "logo512x512.png",
  "type": "image/png",
  "sizes": "512x512"
+ },
+ {
+ "src": "maskable_icon.png",
+ "sizes": "64x64 32x32 24x24 16x16 512x512 192x192",
+ "type": "image/png",
+ "purpose": "maskable"
  }
  ],
  "start_url": ".",

src/common/components/Like/Like.jsx

@@ -0,0 +1,25 @@
+import "./Like.scss";
+import { AiOutlineLike, AiFillLike } from "react-icons/ai";
+
+const Like = ({ onLikeClick, likeObj }) => {
+ const {liked, number} = likeObj
+
+ const likeClickHandler = () => {
+ if (onLikeClick) return onLikeClick();
+ };
+
+ return (
+ <button className="action counted -mr-0.5" onClick={likeClickHandler}>
+ <AiOutlineLike size='24px' className={liked ? "hidden" : "icon"}/>
+ <AiFillLike size='24px' className={liked ? "icon" : "hidden"}/>
+ {number > 0 ? (<div className="count-value">{number}</div>):(<div></div>)}
+
+ </button>
+ );
+};
+
+Like.defaultProps = {
+ onLikeClick: null,
+};
+
+export default Like;

src/common/const/nhost.js

@@ -1,5 +1,7 @@
-export const NHOST = {
- AUTH_URL: `https://rgkjmwftqtbpayoyolwh.nhost.run/v1/auth/signin/provider/github?redirectTo=${encodeURI(
- "http:https://localhost:3000/plays/create"
- )}`,
+const AUTH_URL = (redirectURL, provider = "github") => {
+ return `${process.env.REACT_APP_NHOST_BACKEND_URL}/v1/auth/signin/provider/${provider}?redirectTo=${encodeURI(
+ redirectURL
+ )}`;
 };
+
+export const NHOST = { AUTH_URL }

src/common/createplay/CreatePlay.jsx

@@ -114,16 +114,9 @@ const CreatePlay = () => {
  );
  }
 
- const refreshToken = searchParams.get("refreshToken");
- // setValue(refreshToken);
-
  if (!isAuthenticated) {
- if (refreshToken) {
- console.log(refreshToken);
- } else {
- window.location = NHOST.AUTH_URL;
- return null;
- }
+ window.location = NHOST.AUTH_URL(`http:https://localhost:${process.env.RAECT_APP_DEV_PORT ?? '3000'}/plays/create`);
+ return null;
  } else {
  initializeData();
  }

src/common/hooks/useLikePlays.js

@@ -0,0 +1,29 @@
+import { submit } from "common/services/request";
+import {
+ likeIndividualPlay,
+ unlikeIndividualPlay,
+} from "common/services/request/query/like-play";
+
+const useLikePlays = () => {
+ const likePlay = async (obj) => {
+ try {
+ const likeExec = await submit(likeIndividualPlay(obj));
+ return Promise.resolve(likeExec);
+ } catch (err) {
+ return Promise.reject(err);
+ }
+ };
+
+ const unLikePlay = async (obj) => {
+ try {
+ const resp = await submit(unlikeIndividualPlay(obj));
+ return Promise.resolve(resp);
+ } catch (err) {
+ return Promise.reject(err);
+ }
+ };
+
+ return { likePlay, unLikePlay };
+};
+
+export default useLikePlays;