From ffb12bc89da69122d6087fd2e7f4bd8fd597e812 Mon Sep 17 00:00:00 2001
From: Riku Rauhala <riku@rauhala.io>
Date: Mon, 14 Oct 2024 09:54:35 +0300
Subject: [PATCH] [Course statistics] Summary tab: replace connect with hooks

---
 .../CourseStatistics/SummaryTab/index.jsx     | 19 +++++++++----------
 .../src/components/CourseStatistics/index.jsx |  2 +-
 .../src/components/ErrorBoundary/index.jsx    |  9 +++++++--
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/services/frontend/src/components/CourseStatistics/SummaryTab/index.jsx b/services/frontend/src/components/CourseStatistics/SummaryTab/index.jsx
index c27465835a..7131af154a 100644
--- a/services/frontend/src/components/CourseStatistics/SummaryTab/index.jsx
+++ b/services/frontend/src/components/CourseStatistics/SummaryTab/index.jsx
@@ -1,5 +1,5 @@
 import { flatten } from 'lodash'
-import { connect, useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { Form, Header, Label, Segment } from 'semantic-ui-react'
 
 import { getFullStudyProgrammeRights } from '@/common'
@@ -20,18 +20,19 @@ import { DataExport } from './DataExport'
 const unObjectifyProperty = ({ obj, property }) => {
   const suspectField = obj[property]
   if (typeof suspectField === 'object' && suspectField !== null) {
-    if (suspectField.en) return { ...obj, [property]: suspectField.en }
-
+    if (suspectField.en) {
+      return { ...obj, [property]: suspectField.en }
+    }
     throw Error(`Invalid object being tried to pass to React: ${JSON.stringify(suspectField)}`)
   }
-
   return { ...obj, [property]: suspectField }
 }
 
-const SummaryTab = ({ setValue, onClickCourse }) => {
+export const SummaryTab = ({ onClickCourse }) => {
   const { roles, programmeRights } = useGetAuthorizedUserQuery()
   const fullStudyProgrammeRights = getFullStudyProgrammeRights(programmeRights)
   const userHasAccessToAllStats = userHasAccessToAllCourseStats(roles, fullStudyProgrammeRights)
+  const dispatch = useDispatch()
   const programmes = useSelector(state => getAllStudyProgrammes(state))
   const form = useSelector(({ courseSummaryForm }) => courseSummaryForm)
   const statistics = useSelector(state => summaryStatistics(state, userHasAccessToAllStats))
@@ -43,7 +44,7 @@ const SummaryTab = ({ setValue, onClickCourse }) => {
     if ((!form.programmes.includes(ALL.value) && value.includes(ALL.value)) || value.length === 0) {
       selected = [ALL.value]
     }
-    setValue(name, selected)
+    dispatch(setValue(name, selected))
   }
 
   const data = statistics.map(stat => {
@@ -75,7 +76,7 @@ const SummaryTab = ({ setValue, onClickCourse }) => {
             <>
               <Header as="h4">Filter statistics by study programmes</Header>
               <ProgrammeDropdown
-                label="Study programmes:"
+                label="Study programmes"
                 name="programmes"
                 onChange={handleChange}
                 options={options}
@@ -84,7 +85,7 @@ const SummaryTab = ({ setValue, onClickCourse }) => {
             </>
           )}
           <Form.Field>
-            <label>Timeframe:</label>
+            <label>Timeframe</label>
             <Label.Group>
               {queryInfo.timeframe.map(objBeforeUbObjectifying => {
                 const obj = unObjectifyProperty({ obj: objBeforeUbObjectifying, property: 'name' })
@@ -110,5 +111,3 @@ const SummaryTab = ({ setValue, onClickCourse }) => {
     </div>
   )
 }
-
-export const ConnectedSummaryTab = connect(null, { setValue })(SummaryTab)
diff --git a/services/frontend/src/components/CourseStatistics/index.jsx b/services/frontend/src/components/CourseStatistics/index.jsx
index 8abcb6cd70..5a7ff1cd91 100644
--- a/services/frontend/src/components/CourseStatistics/index.jsx
+++ b/services/frontend/src/components/CourseStatistics/index.jsx
@@ -13,7 +13,7 @@ import { userHasAccessToAllCourseStats } from './courseStatisticsUtils'
 import { FacultyLevelStatistics } from './FacultyLevelStatistics'
 import { SearchForm } from './SearchForm'
 import { SingleCourseTab } from './SingleCourseTab'
-import { ConnectedSummaryTab as SummaryTab } from './SummaryTab'
+import { SummaryTab } from './SummaryTab'
 import './courseStatistics.css'
 
 const MENU = {
diff --git a/services/frontend/src/components/ErrorBoundary/index.jsx b/services/frontend/src/components/ErrorBoundary/index.jsx
index af47bb7b12..640a874d06 100644
--- a/services/frontend/src/components/ErrorBoundary/index.jsx
+++ b/services/frontend/src/components/ErrorBoundary/index.jsx
@@ -30,7 +30,9 @@ class ErrorBoundary extends Component {
     const { actionHistory } = this.props
     const cleanedActionHistory = actionHistory ? actionHistory.map(({ payload, ...rest }) => rest) : []
     const encoder = new TextEncoder()
-    if (sent === error) return
+    if (sent === error) {
+      return
+    }
     sent = error
     // Sentry's maximum for an individual extra data item is 16kB so let's make sure we don't exceed that
     while (encoder.encode(JSON.stringify(cleanedActionHistory)).length > 16000) {
@@ -48,7 +50,9 @@ class ErrorBoundary extends Component {
   render() {
     const { hasError } = this.state
     const { children } = this.props
-    if (!hasError) return children
+    if (!hasError) {
+      return children
+    }
 
     return (
       <Suspense fallback={<Loader active inline="centered" />}>
@@ -57,6 +61,7 @@ class ErrorBoundary extends Component {
     )
   }
 }
+
 const mapStateToProps = ({ actionHistory }) => ({ actionHistory })
 
 export const ConnectedErrorBoundary = connect(mapStateToProps, null)(ErrorBoundary)