WikiEduDashboard icon indicating copy to clipboard operation
WikiEduDashboard copied to clipboard

Published 20 hours ago • verified publisher icon WikiEducationFoundation

Component refactor for React class components

Open Aminehassou opened this issue 1 year ago • 50 comments

NOTE TO NEW CONTRIBUTORS

Please only convert one component; choose a different issue after you've completed one. These are low-priority refactoring tasks, but they still require code review and careful checking for regressions and errors. In your PR, describe the manual testing you did to ensure that the component is still working the same way after the refactor, and include before/after screenshots of that show the component as it is used in the app. If the component is used many places, screenshots of multiple different uses is helpful.

Current Behavior:

At the moment, the React side of the codebase still uses around 163 class components. 134 of those class components use the legacy createReactClass method while the other 29 class components use the newer class definitions. The 29 class components should be the main focus for the refactor. Once those are done, we can move on to the more legacy classes

Desired Behavior:

Preferably, we want to only use functional components. Thus, converting the remaining class components into functional components would be a nice code quality improvement.

Checklist for newer classes to be converted:

  • [x] AdminAlerts
  • [x] CampaignAlerts
  • [x] CourseAlertsList
  • [x] TaggedCourseAlerts
  • [x] BadWorkAlert
  • [x] ArticleViewer
  • [x] AssignButton
  • [x] LanguagePicker
  • [x] NotificationsBell
  • [x] SyllabusUpload
  • [x] ProgressTracker
  • [x] Assignment
  • [x] MyArticlesContainer
  • [x] MyExercisesContainer
  • [x] StudentRevisionsList
  • [x] EnrollButton
  • [x] Articles
  • [x] Overview
  • [x] StudentDrawer
  • [x] DeleteNote
  • [x] NewReplyForm
  • [x] Sidebar
  • [x] TicketShowHandler
  • [x] TicketsHandler
  • [x] Upload
  • [x] FollowUpQuestionResults
  • [x] QuestionResults
  • [x] RangeGraph
  • [x] TextResults

