Howto disable the edit option with one user while two browsers opened at a time only one browser get access to edit and another browser gets disable

Question

How to disable the edit option with one user , while two browsers opened at a time, only one browser get access to edit and another browser gets disable using react js i have used kendo ui for the form

need solution if its possible

Answer 1

    import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Form, FieldArray, FormElement } from '@progress/kendo-react-form';
import { Error } from '@progress/kendo-react-labels';
import { clone } from '@progress/kendo-react-common';
import { Grid, GridColumn, GridToolbar } from '@progress/kendo-react-grid';
import { sampleProducts } from './sample-products';
import { NumberCell, NameCell } from './editors'; 
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
const arrayLengthValidator = value => value && value.length ? '' : 'Please add at least one record.'; 
const firebaseConfig = {
  apiKey: "AIzaSyAoagAwMHk5W5Ga1adxYYdwGHq05pUkIDQ",
  authDomain: "onclickdisable.firebaseapp.com",
  projectId: "onclickdisable",
  storageBucket: "onclickdisable.appspot.com",
  messagingSenderId: "925546922409",
  appId: "1:925546922409:web:385e8abe42ce2d42e284b8",
  measurementId: "G-2DBX5PDPG9"
};

export const FormGridEditContext = React.createContext({});
const FORM_DATA_INDEX = 'formDataIndex';
const DATA_ITEM_KEY = 'ProductID'; 
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app)
const CommandCell = props => {
  const {
    onRemove,
    onEdit,
    onSave,
    onCancel,
    editIndex
  } = React.useContext(FormGridEditContext);
  const isInEdit = props.dataItem[FORM_DATA_INDEX] === editIndex;
  const isNewItem = !props.dataItem[DATA_ITEM_KEY];
  const onRemoveClick = React.useCallback(e => {
    e.preventDefault();
    onRemove(props.dataItem);
  }, [props.dataItem, onRemove]);
  const onEditClick = React.useCallback(e => {
    e.preventDefault();
    
    onEdit(props.dataItem, isNewItem);
  }, [props.dataItem, onEdit, isNewItem]);
  const onSaveClick = React.useCallback(e => {
    e.preventDefault();
    onSave();
  }, [onSave]);
  const onCancelClick = React.useCallback(e => {
    e.preventDefault();
    onCancel();
  }, [onCancel]);
  
  return isInEdit ? <td className="k-command-cell">
        <button className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-grid-save-command" onClick={onSaveClick}>
          {isNewItem ? 'Add' : 'Update'}
        </button>
        
        <button className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-grid-cancel-command" onClick={isNewItem ? onRemoveClick : onCancelClick}>
          {isNewItem ? 'Discard' : 'Cancel'}
        </button>
      </td> : <td className="k-command-cell">
        <button className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary k-grid-edit-command" onClick={onEditClick}>
          Edit
        </button>
        <button className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-grid-remove-command" onClick={onRemoveClick}>
          Remove
        </button>
      </td>;
}; 


const FormGrid = fieldArrayRenderProps => {
  const {
    validationMessage,
    visited,
    name,
    dataItemKey
  } = fieldArrayRenderProps;
  const [editIndex, setEditIndex] = React.useState();
  const editItemCloneRef = React.useRef(); 

  const onAdd = React.useCallback(e => {
    e.preventDefault();
    fieldArrayRenderProps.onUnshift({
      value: {
        id: '',
        name: ''
      }
    });
    setEditIndex(0);
  }, [fieldArrayRenderProps]); 

  const onRemove = React.useCallback(dataItem => {
    fieldArrayRenderProps.onRemove({
      index: dataItem[FORM_DATA_INDEX]
    });
    setEditIndex(undefined);
  }, [fieldArrayRenderProps]);

  const onEdit = React.useCallback((dataItem, isNewItem) => {
    if (!isNewItem) {
      editItemCloneRef.current = clone(dataItem);
    }

    setEditIndex(dataItem[FORM_DATA_INDEX]);
  }, []);

  const onCancel = React.useCallback(() => {
    if (editItemCloneRef.current) {
      fieldArrayRenderProps.onReplace({
        index: editItemCloneRef.current[FORM_DATA_INDEX],
        value: editItemCloneRef.current
      });
    }

    editItemCloneRef.current = undefined;
    setEditIndex(undefined);
  }, [fieldArrayRenderProps]); 

  const onSave = React.useCallback(() => {
    console.log(fieldArrayRenderProps);
    setEditIndex(undefined);
  }, [fieldArrayRenderProps]);
  const dataWithIndexes = fieldArrayRenderProps.value.map((item, index) => {
    return { ...item,
      [FORM_DATA_INDEX]: index
    };
  });
  return <FormGridEditContext.Provider value={{
    onCancel,
    onEdit,
    onRemove,
    onSave,
    editIndex,
    parentField: name
  }}>
        {visited && validationMessage && <Error>{validationMessage}</Error>}
        <Grid data={dataWithIndexes} dataItemKey={dataItemKey}>
          <GridToolbar>
            <button title="Add new" className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" onClick={onAdd}>
              Add new
            </button>
          </GridToolbar>
          <GridColumn field="ProductName" title="Name" cell={NameCell} />
          <GridColumn field="UnitsOnOrder" title="Units" cell={NumberCell} />
          <GridColumn cell={CommandCell} width="240px" />
        </Grid>
      </FormGridEditContext.Provider>;
};

export const App = () => {
  const handleSubmit = dataItem => alert(JSON.stringify(dataItem));

  return <Form initialValues={{
    products: sampleProducts.splice(0, 5)
  }} onSubmit={handleSubmit} render={formRenderProps => <FormElement>
            <FieldArray name="products" dataItemKey={DATA_ITEM_KEY} component={FormGrid} validator={arrayLengthValidator} />
            <div className="k-form-buttons">
              <button type={'submit'} className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base" disabled={!formRenderProps.allowSubmit}>
                Submit
              </button>
            </div>
          </FormElement>} />;
};
ReactDOM.render(<App />, document.querySelector('my-app'));