mutation updated

package.json

@@ -11,20 +11,18 @@
  "@types/lodash": "^4.14.182",
  "@types/react": "^18.0.6",
  "@types/react-dom": "^18.0.2",
- "@uiw/react-markdown-preview": "^4.0.18",
  "date-fns": "^2.28.0",
  "firebase": "^9.8.2",
  "git-repo-api": "^0.0.17",
  "graphql": "^16.5.0",
- "json-graphql-parser": "^0.0.8",
+ "json-graphql-parser": "^0.0.16",
  "lodash": "^4.17.21",
  "node-sass": "^7.0.1",
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "react-helmet": "^6.1.0",
  "react-icons": "^4.3.1",
  "react-loader-spinner": "^5.1.5",
- "react-markdown": "^8.0.3",
  "react-organizational-chart": "^2.1.1",
  "react-redux": "^8.0.1",
  "react-router-dom": "^6.3.0",
@@ -37,7 +35,7 @@
  },
  "scripts": {
  "start": "react-scripts start",
- "build": "react-scripts build",
+ "build": "npx create-react-play -p && react-scripts build",
  "snap": "react-snap",
  "test": "react-scripts test",
  "eject": "react-scripts eject"

src/common/components/PlayForms.jsx

@@ -1,6 +1,6 @@
-import {TextField , MenuItem , FormControl , Select, Button} from '@mui/material';
+import {TextField , MenuItem , FormControl , Select, Button, Autocomplete} from '@mui/material';
 import { useEffect, useState } from 'react';
-
+import * as _ from 'lodash';
 const PlayForm = ({fields, data, onChange}) => {
 
  const [formData, setFormData] = useState({})
@@ -12,7 +12,7 @@ const PlayForm = ({fields, data, onChange}) => {
  formData[key] = value;
  setFormData({...formData})
  if(onChange) {
- onChange(key, value)
+ onChange(formData)
  }
  }
 
@@ -28,34 +28,51 @@ const PlayForm = ({fields, data, onChange}) => {
  onChange={(e) => {
  onDataChanged(field.datafield, e.target.value)}
  }/>
- case 'select': return <FormControl fullWidth>
- <Select
- id={field.id} 
- size="small"
- label={field.plaeholder}
- value={formData[field.datafields]} 
- onChange={(e) => {
- onDataChanged(field.datafield, e.target.value)}
- }
- >
- {
- (field.options || []).map(o => {
- return <MenuItem value={o.value}>{o.name}</MenuItem>
- })
- }
- </Select>
- </FormControl>
-
+ case 'select': return <Autocomplete
+ id={field.datafield}
+ size="small"
+ options={field.options}
+ getOptionLabel={(option) => option.name || option[field.fieldName] || option}
+ filterSelectedOptions
+ multiple={field.multiple}
+ freeSolo={field.freeSolo}
+ onChange={(e, newValue) => {
+ let updatedval = newValue;
+ if(field.multiple) {
+ updatedval = [];
+ newValue.forEach(v => {
+ if(_.isObject(v)){
+ updatedval.push(v);
+ } else {
+ updatedval.push({
+ [field.fieldName || 'name']: v,
+ [field.fieldValue || 'value']: ""
+ })
+ }
+ })
+ }
+ onDataChanged(field.datafield, updatedval)}
+ }
+ renderInput={(params) => (
+ <TextField
+ {...params}
+ size="small"
+ placeholder={field.placeholder}
+ />
+ )}
+ />
  }
 
  }
+
+
 
  const renderForm = () => {
  return <>
  <FormControl className='w-full'>
- {fields.map(field => {
+ {fields.map((field, field_key) => {
  return(
- <div className='flex p-2'>
+ <div className='flex p-2' key={field_key}>
  <div className='flex-1'>
  {field.display}{field.required ? "*":""}
  </div>

src/common/createplay/CreatePlay.jsx

@@ -1,23 +1,26 @@
 import { useEffect, useState } from "react";
-import { NhostClient, useAuthenticationStatus, useUserData } from "@nhost/react";
+import { useAuthenticationStatus, useUserData } from "@nhost/react";
 import { Tags, Levels, Issues } from "common/services";
 import Button from '@mui/material/Button';
 
 import PlayForm from "common/components/PlayForms";
 import { NHOST } from "common/const";
-import ReactMarkdown from 'react-markdown';
-import MarkdownPreview from '@uiw/react-markdown-preview';
 import { FIELD_TEMPLATE } from "./create-play-form-template";
 import './create-play.scss'
-
-
-
+import Loader from "common/spinner/spinner";
+import { Plays } from "common/services/plays";
+import { useNavigate } from "react-router-dom";
 
 const CreatePlay = () => {
  const { isAuthenticated, isLoading } = useAuthenticationStatus();
- const [dataLoading,setDataLoading] = useState(true)
+ const userData = useUserData()
+ let navigate = useNavigate();
+
+
+ const [loadingText, setLoadingText] = useState("Loading form information.")
  const [storedData, setStoredData] = useState({})
  const [formData, setFormData] = useState({})
+ const [isDataLoading, setIsDataLoading] = useState(false)
 
  useEffect(() => {
  if(!isLoading) {
@@ -31,10 +34,11 @@ const CreatePlay = () => {
 
  }, [isLoading])
 
- const onChange = (key, value) => {
- setFormData({...formData, ...{[key]: value}})
+ const onChange = (data) => {
+ setFormData({...data})
  }
  const isFieldsAreInValid = () => {
+ return false;
  let res = false;
  FIELD_TEMPLATE.forEach(tmpl => {
  if(tmpl.required && (!formData || !formData[tmpl.datafield])) {
@@ -63,41 +67,43 @@ const CreatePlay = () => {
  }
  })
  setStoredData({...storedData})
- setDataLoading(false)
+ }).finally(() => {
+ setIsDataLoading(false)
+ })
+ }
+
+ const onSubmit = () => {
+ setLoadingText("Creating play.")
+ setIsDataLoading(true)
+ formData.owner_user_id = userData.id;
+ Plays.createPlay(formData).then(res => {
+ navigate(`/plays/created/${res}`);
+ setIsDataLoading(false)
  })
  }
 
  return (
- <div className="w-full h-full flex flex-col justify-center items-center create-plays-wrapper">
+ <div className="w-full h-full px-5 flex flex-col justify-center items-center create-plays-wrapper">
  <div>
  <span className='title-primary'>
  Create <strong>A Play</strong>
  </span>
  </div>
- {/* <div className="container mx-auto bg-[#FFFFFF] w-1/2 shadow-2xl p-3 ">
- {
- dataLoading ? (<div></div>): (<PlayForm fields={FIELD_TEMPLATE}/>)
- }
- </div> */}
- <div class="w-full max-w-6xl flex bg-white shadow-md rounded px-8 pt-6 pb-8 mb-6">
- {/* <div className="flex-1">
- <MarkdownPreview source={'https://raw.githubusercontent.com/reactplay/react-play/main/CREATE-PLAY.md'} />
- <ReactMarkdown source={'https://raw.githubusercontent.com/reactplay/react-play/main/CREATE-PLAY.md'} />
- </div> */}
- <div className="flex-1">
- <form class="">
- {
- dataLoading ? (<div></div>): (<PlayForm fields={FIELD_TEMPLATE} onChange={(k,v) => onChange(k,v)}/>)
+ <div className="w-full h-full max-w-6xl flex bg-white shadow-md rounded px-8 pt-6 pb-8 mb-6">
+ <div className="flex-1"> {
+ isDataLoading ? (<Loader title={loadingText} subtitle="Please wait...."/>): (<form><PlayForm fields={FIELD_TEMPLATE} onChange={(data) => onChange(data)}/><div className="flex items-center justify-between">
+ <Button variant="contained" disabled={isFieldsAreInValid()} onClick={() => onSubmit()}>
+ Create the awesome
+ </Button>
+ <a className="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
+ Reset?
+ </a>
+ </div>
+ </form>)
  }
- <div class="flex items-center justify-between">
- <Button variant="contained" disabled={isFieldsAreInValid()}>
- Create the awesome
- </Button>
- <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
- Reset?
- </a>
- </div>
- </form>
+
+
+
  </div>
  </div></div>
  )

src/common/createplay/create-play-form-template.js

@@ -16,17 +16,17 @@ export const FIELD_TEMPLATE = [
  },
  {
  datafield: "issue",
- type: "autocomplete",
+ type: "select",
  display: "Issue",
  placeholder: "Select an issue to link with",
  multiple: false,
  options: [],
+ fieldName: "name",
  required: true,
  },
  {
  datafield: "language",
- type: "autocomplete",
- multiple: false,
+ type: "select",
  display: "Language",
  placeholder: "Preferred Language",
  options: [
@@ -43,8 +43,7 @@ export const FIELD_TEMPLATE = [
  },
  {
  datafield: "style",
- type: "autocomplete",
- multiple: false,
+ type: "select",
  display: "Style",
  placeholder: "Preferred Style Script",
  options: [
@@ -60,7 +59,7 @@ export const FIELD_TEMPLATE = [
  },
  {
  datafield: "level",
- type: "autocomplete",
+ type: "select",
  multiple: false,
  display: "Level",
  placeholder: "Play Complexity Level",
@@ -75,9 +74,13 @@ export const FIELD_TEMPLATE = [
  },
  {
  datafield: "tags",
- type: "autocomplete",
+ type: "select",
  display: "Tags",
  placeholder: "All Tags",
+ fieldValue: "id",
+ fieldName: "name",
+ freeSolo: true,
+ multiple: true,
  options: [],
  },
  {

src/common/playcreated/PlayCreated.jsx

@@ -1,29 +1,34 @@
-import { useEffect, useState } from "react";
-import { NhostClient, useAuthenticationStatus, useUserData } from "@nhost/react";
-import { Tags, Levels } from "common/services";
-import Chip from '@mui/material/Chip';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import PlayForm from "common/components/PlayForms";
-import { NHOST } from "common/const";
-import ReactMarkdown from 'react-markdown';
-import MarkdownPreview from '@uiw/react-markdown-preview';
+import { submit } from 'common/services/request';
+import { FetchPlaysByID } from 'common/services/request/query/fetch-plays';
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
 import './play-created.scss'
 
 const PlayCreated = () => {
+ const {playid} = useParams()
+ const [play, setPlay] =useState();
+ const [loading, setLoading] =useState(true)
+ useEffect(() => {
+ submit(FetchPlaysByID(playid)).then(res => {
+ setPlay(res[0])
+
+ }).finally(() => {
+ setLoading(false)
+ })
+ }, [playid])
+
+ if(loading) {
+ return <div></div>
+ }
  return (
+
  <div className="w-full h-full flex flex-col justify-center items-center create-plays-wrapper">
  <div>
  <span className='title-primary'>
- <strong>Play Name</strong> Created
+ <strong>{play.name}</strong> Created
  </span>
  </div>
- {/* <div className="container mx-auto bg-[#FFFFFF] w-1/2 shadow-2xl p-3 ">
- {
- dataLoading ? (<div></div>): (<PlayForm fields={FIELD_TEMPLATE}/>)
- }
- </div> */}
- <div class="w-full max-w-6xl flex flex-col bg-white shadow-md rounded px-8 pt-6 pb-8 mb-6">
+ <div className="w-full max-w-6xl flex flex-col bg-white shadow-md rounded px-8 pt-6 pb-8 mb-6">
  <div>
  Congratulations! Your play has been created
  </div>
@@ -33,22 +38,25 @@ const PlayCreated = () => {
  Fork <a className="play-create-anchor" href="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/reactplay/react-play" target="_blank" >reactplay</a> repository
  </li>
  <li>
- Run following command on you project folder<code className="console-wrapper">npx create-react-play -c 123-456-789</code>
+ Open command line console of your choice
+ </li>
+ <li>
+ Run following command on your <a className="play-create-anchor" href="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/reactplay/react-play" target="_blank" >reactplay</a> project folder<code className="console-wrapper">npx create-react-play -c {play.id}</code>
  </li>
  <li>
  Install dependencies<code className="console-wrapper">npm install <br/># OR <br/> yarn </code>
  </li>
  <li>
- Start application<code className="console-wrapper">npm start <br/><i># OR </i><br/> yarn start</code>
+ Start application<code className="console-wrapper">npm start <br/># OR <br/> yarn start</code>
  </li>
  <li>
- Find your play under <code className="console-wrapper">&lt;reactplay&gt;/src/plays/play-name</code>
+ Find your play under <code className="console-wrapper">&lt;reactplay-directory&gt;/src/plays/{play.name}</code>
  </li>
  </ol>
  <div>
  Refer <a className="play-create-anchor" href="https://github.com/reactplay/react-play/blob/main/CREATE-PLAY.md" target="_blank">play creation guide</a> for more information
  </div><div>
- Happy coding
+ Happy coding!!
  </div>
  </div>
  </div></div>

src/common/playcreated/play-created.scss

@@ -31,6 +31,7 @@ background-size: cover;
 }
 
 .console-wrapper {
+ border-radius: 4px;
  display: block;
  box-sizing: border-box;
  padding: 4px 20px;

src/common/playlists/PlayList.jsx

@@ -5,7 +5,7 @@ import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
 import Loader from "common/spinner/spinner";
 import * as all_plays from "plays";
 import { useParams } from "react-router-dom";
-import {useGetPlays} from 'common/hooks'
+import useGetPlays from 'common/hooks/useGetPlays'
 
 import "./playlist.css";
 import { submit } from "common/services/request";