Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React component conversion(class to functional) - 1 #3208

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from

Conversation

nahbee10
Copy link
Collaborator

@nahbee10 nahbee10 commented Aug 5, 2024

Fixes #2709

Changes:

  • converted IDE/components/Editor/index.jsx to use React functional component

I have verified that this pull request:

  • has no linting errors (npm run lint)
  • has no test errors (npm run test)
  • is from a uniquely-named feature branch and is up to date with the develop branch.
  • is descriptively named and links to an issue number, i.e. Fixes #123

Copy link

welcome bot commented Aug 5, 2024

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already.

@nahbee10 nahbee10 marked this pull request as draft August 5, 2024 21:54
@nahbee10 nahbee10 requested a review from khanniie August 5, 2024 21:57
Copy link

release-com bot commented Aug 5, 2024

Release Environments

This Environment is provided by Release, learn more!
To see the status of the Environment click on Environment Status below.

🔧Environment Status : https://app.release.com/public/Processing%20Foundation/env-3a3542f66b

@nahbee10 nahbee10 requested a review from raclim August 6, 2024 02:47
@nahbee10 nahbee10 marked this pull request as ready for review August 6, 2024 02:47
@nahbee10 nahbee10 changed the title [WIP] React component conversion(class to functional) - 1 React component conversion(class to functional) - 1 Aug 6, 2024
khanniie referenced this pull request in nahbee10/p5.js-web-editor Aug 7, 2024
@@ -146,168 +336,135 @@ class Editor extends React.Component {
}
});

this.hinter = new Fuse(hinter.p5Hinter, {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

did we lose this in the conversion? do we not need it anymore?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if we don't need it anymore, let's also remove it from the dependencies~

} else {
cm.replaceSelection(' '.repeat(INDENTATION_AMOUNT));
_cmInstance.replaceSelection(' '.repeat(INDENTATION_AMOUNT));
Copy link
Collaborator

@khanniie khanniie Aug 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure why eslint didn't catch this but i don't think this codebase uses underscores for private variables! looks like they are following the airbnb style guide: https://github.com/airbnb/javascript?tab=readme-ov-file#naming--leading-underscore

this comment applies to _cmInstance but also all others with underscores

I do see that the original file had underscores too so i guess it's up to us if we want to re-align the code with the style guide named in the contributor docs (my perference) or not change things up too much : P @raclim any thoughts?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this rule is turned off in our eslint configuration 🤔 but it makes sense to me to aim to align with the style guide as much as possible!

[`${metaKey}-K`]: (cm, event) =>
cm.state.colorpicker.popup_color_picker({ length: 0 }),
[`${metaKey}-.`]: 'toggleComment' // Note: most adblockers use the shortcut ctrl+.
[`${metaKey}-K`]: (_cmInstMetaKey, event) =>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we keep the comments from cassie and other notes? will probably be nice for the future : )

@khanniie
Copy link
Collaborator

khanniie commented Aug 8, 2024

Left a few comments but overall looks great! : D thanks nahee!

@khanniie
Copy link
Collaborator

khanniie commented Aug 8, 2024

When I test the staging link, something kind of crazy happens when i hit tidy code :O
Screenshot 2024-08-08 at 11 26 28 AM

@khanniie
Copy link
Collaborator

khanniie commented Aug 8, 2024

I think we may have lost the error highlighting as well -- left is this branch and right is what's live
Screenshot 2024-08-08 at 11 28 20 AM

@raclim
Copy link
Collaborator

raclim commented Aug 8, 2024

Just to add, I'm on the staging environment and am having trouble switching between different files in the left-hand navigation as well!

test_editor_component.mov

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Changing class component to Functional Component.
3 participants