Replace EditorEvents with Hookstate

[zulqarnainhanif]

Summary

• Replace all the editor events with hookstate

Checklist

• Pre-push checks pass npm run check
  • Linter passing via npm run lint
  • Unit & Integration tests passing via npm run test:packages
  • Docker build process passing via npm run build-client
• If this PR is still a WIP, convert to a draft
• When this PR is ready, mark it as "Ready for review"
• Changes have been manually QA'd
• Changes reviewed by at least 2 approved reviewers

References

#4340

QA Steps

1. git checkout pr_branch_name
2. npm install
3. npm run dev-reinit
4. npm run dev

List any additional steps required to QA the changes of this PR, as well as any supplemental images or videos.

Reviewers

@HexaField

[NPatel10]

Everything looks good. At one place I like to draw your attention. Let me know your thought on that

[zulqarnainhanif]

@NPatel10 @HexaField 2 issues left in this PR which i will be working at night.

• Hierarchy Tree isn't updating and showing (once you expand its view it shows up)
• Loading another scene over current scene creates the same problem we were facing before (might be some problem with scene not being unloaded properly etc)

[speigg]

One more thing; I added useHookedEffect(), which should be used for creating effects with hookstate deps. The issue being that you don't want to pass state.value as a dep if state.value refers to an object (rather than a primitive). Passing state as a dep is correct, but if state.value is never used in the component, then hookstate dependency tracking won't cause that component to rerender when that state changes. useHookEffect() fixes this.

[zulqarnainhanif]

One more thing; I added useHookedEffect(), which should be used for creating effects with hookstate deps. The issue being that you don't want to pass state.value as a dep if state.value refers to an object (rather than a primitive). Passing state as a dep is correct, but if state.value is never used in the component, then hookstate dependency tracking won't cause that component to rerender when that state changes. useHookEffect() fixes this.

@speigg Can you please point out with an example if such changes needs to be done in my PR.

[speigg]

@zulqarnainhanif In EditorContainer.ts, you added

  useEffect(() => {
     if (editorError) {
       onEditorError(editorError.value)
     }
   }, [editorError])

This should be useHookedEffect, otherwise the component won't re-render when the editorError state changes. This is the only case where it's strictly necessary in this PR, but it doesn't hurt to use useHookedEffect everywhere by default (especially if using hookstate deps), and will prevent potential bugs in the future.