Merge branch 'main' into like-feature

package.json

@@ -6,19 +6,20 @@
  "@emotion/react": "^11.9.3",
  "@emotion/styled": "^11.9.3",
  "@giscus/react": "^2.0.3",
- "@mui/material": "^5.9.0",
+ "@mui/material": "^5.9.1",
  "@nhost/react": "^0.9.0",
  "@types/lodash": "^4.14.182",
  "@types/react": "^18.0.6",
  "@types/react-dom": "^18.0.2",
+ "add": "^2.0.6",
  "axios": "^0.27.2",
  "date-fns": "^2.28.0",
  "downloadjs": "^1.4.7",
  "firebase": "^9.8.2",
  "git-repo-api": "^0.0.17",
  "graphql": "^16.5.0",
  "html-to-image": "^1.9.0",
- "json-graphql-parser": "^0.0.16",
+ "json-graphql-parser": "^0.0.20",
  "lodash": "^4.17.21",
  "node-sass": "^7.0.1",
  "react": "^18.0.0",

src/common/services/request/index.js

@@ -1,7 +1,7 @@
 import {
  submit as gsubmit,
  submit_multi as gsubmit_multi,
-} from "json-graphql-parser";
+} from "json-graphql-parser/v2/index.js";
 
 const BACKEND_URL = `${process.env.REACT_APP_NHOST_BACKEND_URL}/${process.env.REACT_APP_NHOST_VERSION}/${process.env.REACT_APP_NHOST_ENDPOINT}`;
 const header = {

src/common/services/request/query/fetch-filter-data.js

@@ -4,39 +4,24 @@ export const fetchFilterData = {
  name: "Fetch_Tags",
  function: "plays",
  write: false,
- params: [{ play_tags: { tag: ["id", "name"] } }],
- filters: [
- {
- field: "distinct_on",
- value: "id",
- },
- ],
+ return: [{ play_tags: { tag: ["id", "name"] } }],
+ distinct: "id",
  },
  getAllLevels: {
  display: "Play Levels",
  name: "Fetch_Levels",
  function: "plays",
  write: false,
- params: [{ level: ["id", "name"] }],
- filters: [
- {
- field: "distinct_on",
- value: "level_id",
- },
- ],
+ return: [{ level: ["id", "name"] }],
+ distinct: "level_id",
  },
 
  getAllUsers: {
  display: "Play Users",
  name: "Fetch_Users",
  function: "plays",
  write: false,
- params: [{ user: ["avatarUrl", "displayName", "id"] }],
- filters: [
- {
- field: "distinct_on",
- value: "owner_user_id",
- },
- ],
+ return: [{ user: ["avatarUrl", "displayName", "id"] }],
+ distinct: "owner_user_id",
  },
 };

src/common/services/request/query/fetch-plays-filter.js