Checklist for legacy classes to be converted:

  • [x] ActivityHandler
  • [x] ActivityTableRow
  • [x] ActivityTable
  • [x] DidYouKnowHandler
  • [x] PlagiarismHandler
  • [x] RecentEditsHandler
  • [x] RecentUploadsHandlerBase
  • [x] AlertsHandler
  • [ ] ArticleFinderRow
  • [ ] ArticleFinder
  • [ ] AddAvailableArticles
  • [x] ArticleGraphs
  • [ ] ArticleList
  • [x] Article
  • [ ] ArticlesHandler
  • [x] AvailableArticle
  • [ ] AvailableArticles
  • [ ] CourseOresPlot
  • [ ] CourseQualityProgressGraph
  • [ ] EditSizeGraph
  • [ ] Wp10Graph
  • [x] AssignmentList
  • [ ] Assignment
  • [ ] CampaignOresPlot
  • [x] Campaign
  • [ ] AddCategoryButton
  • [x] CategoryHandler
  • [x] AcademicSystem
  • [x] Affix
  • [ ] Calendar
  • [ ] Checkbox
  • [x] Confirm
  • [ ] DatePicker
  • [ ] Feedback
  • [x] FinalArticleChecklist
  • [ ] GetHelpButton
  • [ ] List
  • [x] MainspaceChecklist
  • [ ] Modal
  • [ ] MultiSelectField
  • [x] Notifications
  • [x] PeerReviewChecklist
  • [ ] TextAreaInput
  • [ ] TextInput
  • [ ] WeekdayPicker
  • [ ] WikiSelect
  • [ ] CourseAlert
  • [ ] CourseAlerts
  • [ ] Course
  • [ ] CourseCreator
  • [ ] NewAccountButton
  • [ ] Conditional
  • [ ] EditableRedux
  • [ ] Expandable
  • [ ] InputHOC
  • [ ] PopoverExpandable
  • [x] CustomLink
  • [ ] HamburgerMenu
  • [ ] Nav
  • [x] Finished
  • [ ] Form
  • [x] Intro
  • [x] Permissions
  • [ ] OnboardingSupplementary
  • [ ] AvailableActions
  • [x] CampaignEditable
  • [ ] CourseClonedModal
  • [ ] CourseStatsDownloadModal
  • [ ] CourseTypeSelector
  • [x] Description
  • [ ] Details
  • [ ] EmbedStatsButton
  • [x] GreetStudentsButton
  • [ ] Milestones
  • [ ] Overview
  • [ ] SalesforceLink
  • [x] StatisticsUpdateInfo
  • [x] TagEditable
  • [ ] YesNoSelector
  • [ ] DiffViewer
  • [ ] RevisionList
  • [ ] RevisionHandler
  • [ ] SettingsHandler
  • [x] AddAdminButton
  • [ ] AddAdminForm
  • [x] AddSpecialUserButton
  • [ ] AddSpecialUserForm
  • [ ] AdminUser
  • [ ] CourseCreationSettingsForm
  • [ ] DefaultCampaignForm
  • [ ] SalesforceCredentialsForm
  • [ ] SpecialUser
  • [x] UpdateCourseCreationSettings
  • [x] UpdateDefaultCampaignSetting
  • [x] UpdateSalesforceCredentials
  • [ ] RandomPeerAssignButton
  • [ ] Student (in Articles/SelectedStudent/ExercisesList/StudentExercise)
  • [ ] StudentsTabHandler
  • [ ] Student (in shared/StudentList/Student)
  • [ ] PossiblePlagiarismHandler
  • [ ] SuspectedPlagiarismList
  • [x] BlockTypeSelect
  • [ ] Block
  • [ ] EmptyWeek
  • [ ] Meetings
  • [ ] TimelineHandler
  • [ ] Timeline
  • [ ] Week
  • [ ] TrainingModules
  • [ ] TrainingModulesViewMode
  • [ ] UploadList
  • [ ] UploadViewer
  • [ ] UploadsHandler
  • [x] ContributionStats
  • [x] CourseDetails
  • [x] InstructorStats
  • [x] UserProfile
  • [x] UserTrainingStatus
  • [x] UserUploads
  • [ ] CoursesTaughtGraph
  • [ ] StudentsTaughtGraph
  • [ ] FormPanel
  • [ ] Option
  • [ ] Panel
  • [ ] SummaryPanel
  • [ ] Wizard
  • [ ] PopoverExample
  • [ ] Quiz
  • [x] SlideLink
  • [ ] SlideMenu
  • [ ] TrainingModuleHandler

Aminehassou avatar May 15 '23 16:05 Aminehassou

hi @Aminehassou Can I contribute to the task if it doesn't affect your GSOC?

adityagarg06 avatar Sep 12 '23 13:09 adityagarg06

@adityagarg06 Go for it! My GSOC is already over.

Aminehassou avatar Sep 12 '23 19:09 Aminehassou

hi, I came across this open source project issue for react components migration and I wanted to contribute also, but am using windows and it seems like setting up the project locally to start contributing is basically not for windows user and. Need help

amjido-01 avatar Sep 25 '23 11:09 amjido-01

@amjido-01 I'd recommend following this guide: https://github.com/WikiEducationFoundation/WikiEduDashboard/blob/master/docs/setup.md You can setup the project on Windows using WSL2

Aminehassou avatar Sep 25 '23 11:09 Aminehassou

Thanks for your quick response Amine Hassan, I have went through the Readme file for using the WLS2 and I will try to get it up and running as soon as possible and if I get stuck, please I will let you know so you can help me out. Thank you.

On Mon, Sep 25, 2023, 12:53 PM Amine Hassou @.***> wrote:

@amjido-01 https://github.com/amjido-01 I'd recommend following this guide:

https://github.com/WikiEducationFoundation/WikiEduDashboard/blob/master/docs/setup.md You can setup the project on Windows using WSL2

