netcreateorg / netcreate-itest

Developing the 2.0 version of NetCreate
https://github.com/netcreateorg/netcreate-2018
Other
0 stars 0 forks source link

Convert Comment React Class Components to Functional Components #221

Closed benloh closed 4 weeks ago

benloh commented 1 month ago

Merge AFTER #213!

This converts the first prototype NCComment* class components into a more modern functional component classes. This is the first step towards developing common components that can be used in MEME as well as Net.Create.

All functionality should be the same.

benloh commented 1 month ago

The conversion was relatively straightforward. There were basically three main hiccups:

  1. UDATA.NewDataLink(this)

    UDATA.NewDataLink(this) breaks because of vestigial requirejs use in client-datalink-class.js.

This is easily worked around with:

  /// Initialize UNISYS DATA LINK for functional react component
  const UDATAOwner = { name: 'URCommentThread' };
  const UDATA = UNISYS.NewDataLink(UDATAOwner);

For conversation, see slack

  1. forceUpdate is no longer valid

React no longer supports forceUpdate. Using a dummy variable can force an update, e.g.:

  const [dummy, setDummy] = useState(0); // Dummy state variable to force update

  const HandleCOMMENTS_UPDATE = () => {
    // This is necessary to force a re-render of the comment summaries
    // when the comment collection changes on the net
    setDummy(dummy => dummy + 1); // Trigger re-render
  };
  1. Object spread syntax is broken

When setting state updates, we could not use the object spread operator. #219 fixes that.

Alternatively, using Object.assign works as well:

setState( prevState => Object.assign({}, ...prevState, { key: newvalue }));
benloh commented 1 month ago

@dsriseah Would you mind giving this a once over to make sure my conversion is kosher?

dsriseah commented 1 month ago

Was this PR turned back into draft recently? I could have sworn that this wasn't available before. I think I already provided the code review of URComment before; is this everything else converted?

benloh commented 1 month ago

Was this PR turned back into draft recently? I could have sworn that this wasn't available before. I think I already provided the code review of URComment before; is this everything else converted?

Sorry I had it labeled as "Draft" but did not click the button to enable draft mode. The review is in place and has been merged into the this branch (thanks)! But I'm still in the process of applying all the review suggestions to the rest of the files. I also found a few places to refine so it'll be a few days before it's all worked out.