From c28170d68cf306dca1b8cb35b92fbc9a55a7df3b Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Mon, 23 Sep 2024 15:57:45 +0200 Subject: [PATCH 01/37] Fix the itinerancyStep display on the map --- frontend/src/components/pages/details/Details.tsx | 6 +++--- frontend/src/modules/details/interface.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/pages/details/Details.tsx b/frontend/src/components/pages/details/Details.tsx index d190361f7..ddbc68326 100644 --- a/frontend/src/components/pages/details/Details.tsx +++ b/frontend/src/components/pages/details/Details.tsx @@ -654,10 +654,10 @@ export const DetailsUIWithoutContext: React.FC = ({ slug, parentId, langu trekFamily={trekFamily} trekChildrenGeometries={details.children.reduce( (children, currentChild) => { - if (currentChild.childGeometry) { + if (currentChild.childrenGeometries) { children.push({ - ...currentChild.childGeometry, - id: `TREK-${currentChild.childGeometry.id}`, + ...currentChild.childrenGeometries, + id: `TREK-${currentChild.childrenGeometries.id}`, }); } return children; diff --git a/frontend/src/modules/details/interface.ts b/frontend/src/modules/details/interface.ts index a43552ac6..55724b948 100644 --- a/frontend/src/modules/details/interface.ts +++ b/frontend/src/modules/details/interface.ts @@ -131,7 +131,7 @@ export interface Bbox { } export interface TrekResultWithGeometryChild extends TrekResult { - childGeometry?: TrekChildGeometry; + childrenGeometries?: TrekChildGeometry; } export interface RawTrekChildGeometry { geometry: RawLineStringGeometry3D | RawMultiLineStringGeometry3D | RawPointGeometry3D; From f487a0402a91f460f78083659b360b8635b1b285 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Mon, 23 Sep 2024 17:19:02 +0200 Subject: [PATCH 02/37] Update caniuse-lite --- frontend/yarn.lock | 33 ++++----------------------------- 1 file changed, 4 insertions(+), 29 deletions(-) diff --git a/frontend/yarn.lock b/frontend/yarn.lock index b30e50f18..10523e405 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -4335,35 +4335,10 @@ camelcase@^6.2.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809" integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg== -caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001164: - version "1.0.30001164" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001164.tgz#5bbfd64ca605d43132f13cc7fdabb17c3036bfdc" - integrity sha512-G+A/tkf4bu0dSp9+duNiXc7bGds35DioCyC6vgK2m/rjA4Krpy5WeZgZyfH2f0wj2kI6yAWWucyap6oOwmY1mg== - -caniuse-lite@^1.0.30001165: - version "1.0.30001170" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001170.tgz#0088bfecc6a14694969e391cc29d7eb6362ca6a7" - integrity sha512-Dd4d/+0tsK0UNLrZs3CvNukqalnVTRrxb5mcQm8rHL49t7V5ZaTygwXkrq+FB+dVDf++4ri8eJnFEJAB8332PA== - -caniuse-lite@^1.0.30001370: - version "1.0.30001399" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001399.tgz#1bf994ca375d7f33f8d01ce03b7d5139e8587873" - integrity sha512-4vQ90tMKS+FkvuVWS5/QY1+d805ODxZiKFzsU8o/RsVJz49ZSRR8EjykLJbqhzdPgadbX6wB538wOzle3JniRA== - -caniuse-lite@^1.0.30001400: - version "1.0.30001414" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001414.tgz#5f1715e506e71860b4b07c50060ea6462217611e" - integrity sha512-t55jfSaWjCdocnFdKQoO+d2ct9C59UZg4dY3OnUlSZ447r8pUtIKdp0hpAzrGFultmTC+Us+KpKi4GZl/LXlFg== - -caniuse-lite@^1.0.30001406: - version "1.0.30001434" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz#ec1ec1cfb0a93a34a0600d37903853030520a4e5" - integrity sha512-aOBHrLmTQw//WFa2rcF1If9fa3ypkC1wzqqiKHgfdrXTWcU8C4gKVZT77eQAPWN1APys3+uQ0Df07rKauXGEYA== - -caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464: - version "1.0.30001474" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001474.tgz#13b6fe301a831fe666cce8ca4ef89352334133d5" - integrity sha512-iaIZ8gVrWfemh5DG3T9/YqarVZoYf0r188IjaGwx68j4Pf0SGY6CQkmJUIE+NZHkkecQGohzXmBGEwWDr9aM3Q== +caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001164, caniuse-lite@^1.0.30001165, caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464: + version "1.0.30001663" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001663.tgz" + integrity sha512-o9C3X27GLKbLeTYZ6HBOLU1tsAcBZsLis28wrVzddShCS16RujjHp9GDHKZqrB3meE0YjhawvMFsGb/igqiPzA== caseless@~0.12.0: version "0.12.0" From 426ba296be5fd1e1c5e921808ec702d71b7a6f71 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Mon, 23 Sep 2024 17:28:16 +0200 Subject: [PATCH 03/37] Install sharp package --- frontend/package.json | 1 + frontend/yarn.lock | 184 +++++++++++++++++++++++++++++++++++++++++- 2 files changed, 184 insertions(+), 1 deletion(-) diff --git a/frontend/package.json b/frontend/package.json index a043d5316..a1417521f 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -81,6 +81,7 @@ "react-slick": "^0.29.0", "screenfull": "^6.0.2", "semver": "^7.6.3", + "sharp": "^0.33.5", "slick-carousel": "^1.8.1", "store": "^2.0.12", "striptags": "^3.2.0", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 10523e405..f6e035d90 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1616,6 +1616,13 @@ debug "^3.1.0" lodash.once "^4.1.1" +"@emnapi/runtime@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.2.0.tgz#71d018546c3a91f3b51106530edbc056b9f2f2e3" + integrity sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ== + dependencies: + tslib "^2.4.0" + "@emotion/babel-plugin@^11.10.0": version "11.10.2" resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz#879db80ba622b3f6076917a1e6f648b1c7d008c7" @@ -1857,6 +1864,119 @@ resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917" integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw== +"@img/sharp-darwin-arm64@0.33.5": + version "0.33.5" + resolved "https://registry.yarnpkg.com/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz#ef5b5a07862805f1e8145a377c8ba6e98813ca08" + integrity sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ== + optionalDependencies: + "@img/sharp-libvips-darwin-arm64" "1.0.4" + +"@img/sharp-darwin-x64@0.33.5": + version "0.33.5" + resolved "https://registry.yarnpkg.com/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz#e03d3451cd9e664faa72948cc70a403ea4063d61" + integrity sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q== + optionalDependencies: + "@img/sharp-libvips-darwin-x64" "1.0.4" + +"@img/sharp-libvips-darwin-arm64@1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz#447c5026700c01a993c7804eb8af5f6e9868c07f" + integrity sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg== + +"@img/sharp-libvips-darwin-x64@1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz#e0456f8f7c623f9dbfbdc77383caa72281d86062" + integrity sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ== + +"@img/sharp-libvips-linux-arm64@1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz#979b1c66c9a91f7ff2893556ef267f90ebe51704" + integrity sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA== + +"@img/sharp-libvips-linux-arm@1.0.5": + version "1.0.5" + resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz#99f922d4e15216ec205dcb6891b721bfd2884197" + integrity sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g== + +"@img/sharp-libvips-linux-s390x@1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz#f8a5eb1f374a082f72b3f45e2fb25b8118a8a5ce" + integrity sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA== + +"@img/sharp-libvips-linux-x64@1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz#d4c4619cdd157774906e15770ee119931c7ef5e0" + integrity sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw== + +"@img/sharp-libvips-linuxmusl-arm64@1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz#166778da0f48dd2bded1fa3033cee6b588f0d5d5" + integrity sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA== + +"@img/sharp-libvips-linuxmusl-x64@1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz#93794e4d7720b077fcad3e02982f2f1c246751ff" + integrity sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw== + +"@img/sharp-linux-arm64@0.33.5": + version "0.33.5" + resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz#edb0697e7a8279c9fc829a60fc35644c4839bb22" + integrity sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA== + optionalDependencies: + "@img/sharp-libvips-linux-arm64" "1.0.4" + +"@img/sharp-linux-arm@0.33.5": + version "0.33.5" + resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz#422c1a352e7b5832842577dc51602bcd5b6f5eff" + integrity sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ== + optionalDependencies: + "@img/sharp-libvips-linux-arm" "1.0.5" + +"@img/sharp-linux-s390x@0.33.5": + version "0.33.5" + resolved "https://registry.yarnpkg.com/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz#f5c077926b48e97e4a04d004dfaf175972059667" + integrity sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q== + optionalDependencies: + "@img/sharp-libvips-linux-s390x" "1.0.4" + +"@img/sharp-linux-x64@0.33.5": + version "0.33.5" + resolved "https://registry.yarnpkg.com/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz#d806e0afd71ae6775cc87f0da8f2d03a7c2209cb" + integrity sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA== + optionalDependencies: + "@img/sharp-libvips-linux-x64" "1.0.4" + +"@img/sharp-linuxmusl-arm64@0.33.5": + version "0.33.5" + resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz#252975b915894fb315af5deea174651e208d3d6b" + integrity sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g== + optionalDependencies: + "@img/sharp-libvips-linuxmusl-arm64" "1.0.4" + +"@img/sharp-linuxmusl-x64@0.33.5": + version "0.33.5" + resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz#3f4609ac5d8ef8ec7dadee80b560961a60fd4f48" + integrity sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw== + optionalDependencies: + "@img/sharp-libvips-linuxmusl-x64" "1.0.4" + +"@img/sharp-wasm32@0.33.5": + version "0.33.5" + resolved "https://registry.yarnpkg.com/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz#6f44f3283069d935bb5ca5813153572f3e6f61a1" + integrity sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg== + dependencies: + "@emnapi/runtime" "^1.2.0" + +"@img/sharp-win32-ia32@0.33.5": + version "0.33.5" + resolved "https://registry.yarnpkg.com/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz#1a0c839a40c5351e9885628c85f2e5dfd02b52a9" + integrity sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ== + +"@img/sharp-win32-x64@0.33.5": + version "0.33.5" + resolved "https://registry.yarnpkg.com/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz#56f00962ff0c4e0eb93d34a047d29fa995e3e342" + integrity sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg== + "@isaacs/cliui@^8.0.2": version "8.0.2" resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550" @@ -4568,11 +4688,27 @@ color-name@1.1.3: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= -color-name@~1.1.4: +color-name@^1.0.0, color-name@~1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== +color-string@^1.9.0: + version "1.9.1" + resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4" + integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg== + dependencies: + color-name "^1.0.0" + simple-swizzle "^0.2.2" + +color@^4.2.3: + version "4.2.3" + resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a" + integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A== + dependencies: + color-convert "^2.0.1" + color-string "^1.9.0" + colorette@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b" @@ -5103,6 +5239,11 @@ destroy@~1.0.4: resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80" integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA= +detect-libc@^2.0.3: + version "2.0.3" + resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700" + integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw== + detect-newline@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651" @@ -7121,6 +7262,11 @@ is-arrayish@^0.2.1: resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0= +is-arrayish@^0.3.1: + version "0.3.2" + resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03" + integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ== + is-async-function@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646" @@ -10799,6 +10945,35 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" +sharp@^0.33.5: + version "0.33.5" + resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.33.5.tgz#13e0e4130cc309d6a9497596715240b2ec0c594e" + integrity sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw== + dependencies: + color "^4.2.3" + detect-libc "^2.0.3" + semver "^7.6.3" + optionalDependencies: + "@img/sharp-darwin-arm64" "0.33.5" + "@img/sharp-darwin-x64" "0.33.5" + "@img/sharp-libvips-darwin-arm64" "1.0.4" + "@img/sharp-libvips-darwin-x64" "1.0.4" + "@img/sharp-libvips-linux-arm" "1.0.5" + "@img/sharp-libvips-linux-arm64" "1.0.4" + "@img/sharp-libvips-linux-s390x" "1.0.4" + "@img/sharp-libvips-linux-x64" "1.0.4" + "@img/sharp-libvips-linuxmusl-arm64" "1.0.4" + "@img/sharp-libvips-linuxmusl-x64" "1.0.4" + "@img/sharp-linux-arm" "0.33.5" + "@img/sharp-linux-arm64" "0.33.5" + "@img/sharp-linux-s390x" "0.33.5" + "@img/sharp-linux-x64" "0.33.5" + "@img/sharp-linuxmusl-arm64" "0.33.5" + "@img/sharp-linuxmusl-x64" "0.33.5" + "@img/sharp-wasm32" "0.33.5" + "@img/sharp-win32-ia32" "0.33.5" + "@img/sharp-win32-x64" "0.33.5" + shebang-command@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea" @@ -10847,6 +11022,13 @@ signal-exit@^4.0.1: resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04" integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw== +simple-swizzle@^0.2.2: + version "0.2.2" + resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" + integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg== + dependencies: + is-arrayish "^0.3.1" + sirv@^1.0.7: version "1.0.12" resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.12.tgz#d816c882b35489b3c63290e2f455ae3eccd5f652" From 044e9ce65513beb6129e0a55b804d886273e5506 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Mon, 23 Sep 2024 16:47:51 +0200 Subject: [PATCH 04/37] Improve map annotation style for HDViewpoints --- .../components/ViewPointHD/AnnotationItem.tsx | 33 +++++++++++++++---- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/Map/components/ViewPointHD/AnnotationItem.tsx b/frontend/src/components/Map/components/ViewPointHD/AnnotationItem.tsx index 5120f7ff9..a5dd51af8 100644 --- a/frontend/src/components/Map/components/ViewPointHD/AnnotationItem.tsx +++ b/frontend/src/components/Map/components/ViewPointHD/AnnotationItem.tsx @@ -6,6 +6,7 @@ import { Circle, CircleMarker, Marker, Polygon, Polyline, Tooltip, useMap } from import Image from 'next/image'; import { TrekMarker } from 'components/Map/Markers/TrekMarker'; import { optimizeAndDefineColor } from 'stylesheet'; +import { cn } from 'services/utils/cn'; type Props = { geometry: Geometry; @@ -39,12 +40,12 @@ const MetaData = ({ properties }: { properties: GeoJsonProperties }) => { return ( - + {Boolean(properties.category?.label) && ( - <> + {properties.category.label} - + )} {properties.name} @@ -70,6 +71,8 @@ export const AnnotationItem = ({ geometry, properties, id }: Props) => { ); } + const annotationType = properties?.category?.id as string; + if (geometry.type === 'Point' || geometry.type === 'MultiPoint') { const coordinatesAsMultiPoint = geometry.type === 'Point' ? [geometry.coordinates] : geometry.coordinates; @@ -93,7 +96,10 @@ export const AnnotationItem = ({ geometry, properties, id }: Props) => { } return ( { return ( [lng, lat])} > @@ -140,7 +149,14 @@ export const AnnotationItem = ({ geometry, properties, id }: Props) => { const radius = Math.sqrt(Math.pow(diagonal, 2) / 2); return ( - + ); @@ -152,7 +168,10 @@ export const AnnotationItem = ({ geometry, properties, id }: Props) => { {coordinatesAsMultiPolygon.map((group, index) => ( line.map<[number, number]>(([lat, lng]) => [lng, lat]))} > From 30c23261b1f9f289e831b5bbd2aa0447864c7bb6 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 16:27:41 +0200 Subject: [PATCH 05/37] Bump @20tab/react-leaflet-resetview from 1.0.1 to 1.1.0 --- frontend/package.json | 2 +- frontend/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index a1417521f..8a920fcc9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -34,7 +34,7 @@ } }, "dependencies": { - "@20tab/react-leaflet-resetview": "^1.0.1", + "@20tab/react-leaflet-resetview": "^1.1.0", "@hcaptcha/react-hcaptcha": "^1.4.4", "@makina-corpus/rando3d": "^1.3.3", "@radix-ui/react-dialog": "^1.1.1", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index f6e035d90..5af5b939f 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2,10 +2,10 @@ # yarn lockfile v1 -"@20tab/react-leaflet-resetview@^1.0.1": - version "1.0.1" - resolved "https://registry.yarnpkg.com/@20tab/react-leaflet-resetview/-/react-leaflet-resetview-1.0.1.tgz#4e5a0fdd0eb3de9c29f13b6d83041980cae4b5c2" - integrity sha512-qPdoVMBCBjhrZ/w0aU9+4CuZkdapQvy3tctmk7mH372x236e5xsDMwALKIy9S3QwBpuQkzBSgHRggB1MDpILqA== +"@20tab/react-leaflet-resetview@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@20tab/react-leaflet-resetview/-/react-leaflet-resetview-1.1.0.tgz#a2d1bbe7e678cfb91f75c795ff0d7e6824d7fef5" + integrity sha512-EcFm3YEjO3OCZ6QZiPJLSf7SI10zDR6HpNAUifNKI6uvx1Jbp5lYvc4t3OQei+b2m85C4S+HhSVP1ZkMzbXBcw== "@aashutoshrathi/word-wrap@^1.2.3": version "1.2.6" From eb674b4794867501db32ab5cd970d6cebd829353 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 16:34:10 +0200 Subject: [PATCH 06/37] Bump leaflet.offline from 3.0.1 to 3.1.0 --- frontend/package.json | 2 +- frontend/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 8a920fcc9..111bf9479 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -59,7 +59,7 @@ "leaflet-boundary-canvas": "^1.0.0", "leaflet-rastercoords": "^1.0.5", "leaflet.locatecontrol": "^0.81.1", - "leaflet.offline": "^3.0.1", + "leaflet.offline": "^3.1.0", "next": "^13.1.6", "next-compose-plugins": "^2.2.1", "next-pwa": "^5.6.0", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 5af5b939f..46a9217d9 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -8516,10 +8516,10 @@ leaflet.markercluster@^1.4.1: resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz#b53f2c4f2ca7306ddab1dbb6f1861d5e8aa6c5e5" integrity sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw== -leaflet.offline@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/leaflet.offline/-/leaflet.offline-3.0.1.tgz#3e3eb21315f0f1a295df9dd88ff565c0fc687e40" - integrity sha512-sxGKa0j44bcdytU23bnPMkAPzfCo4mxA7oQeprLbIvkI1TsHO02askIRHPzWupeHA5IK0uUbyf52Ppi7KaRW1w== +leaflet.offline@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/leaflet.offline/-/leaflet.offline-3.1.0.tgz#00c93dd461cee64e3f7c43113a11268dddbba809" + integrity sha512-dl3mzTEl1SnmzvJtJ0hVFLvlFX2wut/srvRAZ3A3g7Ee/RQkOo5zQ6tfVNhKe8N+adGXqcdEqEY9kgUxXCnEAw== dependencies: idb "^7.1.1" leaflet "^1.6.0" From f2f7e58275834e8561f65e270e3494c9e6f05132 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 17:00:14 +0200 Subject: [PATCH 07/37] Send tileSize instead of full layer to getStoredTilesAsJson function --- frontend/src/services/offline/injectOfflineMode.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/services/offline/injectOfflineMode.ts b/frontend/src/services/offline/injectOfflineMode.ts index cc8fd3c51..b94b12a34 100644 --- a/frontend/src/services/offline/injectOfflineMode.ts +++ b/frontend/src/services/offline/injectOfflineMode.ts @@ -42,11 +42,12 @@ const injectOfflineMode = (map: Map, id: number, center: LatLngBoundsExpression) controlInstance.addTo(map); - // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents let storageLayer: L.GeoJSON; const getGeoJsonData = () => - getStorageInfo(mapOfflineLayer.url).then(data => getStoredTilesAsJson(tileLayerOffline, data)); + getStorageInfo(mapOfflineLayer.url).then(data => + getStoredTilesAsJson(tileLayerOffline.getTileSize(), data), + ); const addStorageLayer = () => { void getGeoJsonData().then(geojson => { From 60052f48469d2954ea6a363c1423d51d17dde0cc Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 15:48:31 +0200 Subject: [PATCH 08/37] Use correct type for HoverableMarker --- frontend/src/components/Map/components/HoverableMarker.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Map/components/HoverableMarker.tsx b/frontend/src/components/Map/components/HoverableMarker.tsx index b955cb452..d55f5f245 100644 --- a/frontend/src/components/Map/components/HoverableMarker.tsx +++ b/frontend/src/components/Map/components/HoverableMarker.tsx @@ -2,6 +2,7 @@ import getActivityColor from 'components/pages/search/components/ResultCard/getA import { useListAndMapContext } from 'modules/map/ListAndMapContext'; import React, { ReactNode, useMemo } from 'react'; import { Marker } from 'react-leaflet'; +import { LatLngTuple } from 'leaflet'; import { TrekChildMarker } from '../Markers/TrekChildMarker'; import { TrekMarker } from '../Markers/TrekMarker'; @@ -9,7 +10,7 @@ const ZOOM_RATIO = 1.5; interface BaseProps { id: string; - position: [number, number]; + position: LatLngTuple; children?: ReactNode; onMouseOver?: () => void; onMouseOut?: () => void; From 5bd8e13d827bcfcba8be3c517ca40d4c7220a397 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 16:31:08 +0200 Subject: [PATCH 09/37] Bump @raruto/leaflet-elevation from 1.7.0 to 1.9.0 --- frontend/package.json | 2 +- frontend/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 111bf9479..7d85390b3 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -38,7 +38,7 @@ "@hcaptcha/react-hcaptcha": "^1.4.4", "@makina-corpus/rando3d": "^1.3.3", "@radix-ui/react-dialog": "^1.1.1", - "@raruto/leaflet-elevation": "1.7.0", + "@raruto/leaflet-elevation": "1.9.0", "@react-hook/resize-observer": "^1.2.6", "@sentry/nextjs": "^7.12.1", "@tanstack/react-query": "^5.51.1", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 46a9217d9..64f773f01 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2536,10 +2536,10 @@ resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27" integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w== -"@raruto/leaflet-elevation@1.7.0": - version "1.7.0" - resolved "https://registry.yarnpkg.com/@raruto/leaflet-elevation/-/leaflet-elevation-1.7.0.tgz#f013886b386ff916690c9c7121c826613a44833d" - integrity sha512-2dzUxrq6wuyev3d3fpLOZNPyq++jHmYinv8SIzt+g7bxbD1kVNprWKql63vMmoFcjO6K540IrBHhGOpQHiZq0A== +"@raruto/leaflet-elevation@1.9.0": + version "1.9.0" + resolved "https://registry.yarnpkg.com/@raruto/leaflet-elevation/-/leaflet-elevation-1.9.0.tgz#19f77ab8cbfdcab7ecb1cf8ee44dd671137b2520" + integrity sha512-N8GyiOhZxZR6op8mcnKcGzIvfpcW24JnhEYvWoeVJxoXN11JNTv3GijLeySuo6r7oVoWNpLV9ktBPKsZ4le0mg== dependencies: leaflet-i18n "^0.3.1" From b54aa5b054e4a4782dc88c099195d408763eda99 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 15:50:40 +0200 Subject: [PATCH 10/37] Refacto AltimetricProfil component --- .../components/AltimetricProfile/index.tsx | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/Map/components/AltimetricProfile/index.tsx b/frontend/src/components/Map/components/AltimetricProfile/index.tsx index 2c74a60e6..7135dc96d 100644 --- a/frontend/src/components/Map/components/AltimetricProfile/index.tsx +++ b/frontend/src/components/Map/components/AltimetricProfile/index.tsx @@ -1,12 +1,11 @@ -import React, { useEffect } from 'react'; -import '@raruto/leaflet-elevation'; -import '@raruto/leaflet-elevation/dist/leaflet-elevation.min.css'; +import { useEffect } from 'react'; import L from 'leaflet'; +import '@raruto/leaflet-elevation/src/index.js'; +import '@raruto/leaflet-elevation/src/index.css'; import { useMap } from 'react-leaflet'; import { useIntl } from 'react-intl'; import { useRouter } from 'next/router'; import { getDefaultLanguage } from 'modules/header/utills'; -import useHasMounted from 'hooks/useHasMounted'; interface AltimetricProfileProps { trekGeoJSON: string; @@ -17,14 +16,11 @@ export const AltimetricProfile: React.FC = ({ trekGeoJSO const map = useMap(); const intl = useIntl(); const language = useRouter().locale ?? getDefaultLanguage(); - const isMounted = useHasMounted(); useEffect(() => { - if (!isMounted) { + if (!map) { return; } - const div = document.getElementById(id); - if (div) div.innerHTML = ''; // @ts-expect-error the lib is not typed const elevationControl = L.control.elevation({ @@ -56,7 +52,13 @@ export const AltimetricProfile: React.FC = ({ trekGeoJSO L.setLocale(language); elevationControl.load(trekGeoJSON); - }, [id, intl, isMounted, language, map, trekGeoJSON]); + + return () => { + elevationControl.clear(); + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + map.removeControl(elevationControl); + }; + }, [id, intl, language, map, trekGeoJSON]); return null; }; From ddb9486e0b08f24b799fee02bbaf2c36b5d2a54f Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 15:58:55 +0200 Subject: [PATCH 11/37] Collapse import in one line --- frontend/src/hooks/useTileLayer.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/hooks/useTileLayer.ts b/frontend/src/hooks/useTileLayer.ts index 2053ee690..bc4a9bbe7 100644 --- a/frontend/src/hooks/useTileLayer.ts +++ b/frontend/src/hooks/useTileLayer.ts @@ -1,5 +1,4 @@ -import { LatLngBoundsExpression } from 'leaflet'; -import { Map } from 'leaflet'; +import { LatLngBoundsExpression, Map } from 'leaflet'; import { useState } from 'react'; import injectOfflineMode from 'services/offline/injectOfflineMode'; From 23352cc501f42d3ea8888044fd5de99075e15f27 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 16:20:03 +0200 Subject: [PATCH 12/37] Rename ambigues "center" variable by "bounds" --- .../Map/TouristicContentMap/TouristicContentMap.tsx | 6 +++--- frontend/src/hooks/useTileLayer.ts | 6 +++--- frontend/src/services/offline/injectOfflineMode.ts | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx b/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx index ea7a6f694..419be6fe9 100644 --- a/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx +++ b/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx @@ -46,12 +46,12 @@ export type PropsType = { }; export const TouristicContentMap: React.FC = props => { - const center: LatLngBoundsExpression = [ + const bounds: LatLngBoundsExpression = [ [props.bbox.corner1.y, props.bbox.corner1.x], [props.bbox.corner2.y, props.bbox.corner2.x], ]; - const { setMapInstance } = useTileLayer(Number(props.touristicContentGeometry.id), center); + const { setMapInstance } = useTileLayer(Number(props.touristicContentGeometry.id), bounds); const hideMap = () => { if (props.hideMap) { @@ -75,7 +75,7 @@ export const TouristicContentMap: React.FC = props => { } whenCreated={setMapInstance} zoomControl={props.hasZoomControl} - bounds={center} + bounds={bounds} attributionControl={false} > } onClick={hideMap} /> diff --git a/frontend/src/hooks/useTileLayer.ts b/frontend/src/hooks/useTileLayer.ts index bc4a9bbe7..9185c9c26 100644 --- a/frontend/src/hooks/useTileLayer.ts +++ b/frontend/src/hooks/useTileLayer.ts @@ -5,7 +5,7 @@ import injectOfflineMode from 'services/offline/injectOfflineMode'; export const useTileLayer = ( id?: number, - center?: LatLngBoundsExpression | null, + bounds?: LatLngBoundsExpression | null, ): { map: Map | null; setMapInstance: (newMap: Map) => void; @@ -15,8 +15,8 @@ export const useTileLayer = ( const setMapInstance = (newMap: Map) => { setMap(newMap); - if (id !== undefined && center) { - injectOfflineMode(newMap, id, center); + if (id !== undefined && bounds) { + injectOfflineMode(newMap, id, bounds); } }; diff --git a/frontend/src/services/offline/injectOfflineMode.ts b/frontend/src/services/offline/injectOfflineMode.ts index b94b12a34..d33d7403a 100644 --- a/frontend/src/services/offline/injectOfflineMode.ts +++ b/frontend/src/services/offline/injectOfflineMode.ts @@ -15,7 +15,7 @@ type EventStorageSize = TileLayerOffline & { storagesize: ControlSaveTiles; }; -const injectOfflineMode = (map: Map, id: number, center: LatLngBoundsExpression) => { +const injectOfflineMode = (map: Map, id: number, bounds: LatLngBoundsExpression) => { const mapConfig = getMapConfig(); const { mapOfflineLayer, mapClassicLayers, zoomAvailableOffline } = mapConfig; @@ -73,7 +73,7 @@ const injectOfflineMode = (map: Map, id: number, center: LatLngBoundsExpression) const recenter = () => { const minZoom = Math.min(...(zoomAvailableOffline ?? [])); map.setZoom(minZoom); - map.fitBounds(center); + map.fitBounds(bounds); }; // @ts-expect-error add method to access in the cache manager From ef1fce869392e3b96701a8de25994b27455e91c6 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Thu, 19 Sep 2024 15:06:00 +0200 Subject: [PATCH 13/37] Make sure the map is loaded before saving it --- frontend/src/hooks/useTileLayer.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/hooks/useTileLayer.ts b/frontend/src/hooks/useTileLayer.ts index 9185c9c26..795ab3d5a 100644 --- a/frontend/src/hooks/useTileLayer.ts +++ b/frontend/src/hooks/useTileLayer.ts @@ -15,7 +15,7 @@ export const useTileLayer = ( const setMapInstance = (newMap: Map) => { setMap(newMap); - if (id !== undefined && bounds) { + if (newMap && id !== undefined && bounds) { injectOfflineMode(newMap, id, bounds); } }; From d209123559327fa91c54aca14f72ed35e6eda442 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 16:22:38 +0200 Subject: [PATCH 14/37] Reduce the size of map BackButton --- frontend/src/components/Map/DetailsMap/DetailsMap.tsx | 2 +- frontend/src/components/Map/SearchMap/index.tsx | 2 +- .../components/Map/TouristicContentMap/TouristicContentMap.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Map/DetailsMap/DetailsMap.tsx b/frontend/src/components/Map/DetailsMap/DetailsMap.tsx index cea20948e..bfe177771 100644 --- a/frontend/src/components/Map/DetailsMap/DetailsMap.tsx +++ b/frontend/src/components/Map/DetailsMap/DetailsMap.tsx @@ -198,7 +198,7 @@ export const DetailsMap: React.FC = props => { ) : ( - } onClick={hideMap} /> + } onClick={hideMap} /> )} {props.hasZoomControl && } {mapToDisplay !== 'default' && ( diff --git a/frontend/src/components/Map/SearchMap/index.tsx b/frontend/src/components/Map/SearchMap/index.tsx index d3034f50a..932ef36dd 100644 --- a/frontend/src/components/Map/SearchMap/index.tsx +++ b/frontend/src/components/Map/SearchMap/index.tsx @@ -41,7 +41,7 @@ const SearchMap: React.FC = props => { {props.onMove && } - } onClick={hideMap} /> + } onClick={hideMap} /> {props.hasZoomControl === true && } diff --git a/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx b/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx index 419be6fe9..e8c51b299 100644 --- a/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx +++ b/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx @@ -78,7 +78,7 @@ export const TouristicContentMap: React.FC = props => { bounds={bounds} attributionControl={false} > - } onClick={hideMap} /> + } onClick={hideMap} /> From 97705902d57d7a18f85f73abf89877b7c03fe63e Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 16:23:53 +0200 Subject: [PATCH 15/37] Add locateControl and fullscreencontrol to touristic content map --- .../TouristicContentMap.tsx | 66 +++++++++---------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx b/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx index e8c51b299..4482b784c 100644 --- a/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx +++ b/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { MapContainer, ScaleControl } from 'react-leaflet'; import 'leaflet/dist/leaflet.css'; -import { ArrowLeft } from 'components/Icons/ArrowLeft'; import { Bbox } from 'modules/details/interface'; import { GeometryCollection, @@ -15,13 +14,16 @@ import { PolygonGeometry, } from 'modules/interface'; import { useTileLayer } from 'hooks/useTileLayer'; -import { BackButton } from '../components/BackButton'; +import { ArrowLeft } from 'components/Icons/ArrowLeft'; +import { BackButton } from 'components/Map/components/BackButton'; -import { GeometryList } from '../DetailsMap/GeometryList'; -import { getMapConfig } from '../config'; -import { GeometryListProps } from '../DetailsMap/DetailsMap'; -import { ResetView } from '../components/ResetView'; -import TileLayerManager from '../components/TileLayerManager'; +import { GeometryList } from 'components/Map/DetailsMap/GeometryList'; +import { getMapConfig } from 'components/Map/config'; +import { GeometryListProps } from 'components/Map/DetailsMap/DetailsMap'; +import { ResetView } from 'components/Map/components/ResetView'; +import TileLayerManager from 'components/Map/components/TileLayerManager'; +import LocateControl from 'components/Map/components/LocateControl'; +import FullscreenControl from 'components/Map/components/FullScreenControl'; interface TouristicContentGeometryNullable { geometry: @@ -61,32 +63,30 @@ export const TouristicContentMap: React.FC = props => { const mapConfig = getMapConfig(); return ( - <> - - } onClick={hideMap} /> - - - - {props.touristicContentGeometry !== null && ( - - )} - - + + } onClick={hideMap} /> + {props.hasZoomControl === true && } + + + + + {props.touristicContentGeometry !== null && ( + + )} + ); }; From 284696c036e10893e8401407af54202bbc11efb2 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 16:25:14 +0200 Subject: [PATCH 16/37] Define explicit import for map components --- .../components/Map/DetailsMap/DetailsMap.tsx | 29 ++++++++++--------- .../src/components/Map/SearchMap/index.tsx | 19 ++++++------ 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/Map/DetailsMap/DetailsMap.tsx b/frontend/src/components/Map/DetailsMap/DetailsMap.tsx index bfe177771..c0790d6cd 100644 --- a/frontend/src/components/Map/DetailsMap/DetailsMap.tsx +++ b/frontend/src/components/Map/DetailsMap/DetailsMap.tsx @@ -32,22 +32,23 @@ import { OutdoorSiteResult } from 'modules/outdoorSite/interface'; import { OutdoorCourseResult } from 'modules/outdoorCourse/interface'; import { cn } from 'services/utils/cn'; import { BackToMapButton } from 'components/BackToMapButton'; -import { BackButton } from '../components/BackButton'; -import { TrekMarkersAndCourse } from './TrekMarkersAndCourse'; -import { getMapConfig } from '../config'; -import { AltimetricProfile } from '../components/AltimetricProfile'; -import { ControlSection } from '../components/ControlSection'; -import { useDetailsMap } from './useDetailsMap'; +import { BackButton } from 'components/Map/components/BackButton'; +import { AltimetricProfile } from 'components/Map/components/AltimetricProfile'; +import { ControlSection } from 'components/Map/components/ControlSection'; +import DetailsMapDrawer from 'components/Map/components/DetailsMapDrawer'; +import { ResetView } from 'components/Map/components/ResetView'; +import TileLayerManager from 'components/Map/components/TileLayerManager'; +import FullscreenControl from 'components/Map/components/FullScreenControl'; +import ViewPointHD from 'components/Map/components/ViewPointHD'; +import { CRSPixel } from 'components/Map/components/ViewPointHD/CRSPixel'; +import { AnnotationList } from 'components/Map/components/ViewPointHD/AnnotationList'; +import LocateControl from 'components/Map/components/LocateControl'; + import { MapChildren, PointWithIcon } from './MapChildren'; -import DetailsMapDrawer from '../components/DetailsMapDrawer'; -import { ResetView } from '../components/ResetView'; -import TileLayerManager from '../components/TileLayerManager'; -import FullscreenControl from '../components/FullScreenControl'; -import ViewPointHD from '../components/ViewPointHD'; -import { CRSPixel } from '../components/ViewPointHD/CRSPixel'; -import { AnnotationList } from '../components/ViewPointHD/AnnotationList'; -import LocateControl from '../components/LocateControl'; +import { useDetailsMap } from './useDetailsMap'; +import { getMapConfig } from '../config'; +import { TrekMarkersAndCourse } from './TrekMarkersAndCourse'; export interface GeometryListProps { geometry: diff --git a/frontend/src/components/Map/SearchMap/index.tsx b/frontend/src/components/Map/SearchMap/index.tsx index 932ef36dd..b03542993 100644 --- a/frontend/src/components/Map/SearchMap/index.tsx +++ b/frontend/src/components/Map/SearchMap/index.tsx @@ -1,19 +1,18 @@ -import MapContainer from 'components/Map/SearchMap/MapContainer'; -import MoveHandler from 'components/Map/SearchMap/MoveHandler'; -import SearchMapChildrens from 'components/Map/SearchMap/SearchMapChildrens'; import { LatLngBounds } from 'leaflet'; -import React from 'react'; import { ScaleControl } from 'react-leaflet'; import 'leaflet/dist/leaflet.css'; +import MapContainer from 'components/Map/SearchMap/MapContainer'; +import MoveHandler from 'components/Map/SearchMap/MoveHandler'; +import SearchMapChildrens from 'components/Map/SearchMap/SearchMapChildrens'; import { ArrowLeft } from 'components/Icons/ArrowLeft'; import { useTileLayer } from 'hooks/useTileLayer'; -import { BackButton } from '../components/BackButton'; -import { FilterButton } from '../components/FilterButton'; -import { ResetView } from '../components/ResetView'; -import TileLayerManager from '../components/TileLayerManager'; -import FullscreenControl from '../components/FullScreenControl'; -import LocateControl from '../components/LocateControl'; +import { BackButton } from 'components/Map/components/BackButton'; +import { FilterButton } from 'components/Map/components/FilterButton'; +import { ResetView } from 'components/Map/components/ResetView'; +import TileLayerManager from 'components/Map/components/TileLayerManager'; +import FullscreenControl from 'components/Map/components/FullScreenControl'; +import LocateControl from 'components/Map/components/LocateControl'; export type PropsType = { segments?: { x: number; y: number }[]; From 5b16d691128f561592cce3d90bdca3e40eab65dd Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 16:44:31 +0200 Subject: [PATCH 17/37] Bump @types/leaflet from 1.7.5 to 1.9.12 --- frontend/package.json | 2 +- frontend/yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 7d85390b3..c687813eb 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -102,7 +102,7 @@ "@testing-library/react": "^16.0.0", "@types/debounce": "^1.2.1", "@types/jest": "27.0.2", - "@types/leaflet": "1.7.5", + "@types/leaflet": "^1.9.12", "@types/node": "22.5.4", "@types/react": "^18.0.25", "@types/react-dom": "^18.0.9", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 64f773f01..8b39a44d8 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -3063,10 +3063,10 @@ dependencies: "@types/geojson" "*" -"@types/leaflet@1.7.5": - version "1.7.5" - resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.7.5.tgz#7b2bcf1271fb7b8c305e3c468eaad65b6dbac472" - integrity sha512-+Myo00Yb5OuvUyrH+vUwn9DRgOaBJsF/etIMdMcNhWGBMo58Mo1cxLInvCd0ZpvItju/AeDYFB/Od2pLiHB3VA== +"@types/leaflet@^1.9.12": + version "1.9.12" + resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.9.12.tgz#a6626a0b3fba36fd34723d6e95b22e8024781ad6" + integrity sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg== dependencies: "@types/geojson" "*" From 54564b48612ca46e18367b9f088e5afff206c697 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 17:36:11 +0200 Subject: [PATCH 18/37] Add next-leaflet-cluster package --- frontend/package.json | 1 + frontend/yarn.lock | 12 ++++++++++++ 2 files changed, 13 insertions(+) diff --git a/frontend/package.json b/frontend/package.json index c687813eb..d200579bb 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -62,6 +62,7 @@ "leaflet.offline": "^3.1.0", "next": "^13.1.6", "next-compose-plugins": "^2.2.1", + "next-leaflet-cluster": "^1.0.0", "next-pwa": "^5.6.0", "orejime": "^2.3.0", "postcss": "8.3.6", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 8b39a44d8..93ed558a5 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -8516,6 +8516,11 @@ leaflet.markercluster@^1.4.1: resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz#b53f2c4f2ca7306ddab1dbb6f1861d5e8aa6c5e5" integrity sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw== +leaflet.markercluster@^1.5.3: + version "1.5.3" + resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056" + integrity sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA== + leaflet.offline@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/leaflet.offline/-/leaflet.offline-3.1.0.tgz#00c93dd461cee64e3f7c43113a11268dddbba809" @@ -9105,6 +9110,13 @@ next-compose-plugins@^2.2.1: resolved "https://registry.yarnpkg.com/next-compose-plugins/-/next-compose-plugins-2.2.1.tgz#020fc53f275a7e719d62521bef4300fbb6fde5ab" integrity sha512-OjJ+fV15FXO2uQXQagLD4C0abYErBjyjE0I0FHpOEIB8upw0hg1ldFP6cqHTJBH1cZqy96OeR3u1dJ+Ez2D4Bg== +next-leaflet-cluster@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/next-leaflet-cluster/-/next-leaflet-cluster-1.0.0.tgz#c2fb90e2e43a60739e21de70384b54cec999d067" + integrity sha512-1QHUkdr2YKDbHFEgxsnMjCaGgfETf0EdssM7YVoiQQnBm5pXewGSF5Wsj21CTUMnVWdkqBtu4BIl41iSLvpNjA== + dependencies: + leaflet.markercluster "^1.5.3" + next-pwa@^5.6.0: version "5.6.0" resolved "https://registry.yarnpkg.com/next-pwa/-/next-pwa-5.6.0.tgz#f7b1960c4fdd7be4253eb9b41b612ac773392bf4" From fff34ea458cf4e9e1732a2ba5a5e57b726131ce1 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 17:36:53 +0200 Subject: [PATCH 19/37] Use next-leaflet-cluster instead of react-leaflet-markercluster --- .../Map/components/ClusterContainer/index.tsx | 42 ++++++++----------- 1 file changed, 17 insertions(+), 25 deletions(-) diff --git a/frontend/src/components/Map/components/ClusterContainer/index.tsx b/frontend/src/components/Map/components/ClusterContainer/index.tsx index a75177e06..26fd18ef0 100644 --- a/frontend/src/components/Map/components/ClusterContainer/index.tsx +++ b/frontend/src/components/Map/components/ClusterContainer/index.tsx @@ -1,7 +1,6 @@ +import ClusterGroup from 'next-leaflet-cluster'; import { getMapConfig } from 'components/Map/config'; -import React from 'react'; -import MarkerClusterGroup from 'react-leaflet-markercluster'; -import { ClusterMarker } from '../../Markers/Cluster'; +import { ClusterMarker } from 'components/Map/Markers/Cluster'; interface ClusterContainerProps { children: React.ReactNode; @@ -21,25 +20,18 @@ const clusteringMaxZoom = getMapConfig().maximumZoomLevel; /** * Wraps MarkerClusterGroup to enable/disable it easily */ -export const ClusterContainer: React.FC = ({ children, enabled }) => { - // All MarkerClusterGroup props options are here: (the lib is not properly typed yet) - // https://github.com/Leaflet/Leaflet.markercluster#all-options - - // The issue: https://github.com/yuzhva/react-leaflet-markercluster/issues - - return ( - - zoom <= clusterRadiusThreshold ? lowZoomClusterRadius : highZoomClusterRadius - : 0 - } - disableClusteringAtZoom={clusteringMaxZoom} - spiderfyOnMaxZoom={true} - > - {children} - - ); -}; +export const ClusterContainer: React.FC = ({ children, enabled }) => ( + + zoom <= clusterRadiusThreshold ? lowZoomClusterRadius : highZoomClusterRadius + : 0 + } + disableClusteringAtZoom={clusteringMaxZoom} + spiderfyOnMaxZoom + > + {children} + +); From dfc8b6f82766c5cd2021c6ba5a3dcbc11c58fec2 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 17:37:33 +0200 Subject: [PATCH 20/37] Remove react-leaflet-markercluster package --- frontend/package.json | 1 - frontend/yarn.lock | 22 ---------------------- 2 files changed, 23 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index d200579bb..cd40a8239 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -75,7 +75,6 @@ "react-intl": "^6.2.1", "react-leaflet": "3.1.0", "react-leaflet-fullscreen": "^4.1.0", - "react-leaflet-markercluster": "^3.0.0-rc1", "react-leaflet-textpath": "2.1.0", "react-media-hook": "^0.5.0", "react-select": "^5.7.2", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 93ed558a5..aaa7c9e88 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -8511,11 +8511,6 @@ leaflet.locatecontrol@^0.81.1: resolved "https://registry.yarnpkg.com/leaflet.locatecontrol/-/leaflet.locatecontrol-0.81.1.tgz#8aec3124ef5cdda3476fd9013315789b4e301a45" integrity sha512-ZtsdScGufPw330X3UIaGGjnfQ1NrhLySnlruWufIMnfzsHgQPz0+mSxsCQMVh7QgOBoefCGb/lioSejiaNx1EQ== -leaflet.markercluster@^1.4.1: - version "1.4.1" - resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz#b53f2c4f2ca7306ddab1dbb6f1861d5e8aa6c5e5" - integrity sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw== - leaflet.markercluster@^1.5.3: version "1.5.3" resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz#9cdb52a4eab92671832e1ef9899669e80efc4056" @@ -10197,16 +10192,6 @@ react-leaflet-fullscreen@^4.1.0: dependencies: leaflet.fullscreen "2.4.0" -react-leaflet-markercluster@^3.0.0-rc1: - version "3.0.0-rc1" - resolved "https://registry.yarnpkg.com/react-leaflet-markercluster/-/react-leaflet-markercluster-3.0.0-rc1.tgz#4e45392d599fb410eac413aeee6cb52f51d0fc5c" - integrity sha512-wr8ERtx73sY0uVoQAM1v1vsA5Vsbdgyqc88h+Eo2kYRwNdkVTEOoUTnAh3CgGuOyP0Y9QLd2dKGupGkufpwryQ== - dependencies: - "@react-leaflet/core" "^1.0.2" - leaflet "^1.6.0" - leaflet.markercluster "^1.4.1" - react-leaflet "^3.0.0" - react-leaflet-textpath@2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/react-leaflet-textpath/-/react-leaflet-textpath-2.1.0.tgz#141b1af23e3286eddac105bd21dc65979a3d1f8a" @@ -10221,13 +10206,6 @@ react-leaflet@3.1.0: dependencies: "@react-leaflet/core" "^1.0.2" -react-leaflet@^3.0.0: - version "3.0.5" - resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-3.0.5.tgz#6b246867e4b08e3bc5960eebee91376785ce578b" - integrity sha512-0hJwwRMo5ChY+0nr1yO/UDCT4alIqMgJ7S/HoMBkL65Sr1yJ8eX5lAXk3EkdBUOwxQlMYCduU87pczYmudnlbQ== - dependencies: - "@react-leaflet/core" "^1.0.2" - react-lifecycles-compat@^3.0.0: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" From 369c248e2d3d53f993760bc81a0b3ba6031f25e7 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 17:39:58 +0200 Subject: [PATCH 21/37] Bump react-leaflet from 3.1.0 to 4.2.1 --- frontend/package.json | 2 +- frontend/yarn.lock | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index cd40a8239..53a83b532 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -73,7 +73,7 @@ "react-infinite-scroll-component": "6.1.0", "react-inlinesvg": "^4.0.4", "react-intl": "^6.2.1", - "react-leaflet": "3.1.0", + "react-leaflet": "^4.2.1", "react-leaflet-fullscreen": "^4.1.0", "react-leaflet-textpath": "2.1.0", "react-media-hook": "^0.5.0", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index aaa7c9e88..e885543ac 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2574,10 +2574,10 @@ "@react-hook/latest" "^1.0.2" "@react-hook/passive-layout-effect" "^1.2.0" -"@react-leaflet/core@^1.0.2": - version "1.0.2" - resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-1.0.2.tgz#39c6a73f61c666d5dcf673741cea2672fa4bbae1" - integrity sha512-QbleYZTMcgujAEyWGki8Lx6cXQqWkNtQlqf5c7NImlIp8bKW66bFpez/6EVatW7+p9WKBOEOVci/9W7WW70EZg== +"@react-leaflet/core@^2.1.0": + version "2.1.0" + resolved "https://registry.yarnpkg.com/@react-leaflet/core/-/core-2.1.0.tgz#383acd31259d7c9ae8fb1b02d5e18fe613c2a13d" + integrity sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg== "@rollup/plugin-babel@^5.2.0": version "5.2.2" @@ -10199,12 +10199,12 @@ react-leaflet-textpath@2.1.0: dependencies: leaflet-textpath "^1.2.3" -react-leaflet@3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-3.1.0.tgz#42deb5e454518016eff8bc85511ae58812f910f5" - integrity sha512-kdZS8NYbYFPmkQr7zSDR2gkKGFeWvkxqoqcmZEckzHL4d5c85dJ2gbbqhaPDpmWWgaRw9O29uA/77qpKmK4mTQ== +react-leaflet@^4.2.1: + version "4.2.1" + resolved "https://registry.yarnpkg.com/react-leaflet/-/react-leaflet-4.2.1.tgz#c300e9eccaf15cb40757552e181200aa10b94780" + integrity sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q== dependencies: - "@react-leaflet/core" "^1.0.2" + "@react-leaflet/core" "^2.1.0" react-lifecycles-compat@^3.0.0: version "3.0.4" From 343ce685774ee22e4cb4a89b26ac076e37aa2be0 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 18 Sep 2024 17:40:35 +0200 Subject: [PATCH 22/37] Use ref instead of obsolete whenReady prop for MapContainer --- frontend/src/components/Map/DetailsMap/DetailsMap.tsx | 2 +- frontend/src/components/Map/SearchMap/MapContainer.tsx | 2 +- .../components/Map/TouristicContentMap/TouristicContentMap.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Map/DetailsMap/DetailsMap.tsx b/frontend/src/components/Map/DetailsMap/DetailsMap.tsx index c0790d6cd..c424b90d6 100644 --- a/frontend/src/components/Map/DetailsMap/DetailsMap.tsx +++ b/frontend/src/components/Map/DetailsMap/DetailsMap.tsx @@ -190,7 +190,7 @@ export const DetailsMap: React.FC = props => { navigator.onLine ? undefined : Math.min(...(mapConfig?.zoomAvailableOffline ?? [])) } zoomControl={props.hasZoomControl} - whenCreated={setMapInstance} + ref={setMapInstance} bounds={bounds} {...(mapToDisplay !== 'default' && { crs: CRSPixel(mapToDisplay) })} > diff --git a/frontend/src/components/Map/SearchMap/MapContainer.tsx b/frontend/src/components/Map/SearchMap/MapContainer.tsx index df4ea5c5f..eca343a8e 100644 --- a/frontend/src/components/Map/SearchMap/MapContainer.tsx +++ b/frontend/src/components/Map/SearchMap/MapContainer.tsx @@ -18,7 +18,7 @@ const MapContainer: React.FC = ({ children, whenCreated, hasZoomControl = center={mapConfig.searchMapCenter as [number, number]} zoom={mapConfig.searchMapZoom} maxZoom={mapConfig.maximumZoomLevel} - whenCreated={whenCreated} + ref={whenCreated} scrollWheelZoom zoomControl={hasZoomControl} id="search_map" diff --git a/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx b/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx index 4482b784c..bce4a8956 100644 --- a/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx +++ b/frontend/src/components/Map/TouristicContentMap/TouristicContentMap.tsx @@ -72,7 +72,7 @@ export const TouristicContentMap: React.FC = props => { : Math.max(...(mapConfig?.zoomAvailableOffline ?? [])) } minZoom={navigator.onLine ? undefined : Math.min(...(mapConfig?.zoomAvailableOffline ?? []))} - whenCreated={setMapInstance} + ref={setMapInstance} zoomControl={props.hasZoomControl} bounds={bounds} attributionControl={false} From 0af760f2d934711fa83cd4247938b71e8ebe0b26 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Thu, 19 Sep 2024 09:53:04 +0200 Subject: [PATCH 23/37] Use useMapEvent for attaching events on map popup --- .../components/Map/components/Popup/index.tsx | 36 ++++++++++--------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/Map/components/Popup/index.tsx b/frontend/src/components/Map/components/Popup/index.tsx index eb6e7dc05..c24ac6146 100644 --- a/frontend/src/components/Map/components/Popup/index.tsx +++ b/frontend/src/components/Map/components/Popup/index.tsx @@ -1,7 +1,7 @@ -import { useState } from 'react'; +import { useRef, useState } from 'react'; import Image from 'next/image'; import { routes } from 'services/routes'; -import { Popup as LeafletPopup, Tooltip as LeafletTooltip } from 'react-leaflet'; +import { Popup as LeafletPopup, Tooltip as LeafletTooltip, useMapEvent } from 'react-leaflet'; import { FormattedMessage } from 'react-intl'; import Loader from 'components/Loader'; @@ -107,7 +107,22 @@ export const Popup: React.FC = ({ type, content, }) => { - const [hideTooltip, setHideTooltip] = useState(false); + const [hideTooltip, setHideTooltip] = useState(false); + const popupRef = useRef(null); + + useMapEvent('popupopen', event => { + if (event.popup === popupRef.current) { + setHideTooltip(true); + handleOpen?.(); + } + }); + + useMapEvent('popupclose', event => { + if (event.popup === popupRef.current) { + setHideTooltip(false); + handleClose?.(); + } + }); return ( <> @@ -116,19 +131,8 @@ export const Popup: React.FC = ({ )} - { - setHideTooltip(true); - handleOpen?.(); - }} - onClose={() => { - setHideTooltip(false); - handleClose?.(); - }} - offset={[0, -12]} - > - + + ); From da91278a8be1f92c3a0fd327330905cc586d3997 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Thu, 19 Sep 2024 14:38:55 +0200 Subject: [PATCH 24/37] Create React-leaflet mock --- frontend/src/__mocks__/react-leaflet.js | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 frontend/src/__mocks__/react-leaflet.js diff --git a/frontend/src/__mocks__/react-leaflet.js b/frontend/src/__mocks__/react-leaflet.js new file mode 100644 index 000000000..b342b05c0 --- /dev/null +++ b/frontend/src/__mocks__/react-leaflet.js @@ -0,0 +1,11 @@ +const MapContainer = ({ children }) =>
{children}
; + +const useMap = () => ({ fitBounds: () => {} }); + +const TileLayer = () =>
; + +const Marker = ({ children }) =>
{children}
; + +const Popup = () =>
; + +export { MapContainer, TileLayer, Marker, Popup, useMap }; From 39a389675fbf42af4f884be99c70d3b3fa59c911 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Thu, 19 Sep 2024 14:39:25 +0200 Subject: [PATCH 25/37] Update test for MapLayerTypeToggleButton --- .../Map/components/CustomControl/index.tsx | 2 +- .../MapLayerTypeToggleButton.test.tsx | 10 +- .../MapLayerTypeToggleButton.tsx | 4 +- .../MapLayerTypeToggleButton.test.tsx.snap | 174 +++++------------- 4 files changed, 58 insertions(+), 132 deletions(-) diff --git a/frontend/src/components/Map/components/CustomControl/index.tsx b/frontend/src/components/Map/components/CustomControl/index.tsx index 69b6ef7d3..c37048925 100644 --- a/frontend/src/components/Map/components/CustomControl/index.tsx +++ b/frontend/src/components/Map/components/CustomControl/index.tsx @@ -3,7 +3,7 @@ import { useMap } from 'react-leaflet'; import L, { ControlPosition } from 'leaflet'; import ReactDOM from 'react-dom'; -interface CustomControlProps { +export interface CustomControlProps { children: React.ReactNode; position?: ControlPosition; name?: string; diff --git a/frontend/src/components/MapLayerTypeToggleButton/MapLayerTypeToggleButton.test.tsx b/frontend/src/components/MapLayerTypeToggleButton/MapLayerTypeToggleButton.test.tsx index 0480c3f4c..aef745971 100644 --- a/frontend/src/components/MapLayerTypeToggleButton/MapLayerTypeToggleButton.test.tsx +++ b/frontend/src/components/MapLayerTypeToggleButton/MapLayerTypeToggleButton.test.tsx @@ -1,6 +1,6 @@ -import React from 'react'; import { MapContainer } from 'react-leaflet'; import { render } from 'services/testing/reactTestingLibraryWrapper'; +import { CustomControlProps } from 'components/Map/components/CustomControl'; import { MapLayerTypeToggleButton } from './MapLayerTypeToggleButton'; jest.mock('components/Map/config', () => ({ @@ -9,6 +9,14 @@ jest.mock('components/Map/config', () => ({ }), })); +jest.mock( + 'components/Map/components/CustomControl', + () => + function CustomControl(props: CustomControlProps) { + return
; + }, +); + describe('MapLayerTypeToggleButton', () => { it('renders correctly', () => { const mapLayerTypeToggleButton = render( diff --git a/frontend/src/components/MapLayerTypeToggleButton/MapLayerTypeToggleButton.tsx b/frontend/src/components/MapLayerTypeToggleButton/MapLayerTypeToggleButton.tsx index ef51bd212..dc20ea063 100644 --- a/frontend/src/components/MapLayerTypeToggleButton/MapLayerTypeToggleButton.tsx +++ b/frontend/src/components/MapLayerTypeToggleButton/MapLayerTypeToggleButton.tsx @@ -1,7 +1,7 @@ -import { SquaredButtonWithImage } from 'components/SquaredButtonWithImage/SquaredButtonWithImage'; -import { ControlPosition } from 'leaflet'; import { useState } from 'react'; +import { ControlPosition } from 'leaflet'; import Control from 'components/Map/components/CustomControl'; +import { SquaredButtonWithImage } from 'components/SquaredButtonWithImage/SquaredButtonWithImage'; export type TileLayerType = 'classic' | 'satellite'; diff --git a/frontend/src/components/MapLayerTypeToggleButton/__snapshots__/MapLayerTypeToggleButton.test.tsx.snap b/frontend/src/components/MapLayerTypeToggleButton/__snapshots__/MapLayerTypeToggleButton.test.tsx.snap index 4d07a86d1..b51d5b5ff 100644 --- a/frontend/src/components/MapLayerTypeToggleButton/__snapshots__/MapLayerTypeToggleButton.test.tsx.snap +++ b/frontend/src/components/MapLayerTypeToggleButton/__snapshots__/MapLayerTypeToggleButton.test.tsx.snap @@ -6,158 +6,76 @@ Object { "baseElement":
-
-
-
-
-
-
-
-
-
-
-
- + Satellite +
-
-
+
, "container":
-
-
-
-
-
-
-
-
-
-
-
- + Satellite +
-
-
+
, From 7ad9bce3e6b59d636b465d13c8df8f6644fdc163 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Thu, 19 Sep 2024 15:38:52 +0200 Subject: [PATCH 26/37] Remove useless leaflet declaration from package.json --- frontend/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/package.json b/frontend/package.json index 53a83b532..8631ad29d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -55,7 +55,6 @@ "dotenv-flow": "^3.2.0", "express": "^4.17.1", "html-react-parser": "^2.0.0", - "leaflet": "^1.7.1", "leaflet-boundary-canvas": "^1.0.0", "leaflet-rastercoords": "^1.0.5", "leaflet.locatecontrol": "^0.81.1", From 8c0fe545c762376fd581ead77cab5a64b7a07dfd Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Tue, 24 Sep 2024 12:04:30 +0200 Subject: [PATCH 27/37] Bump html-react-parser from 2.0.0 to 5.1.16 --- frontend/package.json | 2 +- frontend/yarn.lock | 126 ++++++++++++++++-------------------------- 2 files changed, 49 insertions(+), 79 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 8631ad29d..e9e1358b8 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -54,7 +54,7 @@ "diacritics": "^1.3.0", "dotenv-flow": "^3.2.0", "express": "^4.17.1", - "html-react-parser": "^2.0.0", + "html-react-parser": "^5.1.16", "leaflet-boundary-canvas": "^1.0.0", "leaflet-rastercoords": "^1.0.5", "leaflet.locatecontrol": "^0.81.1", diff --git a/frontend/yarn.lock b/frontend/yarn.lock index e885543ac..d487af997 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -5331,15 +5331,6 @@ dom-serializer@0: domelementtype "^2.0.1" entities "^2.0.0" -dom-serializer@^1.0.1: - version "1.4.1" - resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30" - integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag== - dependencies: - domelementtype "^2.0.1" - domhandler "^4.2.0" - entities "^2.0.0" - dom-serializer@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53" @@ -5359,7 +5350,7 @@ domelementtype@^2.0.1: resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.1.0.tgz#a851c080a6d1c3d94344aed151d99f669edf585e" integrity sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w== -domelementtype@^2.2.0, domelementtype@^2.3.0: +domelementtype@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d" integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw== @@ -5371,12 +5362,12 @@ domexception@^4.0.0: dependencies: webidl-conversions "^7.0.0" -domhandler@4.3.1, domhandler@^4.2.0, domhandler@^4.2.2: - version "4.3.1" - resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c" - integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ== +domhandler@5.0.3, domhandler@^5.0.2, domhandler@^5.0.3: + version "5.0.3" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31" + integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w== dependencies: - domelementtype "^2.2.0" + domelementtype "^2.3.0" domhandler@^2.3.0: version "2.4.2" @@ -5385,13 +5376,6 @@ domhandler@^2.3.0: dependencies: domelementtype "1" -domhandler@^5.0.2, domhandler@^5.0.3: - version "5.0.3" - resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31" - integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w== - dependencies: - domelementtype "^2.3.0" - domutils@^1.5.1: version "1.7.0" resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a" @@ -5400,16 +5384,7 @@ domutils@^1.5.1: dom-serializer "0" domelementtype "1" -domutils@^2.8.0: - version "2.8.0" - resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135" - integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A== - dependencies: - dom-serializer "^1.0.1" - domelementtype "^2.2.0" - domhandler "^4.2.0" - -domutils@^3.0.1: +domutils@^3.0.1, domutils@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e" integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA== @@ -5558,12 +5533,7 @@ entities@^2.0.0: resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5" integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w== -entities@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4" - integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q== - -entities@^4.2.0: +entities@^4.2.0, entities@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48" integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw== @@ -6964,13 +6934,13 @@ hosted-git-info@^3.0.6: dependencies: lru-cache "^6.0.0" -html-dom-parser@2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/html-dom-parser/-/html-dom-parser-2.0.0.tgz#ece281d47c233bb67982cacde8db7c70e404587c" - integrity sha512-PwVjg12yfWunpH2WjwjaYNKcZyKKm20kclTfMQohiRzfgYiXX0dR7nXIIKnHneghMDvB0rKFZLEAe11ykOfpcg== +html-dom-parser@5.0.10: + version "5.0.10" + resolved "https://registry.yarnpkg.com/html-dom-parser/-/html-dom-parser-5.0.10.tgz#bf46b05c50f35c2fcadfc8e91566c54d3caf9bd7" + integrity sha512-GwArYL3V3V8yU/mLKoFF7HlLBv80BZ2Ey1BzfVNRpAci0cEKhFHI/Qh8o8oyt3qlAMLlK250wsxLdYX4viedvg== dependencies: - domhandler "4.3.1" - htmlparser2 "7.2.0" + domhandler "5.0.3" + htmlparser2 "9.1.0" html-encoding-sniffer@^3.0.0: version "3.0.0" @@ -6984,30 +6954,30 @@ html-escaper@^2.0.0: resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453" integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg== -html-react-parser@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-2.0.0.tgz#d056ef75534d8f3dfdb611196008fdcf8b392f67" - integrity sha512-AI1lhybWGi8w4QkGtEIS3iSGAjeFGaonxl/+CzqzCeNT3g3z/yx2NKsA93trnv2BLjhe+juGLmLeTSUkyYWk9Q== +html-react-parser@^5.1.16: + version "5.1.16" + resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-5.1.16.tgz#935fcc3421430a99892148c1c69f28fdcdfc2a95" + integrity sha512-OtVPEQRwa4eelyMbHmUfMSw5VwJsVGSVsfa8I+M8xuV87n91cF3PHpvT/z0Frf1uG34atqh3dxgjaGIsmqVsRA== dependencies: - domhandler "4.3.1" - html-dom-parser "2.0.0" - react-property "2.0.0" - style-to-js "1.1.1" + domhandler "5.0.3" + html-dom-parser "5.0.10" + react-property "2.0.2" + style-to-js "1.1.14" html-tags@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140" integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg== -htmlparser2@7.2.0: - version "7.2.0" - resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-7.2.0.tgz#8817cdea38bbc324392a90b1990908e81a65f5a5" - integrity sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog== +htmlparser2@9.1.0: + version "9.1.0" + resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-9.1.0.tgz#cdb498d8a75a51f739b61d3f718136c369bc8c23" + integrity sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ== dependencies: - domelementtype "^2.0.1" - domhandler "^4.2.2" - domutils "^2.8.0" - entities "^3.0.1" + domelementtype "^2.3.0" + domhandler "^5.0.3" + domutils "^3.1.0" + entities "^4.5.0" htmlparser2@^3.10.0: version "3.10.1" @@ -7177,10 +7147,10 @@ ini@^1.3.5: resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927" integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw== -inline-style-parser@0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1" - integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q== +inline-style-parser@0.2.3: + version "0.2.3" + resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.2.3.tgz#e35c5fb45f3a83ed7849fe487336eb7efa25971c" + integrity sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g== internal-slot@^1.0.3: version "1.0.3" @@ -10226,10 +10196,10 @@ react-modal@^3.13.1: react-lifecycles-compat "^3.0.0" warning "^4.0.3" -react-property@2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/react-property/-/react-property-2.0.0.tgz#2156ba9d85fa4741faf1918b38efc1eae3c6a136" - integrity sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw== +react-property@2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/react-property/-/react-property-2.0.2.tgz#d5ac9e244cef564880a610bc8d868bd6f60fdda6" + integrity sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug== react-remove-scroll-bar@^2.3.4: version "2.3.6" @@ -11513,19 +11483,19 @@ style-search@^0.1.0: resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI= -style-to-js@1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/style-to-js/-/style-to-js-1.1.1.tgz#417786986cda61d4525c80aed9d1123a6a7af9b8" - integrity sha512-RJ18Z9t2B02sYhZtfWKQq5uplVctgvjTfLWT7+Eb1zjUjIrWzX5SdlkwLGQozrqarTmEzJJ/YmdNJCUNI47elg== +style-to-js@1.1.14: + version "1.1.14" + resolved "https://registry.yarnpkg.com/style-to-js/-/style-to-js-1.1.14.tgz#9980ba413839697300a1c30797cdd4c5ac43dce8" + integrity sha512-+FGNddHGLPY4NOPneEEdFj8dIy+oV4mHGrPZpB38P+YXrCAG9mp70dbcsAWnM8BFZULkJRvMqD0CXRjZLOYJFA== dependencies: - style-to-object "0.3.0" + style-to-object "1.0.7" -style-to-object@0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46" - integrity sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA== +style-to-object@1.0.7: + version "1.0.7" + resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-1.0.7.tgz#8604fb6018ac3db83e97207a4f85f579068f661c" + integrity sha512-uSjr59G5u6fbxUfKbb8GcqMGT3Xs9v5IbPkjb0S16GyOeBLAzSRK0CixBv5YrYvzO6TDLzIS6QCn78tkqWngPw== dependencies: - inline-style-parser "0.1.1" + inline-style-parser "0.2.3" styled-jsx@3.2.1: version "3.2.1" From a8f7f312e0b8f00a0b443e5f795e1db0d9af4e64 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 25 Sep 2024 14:43:20 +0200 Subject: [PATCH 28/37] Fix type related of the react-html-parser bump --- frontend/src/components/HtmlParser/HtmlParser.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/HtmlParser/HtmlParser.tsx b/frontend/src/components/HtmlParser/HtmlParser.tsx index 8159553e6..ed1403dc8 100644 --- a/frontend/src/components/HtmlParser/HtmlParser.tsx +++ b/frontend/src/components/HtmlParser/HtmlParser.tsx @@ -27,7 +27,7 @@ const option = ({ needsConsent, triggerConsentModal }: ParserOptionsProps) => ({ const props = attributesToProps(domNode.attribs); return ( ); } From 44a042b11b7d193d0f15b94fa72a69591c2cb65e Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Wed, 25 Sep 2024 14:44:02 +0200 Subject: [PATCH 29/37] Forward props to Modal component --- frontend/src/components/Modal/Modal.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/Modal/Modal.tsx b/frontend/src/components/Modal/Modal.tsx index 77458cd8e..39b43da66 100644 --- a/frontend/src/components/Modal/Modal.tsx +++ b/frontend/src/components/Modal/Modal.tsx @@ -6,8 +6,7 @@ import { useIntl } from 'react-intl'; import { cn } from 'services/utils/cn'; import useFullscreen from 'hooks/useFullscreen'; -type Props = { - className?: string; +type Props = Omit, 'children'> & { children: ({ isFullscreen, toggleFullscreen, @@ -17,7 +16,7 @@ type Props = { }) => ReactElement; }; -export const Modal: React.FC = ({ className, children }) => { +export const Modal: React.FC = ({ className, children, ...props }) => { const intl = useIntl(); const ref = useRef(null); @@ -25,7 +24,7 @@ export const Modal: React.FC = ({ className, children }) => { const isFullscreen = useFullscreen(ref, show, { onClose: () => setShow(false) }); return ( -
+
{isFullscreen && ( Date: Wed, 25 Sep 2024 14:44:33 +0200 Subject: [PATCH 30/37] Style/fullscreen image for flatpage --- .../components/pages/flatPage/FlatPage.tsx | 42 ++++++++++++++++++- frontend/src/public/style.css | 34 ++++++++++++--- 2 files changed, 70 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/pages/flatPage/FlatPage.tsx b/frontend/src/components/pages/flatPage/FlatPage.tsx index 68e608c72..880064f6f 100644 --- a/frontend/src/components/pages/flatPage/FlatPage.tsx +++ b/frontend/src/components/pages/flatPage/FlatPage.tsx @@ -2,6 +2,7 @@ import { useId, useMemo } from 'react'; import Loader from 'components/Loader'; import Image from 'next/image'; import parse, { DOMNode, Element } from 'html-react-parser'; +import StyleToJS from 'style-to-js'; import { Footer } from 'components/Footer'; import { Separator } from 'components/Separator'; import { PageHead } from 'components/PageHead'; @@ -10,6 +11,8 @@ import { generateFlatPageUrl } from 'modules/header/utills'; import { getGlobalConfig } from 'modules/utils/api.config'; import { getSuggestionType } from 'modules/flatpage/utils'; import { cn } from 'services/utils/cn'; +import { Modal } from 'components/Modal'; +import useHasMounted from 'hooks/useHasMounted'; import { useFlatPage } from './useFlatPage'; import { DetailsSection } from '../details/components/DetailsSection'; import { ErrorFallback } from '../search/components/ErrorFallback'; @@ -25,6 +28,7 @@ export const FlatPageUI: React.FC = ({ flatPageUrl }) => { const { flatPage, isLoading, refetch, activitySuggestions } = useFlatPage(flatPageUrl); const intl = useIntl(); const idCaption = useId(); + const isMounted = useHasMounted(); const parsedFlatPage = useMemo(() => { if (!flatPage?.content || !flatPage.content.length) { @@ -56,10 +60,46 @@ export const FlatPageUI: React.FC = ({ flatPageUrl }) => { /> ); } + if ( + domNode instanceof Element && + domNode.name === 'img' && + domNode.parent instanceof Element && + domNode.parent.tagName !== 'a' + ) { + const { style, ...attribs } = domNode.attribs; + if (!isMounted) { + // eslint-disable-next-line @next/next/no-img-element + return ; + } + return ( + + {({ isFullscreen, toggleFullscreen }) => { + return isFullscreen ? ( + // eslint-disable-next-line @next/next/no-img-element + + ) : ( + + ); + }} + + ); + } return domNode; }, }); - }, [activitySuggestions, flatPage?.content]); + }, [activitySuggestions, flatPage?.content, isMounted]); const legendCoverImage = [flatPage?.image?.legend, flatPage?.image?.author] .filter(Boolean) diff --git a/frontend/src/public/style.css b/frontend/src/public/style.css index 88449e87e..02dc0056e 100644 --- a/frontend/src/public/style.css +++ b/frontend/src/public/style.css @@ -207,7 +207,7 @@ details > summary.list-none::marker { } .content-WYSIWYG img, -.custo-page-WYSIWYG img:not(.custo-suggestions img) { +.custo-page-WYSIWYG img:not(.custo-suggestions img, .gallery-container img) { @apply mx-1; } @@ -245,12 +245,12 @@ details > summary.list-none::marker { } .content-WYSIWYG ul, -.custo-page-WYSIWYG ul:not(.custo-suggestions ul) { +.custo-page-WYSIWYG ul:not(.custo-suggestions ul, .gallery-container) { @apply my-4; } .content-WYSIWYG ul > li, -.custo-page-WYSIWYG ul:not(.custo-suggestions ul) > li { +.custo-page-WYSIWYG ul:not(.custo-suggestions ul, .gallery-container) > li { @apply pl-4 list-inside list-disc desktop:mb-2; } @@ -263,11 +263,11 @@ details > summary.list-none::marker { } .content-WYSIWYG .image, -.custo-page-WYSIWYG .image { +.custo-page-WYSIWYG .image:not(.gallery-container .image) { @apply clear-both overflow-hidden desktop:mb-8; } -.custo-page-WYSIWYG .image:not(.align-left):not(.align-right) img { +.custo-page-WYSIWYG .image:not(.align-left, .align-right) img { @apply w-full; } @@ -302,3 +302,27 @@ details > summary.list-none::marker { @apply inline-flex mt-2 py-3 px-4 border border-solid border-white text-white bg-primary1 font-semibold transition-colors rounded-lg; @apply hover:bg-primary2 focus:bg-primary2 hover:border-primary1 hover:text-primary1 focus:border-primary1 focus:text-primary1; } + +.custo-page-WYSIWYG .gallery-container { + @apply grid desktop:grid-cols-2 gap-2 mb-8 desktop:-mx-14; +} + +.custo-page-WYSIWYG .gallery-container figure { + @apply relative; +} + +.custo-page-WYSIWYG .gallery-container li:last-child:nth-child(odd) { + @apply col-span-2; +} + +.custo-page-WYSIWYG .gallery-container li *:not(button.rounded-full) { + @apply size-full; +} + +.custo-page-WYSIWYG .gallery-container li > * { + @apply block w-full; +} + +.custo-page-WYSIWYG .gallery-container figcaption { + @apply !mt-0 !h-12 desktop:h-40 absolute top-0 flex items-start justify-center pb-1 pt-3 px-2 bg-gradient-to-b from-blackSemiTransparent to-transparent text-white text-opacity-90 text-Mobile-C3 desktop:text-P2; +} From e37087e3d104051943590b04480b3b96c3387725 Mon Sep 17 00:00:00 2001 From: Florian Sommariva <1926041+dtrucs@users.noreply.github.com> Date: Mon, 30 Sep 2024 15:58:51 +0200 Subject: [PATCH 31/37] Display figcaption on fullscreen and put it in the bottom --- .../components/pages/flatPage/FlatPage.tsx | 27 ++++++++++++------- frontend/src/public/style.css | 2 +- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/pages/flatPage/FlatPage.tsx b/frontend/src/components/pages/flatPage/FlatPage.tsx index 880064f6f..422a3ca85 100644 --- a/frontend/src/components/pages/flatPage/FlatPage.tsx +++ b/frontend/src/components/pages/flatPage/FlatPage.tsx @@ -1,7 +1,7 @@ import { useId, useMemo } from 'react'; import Loader from 'components/Loader'; import Image from 'next/image'; -import parse, { DOMNode, Element } from 'html-react-parser'; +import parse, { DOMNode, domToReact, Element } from 'html-react-parser'; import StyleToJS from 'style-to-js'; import { Footer } from 'components/Footer'; import { Separator } from 'components/Separator'; @@ -74,15 +74,24 @@ export const FlatPageUI: React.FC = ({ flatPageUrl }) => { return ( {({ isFullscreen, toggleFullscreen }) => { + const Tag = + domNode.parent instanceof Element && domNode.parent.tagName === 'figure' + ? 'figure' + : 'div'; return isFullscreen ? ( - // eslint-disable-next-line @next/next/no-img-element - + + {/* eslint-disable-next-line @next/next/no-img-element */} + + {Tag === 'figure' && domNode.next?.next instanceof Element && ( +
{domToReact(domNode.next.next.children as DOMNode[])}
+ )} + ) : (