— Reply to this email directly, view it on GitHub https://github.com/WikiEducationFoundation/WikiEduDashboard/issues/5393#issuecomment-1733513959, or unsubscribe https://github.com/notifications/unsubscribe-auth/AW4RYGNBEEVOI4B6RETOLODX4FWCTANCNFSM6AAAAAAYCO6CH4 . You are receiving this because you were mentioned.Message ID: @.*** com>

amjido-01 avatar Sep 25 '23 14:09 amjido-01

i will be working on some of the conversion

justiceotuya avatar Oct 03 '23 13:10 justiceotuya

@Aminehassou can you send me a slack invite?

justiceotuya avatar Oct 03 '23 20:10 justiceotuya

@Aminehassou can you send me a slack invite?

Sure, I'll contact Sage to get you an invite. @ragesoss

Aminehassou avatar Oct 03 '23 20:10 Aminehassou

currently working on ArticleFinder

justiceotuya avatar Oct 03 '23 20:10 justiceotuya

Hello there, I am new to gsoc and open source. I feel like this project is a good way to start my open source journey, I am thinking of starting with converting the class based components to functional based components at first then plan on improving the ticket system search... Can I please get a slack invite?

PrathamNaveen avatar Oct 23 '23 03:10 PrathamNaveen

@PrathamNaveen please send me your email so that I can invite you.

ragesoss avatar Oct 23 '23 18:10 ragesoss

I always want to start my contribution, please someone should add to the slack

On Mon, Oct 23, 2023, 7:35 PM Sage Ross @.***> wrote:

@PrathamNaveen https://github.com/PrathamNaveen please send me your email so that I can invite you.

— Reply to this email directly, view it on GitHub https://github.com/WikiEducationFoundation/WikiEduDashboard/issues/5393#issuecomment-1775787929, or unsubscribe https://github.com/notifications/unsubscribe-auth/AW4RYGI62JY2FKVSFEYBD23YA22I3AVCNFSM6AAAAAAYCO6CH6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONZVG44DOOJSHE . You are receiving this because you were mentioned.Message ID: @.*** com>

amjido-01 avatar Oct 23 '23 19:10 amjido-01

@amjido-01 I'll need your email address.

ragesoss avatar Oct 23 '23 19:10 ragesoss

@ragesoss could you also share the slack invite with me? My email is: [email protected]. Thanks!

yellowHatpro avatar Oct 23 '23 19:10 yellowHatpro

@ragesoss My email is: [email protected]

PrathamNaveen avatar Oct 24 '23 02:10 PrathamNaveen

Here is my email: @.***

On Tue, Oct 24, 2023, 3:59 AM PrathamNaveen @.***> wrote:

@ragesoss https://github.com/ragesoss My email is: @.***

— Reply to this email directly, view it on GitHub https://github.com/WikiEducationFoundation/WikiEduDashboard/issues/5393#issuecomment-1776422054, or unsubscribe https://github.com/notifications/unsubscribe-auth/AW4RYGNCY6DQ6CA5CJII35TYA4VH5AVCNFSM6AAAAAAYCO6CH6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONZWGQZDEMBVGQ . You are receiving this because you were mentioned.Message ID: @.*** com>

amjido-01 avatar Oct 24 '23 05:10 amjido-01

@amjido-01 that didn't work

ragesoss avatar Oct 24 '23 13:10 ragesoss

what do you mean, sir. do you mean that the email did not work

amjido-01 avatar Oct 24 '23 14:10 amjido-01

what do you mean, sir. do you mean that the email did not work

No email address came through. Looks like it got censored.

ragesoss avatar Oct 24 '23 14:10 ragesoss

Ok, I actually don't know where the problem arise, but how do you think I should send the email to you. Thank you sir

On Tue, Oct 24, 2023, 3:36 PM Sage Ross @.***> wrote:

what do you mean, sir. do you mean that the email did not work

No email address came through. Looks like it got censored.

