Replace mapStateToProps with hook

packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx

@@ -2,12 +2,12 @@ import React from 'react';
 import { Menu } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import AppContext from '../../../components/AppContext';
 import appLogo from '../../../assets/images/app_logo.png';
 
-const MainLayoutMenu = (props) => {
-  const { user: { hasSignedUp } } = props;
+const MainLayoutMenu = () => {
+  const hasSignedUp = useSelector((state) => state.user.hasSignedUp);
   const history = useHistory();
   const { t } = useTranslation();
 
@@ -24,7 +24,7 @@ const MainLayoutMenu = (props) => {
                       <img src={appLogo} alt="app_logo" />
                   </Menu.Item>
                   <Menu.Menu position="right">
-                      {hasSignedUp && history.location.pathname === '/' && (
+                      {hasSignedUp && history.location.pathname === '/home' && (
                           <Menu.Item
                             link
                             name="create-topic"
@@ -63,8 +63,4 @@ const MainLayoutMenu = (props) => {
   );
 };
 
-const mapStateToProps = (state) => ({
-  user: state.user,
-});
-
-export default connect(mapStateToProps)(MainLayoutMenu);
+export default MainLayoutMenu;

packages/concordia-app/src/views/Home/Board/index.jsx

@@ -1,11 +1,12 @@
 import React, { useMemo, useState } from 'react';
 import { Header } from 'semantic-ui-react';
-import { connect } from 'react-redux';
 import _ from 'lodash';
 import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
 
 const Board = (props) => {
-  const { numberOfTopics, userHasSignedUp } = props;
+  const { numberOfTopics } = props;
+  const userHasSignedUp = useSelector((state) => state.user.hasSignedUp);
   const [topicIds, setTopicIds] = useState([]);
   const { t } = useTranslation();
 
@@ -46,8 +47,4 @@ const Board = (props) => {
   );
 };
 
-const mapStateToProps = (state) => ({
-  userHasSignedUp: state.user.hasSignedUp,
-});
-
-export default connect(mapStateToProps)(Board);
+export default Board;

packages/concordia-app/src/views/Home/index.jsx

@@ -2,12 +2,12 @@ import React, {
   useContext, useEffect, useMemo, useState,
 } from 'react';
 import { Container } from 'semantic-ui-react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import AppContext from '../../components/AppContext';
 import Board from './Board';
 
-const Home = (props) => {
-  const { getNumberOfTopicsResults } = props;
+const Home = () => {
+  const getNumberOfTopicsResults = useSelector((state) => state.contracts.Forum.getNumberOfTopics);
   const { drizzle: { contracts: { Forum: { methods: { getNumberOfTopics } } } } } = useContext(AppContext.Context);
   const [numberOfTopicsCallHash, setNumberOfTopicsCallHash] = useState('');
 
@@ -27,8 +27,4 @@ const Home = (props) => {
   );
 };
 
-const mapStateToProps = (state) => ({
-  getNumberOfTopicsResults: state.contracts.Forum.getNumberOfTopics,
-});
-
-export default connect(mapStateToProps)(Home);
+export default Home;