fix: add background color for formation events (#1883)

* fix: add background color for formation events

* fix: event order desc

* feat: fetch commune flags from s3

* feat: add COM to deployment map filter

* fix: use wikidata for ban explorer

src/app/api/proxy-flag-commune/[codeCommune]/route.ts

@@ -0,0 +1,9 @@
+import { getCommuneFlag } from '@/lib/api-blasons-communes'
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function GET(request: NextRequest, { params }: { params: { codeCommune: string } }) {
+  const { codeCommune } = params
+  const flagUrl = await getCommuneFlag(codeCommune)
+
+  return NextResponse.json(flagUrl)
+}

src/app/commune/[codeCommune]/page.styles.tsx

@@ -13,6 +13,7 @@ export const StyledCommunePage = styled.div<{ $certificationPercentage: number }
         margin-bottom: 2rem;
 
         .commune-general-info {
+            line-height: normal;
             display: flex;
             flex-direction: column;
             align-items: center;

src/app/commune/[codeCommune]/page.tsx

@@ -5,7 +5,6 @@ import { Table } from '@codegouvfr/react-dsfr/Table'
 import CardWrapper from '@/components/CardWrapper'
 import Section from '@/components/Section'
 import {
-  getBanItem,
   getDistrict,
   getCommune as getBANCommune,
   assemblageSources,
@@ -14,7 +13,7 @@ import { formatFr } from '@/lib/array'
 import { getRevisionDetails, getRevisions } from '@/lib/api-depot'
 import { getMairiePageURL } from '@/lib/api-etablissement-public'
 import { getCommune as getAPIGeoCommune, getEPCI } from '@/lib/api-geo'
-import { getCommuneFlag } from '@/lib/api-wikidata'
+import { getCommuneFlag } from '@/lib/api-blasons-communes'
 
 import { CommuneDownloadSection } from '../../../components/Commune/CommuneDownloadSection'
 import { CommuneNavigation } from '../../../components/Commune/CommuneNavigation'

src/app/deploiement-bal/page.tsx

@@ -1,39 +1,21 @@
-import { getDepartements, getEPCI } from '@/lib/api-geo'
-import departementCenterMap from '@/data/departement-center.json'
+import { getEPCI } from '@/lib/api-geo'
+import departements from '@/data/departement-center.json'
 import { getStats } from '@/lib/api-ban'
 import DeploiementBALDashboard from '../../components/DeploiementBAL/DeploiementBALDashboard'
 import Section from '@/components/Section'
 import { mapToSearchResult } from '@/lib/deploiement-stats'
-
-export type DeploiementBALSearchResultEPCI = {
-  type: 'EPCI'
-  code: string
-  nom: string
-  center: { type: string, coordinates: [number, number] }
-  contour: { type: string, coordinates: number[][][] }
-}
-
-export type DeploiementBALSearchResultDepartement = {
-  type: 'Département'
-  code: string
-  nom: string
-  center: { type: string, coordinates: [number, number] }
-}
-
-export type DeploiementBALSearchResult = DeploiementBALSearchResultEPCI | DeploiementBALSearchResultDepartement
+import { DeploiementBALSearchResult } from '@/hooks/useStatsDeploiement'
+import { Departement } from '@/types/api-geo.types'
 
 export default async function DeploiementBALPage({ searchParams }: { searchParams: Record<string, string> }) {
   const stats = await getStats()
-  const departements = await getDepartements()
-  const departementsWithCenter = departements.map(({ code, ...rest }) => {
-    const { geometry } = (departementCenterMap as any)[code]
-
+  const departementsWithCenter = Object.values(departements).map(({ properties, geometry }) => {
     return {
-      ...rest,
-      code,
+      ...properties,
+      type: 'Département',
       centre: geometry,
     }
-  })
+  }) as (Departement & { centre: { type: string, coordinates: number[] } })[]
 
   let initialFilter: DeploiementBALSearchResult | null = null
   if (searchParams.departement) {

src/app/outils/formulaire-de-publication/page.tsx

@@ -1,7 +1,7 @@
 import Loader from '@/components/Loader'
 import dynamic from 'next/dynamic'
 import { getCommune } from '@/lib/api-geo'
-import { getCommuneFlag } from '@/lib/api-wikidata'
+import { getCommuneFlag } from '@/lib/api-blasons-communes'
 import { getHabilitation, getRevision } from '@/lib/api-depot'
 import { Habilitation, Revision } from '@/types/api-depot.types'
 import { Commune } from '@/types/api-geo.types'

src/app/outils/page.tsx

@@ -1,5 +1,4 @@
 import { Suspense } from 'react'
-import { CallOut } from '@codegouvfr/react-dsfr/CallOut'
 
 import Button from '@codegouvfr/react-dsfr/Button'
 import Card from '@codegouvfr/react-dsfr/Card'

src/components/DeploiementBAL/DeploiementBALDashboard.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import AutocompleteInput from '@/components/Autocomplete/AutocompleteInput'
-import { useStatsDeploiement } from '@/hooks/useStatsDeploiement'
+import { DeploiementBALSearchResult, useStatsDeploiement } from '@/hooks/useStatsDeploiement'
 import { getEpcis } from '@/lib/api-geo'
 import { BANStats } from '@/types/api-ban.types'
 import { Departement } from '@/types/api-geo.types'
@@ -12,15 +12,14 @@ import { StyledDeploiementBALDashboard } from './DeploiementBALDashboard.styles'
 import { Tabs } from '@codegouvfr/react-dsfr/Tabs'
 import TabMesAdresses from './TabMesAdresses'
 import DeploiementMap, { getStyle } from './DeploiementMap'
-import { DeploiementBALSearchResult } from '@/app/deploiement-bal/page'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { mapToSearchResult } from '@/lib/deploiement-stats'
 import { FullScreenControl } from '../Map/FullScreenControl'
 
 interface DeploiementBALMapProps {
   initialStats: BANStats
   initialFilter: DeploiementBALSearchResult | null
-  departements: (Departement & { centre: { type: string, coordinates: [number, number] } })[]
+  departements: (Departement & { centre: { type: string, coordinates: number[] } })[]
 }
 
 export default function DeploiementBALMap({ initialStats, initialFilter, departements }: DeploiementBALMapProps) {

src/components/DeploiementBAL/DeploiementMap.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useState } from 'react'
 import styled from 'styled-components'
 import { MapMouseEvent, Popup, useMap } from 'react-map-gl/maplibre'
 import { toolsColors } from '@/theme/theme'
-import Link from 'next/link'
 
 const StyledWrapper = styled.div`
   .legend-wrapper {
@@ -288,7 +287,7 @@ export default function DeploiementMap({ center, zoom, filteredCodesCommmune, se
             <div>Nombre d’adresses : {popup.properties.nbNumeros}</div>
             <div>{`${popup.properties.certificationPercentage ? `Taux de certification : ${popup.properties.certificationPercentage}%` : 'Aucune adresse n’est certifiée par la commune'}`}</div>
             {popup.properties.hasBAL ? <div>Déposé via : {popup.properties.nomClient}</div> : <div>Ne dispose pas d&apos;une BAL</div>}
-            <Link href={`/commune/${popup.properties.code}`}>Voir la page commune</Link>
+            <a href={`/commune/${popup.properties.code}`}>Voir la page commune</a>
           </div>
         </Popup>
       )}

src/components/DeploiementBAL/TabDeploiementBAL.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { DeploiementBALSearchResult } from '@/app/deploiement-bal/page'
 import DoughnutCounter from '@/components/ChartJS/DoughnutCounter'
+import { DeploiementBALSearchResult } from '@/hooks/useStatsDeploiement'
 import { customFetch } from '@/lib/fetch'
 import { BANStats } from '@/types/api-ban.types'
 import { numFormater } from '@/utils/number'

src/components/Events/EventCard.styles.ts

@@ -2,10 +2,11 @@
 
 import styled from 'styled-components'
 
-export const StyledEventCard = styled.div<{ $isPassed?: boolean }>`
+export const StyledEventCard = styled.div<{ $isPassed?: boolean, $backgroundColor?: string }>`
     padding: 32px;
     border: 1px solid ${({ theme }) => theme.colors.grey.border};
     ${({ $isPassed }) => $isPassed && 'opacity: 0.5;'}
+    ${({ $backgroundColor }) => $backgroundColor && `background-color: ${$backgroundColor};`}
 
     .event-details {
         color: ${({ theme }) => theme.colors.primary.main};

src/components/Events/EventCard.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { EventType } from '@/types/events.types'
+import { EventType, EventTypeTypeEnum } from '@/types/events.types'
 import { StyledEventCard } from './EventCard.styles'
 import Badge from '@codegouvfr/react-dsfr/Badge'
 import { getFullDate } from '@/utils/date'
@@ -12,20 +12,26 @@ interface EventCardProps {
   isPassed?: boolean
 }
 
+const backgroundColors: Record<string, string> = {
+  [EventTypeTypeEnum.FORMATION]: 'rgba(136, 213, 156, 0.1)',
+  [EventTypeTypeEnum.FORMATION_LVL2]: 'rgba(136, 213, 156, 0.25)',
+}
+
 export default function EventCard({ event, isPassed, tagToColor }: EventCardProps) {
-  const { tags, title, description, startHour, endHour, date, address, isOnlineOnly, isSubscriptionClosed, href } = event
+  const { tags, title, description, startHour, endHour, date, address, isSubscriptionClosed, href, type } = event
 
-  const hasLargeDescription = description.length > 200
+  const hasLargeDescription = description.length > 100
   const [showAllDescription, setShowAllDescription] = useState(!hasLargeDescription)
-  const actualDescription = showAllDescription ? description : description.slice(0, 200) + '...'
+  const actualDescription = showAllDescription ? description : description.slice(0, 100) + '...'
+  const backgroundColor = backgroundColors[type]
 
   const getAdressToString = (adress: EventType['address']) => {
     if (!adress) return ''
     return `${adress.nom}, ${adress.numero} ${adress.voie}, ${adress.codePostal} ${adress.commune}`
   }
 
   return (
-    <StyledEventCard $isPassed={isPassed}>
+    <StyledEventCard $isPassed={isPassed} $backgroundColor={backgroundColor}>
       <div className="badge-wrapper">
         <>{tags.map(tag => <Badge style={{ backgroundColor: tagToColor[tag].background, color: tagToColor[tag].color, marginRight: 4 }} key={tag} small>{tag}</Badge>)}</>
       </div>
@@ -34,7 +40,7 @@ export default function EventCard({ event, isPassed, tagToColor }: EventCardProp
         <span>{getFullDate(new Date(date))}</span>
         {' | '}
         <span>{startHour} - {endHour}</span>
-        {isOnlineOnly ? <span> | En ligne</span> : address ? <span> | {getAdressToString(address)}</span> : null}
+        {address?.commune ? <span> | {getAdressToString(address)}</span> : null}
       </div>
       <h3>{title}</h3>
       <p>

src/components/FormulaireDePublication/index.tsx

@@ -12,7 +12,7 @@ import { Commune } from '@/types/api-geo.types'
 import { validateHabilitationPinCode, createHabilitation, createRevision, getHabilitation, sendHabilitationPinCode, getCurrentRevision, publishRevision } from '@/lib/api-depot'
 import Alert from '@codegouvfr/react-dsfr/Alert'
 import Image from 'next/image'
-import { getCommuneFlag } from '@/lib/api-wikidata'
+import { getCommuneFlag } from '@/lib/api-blasons-communes'
 import { HabilitationMethod } from './steps/HablitationMethod'
 import { Habilitation, HabilitationStatus, Revision } from '@/types/api-depot.types'
 import { PinCodeValidation } from './steps/PinCodeValidation'