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:

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

Checklist for legacy classes to be converted:

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