Rewrite SatellitesHeader to functional component using hooks.

Author: mkrauskopf

src/components/pages/solar-system/SatellitesHeader.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import { connect } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
-import { IPlanet } from './Planets'
 import { IAppState } from './reducer'
 import * as S from './styles'
 import * as A from './actions'
@@ -10,56 +9,41 @@ interface IOwnProp {
   numberOfSatellites: number
 }
 
-interface IReduxProps {
-  selectedPlanet?: IPlanet
-  dispatchUnselectedPlanet: typeof A.unselectPlanet
+const SatellitesHeader = (props: IOwnProp) => {
+  const dispatch = useDispatch()
+  const selectedPlanet = useSelector((state: IAppState) => state.selectedPlanet)
+
+  const { numberOfSatellites } = props
+  const headerElement = selectedPlanet ? (
+    satellitesForPlanetInfo(selectedPlanet.name, numberOfSatellites)
+  ) : (
+    <S.HeaderText>Satellites of all planets</S.HeaderText>
+  )
+
+  return (
+    <S.SatellitesContainer>
+      <S.HeaderContainer>
+        {headerElement}
+        <S.PlainText> ({numberOfSatellites} shown) </S.PlainText>
+        {selectedPlanet ? (
+          <S.LinkButton onClick={() => dispatch(A.unselectPlanet())}>(show all satellites)</S.LinkButton>
+        ) : (
+          <S.PlainText>(select a planet above to filter satellites)</S.PlainText>
+        )}
+      </S.HeaderContainer>
+    </S.SatellitesContainer>
+  )
 }
 
-class SatellitesHeader extends React.Component<IOwnProp & IReduxProps> {
-  private satellitesForPlanet = (planetName: String, numberOfSatellites: number) =>
-    numberOfSatellites === 0 ? (
-      <S.HeaderText>
-        Planet <S.Text highlight>{planetName}</S.Text> does not have any satellites
-      </S.HeaderText>
-    ) : (
-      <S.HeaderText>
-        Satellites of planet <S.Text highlight>{planetName}</S.Text>
-      </S.HeaderText>
-    )
-
-  private allSatellites = <S.HeaderText>Satellites of all planets</S.HeaderText>
-
-  render(): React.ReactNode {
-    const { selectedPlanet, numberOfSatellites, dispatchUnselectedPlanet } = this.props
-    const headerElement = selectedPlanet
-      ? this.satellitesForPlanet(selectedPlanet.name, numberOfSatellites)
-      : this.allSatellites
-
-    return (
-      <S.SatellitesContainer>
-        <S.HeaderContainer>
-          {headerElement}
-          <S.PlainText> ({numberOfSatellites} shown) </S.PlainText>
-          {selectedPlanet ? (
-            <S.LinkButton onClick={dispatchUnselectedPlanet}>(show all satellites)</S.LinkButton>
-          ) : (
-            <S.PlainText>(select a planet above to filter satellites)</S.PlainText>
-          )}
-        </S.HeaderContainer>
-      </S.SatellitesContainer>
-    )
-  }
-}
-
-const mapStateToProps = (state: IAppState) => ({
-  selectedPlanet: state.selectedPlanet
-})
-
-const mapDispatchToProps = {
-  dispatchUnselectedPlanet: A.unselectPlanet
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(SatellitesHeader)
+const satellitesForPlanetInfo = (planetName: String, numberOfSatellites: number) =>
+  numberOfSatellites === 0 ? (
+    <S.HeaderText>
+      Planet <S.Text highlight>{planetName}</S.Text> does not have any satellites
+    </S.HeaderText>
+  ) : (
+    <S.HeaderText>
+      Satellites of planet <S.Text highlight>{planetName}</S.Text>
+    </S.HeaderText>
+  )
+
+export default React.memo(SatellitesHeader)