Skip to content

Commit

Permalink
Replace hardcode urls
Browse files Browse the repository at this point in the history
  • Loading branch information
@smdsgn
smdsgn committed Oct 3, 2024
1 parent 6dd9f8f commit f263aa2
Show file tree
Hide file tree
Showing 18 changed files with 242 additions and 127 deletions.
103 changes: 66 additions & 37 deletions assets/scripts/components/layout/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import styled from 'styled-components';
import { useGetProjectQuery } from '@services/api';
import { setProjectData } from '@store/projectSlice';
import useMatomoTracking from '@hooks/useMatomoTracking';
import usePageTitle from '@hooks/usePageTitle';
import useUrls from '@hooks/useUrls';
import Footer from '@components/layout/Footer';
import Header from '@components/layout/Header';
import Navbar from '@components/layout/Navbar';
Expand All @@ -19,8 +19,7 @@ import Ocsge from '@components/pages/Ocsge';
import Trajectoires from '@components/pages/Trajectoires';
import RapportLocal from '@components/pages/RapportLocal';
import Update from '@components/pages/Update';
import OcsgeStatus from '@components/widgets/OcsgeStatus';
import GpuStatus from '@components/widgets/GpuStatus';
import RouteWrapper from '@components/widgets/RouteWrapper';

interface DashboardProps {
projectId: string;
Expand All @@ -44,17 +43,17 @@ const Content = styled.div`
const Dashboard: React.FC<DashboardProps> = ({ projectId }) => {
const dispatch = useDispatch();
const { data, error, isLoading } = useGetProjectQuery(projectId);
const OCSGE_COVERAGE_COMPLETE_UNIFORM = "COMPLETE_UNIFORM";
const urls = useUrls();

useEffect(() => {
if (data) {
dispatch(setProjectData(data));
}
}, [data, dispatch]);

return (
<>
{data && !isLoading && !error && (
{data && !isLoading && !error && urls && (
<>
<Header />
<Router>
Expand All @@ -65,54 +64,85 @@ const Dashboard: React.FC<DashboardProps> = ({ projectId }) => {
<Content>
<Routes>
<Route
path="/project/:projectId/tableau-de-bord/synthesis"
element={<Synthese />}
path={urls.synthese}
element={
<RouteWrapper
title="Synthèse"
component={<Synthese endpoint={urls.synthese} />}
/>
}
/>
<Route
path="/project/:projectId/tableau-de-bord/consommation"
element={<Consommation />}
path={urls.consommation}
element={
<RouteWrapper
title="Consommation d'espaces NAF"
component={<Consommation endpoint={urls.consommation} />}
/>
}
/>
<Route
path="/project/:projectId/tableau-de-bord/trajectoires"
element={<Trajectoires />}
path={urls.trajectoires}
element={
<RouteWrapper
title="Trajectoire ZAN"
component={<Trajectoires endpoint={urls.trajectoires} />}
/>
}
/>
<Route
path="/project/:projectId/tableau-de-bord/découvrir-l-ocsge"
element={data.ocsge_coverage_status === OCSGE_COVERAGE_COMPLETE_UNIFORM ? <Ocsge /> : <OcsgeStatus status={data.ocsge_coverage_status} />}
path={urls.ocsge}
element={
<RouteWrapper
title="Usage et couverture du sol (OCS GE)"
component={<Ocsge endpoint={urls.ocsge} ocsgeStatus={data.ocsge_coverage_status} />}
/>
}
/>
<Route
path="/project/:projectId/tableau-de-bord/artificialisation"
element={data.ocsge_coverage_status === OCSGE_COVERAGE_COMPLETE_UNIFORM ? <Artificialisation /> : <OcsgeStatus status={data.ocsge_coverage_status} />}
path={urls.artificialisation}
element={
<RouteWrapper
title="Artificialisation"
component={<Artificialisation endpoint={urls.artificialisation} ocsgeStatus={data.ocsge_coverage_status} />}
/>
}
/>
<Route
path="/project/:projectId/tableau-de-bord/impermeabilisation"
element={data.ocsge_coverage_status === OCSGE_COVERAGE_COMPLETE_UNIFORM ? <Impermeabilisation /> : <OcsgeStatus status={data.ocsge_coverage_status} />}
path={urls.impermeabilisation}
element={
<RouteWrapper
title="Imperméabilisation"
component={<Impermeabilisation endpoint={urls.impermeabilisation} ocsgeStatus={data.ocsge_coverage_status} /> }
/>
}
/>
<Route
path="/project/:projectId/tableau-de-bord/zonages-d-urbanisme"
path={urls.gpu}
element={
<>
{data.ocsge_coverage_status === OCSGE_COVERAGE_COMPLETE_UNIFORM && data.has_zonage_urbanisme && (
<Gpu />
)}
{(data.ocsge_coverage_status !== OCSGE_COVERAGE_COMPLETE_UNIFORM || !data.has_zonage_urbanisme) && (
<>
{data.ocsge_coverage_status !== OCSGE_COVERAGE_COMPLETE_UNIFORM && (
<OcsgeStatus status={data.ocsge_coverage_status} />
)}
{!data.has_zonage_urbanisme && <GpuStatus />}
</>
)}
</>
<RouteWrapper
title="Artificialisation des zonages d'urbanisme"
component={<Gpu endpoint={urls.gpu} ocsgeStatus={data.ocsge_coverage_status} hasGpu={data.has_zonage_urbanisme} /> }
/>
}
/>
<Route
path="/project/:projectId/tableau-de-bord/rapport-local"
element={<RapportLocal />}
path={urls.rapportLocal}
element={
<RouteWrapper
title="Rapport triennal local"
component={<RapportLocal endpoint={urls.rapportLocal} />}
/>
}
/>
<Route
path="/project/:projectId/edit"
element={<Update />}
path={urls.update}
element={
<RouteWrapper
title="Paramètres du diagnostic"
component={<Update endpoint={urls.rapportLocal} />}
/>
}
/>
</Routes>
</Content>
Expand All @@ -126,7 +156,6 @@ const Dashboard: React.FC<DashboardProps> = ({ projectId }) => {
};

const TrackingWrapper: React.FC = () => {
usePageTitle();
useMatomoTracking();
return null; // Ce composant ne rend rien
};
Expand Down
22 changes: 13 additions & 9 deletions assets/scripts/components/layout/TopBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { RootState } from '@store/store';
import { formatDateTime } from '@utils/formatUtils';
import styled from 'styled-components';
import useHtmx from '@hooks/useHtmx';
import useUrls from '@hooks/useUrls';
import Divider from '@components/ui/Divider';

const primaryColor = '#313178';
Expand Down Expand Up @@ -75,6 +76,7 @@ const TopBar: React.FC = () => {
const memoizedProjectData = useMemo(() => projectData, [projectData?.id]);
const htmxRef = useHtmx([memoizedProjectData]);
const formattedDate = useMemo(() => formatDateTime(new Date(memoizedProjectData?.created_date)), [memoizedProjectData?.created_date]);
const urls = useUrls();

return (
<Container ref={htmxRef}>
Expand All @@ -86,15 +88,17 @@ const TopBar: React.FC = () => {
<Item>
<ItemTitle><i className="bi bi-calendar4-range"></i> Période d'analyse</ItemTitle>
<ItemContent>
De { memoizedProjectData?.analyse_start_date } à { memoizedProjectData?.analyse_end_date }
<button
data-fr-opened="false"
aria-controls="fr-modal-1"
title="Modifier la période d'analyse du diagnostic"
data-hx-get={`/project/${memoizedProjectData?.id}/set-period`}
data-hx-target="#update_period_form">
<span className="fr-icon-pencil-fill fr-icon--sm" aria-hidden="true"></span>
</button>
De { memoizedProjectData?.analyse_start_date } à { memoizedProjectData?.analyse_end_date }
{urls &&
<button
data-fr-opened="false"
aria-controls="fr-modal-1"
title="Modifier la période d'analyse du diagnostic"
data-hx-get={urls.setPeriod}
data-hx-target="#update_period_form">
<span className="fr-icon-pencil-fill fr-icon--sm" aria-hidden="true"></span>
</button>
}
</ItemContent>
</Item>
<Divider color="#e3e4e9" size="30px" />
Expand Down
24 changes: 19 additions & 5 deletions assets/scripts/components/pages/Artificialisation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React from 'react';
import { useParams } from 'react-router-dom';
import { useHtmlLoader } from '@hooks/useHtmlLoader';
import useHighcharts from '@hooks/useHighcharts';
import { isOcsgeAvailable } from '@utils/project';
import Loader from '@components/ui/Loader';
import PageTitle from '@components/widgets/PageTitle';
import Guide from '@components/widgets/Guide';
import OcsgeStatus, { OcsgeStatusProps } from '@components/widgets/OcsgeStatus';

/*
Ce composant est un composant hybride qui permet de récupérer du contenu côté serveur via Django et de l'intégrer directement dans l'interface React.
Expand All @@ -19,9 +20,22 @@ Cela est nécessaire pour rendre du contenu HTML généré côté serveur, mais
Dans ce cas, les données provenant de Django sont considérées comme fiables.
*/

const Artificialisation: React.FC = () => {
const { projectId } = useParams<{ projectId: string }>();
const endpoint = `/project/${projectId}/tableau-de-bord/artificialisation`;
const Artificialisation: React.FC<{ endpoint: string; ocsgeStatus: OcsgeStatusProps['status'] }> = ({ endpoint, ocsgeStatus }) => {
const pageTitle = "Artificialisation";

if (!isOcsgeAvailable(ocsgeStatus)) {
return (
<div className="fr-container--fluid fr-p-3w w-100">
<div className="fr-grid-row fr-grid-row--gutters">
<div className="fr-col-12">
<PageTitle title={pageTitle} />
<OcsgeStatus status={ocsgeStatus} />
</div>
</div>
</div>
);
}

const { content, isLoading, error } = useHtmlLoader(endpoint);

useHighcharts([
Expand All @@ -40,7 +54,7 @@ const Artificialisation: React.FC = () => {
<div className="fr-container--fluid fr-p-3w w-100">
<div className="fr-grid-row fr-grid-row--gutters">
<div className="fr-col-12">
<PageTitle title="Artificialisation" />
<PageTitle title={pageTitle} />
<Guide
title="Cadre réglementaire"
contentHtml={`L'article 192 de la Loi Climat & Résilience votée en août 2021 définit l'artificialisation comme « une surface dont les sols sont :
Expand Down
5 changes: 1 addition & 4 deletions assets/scripts/components/pages/Consommation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { useHtmlLoader } from '@hooks/useHtmlLoader';
import useHtmx from '@hooks/useHtmx';
import useHighcharts from '@hooks/useHighcharts';
Expand All @@ -24,9 +23,7 @@ Cela est nécessaire pour rendre du contenu HTML généré côté serveur, mais
Dans ce cas, les données provenant de Django sont considérées comme fiables.
*/

const Consommation: React.FC = () => {
const { projectId } = useParams<{ projectId: string }>();
const endpoint = `/project/${projectId}/tableau-de-bord/consommation`;
const Consommation: React.FC<{ endpoint: string }> = ({ endpoint }) => {
const [refreshKey, setRefreshKey] = useState(0);
const { content, isLoading, error } = useHtmlLoader(endpoint + `?refreshKey=${refreshKey}`);
const htmxRef = useHtmx([isLoading]);
Expand Down
26 changes: 21 additions & 5 deletions assets/scripts/components/pages/Gpu.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React from 'react';
import { useParams } from 'react-router-dom';
import { useHtmlLoader } from '@hooks/useHtmlLoader';
import { isOcsgeAvailable } from '@utils/project';
import Loader from '@components/ui/Loader';
import PageTitle from '@components/widgets/PageTitle';
import OcsgeStatus, { OcsgeStatusProps } from '@components/widgets/OcsgeStatus';
import GpuStatus from '@components/widgets/GpuStatus';

/*
Ce composant est un composant hybride qui permet de récupérer du contenu côté serveur via Django et de l'intégrer directement dans l'interface React.
Expand All @@ -14,9 +16,23 @@ Cela est nécessaire pour rendre du contenu HTML généré côté serveur, mais
Dans ce cas, les données provenant de Django sont considérées comme fiables.
*/

const Gpu: React.FC = () => {
const { projectId } = useParams<{ projectId: string }>();
const endpoint = `/project/${projectId}/tableau-de-bord/zonages-d-urbanisme`;
const Gpu: React.FC<{ endpoint: string; ocsgeStatus: OcsgeStatusProps['status']; hasGpu: boolean }> = ({ endpoint, ocsgeStatus, hasGpu }) => {
const pageTitle = "Artificialisation des zonages d'urbanisme";

if (!isOcsgeAvailable(ocsgeStatus) || !hasGpu) {
return (
<div className="fr-container--fluid fr-p-3w w-100">
<div className="fr-grid-row fr-grid-row--gutters">
<div className="fr-col-12">
<PageTitle title={pageTitle} />
{!isOcsgeAvailable(ocsgeStatus) && <OcsgeStatus status={ocsgeStatus} />}
{!hasGpu && <GpuStatus />}
</div>
</div>
</div>
);
}

const { content, isLoading, error } = useHtmlLoader(endpoint);

if (isLoading) return <Loader />;
Expand All @@ -26,7 +42,7 @@ const Gpu: React.FC = () => {
<div className="fr-container--fluid fr-p-3w w-100">
<div className="fr-grid-row fr-grid-row--gutters">
<div className="fr-col-12">
<PageTitle title="Artificialisation des zonages d'urbanisme" />
<PageTitle title={pageTitle} />
<div dangerouslySetInnerHTML={{ __html: content }} />
</div>
</div>
Expand Down
24 changes: 19 additions & 5 deletions assets/scripts/components/pages/Impermeabilisation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React from 'react';
import { useParams } from 'react-router-dom';
import { useHtmlLoader } from '@hooks/useHtmlLoader';
import useHighcharts from '@hooks/useHighcharts';
import { isOcsgeAvailable } from '@utils/project';
import Loader from '@components/ui/Loader';
import PageTitle from '@components/widgets/PageTitle';
import Guide from '@components/widgets/Guide';
import OcsgeStatus, { OcsgeStatusProps } from '@components/widgets/OcsgeStatus';

/*
Ce composant est un composant hybride qui permet de récupérer du contenu côté serveur via Django et de l'intégrer directement dans l'interface React.
Expand All @@ -19,9 +20,22 @@ Cela est nécessaire pour rendre du contenu HTML généré côté serveur, mais
Dans ce cas, les données provenant de Django sont considérées comme fiables.
*/

const Impermeabilisation: React.FC = () => {
const { projectId } = useParams<{ projectId: string }>();
const endpoint = `/project/${projectId}/tableau-de-bord/impermeabilisation`;
const Impermeabilisation: React.FC<{ endpoint: string; ocsgeStatus: OcsgeStatusProps['status'] }> = ({ endpoint, ocsgeStatus }) => {
const pageTitle = "Imperméabilisation";

if (!isOcsgeAvailable(ocsgeStatus)) {
return (
<div className="fr-container--fluid fr-p-3w w-100">
<div className="fr-grid-row fr-grid-row--gutters">
<div className="fr-col-12">
<PageTitle title={pageTitle} />
<OcsgeStatus status={ocsgeStatus} />
</div>
</div>
</div>
);
}

const { content, isLoading, error } = useHtmlLoader(endpoint);

useHighcharts([
Expand All @@ -39,7 +53,7 @@ const Impermeabilisation: React.FC = () => {
<div className="fr-container--fluid fr-p-3w w-100">
<div className="fr-grid-row fr-grid-row--gutters">
<div className="fr-col-12">
<PageTitle title="Imperméabilisation" />
<PageTitle title={pageTitle} />
<Guide
title="Cadre réglementaire"
contentHtml={`L’imperméabilisation des sols est définie comme:
Expand Down
Loading

0 comments on commit f263aa2

Please sign in to comment.