Issue-429-edit-play-flow (reactplay#532)

* draft work of edit play * edit play on prod * edit play ongoing draft work * state reset fix * edit play ui * draft work * draft save * resolved error * updated edit play code * draft work * edit play draft work * fix broken create play flow Co-authored-by: Sachin Chaurasiya <[email protected]> Co-authored-by: koustov <[email protected]>
Bhavika-Maurya · Nov 23, 2022 · 714ac08 · 714ac08
1 parent deb6fef
commit 714ac08
Show file tree

Hide file tree

Showing 11 changed files with 515 additions and 208 deletions.
diff --git a/src/common/404/PageNotFound.jsx b/src/common/404/PageNotFound.jsx
@@ -1,25 +1,46 @@
+import { useState, useEffect } from "react";
 import { ReactComponent as Image404 } from "images/img-404.svg";
 import "./404.css";
 import Loader from "common/spinner/spinner";
+import { useNavigate } from "react-router-dom";
 
 const PageNotFound = ({ loading, msg, details, Image }) => {
+ const [timer, setTimer] = useState(5);
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setTimer(timer - 1);
+ }, 1000);
+ return () => {
+ clearInterval(interval);
+ if (timer === 0) {
+ return navigate("/plays");
+ }
+ };
+ }, [timer]);
+
  if (loading) {
  return <Loader />;
  }
 
  return (
  <main className='page-404'>
- {Image ? <img src={Image} alt="under-development" className='under-development' /> : <Image404 className='page-404-image' />}
+ {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>
+ <p className='page-404-desc'>{details}. Redirecting in {timer} sec.</p>
  </main>
  );
 };
 
 PageNotFound.defaultProps = {
  msg: "Looks like you are lost",
  details: "Why don't you go back to home.",
- Image: null
+ Image: null,
 };
 
 export default PageNotFound;
diff --git a/src/common/components/Notification.jsx b/src/common/components/Notification.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { ToastContainer } from "react-toastify";
+
+function Notification() {
+ return (
+ <ToastContainer
+ position='top-right'
+ autoClose={5000}
+ hideProgressBar={false}
+ newestOnTop={false}
+ closeOnClick
+ rtl={false}
+ pauseOnFocusLoss
+ draggable
+ pauseOnHover
+ theme='light'
+ />
+ );
+}
+
+export default Notification;
diff --git a/src/common/components/PlayForms.jsx b/src/common/components/PlayForms.jsx
@@ -1,91 +1,129 @@
-import {TextField , FormControl, Autocomplete} from '@mui/material';
-import { useEffect, useState } from 'react';
-import * as _ from 'lodash';
-const PlayForm = ({fields, data, onChange}) => {
+import { useEffect, useState, useRef } from "react";
+import { TextField, FormControl, Autocomplete, Button } from "@mui/material";
+import * as _ from "lodash";
 
- const [formData, setFormData] = useState({})
- useEffect(() => {
- setFormData({...data})
- }, [data])
+const disabledFields = ['issue', 'github']
 
- const onDataChanged = (key, value) => {
- formData[key] = value;
- setFormData({...formData})
- if(onChange) {
- onChange(formData)
- }
- }
+const PlayForm = ({ fields, formDataObj, onSubmit, isEditPlay}) => {
+
+ const [formData, setFormData] = useState({...formDataObj});
+ const formDataReference = useRef(formDataObj);
 
- const renderField = field => {
- switch(field.type){
- case 'input': return <TextField id={field.id} 
- label={field.plaeholder}
- value={formData[field.datafields]} 
- size="small"
- className='w-full'
- {...field}
+ const checkDisabledInputs = (fieldName) => isEditPlay && disabledFields.includes(fieldName)
 
- onChange={(e) => {
- onDataChanged(field.datafield, e.target.value)}
- }/>
- 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}
- />
- )}
- />
- default: return <></>
+
+ const handleChange = (key, value) => {
+ setFormData((pre) => ({...pre, [key]: value }));
+ };
+
+ useEffect(() => {
+ setFormData({ ...formDataReference.current });
+ }, []);
+
+ const renderField = (field) => {
+ switch (field.type) {
+ case "input":
+ return (
+ <TextField
+ id={field.id}
+ label={field.plaeholder}
+ value={formData[field.datafield]}
+ size='small'
+ className='w-full'
+ disabled={checkDisabledInputs(field.datafield)}
+ {...field}
+ onChange={(e) => handleChange(field.datafield, e.target.value)}
+ />
+ );
+ 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}
+ disabled={checkDisabledInputs(field.datafield)}
+ value={formData[field.datafield] ?? ''}
+ 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"]: "",
+ });
+ }
+ });
+ }
+ handleChange(field.datafield, updatedval);
+ }}
+ renderInput={(params) => (
+ <TextField {...params} size='small' placeholder={field.placeholder} />
+ )}
+ />
+ );
+ default:
+ return null;
  }
- }
- 
+ };
+
  const renderForm = () => {
- return <>
- <FormControl className='w-full'>
- {fields.map((field, field_key) => {
- return(
- <div className='flex p-2' key={field_key}>
- <div className='flex-1'>
- {field.display}{field.required ? "*":""}
- </div>
- <div className='flex-1'>
- {renderField(field)}
- </div>
+ return (
+ <FormControl className='w-full'>
+ {fields.map((field, field_key) => {
+ return (
+ <div className='flex p-2' key={field_key}>
+ <div className='flex-1'>
+ {field.display}
+ {field.required ? "*" : ""}
  </div>
-
- )
- })}
- </FormControl> </>
- }
-
+ <div className='flex-1'>{renderField(field)}</div>
+ </div>
+ );
+ })}
+ </FormControl>
+ );
+ };
+
+ const isFieldsAreInValid = () => {
+ let res = false;
+ fields.forEach((tmpl) => {
+ if (tmpl.required && (!formData || !formData[tmpl.datafield])) {
+ if (isEditPlay && disabledFields.includes(tmpl.datafield)) {
+ res = false
+ } else {
+ res = true;
+ }
+ }
+ });
+ return res;
+ };
+
  return (
  <>
- {renderForm()}
+ <div className='flex-1 px-10 py-8 overflow-auto'>
+ <form>{renderForm()}</form>
+ </div>
+ <div className='h-14'>
+ <hr />
+ <div className='p-8 h-full flex items-center'>
+ <Button
+ size='small'
+ variant='contained'
+ disabled={isFieldsAreInValid()}
+ onClick={onSubmit.bind(null, formData)}
+ >
+ {!isEditPlay ? "Create the awesome" : "Edit Play"}
+ </Button>
+ </div>
+ </div>
  </>
  );
 };