GridCell not update value when DataModel change

[huytrongnguyen]

Instead of

useEffect(() => { setFieldValue(record?.get(field) ?? ''); }, [props.record])

Do this

useEffect(() => {
    const record$ = record.subscribe(value => setFieldValue(value?.[field]));

    return () => { record$.unsubscribe(); }
  }, [])

Full component

export function GridCell(props: GridCellProps) {
  const { field, headerName, className, booleanColumn, checkColumn, linkTo, renderer, record, rowIndex, colIndex, header, ...others } = props,
        cls = Rosie.classNames('rosie-grid-cell p-2', className, { 'bg-warning-subtle': record?.isModified(field) && !record.isPhantom() }),
        [fieldValue, setFieldValue] = useState<any>(record?.get(field) ?? null);

  if (header) {
    return <div className="rosie-grid-cell p-2" {...others}>{headerName ?? field}</div>
  }

  useEffect(() => {
    const record$ = record.subscribe(value => setFieldValue(value?.[field]));

    return () => { record$.unsubscribe(); }
  }, [])

  function getDisplayValue() {
    if (renderer) {
      return renderer(fieldValue, record, rowIndex, colIndex)
    } else if (linkTo) {
      return <Link to={linkTo(fieldValue, record, rowIndex, colIndex)}>{fieldValue}</Link>
    } else if (booleanColumn) {
      return <div className="form-check d-flex justify-content-center">
        <input className="form-check-input" type="checkbox" readOnly checked={fieldValue} />
      </div>
    } else {
      return fieldValue;
    }
  }

  return <>
    <div className={cls} {...others}>{getDisplayValue()}</div>
  </>
}