refactor(lbac-2370): PERFORMANCE - global refactoring for performance enhancement

.talismanrc

@@ -38,7 +38,7 @@ fileignoreconfig:
 - filename: server/src/http/controllers/v2/applications.controller.v2.test.ts
   checksum: af3286368a305384cae3151698d863167d9f2b9e206d7063625c22595289ea3b
 - filename: server/src/http/controllers/v2/appointment.controller.v2.test.ts
-  checksum: 52a0f730bc8feed13f4f1371c16a332872bec77ca31f0732422b7ca90b322df9
+  checksum: bbbf100d65bae0d840c715f4b1d893986df7423f470f3ee300545959105f6ca4
 - filename: server/src/http/controllers/v2/jobs.controller.v2.test.ts
   checksum: a99bfdcb5a8f4c66e9d055b44160adbc7ec2bcaf87209ff76fa9a9f674b9ca86
 - filename: server/src/http/controllers/v2/jobs.controller.v2.ts

Dockerfile

@@ -75,6 +75,11 @@ ENV COMMIT_HASH=$COMMIT_HASH
 ARG PUBLIC_ENV
 ENV NEXT_PUBLIC_ENV=$PUBLIC_ENV
 
+ENV __SENTRY_DEBUG__=false
+ENV __RRWEB_EXCLUDE_IFRAME__=true
+ENV __RRWEB_EXCLUDE_SHADOW_DOM__=true
+ENV __SENTRY_EXCLUDE_REPLAY_WORKER__=true
+
 RUN yarn --cwd ui build
 # RUN --mount=type=cache,target=/app/ui/.next/cache yarn --cwd ui build
 
@@ -98,7 +103,7 @@ RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 
 # You only need to copy next.config.js if you are NOT using the default configuration
-COPY --from=builder_ui --chown=nextjs:nodejs /app/ui/next.config.js /app/
+COPY --from=builder_ui --chown=nextjs:nodejs /app/ui/next.config.mjs /app/
 COPY --from=builder_ui --chown=nextjs:nodejs /app/ui/public /app/ui/public
 COPY --from=builder_ui --chown=nextjs:nodejs /app/ui/package.json /app/ui/package.json
 

server/package.json

@@ -29,8 +29,8 @@
     "@fastify/swagger": "^8.10.1",
     "@fastify/swagger-ui": "^1.9.3",
     "@hapi/boom": "^10.0.1",
-    "@sentry/node": "^8.33.1",
-    "@sentry/profiling-node": "^8.33.1",
+    "@sentry/node": "^8.48.0",
+    "@sentry/profiling-node": "^8.48.0",
     "@smithy/types": "^3.4.2",
     "@turf/distance": "^6.5.0",
     "@types/netmask": "^2.0.3",

server/src/http/controllers/etablissementRecruteur.controller.test.ts

@@ -1,4 +1,4 @@
-import omit from "lodash/omit"
+import { omit } from "lodash-es"
 import nock from "nock"
 import { CFA, ENTREPRISE, OPCOS_LABEL } from "shared/constants"
 import { z } from "shared/helpers/zodWithOpenApi"

server/src/services/formulaire.service.test.ts

@@ -1,4 +1,4 @@
-import omit from "lodash/omit"
+import { omit } from "lodash-es"
 import { ObjectId } from "mongodb"
 import { removeAccents } from "shared"
 import { RECRUITER_STATUS } from "shared/constants"

shared/package.json

@@ -7,6 +7,9 @@
   "license": "MIT",
   "private": true,
   "type": "module",