@@ -1,11 +1,11 @@
-const env = process.env.NODE_ENV === "development"
-const preview = process.env.REACT_APP_PREVIEW_MODE
+const env = process.env.NODE_ENV === "development";
+const preview = process.env.REACT_APP_PREVIEW_MODE;
 const defaultClause = {
  field: "dev_mode",
  operator: "eq",
  value: false,
  type: "boolean",
-}
+};
 
 export const FetchPlaysFilter = {
  // Filter all the featured plays
@@ -14,7 +14,7 @@ export const FetchPlaysFilter = {
  display: "Filter all the featured plays",
  name: "Fetch_Plays",
  function: "plays",
- params: [
+ return: [
  "blog",
  "component",
  "cover",
@@ -33,16 +33,17 @@ export const FetchPlaysFilter = {
  "video",
  ],
  where: {
- operator: "and",
- clause: [
- defaultClause,
- {
- field: "featured",
- operator: "eq",
- value: true,
- type: "boolean",
- },
- ],
+ clause: {
+ operator: "and",
+ conditions: [
+ defaultClause,
+ {
+ field: "featured",
+ operator: "eq",
+ value: true,
+ },
+ ],
+ },
  },
  };
  },
@@ -52,7 +53,7 @@ export const FetchPlaysFilter = {
  display: "Filter Plays by a search string in name or description",
  name: "Fetch_Plays",
  function: "plays",
- params: [
+ return: [
  "blog",
  "component",
  "cover",
@@ -71,21 +72,21 @@ export const FetchPlaysFilter = {
  "video",
  ],
  where: {
- operator: "or",
- clause: [
- {
- field: "name",
- operator: "iregex",
- value: Obj.name.toLowerCase(),
- type: "string",
- },
- {
- field: "description",
- operator: "iregex",
- value: Obj.name.toLowerCase(),
- type: "string",
- },
- ],
+ clause: {
+  operator: "or",
+ conditions: [
+ {
+  field: "name",
+  operator: "iregex",
+  value: Obj.name.toLowerCase(),
+  },
+  {
+  field: "description",
+  operator: "iregex",
+  value: Obj.name.toLowerCase(),
+ },
+ ],
+ },
  },
  };
  },
@@ -100,7 +101,7 @@ export const FetchPlaysFilter = {
  display: "Filter plays by level, user, language, and multiple tags",
  name: "Fetch_Plays",
  function: "plays",
- params: [
+ return: [
  "blog",
  "component",
  "cover",
@@ -120,28 +121,32 @@ export const FetchPlaysFilter = {
  ],
  };
 
- const clause = { operator: "and", clause: !env && !preview ? [defaultClause] : [] };
+ const clause = {
+ operator: "and",
+ conditions: !env && !preview ? [defaultClause] : [],
+ };
  Object.keys(Obj).forEach((key) => {
  const keyName = Obj[key];
  if (keyName.length > 0) {
  const ifTags = key === "tags";
 
  const prepareObject = {
- field: ifTags ? "id" : key,
+ field: ifTags ? "tag_id" : key,
  operator: "eq",
  value: ifTags ? keyName[0] : keyName,
- type: "string",
  };
 
  if (ifTags) {
- prepareObject.class = "tag";
- prepareObject.node = "play_tags";
+ clause.class = "play_tags";
  }
- clause.clause.push(prepareObject);
+ clause.conditions.push(prepareObject);
  }
  });
 
- if (!!clause.clause.length) payload.where = clause;
+ if (!!clause.conditions.length) {
+ payload.where = payload.where || {};
+ payload.where.clause = clause;
+ }
  return payload;
  },
 };

src/common/services/request/query/fetch-plays.js

@@ -6,14 +6,15 @@ export function FetchPlaysByID(id) {
  const payload = { ...BasiFetchParam };
 
  payload.where = {
- clause: [
- {
- field: "id",
- operator: "eq",
- value: id,
- type: "string",
- },
- ],
+ clause: {
+ conditions: [
+ {
+ field: "id",
+ operator: "eq",
+ value: id,
+ },
+ ],
+ },
  };
  return payload;
 }
@@ -23,7 +24,7 @@ const BasiFetchParam = {
  name: "Fetch_Plays",
  function: "plays",
  write: false,
- params: [
+ return: [
  "blog",
  "component",
  "cover",

src/common/services/request/query/levels.js

@@ -2,5 +2,5 @@ export const fetchAllLevels = {
  display: "Play Tags",
  name: "Fetch_Tags",
  function: "levels",
- params: ["id", "name"],
+ return: ["id", "name"],
 };

src/common/services/request/query/play.js

@@ -4,6 +4,7 @@ export const createPlayQuery = {
  function: "insert_plays_one",
  write: true,
  object: {},
+ return: ["id"],
 };
 
 export const associatePlayWithTagQuery = {
@@ -12,4 +13,5 @@ export const associatePlayWithTagQuery = {
  function: "insert_play_tags_one",
  write: true,
  object: {},
+ return: ["id"],
 };

src/common/services/request/query/tags.js

@@ -2,7 +2,7 @@ export const fetchAllTags = {
  display: "Play Tags",
  name: "Fetch_Tags",
  function: "tags",
- params: ["id", "name"],
+ return: ["id", "name"],
 };
 
 export const createATagQuery = {
@@ -11,4 +11,5 @@ export const createATagQuery = {
  function: "insert_tags_one",
  write: true,
  object: {},
+ return: ["id"],
 };

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: