Merge pull request #136 from samwel141/v2

fix the number in the red dot of trust relationships

src/components/Routes/ClientRoutes.test.js

@@ -5,6 +5,7 @@ import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@mui/material';
 import theme from '../UI/theme';
 import AuthContext from '../../store/auth-context';
+import { TrustRelationshipsProvider } from '../../store/TrustRelationshipsContext';
 
 jest.mock('react-secure-storage', () => {
   return {
@@ -24,7 +25,9 @@ describe('ClientRoutes component', () => {
       <ThemeProvider theme={theme}>
         <Router>
           <AuthContext.Provider value={testContext}>
+            <TrustRelationshipsProvider>
             {props.children}
+            </TrustRelationshipsProvider>
           </AuthContext.Provider>
         </Router>
       </ThemeProvider>

src/components/layout/Layout.js

@@ -4,10 +4,14 @@ import { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { StyledContent } from "./LayoutStyled";
 import Menu from "./Menu/Menu";
+import { useTrustRelationshipsContext } from "../../store/TrustRelationshipsContext";
+
 
 const Layout = ({ children }) => {
   const [open, setOpen] = useState(false);
 
+  const { count } = useTrustRelationshipsContext();
+
   const handleDrawerOpen = () => {
     setOpen(true);
   };
@@ -40,6 +44,7 @@ const Layout = ({ children }) => {
     <Box sx={{ display: "flex" }}>
       <Menu
         open={open}
+        count={count}
         handleDrawerClose={handleDrawerClose}
         handleDrawerOpen={handleDrawerOpen}
       />

src/components/layout/Menu/Menu.js

@@ -6,9 +6,8 @@ import * as React from 'react';
 import MenuItem from './MenuItem/MenuItem';
 import { DrawerHeaderStyled, DrawerStyled } from './MenuStyled';
 import TopMenu from './TopMenu/TopMenu';
-import { TrustRelationshipsProvider } from '../../../store/TrustRelationshipsContext';
 
-const Menu = ({ open, handleDrawerClose, handleDrawerOpen }) => {
+const Menu = ({ open, handleDrawerClose, handleDrawerOpen, count }) => {
   const theme = useTheme();
 
   return (
@@ -24,9 +23,7 @@ const Menu = ({ open, handleDrawerClose, handleDrawerOpen }) => {
             )}
           </IconButton>
         </DrawerHeaderStyled>
-        <TrustRelationshipsProvider>
-          <MenuItem open={open} />
-        </TrustRelationshipsProvider>
+          <MenuItem count={count} open={open} />
       </DrawerStyled>
     </>
   );

src/components/layout/Menu/MenuItem/MenuItem.js

@@ -6,12 +6,10 @@ import HandshakeIcon from '@mui/icons-material/Handshake';
 import DriveFileMoveIcon from '@mui/icons-material/DriveFileMove';
 import * as React from 'react';
 import LinkItem from './LinkItem';
-import { useTrustRelationshipsContext } from '../../../../store/TrustRelationshipsContext';
 import { useState } from 'react';
 
-const MenuItem = ({ open }) => {
+const MenuItem = ({ open, count }) => {
   const [isHovered, setIsHovered] = useState(false);
-  const { count } = useTrustRelationshipsContext();
 
     return (
     <>