Use redux hooks on the navbar component

frontend/js/components/navbar.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Route } from "react-router-dom";
-import { connect } from "react-redux";
+import { useSelector } from "react-redux";
 import { LinkContainer } from "react-router-bootstrap";
 import PropTypes from "prop-types";
 
@@ -8,24 +8,15 @@ import Nav from "react-bootstrap/Nav";
 import Navbar from "react-bootstrap/Navbar";
 import NavDropdown from "react-bootstrap/NavDropdown";
 
-const mapStateToProps = (state) => {
+const AppNavBar = () => {
-  let torrentCount = 0;
-  if (
-    state.torrentStore.has("torrents") &&
-    state.torrentStore.get("torrents") !== undefined
-  ) {
-    torrentCount = state.torrentStore.get("torrents").size;
-  }
-  return {
-    username: state.userStore.get("username"),
-    isAdmin: state.userStore.get("isAdmin"),
-    torrentCount: torrentCount,
-  };
-};
-
-const AppNavBar = (props) => {
   const [expanded, setExpanded] = useState(false);
 
+  const username = useSelector((state) => state.userStore.get("username"));
+  const isAdmin = useSelector((state) => state.userStore.get("isAdmin"));
+  const torrentCount = useSelector(
+    (state) => state.torrentStore.get("torrents").size
+  );
+
   return (
     <Navbar
       fixed="top"
@@ -45,7 +36,7 @@ const AppNavBar = (props) => {
           <MoviesDropdown />
           <ShowsDropdown />
           <WishlistDropdown />
-          <TorrentsDropdown torrentsCount={props.torrentCount} />
+          <TorrentsDropdown torrentsCount={torrentCount} />
         </Nav>
         <Nav>
           <Route
@@ -70,20 +61,16 @@ const AppNavBar = (props) => {
               />
             )}
           />
-          <UserDropdown username={props.username} isAdmin={props.isAdmin} />
+          <UserDropdown username={username} isAdmin={isAdmin} />
         </Nav>
       </Navbar.Collapse>
     </Navbar>
   );
 };
 AppNavBar.propTypes = {
-  torrentCount: PropTypes.number.isRequired,
-  username: PropTypes.string.isRequired,
-  isAdmin: PropTypes.bool.isRequired,
   history: PropTypes.object,
 };
-
+export default AppNavBar;
-export default connect(mapStateToProps)(AppNavBar);
 
 const Search = ({ path, placeholder, setExpanded, history }) => {
   const [search, setSearch] = useState("");