useBlock in the survey frontend to ask users for confirmation

• use a context provider for the filter selection in the compendium frontend
• so that we can upgrade to data routers in both frontends
• so that I can useBlock in the survey frontend to ask users for confirmation when they press the back button while editing...
• and also improve the survey component to allow for rerenders because everything rerenders if navigating away is blocked.....

compendium-frontend/src/components/SectionNavigation.tsx

 import React from 'react';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { Container, Row, ButtonToolbar, Button } from 'react-bootstrap';
 import { Sections } from '../helpers/constants';
 
@@ -8,48 +8,44 @@ interface inputProps {
 }
 
 const SectionNavigation = ({ activeCategory }: inputProps) => {
+    const navigate = useNavigate();
     return (
         <Container>
             <Row>
                 <ButtonToolbar className="navbox-bar gap-2 m-3">
-                    <Link to={activeCategory === Sections.Organisation ? '.' : '/funding'}>
-                        <Button
-                            variant={'nav-box'}
-                            active={activeCategory === Sections.Organisation}>
-                            <span>{Sections.Organisation}</span>
-                        </Button>
-                    </Link>
-                    <Link to={activeCategory === Sections.Policy ? '.' : '/policy'}>
-                        <Button
-                            variant={'nav-box'}
-                            active={activeCategory === Sections.Policy}>
-                            <span>{Sections.Policy}</span>
-                        </Button>
-                    </Link>
-                    <Link to={activeCategory === Sections.ConnectedUsers ? '.' : '.'}>
-                        <Button
-                            variant={'nav-box'}
-                            active={activeCategory === Sections.ConnectedUsers}
-                            disabled={true}>
-                            <span>{Sections.ConnectedUsers}</span>
-                        </Button>
-                    </Link>
-                    <Link to={activeCategory === Sections.Network ? '.' : '.'}>
-                        <Button
-                            variant={'nav-box'}
-                            active={activeCategory === Sections.Network}
-                            disabled={true}>
-                            <span>{Sections.Network}</span>
-                        </Button>
-                    </Link>
-                    <Link to={activeCategory === Sections.Services ? '.' : '.'}>
-                        <Button
-                            variant={'nav-box'}
-                            active={activeCategory === Sections.Services}
-                            disabled={true}>
-                            <span>{Sections.Services}</span>
-                        </Button>
-                    </Link>
+                    <Button
+                        onClick={() => navigate(activeCategory === Sections.Organisation ? '.' : '/funding')}
+                        variant={'nav-box'}
+                        active={activeCategory === Sections.Organisation}>
+                        <span>{Sections.Organisation}</span>
+                    </Button>
+                    <Button
+                        onClick={() => navigate(activeCategory === Sections.Policy ? '.' : '/policy')}
+                        variant={'nav-box'}
+                        active={activeCategory === Sections.Policy}>
+                        <span>{Sections.Policy}</span>
+                    </Button>
+                    <Button
+                        onClick={() => navigate(activeCategory === Sections.ConnectedUsers ? '.' : '.')}
+                        variant={'nav-box'}
+                        active={activeCategory === Sections.ConnectedUsers}
+                        disabled={true}>
+                        <span>{Sections.ConnectedUsers}</span>
+                    </Button>
+                    <Button
+                        onClick={() => navigate(activeCategory === Sections.Network ? '.' : '.')}
+                        variant={'nav-box'}
+                        active={activeCategory === Sections.Network}
+                        disabled={true}>
+                        <span>{Sections.Network}</span>
+                    </Button>
+                    <Button
+                        onClick={() => navigate(activeCategory === Sections.Services ? '.' : '.')}
+                        variant={'nav-box'}
+                        active={activeCategory === Sections.Services}
+                        disabled={true}>
+                        <span>{Sections.Services}</span>
+                    </Button>
                 </ButtonToolbar>
             </Row>
         </Container>