+  "sideEffects": [
+    "./helpers/zodWithOpenApi.ts"
+  ],
   "engines": {
     "node": ">=20",
     "npm": "please-use-yarn"

ui/components/AutoCompleteField/AutoCompleteField.tsx

@@ -1,10 +1,11 @@
 import { Box, Container, Flex, Input, Spinner, Text, VStack } from "@chakra-ui/react"
 import { useCombobox } from "downshift" //https://github.com/downshift-js/downshift/tree/master/src/hooks/useCombobox
 import { useFormikContext } from "formik"
-import { debounce } from "lodash"
 import React, { useEffect, useState } from "react"
 import ReactHtmlParser from "react-html-parser"
 
+import { debounce } from "@/common/utils/debounce"
+
 import highlightItem from "../../services/hightlightItem"
 
 import findExactItemRank from "./findExactItemRank"

ui/components/HomeComponents/AlgoHome.tsx

@@ -1,4 +1,5 @@
-import { Container, Divider, Grid, GridItem, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react"
+import { Container, Divider, Grid, GridItem, ListItem, Text, UnorderedList } from "@chakra-ui/react"
+import Image from "next/image"
 import React from "react"
 
 import TagCandidatureSpontanee from "../ItemDetail/TagCandidatureSpontanee"
@@ -37,8 +38,8 @@ const AlgoHome = () => {
             </ListItem>
           </UnorderedList>
         </GridItem>
-        <GridItem colSpan={4} display="flex" justifyContent="center" alignItems="center">
-          <Image src="/images/icons/algo_home.svg" alt="" mt="5" />
+        <GridItem colSpan={4} display="flex" justifyContent="center" alignItems="center" pt="5">
+          <Image src="/images/icons/algo_home.png" alt="" width={324} height={387} />
         </GridItem>
       </Grid>
     </Container>

ui/components/HomeComponents/HomeCircleImageDecoration.tsx

@@ -0,0 +1,29 @@
+import { Box } from "@chakra-ui/react"
+import NextImage from "next/image"
+
+const circleImgCssProperties = {
+  position: "absolute",
+  zIndex: 0,
+}
+
+export function HomeCircleImageDecoration() {
+  return (
+    <>
+      <Box sx={circleImgCssProperties} top="60px" left="50px">
+        <NextImage src="/images/howtocircle1.png" alt="" width={70} height={70} />
+      </Box>
+      <Box sx={circleImgCssProperties} bottom="-28px" left="444px">
+        <NextImage src="/images/howtocircle2.png" alt="" width={56} height={56} />
+      </Box>
+      <Box sx={circleImgCssProperties} top="182px" right="512px">
+        <NextImage src="/images/howtocircle3.png" alt="" width={80} height={80} />
+      </Box>
+      <Box sx={circleImgCssProperties} top="12px" right="312px">
+        <NextImage src="/images/howtocircle4.png" alt="" width={50} height={50} />
+      </Box>
+      <Box sx={circleImgCssProperties} bottom="112px" right="-12px">
+        <NextImage src="/images/howtocircle5.png" alt="" width={89} height={77} />
+      </Box>
+    </>
+  )
+}

ui/components/HowTo/HowTo.tsx

@@ -1,15 +1,14 @@
 import { Box, Container, Grid, GridItem, Image, Show, Text } from "@chakra-ui/react"
-import React from "react"
 
 const HowTo = () => {
   return (
     <>
       <Container variant="responsiveContainer">
         <Grid templateColumns={{ base: "1fr", md: "repeat(3, 1fr)" }} gap={{ base: "10", md: "24" }}>
           <GridItem position="relative" width={{ base: "200px", md: "auto" }} mx="auto">
-            <Image src="/images/howto1.svg" alt="" zIndex="2" position="inherit" />
+            <Image fetchPriority="low" src="/images/howto1.svg" alt="" zIndex="2" position="inherit" />
             <Show above="md">
-              <Image src="/images/howtoline1.svg" alt="" position="absolute" top="85px" left="-162px" />
+              <Image fetchPriority="low" src="/images/howtoline1.svg" alt="" position="absolute" top="85px" left="-162px" />
             </Show>
             <Box>
               <Text as="h3" fontSize="1.25rem" fontWeight="500" mb="3">
@@ -19,9 +18,9 @@ const HowTo = () => {
             </Box>
           </GridItem>
           <GridItem position="relative" width={{ base: "200px", md: "auto" }} mx="auto">
-            <Image src="/images/howto2.svg" alt="" zIndex="2" position="inherit" />
+            <Image fetchPriority="low" src="/images/howto2.svg" alt="" zIndex="2" position="inherit" />
             <Show above="md">
-              <Image src="/images/howtoline2a.svg" alt="" position="absolute" top="47px" left="-208px" />
+              <Image fetchPriority="low" src="/images/howtoline2a.svg" alt="" position="absolute" top="47px" left="-208px" />
             </Show>
             <Box>
               <Text as="h3" fontSize="1.25rem" fontWeight="500" mb="3">
@@ -31,10 +30,10 @@ const HowTo = () => {
             </Box>
           </GridItem>
           <GridItem position="relative" width={{ base: "200px", md: "auto" }} mx="auto" mb="12">
-            <Image src="/images/howto3.svg" alt="" zIndex="2" position="inherit" />
+            <Image fetchPriority="low" src="/images/howto3.svg" alt="" zIndex="2" position="inherit" />
             <Show above="md">
-              <Image src="/images/howtoline3a.svg" alt="" position="absolute" top="47px" left="-200px" />
-              <Image src="/images/howtoline3b.svg" alt="" position="absolute" top="47px" left="158px" />
+              <Image fetchPriority="low" src="/images/howtoline3a.svg" alt="" position="absolute" top="47px" left="-200px" />
+              <Image fetchPriority="low" src="/images/howtoline3b.svg" alt="" position="absolute" top="47px" left="158px" />
             </Show>
             <Box>
               <Text as="h3" fontSize="1.25rem" fontWeight="500" mb="3">

ui/components/ItemDetail/RecruteurLbaComponents/RecruteurLba.tsx

@@ -1,5 +1,4 @@
 import { Box, Button, Flex, Image, Link, Text } from "@chakra-ui/react"
-import { get } from "lodash"
 import React, { useState } from "react"
 
 import { focusWithin } from "@/theme/theme-lba-tools"
@@ -138,7 +137,7 @@ const RecruteurLba = ({ company, handleSelectItem, showTextOnly = undefined, sea
           </Flex>
 
           <Box as="h3" pt={2} fontWeight={500} fontSize="14px">
-            Secteur d'activité : {get(company, "nafs[0].label", "")}
+            Secteur d'activité : {company?.nafs[0]?.label ?? ""}
           </Box>
           <Box pt={2} fontWeight={500} fontSize="12px">
             {company.place.fullAddress}

ui/components/SearchForTrainingsAndJobs/SearchForTrainingsAndJobs.tsx

@@ -1,4 +1,5 @@
 import { Box, Flex } from "@chakra-ui/react"
+import dynamic from "next/dynamic"
 import { useRouter } from "next/router"
 import { useContext, useEffect, useState } from "react"
 import { LBA_ITEM_TYPE_OLD } from "shared/constants/lbaitem"
@@ -24,14 +25,17 @@ import {
 } from "../../utils/mapTools"
 import pushHistory from "../../utils/pushHistory"
 import { logError } from "../../utils/tools"
-import Map from "../Map"
 import { InitWidgetSearchParameters, WidgetHeader } from "../WidgetHeader"
 
 import { ChoiceColumn, MapListSwitchButton } from "./components"
 import { loadItem } from "./services/loadItem"
 import { searchForJobsFunction, searchForPartnerJobsFunction } from "./services/searchForJobs"
 import { searchForTrainingsFunction } from "./services/searchForTrainings"
 
+const DynamicMap = dynamic(() => import("../Map"), {
+  loading: () => <p>Loading...</p>,
+})
+
 const SearchForTrainingsAndJobs = () => {
   const scopeContext = useContext(ScopeContext)
 
@@ -409,7 +413,7 @@ const SearchForTrainingsAndJobs = () => {
         </Box>
         {displayMap ? (
           <Box p="0" flex={{ base: 4, xl: 5 }} display={mapDisplayParameters} position="relative">
-            <Map handleSearchSubmit={handleSearchSubmit} showSearchForm={showSearchForm} selectItemOnMap={selectItemOnMap} />
+            <DynamicMap handleSearchSubmit={handleSearchSubmit} showSearchForm={showSearchForm} selectItemOnMap={selectItemOnMap} />
           </Box>
         ) : (
           ""

ui/components/SearchForTrainingsAndJobs/components/ChoiceColumn.tsx

@@ -1,6 +1,5 @@
 import { Box, Flex, Image, Text } from "@chakra-ui/react"
 import distance from "@turf/distance"
-import { round } from "lodash"
 import { useRouter } from "next/router"
 import React, { useContext, useEffect } from "react"
 
@@ -167,8 +166,7 @@ const ChoiceColumn = ({
 
   const updateTrainingDistanceWithNewCenter = (coordinates) => {
     for (let i = 0; i < trainings.length; ++i) {
-      //const trainingCoords = [trainings[i].place.longitude, trainings[i].place.latitude];
-      trainings[i].place.distance = round(distance(coordinates, [trainings[i].place.longitude, trainings[i].place.latitude]), 2)
+      trainings[i].place.distance = Math.round(distance(coordinates, [trainings[i].place.longitude, trainings[i].place.latitude]) * 100) / 100
     }
     setTrainings(trainings)
   }