— Reply to this email directly, view it on GitHub https://github.com/WikiEducationFoundation/WikiEduDashboard/issues/5393#issuecomment-1777360110, or unsubscribe https://github.com/notifications/unsubscribe-auth/AW4RYGNTINHYLVHGSEQJQNTYA7G7XAVCNFSM6AAAAAAYCO6CH6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONZXGM3DAMJRGA . You are receiving this because you were mentioned.Message ID: @.*** com>

amjido-01 avatar Oct 24 '23 14:10 amjido-01

You can email me directly. See the CONTRIBUTING doc.

ragesoss avatar Oct 24 '23 15:10 ragesoss

Thanks, I will send it now.

On Tue, Oct 24, 2023 at 4:13 PM Sage Ross @.***> wrote:

You can email me directly. See the CONTRIBUTING doc.

— Reply to this email directly, view it on GitHub https://github.com/WikiEducationFoundation/WikiEduDashboard/issues/5393#issuecomment-1777453717, or unsubscribe https://github.com/notifications/unsubscribe-auth/AW4RYGMTRMY7N6WWINEJJJ3YA7LKTAVCNFSM6AAAAAAYCO6CH6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONZXGQ2TGNZRG4 . You are receiving this because you were mentioned.Message ID: @.*** com>

amjido-01 avatar Oct 24 '23 15:10 amjido-01

i have been trying to set up the project up and running and i have followed all the necessary guides from here https://github.com/WikiEducationFoundation/WikiEduDashboard/blob/master/docs/setup.md. but when i try to run "yarn build" get back this annoying error "Usage Error: Couldn't find the node_modules state file - running an install might help (findPackageLocation)

$ yarn run [--inspect] [--inspect-brk] [-T,--top-level] [-B,--binaries-only] <scriptName> ..." please any help will be appreciated

amjido-01 avatar Nov 02 '23 21:11 amjido-01

i have been trying to set up the project up and running and i have followed all the necessary guides from here https://github.com/WikiEducationFoundation/WikiEduDashboard/blob/master/docs/setup.md. but when i try to run "yarn build" get back this annoying error "Usage Error: Couldn't find the node_modules state file - running an install might help (findPackageLocation)

$ yarn run [--inspect] [--inspect-brk] [-T,--top-level] [-B,--binaries-only] ..." please any help will be appreciated

You must run yarn first to install the dependencies. That should populate the node modules for you.

ragesoss avatar Nov 02 '23 22:11 ragesoss

@ragesoss even when I run yarn run command then run yarn build I still encounter the same error wki

amjido-01 avatar Nov 03 '23 13:11 amjido-01

I literally don't know what is happening along the way

amjido-01 avatar Nov 03 '23 13:11 amjido-01

'yarn' is different from 'yarn run', I think.

On Fri, Nov 3, 2023, 6:12 AM amjido_01 @.***> wrote:

I literally don't know what is happening along the way

— Reply to this email directly, view it on GitHub https://github.com/WikiEducationFoundation/WikiEduDashboard/issues/5393#issuecomment-1792414789, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGPEY3KHK5HYUXQRNOYL5LYCTUS7AVCNFSM6AAAAAAYCO6CH6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJSGQYTINZYHE . You are receiving this because you were mentioned.Message ID: @.*** com>

ragesoss avatar Nov 03 '23 13:11 ragesoss

have you ran a yarn install or npm install

justiceotuya avatar Nov 03 '23 13:11 justiceotuya

'yarn' is different from 'yarn run', I think. … On Fri, Nov 3, 2023, 6:12 AM amjido_01 @.> wrote: I literally don't know what is happening along the way — Reply to this email directly, view it on GitHub <#5393 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGPEY3KHK5HYUXQRNOYL5LYCTUS7AVCNFSM6AAAAAAYCO6CH6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJSGQYTINZYHE . You are receiving this because you were mentioned.Message ID: @. com>

so, which one I'm to run. "yarn" or "yarn run" please help don't mind me because i may asked so silly questions as I'm new to open source contribution.

amjido-01 avatar Nov 03 '23 14:11 amjido-01

@justiceotuya this is what am trying to do, but it seems like to take a lot of time installing the yarn

amjido-01 avatar Nov 03 '23 14:11 amjido-01