Merge pull request #969 from ita-social-projects/develop

Develop
ita-social-projects · Oct 30, 2023 · 49b9857 · 49b9857
2 parents 7efa73a + 8a172a6
commit 49b9857
Show file tree

Hide file tree

Showing 99 changed files with 777 additions and 381 deletions.
diff --git a/src/app/api/streetcode/streetcodes.api.ts b/src/app/api/streetcode/streetcodes.api.ts
@@ -27,6 +27,10 @@ const StreetcodesApi = {
 
     getAllMainPage: () => Agent.get<StreetcodeMainPage[]>(`${API_ROUTES.STREETCODES.GET_ALL_MAINPAGE}`),
 
+    getPageMainPage: (page: number, pageSize: number, args: any) => Agent
+        .get<StreetcodeMainPage[]>(`${API_ROUTES.STREETCODES.GET_PAGE_MAINPAGE}`,
+        new URLSearchParams(Object.entries({ page: page.toString(), pageSize: pageSize.toString(), shuffleSeed: args["shuffleSeed"].toString() }))),
+
     getAllCatalog: (page: number, count: number) => Agent
         .get<StreetcodeCatalogRecord[]>(
             `${API_ROUTES.STREETCODES.GET_ALL_CATALOG}`,

diff --git a/src/app/common/components/modals/Donates/DonatesModal.component.tsx b/src/app/common/components/modals/Donates/DonatesModal.component.tsx
@@ -74,7 +74,7 @@ const DonatesModal = () => {
 
             Promise.all([DonationApi.create(donation)])
                 .then((response) => {
-                    window.location.assign(response[0].pageUrl);
+                    window.open(response[0].pageUrl);
                 })
                 .catch();
         }
@@ -145,7 +145,7 @@ const DonatesModal = () => {
                         checked={isCheckboxChecked}
                         onChange={(e) => setIsCheckboxChecked(e.target.checked)}
                     >
-                        Я даю згоду на обробку моїх персональних даних
+                        Я даю згоду на обробку моїх <a className='privacyPolicy' href='/privacy-policy'>персональних даних</a>
                     </Checkbox>
                 </div>
                 <button

diff --git a/src/app/common/components/modals/Donates/DonatesModal.styles.scss b/src/app/common/components/modals/Donates/DonatesModal.styles.scss
@@ -149,6 +149,12 @@
       border: none;
       display: flex;
       align-items: center;
+      .privacyPolicy{
+        color: c.$dark-red-color;
+        &:hover{
+          text-decoration: underline;
+        }
+      }
 
 
       .ant-checkbox-input {

diff --git a/src/app/common/components/modals/Lightbox/LightboxComponent.styles.scss b/src/app/common/components/modals/Lightbox/LightboxComponent.styles.scss
@@ -45,16 +45,7 @@
 
     @media screen and (min-width:1025px) {
 
-        .yarl__slide_description_container {
-            @include mut.sized($height: 159px);
-        }
-
-        .yarl__slide_title_container {
-            @include mut.sized($height: 68px);
-        }
-
         .yarl__slide_description {
-            @include mut.sized($height: 129px);
             @include mut.rem-margined($top: 5px, $left: 50px);
             @include mut.with-font($font-weight: 300);
             @include mut.with-font();
@@ -86,15 +77,10 @@
 
     @media screen and (max-width:1025px) {
         .yarl__slide_description_container {
-            @include mut.sized($height: 128px);
             background: rgba(0, 0, 0, 0.5);
             backdrop-filter: blur(26.5px);
         }
 
-        .yarl__slide_title_container {
-            @include mut.sized($height: 45px);
-        }
-
         .yarl__slide_description {
             @include mut.rem-margined($top: 2px, $left: 10px);
             @include mut.with-font();

diff --git a/src/app/common/components/modals/ListenText/ListenText.styles.scss b/src/app/common/components/modals/ListenText/ListenText.styles.scss
@@ -8,7 +8,7 @@
     @include mut.sized(1200px, 46px);
     @include mut.flex-centered();
 
-    @include mut.positioned-as(fixed, $bottom: 4%);
+    @include mut.positioned-as(fixed, $bottom: 15px);
     @include mut.full-rounded(11px, $overflow: visible);
 
     background-color: c.$pure-white-color;

diff --git a/src/app/common/components/modals/Tags/TagsSliderModal/TagsSliderModal.component.tsx b/src/app/common/components/modals/Tags/TagsSliderModal/TagsSliderModal.component.tsx
@@ -36,6 +36,9 @@ const TagsSliderModal = ({ streetCodeid, activeTagBlock, setActiveTagId }: Props
                         slidesToScroll={1}
                         initialSlide={activeTagBlock}
                         focusOnSelect
+                        beforeChange={
+                            (currentSlide, nextSlide) => setActiveTagId(getTagArray[nextSlide].id)
+                        }
                     >
                         {getTagArray?.map((tag) => (
                             <div key={tag.id}>

diff --git a/src/app/common/components/modals/Tags/TagsSliderModal/TagsSliderModal.styles.scss b/src/app/common/components/modals/Tags/TagsSliderModal/TagsSliderModal.styles.scss
@@ -2,11 +2,15 @@
 @use "@assets/sass/variables/_variables.colors.scss" as c;
 @use "@assets/sass/_utils.functions.scss" as f;
 
+
 .tagModalContainer {
   width: 100%;
-
   @include mut.flex-centered();
 
+  .slick-slide{
+    margin-left: f.pxToRem(8px);
+    margin-right: f.pxToRem(8px);
+  }
   .slick-list {
     padding: f.pxToRem(20px);
   }
@@ -27,8 +31,6 @@
 
     height: f.pxToRem(38px);
     width: fit-content;
-    margin-left: f.pxToRem(8px);
-    margin-right: f.pxToRem(8px);
 
     color: c.$dark-red-color;
     border: 2px solid c.$dark-red-color;

diff --git a/src/app/common/constants/api-routes.constants.ts b/src/app/common/constants/api-routes.constants.ts
@@ -161,6 +161,7 @@ export const API_ROUTES = {
         GET_ALL: 'streetcode/getAll',
         GET_BY_FILTER: 'streetcode/getByFilter',
         GET_ALL_MAINPAGE: 'streetcode/getAllMainPage',
+        GET_PAGE_MAINPAGE: 'streetcode/getPageMainPage',
         GET_ALL_PUBLISHED: 'streetcode/getAllPublished',
         GET_ALL_SHORT: 'streetcode/getAllShort',
         GET_SHORT_BY_ID: 'streetcode/getShortById',

diff --git a/src/app/common/constants/social.constants.ts b/src/app/common/constants/social.constants.ts
@@ -0,0 +1,10 @@
+const SOCIAL_MEDIA = {
+    FACEBOOK: 'https://www.facebook.com/streetcodeua',
+    INSTAGRAM: 'https://www.instagram.com/streetcodeua',
+    TWITTER: 'https://twitter.com/streetcodeua',
+    TELEGRAM: 'https://t.me/streetcodeua',
+    TIKTOK: 'https://www.tiktok.com/@streetcodeua',
+    YOUTUBE: 'https://www.youtube.com/@streetcodeua',
+};
+
+export default SOCIAL_MEDIA;
diff --git a/src/app/common/utils/getUrlHash.utility.tsx b/src/app/common/utils/getUrlHash.utility.tsx
@@ -0,0 +1,2 @@
+const getUrlHash = (location: Location): string => location.hash.replace('#', '');
+export default getUrlHash;
diff --git a/src/app/common/utils/paginateRequest.tsx b/src/app/common/utils/paginateRequest.tsx
@@ -0,0 +1,24 @@
+// eslint-disable-next-line import/prefer-default-export
+export function paginateRequest(
+    pageSize: number,
+    request: (page: number, pageSize: number, args: any) => Promise<any>,
+    args: any,
+) {
+    let page = 1;
+
+    const fetchNextPage = async () => {
+        const currentPage = page;
+        const response = await request(currentPage, pageSize, args).catch((error) => {
+            console.error('Error in request:', error);
+        });
+
+        if (response.length === 0) {
+            throw new Error('No more data to load');
+        }
+
+        page = currentPage + 1;
+        return response;
+    };
+
+    return { fetchNextPage };
+}
diff --git a/src/app/layout/footer/Footer.component.tsx b/src/app/layout/footer/Footer.component.tsx
@@ -1,24 +1,28 @@
 import './Footer.styles.scss';
 
-import FaceBook from '@images/footer/Facebook.webp';
-import Instagram from '@images/footer/Instagram.webp';
+import FaceBook from '@images/footer/Facebook.svg';
+import Instagram from '@images/footer/Instagram.svg';
 import StreetcodeFooter from '@images/footer/streetcode-footer.webp';
-import TikTok from '@images/footer/TikTok.webp';
-import Twitter from '@images/footer/Twitter.webp';
-import Youtube from '@images/footer/Youtube.webp';
+import Telegram from '@images/footer/Telegram.svg';
+import TikTok from '@images/footer/TikTok.svg';
+import Twitter from '@images/footer/Twitter2.svg';
+import Youtube from '@images/footer/Youtube.svg';
 
 import { useEffect, useState } from 'react';
 import { HashLink as Link } from 'react-router-hash-link';
 import useWindowSize from '@hooks/stateful/useWindowSize.hook';
 
 import JobApi from '@/app/api/job/Job.api';
-import FRONTEND_ROUTES from '@/app/common/constants/frontend-routes.constants';
 import { ContactUsModal } from '@/app/common/components/modals/ContactUsModal/ContactUsModal.component';
+import FRONTEND_ROUTES from '@/app/common/constants/frontend-routes.constants';
+import SOCIAL_MEDIA from '@/app/common/constants/social.constants';
 import scrollWithOffset from '@/app/common/utils/window.utility';
 
 const Footer = () => {
     const windowSize = useWindowSize();
     const [hasVacancies, setHasVacancies] = useState(false);
+    const REPORTS = 'https://drive.google.com/drive/folders/11Ef4y_6ZHyqT5eDxD5Cn-aWhr-kThh3A?usp=drive_link';
+
     useEffect(() => {
         JobApi.getActive()
             .then(
@@ -48,7 +52,7 @@ const Footer = () => {
                                 <li>
                                     <Link
                                         to={`${FRONTEND_ROUTES.OTHER_PAGES.ABOUT_US}#vacancies`}
-                                        scroll={(el:any) => scrollWithOffset(el, 100)}
+                                        scroll={(el: any) => scrollWithOffset(el, 100)}
                                     >
                                         Вакансії
                                     </Link>
@@ -59,32 +63,41 @@ const Footer = () => {
                         <ul className="usefulLinksColumn supportLinks">
                             <li><a href={FRONTEND_ROUTES.OTHER_PAGES.PRIVACY_POLICY}>Політика конфіденційності</a></li>
                             <li><ContactUsModal toggleState={() => { }} text="Зворотний зв&apos;язок" /></li>
-                            <li><a href="https://drive.google.com/drive/folders/11Ef4y_6ZHyqT5eDxD5Cn-aWhr-kThh3A?usp=drive_link" target="_blank" rel="noreferrer">Звітність ГО «Історична Платформа»</a></li>
+                            <li>
+                                <a href={REPORTS} target="_blank" rel="noreferrer">
+                                    Звітність ГО «Історична Платформа»
+                                </a>
+                            </li>
                         </ul>
                         <ul className="socialIconContainer">
                             <li>
-                                <a href="https://www.facebook.com/streetcodeua" target="_blank" rel="noreferrer">
-                                    <img src={FaceBook} alt="" />
+                                <a href={SOCIAL_MEDIA.INSTAGRAM} target="_blank" rel="noreferrer">
+                                    <Instagram />
+                                </a>
+                            </li>
+                            <li>
+                                <a href={SOCIAL_MEDIA.FACEBOOK} target="_blank" rel="noreferrer">
+                                    <FaceBook />
                                 </a>
                             </li>
                             <li>
-                                <a href="https://www.instagram.com/streetcodeua" target="_blank" rel="noreferrer">
-                                    <img src={Instagram} alt="" />
+                                <a href={SOCIAL_MEDIA.TWITTER} target="_blank" rel="noreferrer">
+                                    <Twitter />
                                 </a>
                             </li>
                             <li>
-                                <a href="https://twitter.com/streetcodeua" target="_blank" rel="noreferrer">
-                                    <img src={Twitter} alt="" />
+                                <a href={SOCIAL_MEDIA.TIKTOK} target="_blank" rel="noreferrer">
+                                    <TikTok />
                                 </a>
                             </li>
                             <li>
-                                <a href="https://www.tiktok.com/@streetcodeua" target="_blank" rel="noreferrer">
-                                    <img src={TikTok} alt="" />
+                                <a href={SOCIAL_MEDIA.TELEGRAM} target="_blank" rel="noreferrer">
+                                    <Telegram />
                                 </a>
                             </li>
                             <li>
-                                <a href="https://www.youtube.com/@streetcodeua" target="_blank" rel="noreferrer">
-                                    <img src={Youtube} alt="" />
+                                <a href={SOCIAL_MEDIA.YOUTUBE} target="_blank" rel="noreferrer">
+                                    <Youtube />
                                 </a>
                             </li>
                         </ul>

diff --git a/src/app/layout/footer/Footer.styles.scss b/src/app/layout/footer/Footer.styles.scss
@@ -70,6 +70,7 @@
     li{
       .ant-typography.text-white{
         color: white;
+        @include mut.with-font($font-weight: 300, $font-size: 15px);
       }
     }
   }
@@ -83,9 +84,6 @@
     > * {
      @include mut.rem-margined($right: 14.62px);
     }
-      li:nth-child(5) {
-        @include mut.sized($height: 20px);
-      }
   }
 }
 @media screen and (max-width: 480px) {

diff --git a/src/app/layout/header/HeaderBlock.styles.scss b/src/app/layout/header/HeaderBlock.styles.scss
@@ -58,6 +58,12 @@ $navbar-hidden-innerwidth: 400px;
     display: flex;
     align-items: center;
     gap: f.pxToRem(15px);
+
+    .logoContainer{
+      svg{
+        @include mut.sized(167.79px, 29px);
+      }
+    }
 }
 .rightPartContainer {
   @include mut.flexed($justify-content: space-between, $align-items: center);
@@ -68,7 +74,7 @@ $navbar-hidden-innerwidth: 400px;
   @include mut.rem-margined($left: 20px);
 
   .loginBtn {
-    @include mut.sized(142px, 39px);
+    @include mut.sized(139.34px, 39px);
     @include mut.full-rounded(12px);
     background-color: c.$accented-red-color;
 
@@ -134,26 +140,29 @@ $navbar-hidden-innerwidth: 400px;
 
     .leftPartContainer {
         .logoContainer {
-            height: f.pxToRem(34px);
+            height: f.pxToRem(24px);
             svg
             {
-                width: 100%;
-                height: f.pxToRem(34px);
+              @include mut.sized(131px, 22px);
             }
         }    
     }
 
     .rightPartContainer {
-      svg {
-        @include mut.rem-margined($right: 15px);
-
-        &:hover {
-          filter: invert(27%) sepia(26%) saturate(0%) hue-rotate(201deg) brightness(96%) contrast(86%);
+      .rightSectionContainer{
+        svg {
+          @include mut.rem-margined($right: 15px);
+          @include mut.sized(24px, 24px);
+
+          &:hover {
+            filter: invert(27%) sepia(26%) saturate(0%) hue-rotate(201deg) brightness(96%) contrast(86%);
+          }
+        }
+
+        .burgerMenuContainer {
+          @include mut.rem-margined($right: 15px);
+          @include mut.sized(28px, 17.34px);
         }
-      }
-
-      .burgerMenuContainer {
-        @include mut.rem-margined($right: 15px);
       }
     }
   }

diff --git a/src/app/layout/header/HeaderDrawer/HeaderDrawer.component.tsx b/src/app/layout/header/HeaderDrawer/HeaderDrawer.component.tsx
@@ -20,15 +20,15 @@ import { ContactUsModal } from '@/app/common/components/modals/ContactUsModal/Co
 const mobileOptions = 8;
 const desktopOptions = 6;
 const scaleDesktop = 1;
-const scaleMobile = 5;
+const scaleMobile = 12;
 const menuPositionsMobile = [
     1 * scaleMobile,
     2 * scaleMobile,
     3 * scaleMobile - 1,
-    4 * scaleMobile - 1,
-    5 * scaleMobile - 1,
-    6 * scaleMobile - 1,
-    7 * scaleMobile - 1,
+    4 * scaleMobile - 2,
+    5 * scaleMobile - 3,
+    6 * scaleMobile - 3,
+    7 * scaleMobile - 2,
     8 * scaleMobile,
 ];
 const menuOptions = [

diff --git a/src/app/layout/header/HeaderDrawer/HeaderDrawer.styles.scss b/src/app/layout/header/HeaderDrawer/HeaderDrawer.styles.scss
@@ -28,17 +28,19 @@
   width: 25%;
 }
 
+$track-width: f.pxToRem(1.5px);
+
 .customSlider-track {
   top: f.pxToRem(8px);
-  width: f.pxToRem(1.5px);
+  width: $track-width;
   background: c.$normal-gray-color;
   position: relative;
 }
 
 .thumb {
   cursor: default;
   position: absolute;
-  left: -(f.pxToRem(5.2px));
+  transform: translateX(calc(-50% + $track-width / 2)); 
   z-index: 100;
   background: c.$dark-red-color;
   border: f.pxToRem(6px) solid c.$dark-red-color;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		const getUrlHash = (location: Location): string => location.hash.replace('#', '');
		export default getUrlHash;