diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c0ca3edb2..93c49b4bb 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -33,12 +33,17 @@ import UsersView from './views/Users/UsersView'; import TerritoryEstablishmentsView from './views/TerritoryEstablishments/TerritoryEstablishmentsView'; import SmallHeader from './components/Header/SmallHeader'; import Header from './components/Header/Header'; +import AnalysisView from './views/Analysis/AnalysisView'; const authenticatedRoutes: RouteProps[] = [ { path: '/parc-de-logements', component: HousingListView }, + { + path: '/analyses', + component: AnalysisView + }, // TODO: remove this { path: '/parc-de-logements/campagnes/:id', component: CampaignView }, { path: '/groupes/:id', component: GroupView }, @@ -100,15 +105,16 @@ function App() { } }, [dispatch, isSomeQueryPending]); - const routes = (isAuthenticated ? authenticatedRoutes : guestRoutes) - .map((route) => ( + const routes = (isAuthenticated ? authenticatedRoutes : guestRoutes).map( + (route) => ( - )); + ) + ); const redirection = isAuthenticated ? '/parc-de-logements' : '/connexion'; diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx index 8449339d0..3ec861325 100644 --- a/frontend/src/components/Header/Header.tsx +++ b/frontend/src/components/Header/Header.tsx @@ -1,6 +1,4 @@ import { Header as DSFRHeader } from '@codegouvfr/react-dsfr/Header'; -import { useMatomo } from '@jonkoops/matomo-tracker-react'; -import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; import LoadingBar from 'react-redux-loading-bar'; @@ -17,15 +15,10 @@ import { Container } from '../_dsfr'; function Header() { const location = useLocation(); const dispatch = useAppDispatch(); - const { trackPageView } = useMatomo(); const { isAdmin, isVisitor, isAuthenticated } = useUser(); const { authUser } = useAppSelector((state) => state.authentication); - useEffect(() => { - trackPageView({}); - }, [location]); //eslint-disable-line react-hooks/exhaustive-deps - function displayName(): string { return authUser ? authUser.user.firstName && authUser.user.lastName @@ -40,11 +33,11 @@ function Header() { linkProps: { to: getUserNavItem(navItem).url, 'data-testid': `fr-header-nav-item-${getUserNavItem( - navItem, - ).url.substring(1)}`, + navItem + ).url.substring(1)}` }, text: getUserNavItem(navItem).label, - isActive: location.pathname.startsWith(getUserNavItem(navItem).url), + isActive: location.pathname.startsWith(getUserNavItem(navItem).url) }); return ( @@ -55,23 +48,23 @@ function Header() { Ministère
du Logement
et de la Rénovation
- urbaine + urbaine } homeLinkProps={{ to: '/', - title: 'Accueil - Zéro Logement Vacant', + title: 'Accueil - Zéro Logement Vacant' }} serviceTitle="Zéro Logement Vacant" serviceTagline={ isAuthenticated ? ( - (isAdmin || isVisitor) ? ( + isAdmin || isVisitor ? ( } - />, + /> ] : [ { iconId: 'fr-icon-user-fill', linkProps: { - to: '/connexion', + to: '/connexion' }, - text: 'Connexion', - }, + text: 'Connexion' + } ] } navigation={ isAuthenticated ? [ getMainNavigationItem(UserNavItems.HousingList), + getMainNavigationItem(UserNavItems.Analysis), getMainNavigationItem(UserNavItems.Campaign), - getMainNavigationItem(UserNavItems.Resources), + getMainNavigationItem(UserNavItems.Resources) ] : withNavItems && [] } diff --git a/frontend/src/components/Header/SmallHeader.tsx b/frontend/src/components/Header/SmallHeader.tsx index dba376c8e..2c5f6f74b 100644 --- a/frontend/src/components/Header/SmallHeader.tsx +++ b/frontend/src/components/Header/SmallHeader.tsx @@ -1,7 +1,7 @@ import Button from '@codegouvfr/react-dsfr/Button'; import { MainNavigation, - MainNavigationProps, + MainNavigationProps } from '@codegouvfr/react-dsfr/MainNavigation'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; @@ -23,18 +23,19 @@ import logo from '../../assets/images/zlv.svg'; function SmallHeader() { const dispatch = useAppDispatch(); const location = useLocation(); - const { displayName, establishment, isAdmin, isVisitor, isAuthenticated } = useUser(); + const { displayName, establishment, isAdmin, isVisitor, isAuthenticated } = + useUser(); function getMainNavigationItem( - navItem: UserNavItems, + navItem: UserNavItems ): MainNavigationProps.Item { const link = getUserNavItem(navItem); return { linkProps: { - to: link.url, + to: link.url }, text: link.label, - isActive: location.pathname.startsWith(link.url), + isActive: location.pathname.startsWith(link.url) }; } @@ -45,7 +46,7 @@ function SmallHeader() { square sx={(theme) => ({ position: 'sticky', - zIndex: theme.zIndex.appBar, + zIndex: theme.zIndex.appBar })} > {isAuthenticated ? ( - (isAdmin || isVisitor) ? ( + isAdmin || isVisitor ? ( { return { url: '/parc-de-logements', label: 'Parc de logements' }; case UserNavItems.Resources: return { url: '/ressources', label: 'Ressources' }; + case UserNavItems.Analysis: + return { url: '/analyses', label: 'Analyses' }; default: return { url: '/', label: 'Accueil' }; } diff --git a/frontend/src/views/Analysis/AnalysisView.tsx b/frontend/src/views/Analysis/AnalysisView.tsx new file mode 100644 index 000000000..c22e50dc6 --- /dev/null +++ b/frontend/src/views/Analysis/AnalysisView.tsx @@ -0,0 +1,28 @@ +import Skeleton from '@mui/material/Skeleton'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; + +import { useDocumentTitle } from '../../hooks/useDocumentTitle'; +import MainContainer from '../../components/MainContainer/MainContainer'; + +function AnalysisView() { + useDocumentTitle('Analyse'); + + const isLoading = true; + + return ( + + {isLoading ? : Analyse} + + ); +} + +function Loading() { + return ( + + + + ); +} + +export default AnalysisView;