naveen
(Naveen Kumar)
March 29, 2023, 4:39pm
1
Greetings to all! I'm Naveen Kumar, a second-year BTech student. I am a full-stack MERN developer who is also proficient in Python and Java.
I want to contribute to the refactoring of the class component into a functional component.
opened 08:57AM - 04 Mar 23 UTC
03 type: feature (plip)
## PLIP (Plone Improvement Proposal)
## Responsible Persons
### Proposer: … Víctor Fernández de Alba (@sneridagh)
### Seconder:
## Abstract
Refactor all the possible components in Volto that still are class-based components. Convert them to functional components, whenever possible.
## Motivation
Volto still have a number of core components that are React class-based components. This prevents the use of hooks in them, and newest DX on them.
The idea is also while moving to them, use hooks to abstract the functionality present in Redux and in data fetching so in a near future we can easily switch using the hooks to use other props provider.
## Assumptions
No assumptions.
## Proposal & Implementation
Refactor should be done carefully and providing Cypress (acceptance) tests where they do not exist. The lifecycle of the components should be preserved while watching out for edge cases and UX problems.
## Deliverables
It should be delivered all at once, as a major breaking change. Ideally, we _won't_ change the contract of any of the components, so no new props passed down, no return anything to the tree that we were not returning before, unless it's justified.
If the contract has to be broken, then it must be properly documented and exposed in the upgrade guide.
The refactored components. Here there is a preliminary list, subject to change:
- [ ] src/components/theme/Comments/CommentEditModal.jsx
- [ ] src/components/theme/Comments/Comments.jsx
- [ ] src/components/theme/App/App.jsx
- [ ] src/components/theme/ContactForm/ContactForm.jsx
- [ ] src/components/theme/Navigation/Navigation.jsx
- [ ] src/components/theme/Sitemap/Sitemap.jsx
- [ ] src/components/theme/Logout/Logout.jsx
- [ ] src/components/theme/Search/SearchTags.jsx
- [ ] src/components/theme/Search/Search.jsx
- [ ] src/components/theme/Register/Register.jsx
- [ ] src/components/theme/PasswordReset/PasswordReset.jsx
- [ ] src/components/theme/PasswordReset/RequestPasswordReset.jsx
- [ ] src/components/theme/View/View.jsx
- [ ] src/components/theme/View/AlbumView.jsx
- [ ] src/components/theme/View/LinkView.jsx
- [ ] src/components/theme/SearchWidget/SearchWidget.jsx
- [ ] src/components/theme/Anontools/Anontools.jsx
- [ ] src/components/theme/Breadcrumbs/Breadcrumbs.jsx
- [ ] src/components/theme/Login/Login.jsx
- [ ] src/components/theme/Header/Header.jsx
- [ ] src/components/manage/Blocks/Maps/Edit.jsx
- [ ] src/components/manage/Blocks/LeadImage/Edit.jsx
- [ ] src/components/manage/Blocks/Video/Edit.jsx
- [ ] src/components/manage/Blocks/ToC/Edit.jsx
- [ ] src/components/manage/Blocks/HTML/Edit.jsx
- [ ] src/components/manage/Blocks/Image/Edit.jsx
- [ ] src/components/manage/Blocks/Search/widgets/SelectMetadataField.jsx
- [ ] src/components/manage/Blocks/Table/Cell.jsx
- [ ] src/components/manage/Blocks/Table/Edit.jsx
- [ ] src/components/manage/Blocks/Text/Edit.jsx
- [ ] src/components/manage/Blocks/HeroImageLeft/Edit.jsx
- [ ] src/components/manage/Blocks/Block/Edit.jsx
- [ ] src/components/manage/Sidebar/ObjectBrowserBody.jsx
- [ ] src/components/manage/Sidebar/Sidebar.jsx
- [ ] src/components/manage/Contents/ContentsTagsModal.jsx
- [ ] src/components/manage/Contents/ContentsUploadModal.jsx
- [ ] src/components/manage/Contents/ContentsRenameModal.jsx
- [ ] src/components/manage/Contents/ContentsWorkflowModal.jsx
- [ ] src/components/manage/Contents/Contents.jsx
- [ ] src/components/manage/Contents/ContentsPropertiesModal.jsx
- [ ] src/components/manage/Preferences/PersonalInformation.jsx
- [ ] src/components/manage/Preferences/PersonalPreferences.jsx
- [ ] src/components/manage/Preferences/ChangePassword.jsx
- [ ] src/components/manage/Form/ModalForm.jsx
- [ ] src/components/manage/Form/Form.jsx
- [ ] src/components/manage/AnchorPlugin/components/LinkButton/index.jsx
- [ ] src/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm.jsx
- [ ] src/components/manage/Messages/Messages.jsx
- [ ] src/components/manage/Sharing/Sharing.jsx
- [ ] src/components/manage/Controlpanels/ContentType.jsx
- [ ] src/components/manage/Controlpanels/Controlpanels.jsx
- [ ] src/components/manage/Controlpanels/ContentTypes.jsx
- [ ] src/components/manage/Controlpanels/Aliases.jsx
- [ ] src/components/manage/Controlpanels/DatabaseInformation.jsx
- [ ] src/components/manage/Controlpanels/UndoControlpanel.jsx
- [ ] src/components/manage/Controlpanels/Groups/GroupsControlpanel.jsx
- [ ] src/components/manage/Controlpanels/Groups/RenderGroups.jsx
- [ ] src/components/manage/Controlpanels/Users/RenderUsers.jsx
- [ ] src/components/manage/Controlpanels/Users/UsersControlpanel.jsx
- [ ] src/components/manage/Controlpanels/ContentTypeSchema.jsx
- [ ] src/components/manage/Controlpanels/Controlpanel.jsx
- [ ] src/components/manage/Controlpanels/AddonsControlpanel.jsx
- [ ] src/components/manage/Controlpanels/ModerateComments.jsx
- [ ] src/components/manage/Controlpanels/ContentTypeLayout.jsx
- [ ] src/components/manage/Delete/Delete.jsx
- [ ] src/components/manage/Toolbar/More.jsx
- [ ] src/components/manage/Toolbar/PersonalTools.jsx
- [ ] src/components/manage/Toolbar/Toolbar.jsx
- [ ] src/components/manage/Diff/Diff.jsx
- [ ] src/components/manage/Edit/Edit.jsx
- [ ] src/components/manage/Add/Add.jsx
- [ ] src/components/manage/Workflow/Workflow.jsx
- [ ] src/components/manage/History/History.jsx
- [ ] src/components/manage/Actions/Actions.jsx
- [ ] src/components/manage/Display/Display.jsx
- [ ] src/components/manage/Aliases/Aliases.jsx
- [ ] src/components/manage/Widgets/SelectWidget.jsx
- [ ] src/components/manage/Widgets/ReferenceWidget.jsx
- [ ] src/components/manage/Widgets/FormFieldWrapper.jsx
- [ ] src/components/manage/Widgets/IdWidget.jsx
- [ ] src/components/manage/Widgets/QueryWidget.jsx
- [ ] src/components/manage/Widgets/WysiwygWidget.jsx
- [ ] src/components/manage/Widgets/ArrayWidget.jsx
- [ ] src/components/manage/Widgets/ObjectBrowserWidget.jsx
- [ ] src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx
- [ ] src/components/manage/Widgets/RecurrenceWidget/WeekdayOfTheMonthIndexField.jsx
- [ ] src/components/manage/Widgets/DatetimeWidget.jsx
- [ ] src/components/manage/Widgets/TokenWidget.jsx
- [ ] src/components/manage/Widgets/SchemaWidget.jsx
- [ ] src/components/manage/Widgets/SelectAutoComplete.jsx
- [ ] src/components/manage/Widgets/TextWidget.jsx
- [ ] src/helpers/AsyncConnect/AsyncConnect.jsx
- [ ] src/helpers/Html/Html.jsx
- [ ] src/helpers/BodyClass/BodyClass.jsx
## Risks
The lifecycle of a component could easily be changed if the refactor is not done carefully and giving attention to details, that's why we should provide acceptance tests and heavy QA should be done while doing it.
## Participants
Víctor Fernández de Alba (@sneridagh)
Anyone who would like to help and take over, will be appreciated.
I've been learning and practicing plone-volto for the past 20 days.
In order to improve my chances of being chosen as a contributor and to get more involved in development, I now want to be active in the Plone community.
I want to be a complete open-source contributor.
This extensive codebase has a lot to teach me.
and I am certain that I will be a valuable student for this.
I'm hoping for the best!
@SaiRev0 @Mridul004