From 0fb01cdb6676d1c50393e857706a5c615a2f6bdf Mon Sep 17 00:00:00 2001
From: Bohdan Bozhyk <53005363+Adeodonne@users.noreply.github.com>
Date: Thu, 7 Dec 2023 17:34:48 +0200
Subject: [PATCH 1/2] Update develop (#1056)

---
 docker-compose.yml                            |  1 +
 .../StreetcodeCard.component.tsx              | 72 ++++++++++++-------
 2 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 2c4159e16..95cfbed46 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -69,6 +69,7 @@ services:
       STREETCODE_CORS__AllowedMethods: '["*"]'
       STREETCODE_CORS__PreflightMaxAge: 1
       STREETCODE_IPRATELIMITING__GENERALRULES__0__LIMIT: 500
+      ASPNETCORE_ENVIRONMENT: ${SWAGGER_APP_ENVIRONMENT}
     volumes:
       - type: bind
         source: /imagestorage
diff --git a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx
index 82a4209b5..476aecf25 100644
--- a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx
+++ b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx
@@ -56,6 +56,7 @@ const StreetcodeCard = ({ streetcode, setActiveTagId, setActiveBlock }: Props) =
     const [audioIsLoaded, setAudioIsLoaded] = useState<boolean>(false);
     const [animationPicture, setAnimationPicture] = useState<Element >();
     const [images, setImages] = useState<Image[]>([]);
+    const [imagesForSlider, setImagesForSlider] = useState<Image[]>([]);
 
     useAsync(() => {
         if (id && id > 0) {
@@ -70,6 +71,10 @@ const StreetcodeCard = ({ streetcode, setActiveTagId, setActiveBlock }: Props) =
             ImagesApi.getByStreetcodeId(id ?? 1)
                 .then((imgs) => {
                     setImages(imgs);
+                    setImagesForSlider(imgs.filter(
+                        (image) => image.imageDetails?.alt === ImageAssigment.blackandwhite.toString()
+                        || image.imageDetails?.alt === ImageAssigment.animation.toString(),
+                    ));
                     streecodePageLoaderContext.addBlockFetched();
                 })
                 .catch((e) => { });
@@ -107,30 +112,49 @@ const StreetcodeCard = ({ streetcode, setActiveTagId, setActiveBlock }: Props) =
                                 swipeOnClick
                                 infinite
                             >
-                                <div>
-                                    <img
-                                        key={images[0].id}
-                                        src={base64ToUrl(images[0].base64, images[0].mimeType)}
-                                        className="streetcodeImgColored"
-                                        style={{ objectFit: 'contain' }}
-                                        alt={images[0].imageDetails?.alt}
-                                    />
-                                    <img
-                                        key={images[1].id}
-                                        src={base64ToUrl(images[1].base64, images[1].mimeType)}
-                                        className="streetcodeImgGrey"
-                                        style={{ objectFit: 'contain' }}
-                                        alt={images[1].imageDetails?.alt}
-                                    />
-                                </div>
-
-                                <img
-                                    key={images[1].id}
-                                    src={base64ToUrl(images[1].base64, images[1].mimeType)}
-                                    className="streetcodeImg"
-                                    style={{ objectFit: 'contain' }}
-                                    alt={images[1].imageDetails?.alt}
-                                />
+                                {imagesForSlider.map((image, index) => {
+                                    if (imagesForSlider.length > 1 && index === 0) {
+                                        return (
+                                            <div>
+                                                <img
+                                                    key={imagesForSlider[0].id}
+                                                    src={
+                                                        base64ToUrl(
+                                                            imagesForSlider[0].base64,
+                                                            imagesForSlider[0].mimeType,
+                                                        )
+                                                    }
+                                                    className="streetcodeImgColored"
+                                                    style={{ objectFit: 'contain' }}
+                                                    alt={imagesForSlider[0].imageDetails?.alt}
+                                                />
+                                                <img
+                                                    key={imagesForSlider[1].id}
+                                                    src={base64ToUrl(
+                                                        imagesForSlider[1].base64,
+                                                        imagesForSlider[1].mimeType,
+                                                    )}
+                                                    className="streetcodeImgGrey"
+                                                    style={{ objectFit: 'contain' }}
+                                                    alt={imagesForSlider[1].imageDetails?.alt}
+                                                />
+                                            </div>
+                                        );
+                                    }
+
+                                    return (
+                                        <img
+                                            key={imagesForSlider[index].id}
+                                            src={base64ToUrl(
+                                                imagesForSlider[index].base64,
+                                                imagesForSlider[index].mimeType,
+                                            )}
+                                            className="streetcodeImg"
+                                            style={{ objectFit: 'contain' }}
+                                            alt={imagesForSlider[index].imageDetails?.alt}
+                                        />
+                                    );
+                                })}
                             </BlockSlider>
                         </div>
                     </div>

From e0593b7a7b1920acca669f0893412cc891174d53 Mon Sep 17 00:00:00 2001
From: Oleh-Kril <91199925+Oleh-Kril@users.noreply.github.com>
Date: Thu, 7 Dec 2023 17:37:01 +0200
Subject: [PATCH 2/2] handle click when streetcode url isn't loaded (#1055)

---
 .../StreetcodeSliderItem/StreetcodeSliderItem.component.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/features/MainPage/StreetcodeSlider/StreetcodeSliderItem/StreetcodeSliderItem.component.tsx b/src/features/MainPage/StreetcodeSlider/StreetcodeSliderItem/StreetcodeSliderItem.component.tsx
index 997248b87..a8638cda0 100644
--- a/src/features/MainPage/StreetcodeSlider/StreetcodeSliderItem/StreetcodeSliderItem.component.tsx
+++ b/src/features/MainPage/StreetcodeSlider/StreetcodeSliderItem/StreetcodeSliderItem.component.tsx
@@ -19,8 +19,10 @@ const StreetcodeSliderItem = ({ streetcode, image }: Props) => {
     });
 
     const handleClickRedirect = () => {
-        toStreetcodeRedirectClickEvent(streetcode.transliterationUrl, 'main_page');
-        window.location.href = streetcode.transliterationUrl;
+        if (streetcode.transliterationUrl) {
+            toStreetcodeRedirectClickEvent(streetcode.transliterationUrl, 'main_page');
+            window.location.href = streetcode.transliterationUrl;
+        }
     };
 
     const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {