Merge branch 'release/1.1.0' into feature/issue-1770

ita-social-projects · Sep 22, 2024 · f951f1f · f951f1f
2 parents 5ea10a0 + 956bb26
commit f951f1f
Show file tree

Hide file tree

Showing 17 changed files with 158 additions and 69 deletions.
diff --git a/src/app/common/components/ContactForm/ContactForm.component.tsx b/src/app/common/components/ContactForm/ContactForm.component.tsx
@@ -18,7 +18,7 @@ interface Props {
 const ContactForm = forwardRef((customClass: Props, ref) => {
     const [formData, setFormData] = useState({ email: '', message: '' });
     const [isVerified, setIsVerified] = useState(false);
-    const [messageApi, messageContextHolder] = message.useMessage({maxCount: 3});
+    const [messageApi, messageContextHolder] = message.useMessage({ maxCount: 3 });
     const [form] = Form.useForm();
     const recaptchaRef = useRef<ReCAPTCHA>(null);
     const siteKey = window._env_.RECAPTCHA_SITE_KEY;
@@ -43,7 +43,12 @@ const ContactForm = forwardRef((customClass: Props, ref) => {
     const onFinish = () => {
         if (isVerified) {
             const token = recaptchaRef?.current?.getValue();
-            const newEmail: Email = { from: formData.email, content: formData.message, token: token };
+            const newEmail: Email = {
+                from: formData.email,
+                source: 'сторінка Контакти',
+                content: formData.message,
+                token,
+            };
             EmailApi.send(newEmail)
                 .then(() => {
                     successMessage();
@@ -139,6 +144,7 @@ const ContactForm = forwardRef((customClass: Props, ref) => {
                         onChange={handleVerify}
                         onExpired={handleExpiration}
                         ref={recaptchaRef}
+                        hl='uk'
                     />
                 </div>
                 <Form.Item>

diff --git a/src/app/common/components/CopyWithCopyright.component.tsx b/src/app/common/components/CopyWithCopyright.component.tsx
@@ -3,13 +3,14 @@ import React, { useRef } from 'react';
 import FRONTEND_ROUTES from '../constants/frontend-routes.constants';
 
 interface Props {
-  children: React.ReactNode;
-  copyrightText: string;
+    children: React.ReactNode;
+    copyrightText: string;
+    className?: string;
 }
 
 const MIN_LENGTH = 20;
 
-const CopyWithCopyright = ({ children, copyrightText }: Props) => {
+const CopyWithCopyright = ({ children, copyrightText, className }: Props) => {
     const textRef = useRef<HTMLDivElement>(null);
 
     const handleCopy = (event: React.ClipboardEvent<HTMLDivElement>) => {
@@ -28,7 +29,7 @@ const CopyWithCopyright = ({ children, copyrightText }: Props) => {
     };
 
     return (
-        <div ref={textRef} onCopy={handleCopy}>
+        <div ref={textRef} onCopy={handleCopy} className={className}>
             {children}
         </div>
     );

diff --git a/src/app/common/components/modals/Partners/PartnersModal.component.tsx b/src/app/common/components/modals/Partners/PartnersModal.component.tsx
@@ -25,7 +25,7 @@ const PartnersModal = () => {
     const { setModal, modalsState: { partners } } = modalStore;
     const [form] = Form.useForm();
     const [formData, setFormData] = useState({ email: '', message: '' });
-    const [messageApi, messageContextHolder] = message.useMessage({maxCount: 3});
+    const [messageApi, messageContextHolder] = message.useMessage({ maxCount: 3 });
     const [isVerified, setIsVerified] = useState(false);
     const recaptchaRef = useRef<ReCAPTCHA>(null);
     const siteKey = window._env_.RECAPTCHA_SITE_KEY;
@@ -36,7 +36,12 @@ const PartnersModal = () => {
     const onFinish = () => {
         if (isVerified) {
             const token = recaptchaRef?.current?.getValue();
-            const newEmail: Email = { from: formData.email, content: formData.message, token: token };
+            const newEmail: Email = {
+                from: formData.email,
+                source: 'сторінка Партнери',
+                content: formData.message,
+                token,
+            };
             EmailApi.send(newEmail)
                 .then(() => {
                     onCancel();
@@ -181,6 +186,7 @@ const PartnersModal = () => {
                                 onChange={handleVerify}
                                 onExpired={handleExpiration}
                                 ref={recaptchaRef}
+                                hl='uk'
                             />
                         </div>
                         <Form.Item>

diff --git a/src/app/layout/app/App.component.tsx b/src/app/layout/app/App.component.tsx
@@ -34,7 +34,7 @@ const App = () => {
             <HeaderBlock />
             <div className="mainWrapper">
                 <div className={`${isPageDimmed ? 'dimmed' : ''}`} />
-                <CopyWithCopyright copyrightText={CopyrightText}>
+                <CopyWithCopyright copyrightText={CopyrightText} className='mainBlockWrapper'>
                     {(pathname !== FRONTEND_ROUTES.BASE) && (
                         <Outlet />
                     )}

diff --git a/src/features/AboutUsPage/TeamMembers/TeamMembers.component.scss b/src/features/AboutUsPage/TeamMembers/TeamMembers.component.scss
@@ -53,6 +53,7 @@
     align-items: center;
     justify-content: center;
     margin: 0 auto;
+    -webkit-tap-highlight-color: transparent;
 }
 
 .squareParent{

diff --git a/src/features/AdminPage/Login/AdminLogin.component.tsx b/src/features/AdminPage/Login/AdminLogin.component.tsx
@@ -13,7 +13,7 @@ import { ERROR_MESSAGES, INVALID_LOGIN_ATTEMPT } from '@/app/common/constants/er
 import FRONTEND_ROUTES from '@/app/common/constants/frontend-routes.constants';
 import AuthService from '@/app/common/services/auth-service/AuthService';
 
-const AdminLogin:React.FC = () => {
+const AdminLogin: React.FC = () => {
     const navigate = useNavigate();
     const [form] = Form.useForm();
     const [isVerified, setIsVerified] = useState(false);
@@ -70,6 +70,7 @@ const AdminLogin:React.FC = () => {
                     onChange={handleVerify}
                     onExpired={handleExpiration}
                     ref={recaptchaRef}
+                    hl='uk'
                 />
             </div>
             <Form.Item>

diff --git a/src/features/AdminPage/PageBar/PageBar.component.tsx b/src/features/AdminPage/PageBar/PageBar.component.tsx
@@ -1,17 +1,17 @@
 import './PageBar.styles.scss';
 
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
 import FRONTEND_ROUTES from '@constants/frontend-routes.constants';
 
 const PageBar = () => (
     <div className="PageBarContainer">
         <div className="BarContainer">
-            <Link className="Link" to={FRONTEND_ROUTES.ADMIN.BASE}>Стріткоди</Link>
-            <Link className="Link" to={FRONTEND_ROUTES.ADMIN.PARTNERS}>Партнери</Link>
-            <Link className="Link" to={FRONTEND_ROUTES.ADMIN.EDITOR}>Едітор</Link>
-            <Link className="Link" to={`${FRONTEND_ROUTES.ADMIN.TEAM}`}>Команда</Link>
-            <Link className="Link" to={FRONTEND_ROUTES.ADMIN.NEWS}>Новини</Link>
-            <Link className="Link" to={FRONTEND_ROUTES.ADMIN.JOBS}>Вакансії</Link>
+            <NavLink className="Link" to={FRONTEND_ROUTES.ADMIN.BASE} end>Стріткоди</NavLink>
+            <NavLink className="Link" to={FRONTEND_ROUTES.ADMIN.PARTNERS}>Партнери</NavLink>
+            <NavLink className="Link" to={FRONTEND_ROUTES.ADMIN.EDITOR}>Едітор</NavLink>
+            <NavLink className="Link" to={`${FRONTEND_ROUTES.ADMIN.TEAM}`}>Команда</NavLink>
+            <NavLink className="Link" to={FRONTEND_ROUTES.ADMIN.NEWS}>Новини</NavLink>
+            <NavLink className="Link" to={FRONTEND_ROUTES.ADMIN.JOBS}>Вакансії</NavLink>
         </div>
     </div>
 );

diff --git a/src/features/AdminPage/PageBar/PageBar.styles.scss b/src/features/AdminPage/PageBar/PageBar.styles.scss
@@ -26,7 +26,13 @@
         &:focus {
             outline: none;
             box-shadow: none;
-          }
+        }
         @include vnd.vendored(transition, 'scale .3s ease');
+
+        &.active {
+            color: c.$text-red-color;
+            text-decoration: underline;
+            text-underline-offset: f.pxToRem(5px);
+        }
     }
 }
diff --git a/src/features/AdminPage/StreetcodesTable/StreetcodesTable.component.tsx b/src/features/AdminPage/StreetcodesTable/StreetcodesTable.component.tsx
@@ -56,8 +56,14 @@ const StreetcodesTable = () => {
     const [requestGetAll, setRequestGetAll] = useState<GetAllStreetcodesRequest>(requestDefault);
 
     const setRequest = () => {
+        let page = pageRequest;
+        if(requestGetAll.Title !== titleRequest || requestGetAll.Filter !== statusRequest) {
+            setPageRequest(1);
+            setCurrentPages(1);
+            page = 1;
+        }
         setRequestGetAll({
-            Page: pageRequest,
+            Page: page,
             Amount: amountRequest,
             Title: titleRequest === '' ? null : titleRequest,
             Sort: null,

diff --git a/src/features/AdminPage/TeamPositionsPage/TeamPositionsMainPage.component.tsx b/src/features/AdminPage/TeamPositionsPage/TeamPositionsMainPage.component.tsx
@@ -39,6 +39,9 @@ const TeamPositionsMainPage: React.FC = observer(() => {
                     </div>
                 );
             },
+            sorter: (a, b) => a.position.localeCompare(b.position),
+            sortDirections: ['ascend', 'descend', 'ascend'],
+            defaultSortOrder: 'ascend',
         },
         {
             title: 'Дії',

diff --git a/.../StreetcodePage/InterestingFactsBlock/InterestingFactItem/InterestingFactItem.styles.scss b/.../StreetcodePage/InterestingFactsBlock/InterestingFactItem/InterestingFactItem.styles.scss
@@ -5,6 +5,10 @@
 @use "@assets/sass/mixins/_vendor.mixins.scss" as vnd;
 @use "@app/common/components/CardText/CardText.styles" as textCard;
 
+.slides-3 .slick-track {
+  gap: 0 !important;
+}
+
 .interestingFactSlide {
   @include mut.sized(387px);
   @include mut.full-rounded(33px);

diff --git a/src/features/StreetcodePage/InterestingFactsBlock/InterestingFacts.component.tsx b/src/features/StreetcodePage/InterestingFactsBlock/InterestingFacts.component.tsx
@@ -32,8 +32,7 @@ const InterestingFactsComponent = () => {
                     Promise.all(res.map((f, index) => ImagesApi.getById(f.imageId).then((img) => {
                         res[index].image = img;
                     }))).then(() => {
-                        setSliderArray(res.length === 3
-                            || res.length === 2
+                        setSliderArray(res.length === 2
                             ? res.concat(res)
                             : res);
                     });
@@ -70,11 +69,12 @@ const InterestingFactsComponent = () => {
 
     const setings = {
         initialSlide: initialSlideIndex,
-        dots: facts.current.length > 3,
+        dots: facts.current.length > 2,
         swipeOnClick: false,
         touchThreshold: 25,
         rtl: false,
         centerMode: true,
+        ...(sliderArray.length === 3 && { slidesToShow: sliderArray.length - 0.01 }),
         infinite: sliderArray.length > 1,
         swipe: false,
         centerPadding: '-5px',
@@ -111,48 +111,49 @@ const InterestingFactsComponent = () => {
     };
     return (
         <div>
-            {facts.current.length > 0
-                ? (
-                    <div
-                        id="wow-facts"
-                        className={`container "interestingFactsWrapper"`}
-                    >
-                        <BlockHeading headingText="Wow-факти" />
-                        <div className={`interestingFactsContainer
-                    ${facts.current.length === 1 ? 'oneFactContainer' : ''}`}
-                        >
-                            <div className="interestingFactsSliderContainer">
-                                <div style={{ height: '100%' }}>
-                                    {(facts.current.length === 1) ? (
-                                        <div className="oneFactItem"
-                                        onClick={handleModalOpen}
-                                        onKeyDown={handleModalOpen}>
+            {facts.current.length > 0 ? (
+                <div
+                    id="wow-facts"
+                    className={`container "interestingFactsWrapper"`}
+                >
+                    <BlockHeading headingText="Wow-факти" />
+                    <div className={`interestingFactsContainer ${facts.current.length === 1 ? "oneFactContainer" : ""}`} >
+                        <div className="interestingFactsSliderContainer">
+                            <div style={{ height: "100%" }}
+                                 className={`${facts.current.length === 3 ? 'slides-3' : ''}`}
+                            >
+                                {facts.current.length === 1 ? (
+                                    <div className="oneFactItem"
+                                         onClick={handleModalOpen}
+                                         onKeyDown={handleModalOpen}
+                                    >
+                                        <InterestingFactItem
+                                            fact={facts.current[0]}
+                                            middleFactIndex={middleFactIndex}
+                                        />
+                                    </div>
+                                ) : (
+                                    <BlockSlider
+                                        className="heightContainer"
+                                        {...setings}
+                                    >
+                                        {sliderArray.map((fact, index) => (
                                             <InterestingFactItem
-                                                fact={facts.current[0]}
+                                                key={fact.id}
+                                                fact={fact}
+                                                index={index}
                                                 middleFactIndex={middleFactIndex}
                                             />
-                                        </div>
-                                    ) : (
-                                        <BlockSlider
-                                            className="heightContainer"
-                                            {...setings}
-                                        >
-                                            {sliderArray.map((fact, index) => (
-                                                <InterestingFactItem
-                                                    key={fact.id}
-                                                    fact={fact}
-                                                    index={index}
-                                                    middleFactIndex={middleFactIndex}
-                                                />
-                                            ))}
-                                        </BlockSlider>
-                                    )}
-                                </div>
+                                        ))}
+                                    </BlockSlider>
+                                )}
                             </div>
                         </div>
                     </div>
-                )
-                : <></>}
+                </div>
+            ) : (
+                <></>
+            )}
         </div>
     );
 };

diff --git a/src/features/StreetcodePage/InterestingFactsBlock/InterestingFacts.styles.scss b/src/features/StreetcodePage/InterestingFactsBlock/InterestingFacts.styles.scss
@@ -9,6 +9,10 @@
     width: 100% !important;
 }
 
+.slides-3 .slick-slide {
+    transform: translate(100%, 0);
+}
+
 .interestingFactsContainer {
     @include mut.sized(100%);
     @include mut.flex-centered($direction: column);
@@ -32,6 +36,11 @@
         bottom: f.pxToRem(-57px);
         margin-top: f.pxToRem(30px);
     }
+
+    .slick-center { 
+        z-index: 1; 
+        position: relative;
+    }
 }
 
 .heightContainer {
@@ -55,7 +64,6 @@
     }
 }
 
-
 @media screen and (max-width: 1450px){
     .interestingFactsSliderContainer {
         @include mut.sized(1120px);
@@ -71,6 +79,10 @@
             padding: f.pxToRem(63px) 0;
         }
     }
+
+    .slides-3 .slick-slide {
+        transform: translate(104%, 0);
+    }
 }
 
 @media screen and (max-width: 1325px){
@@ -93,6 +105,10 @@
             }
         }
     }
+
+    .slides-3 .slick-slide {
+        transform: translate(102%, 0);
+    }
 }
 
 @media screen and (max-width: 1024px){
@@ -140,7 +156,6 @@
             }
         }
     }
-
 }
 
 @media screen
@@ -152,7 +167,6 @@ and (min-width: 768px) and (max-width: 1024px){
         @include mut.rem-margined(0);
         bottom: 15%;
     }
-
 }
     .interestingFactsContainer {
         @include mut.sized(765px, 100%); 
@@ -189,6 +203,10 @@ and (min-width: 768px) and (max-width: 1024px){
     .interestingFactsSliderContainer {
         @include mut.sized(100%, 100%); 
     }
+
+    .slides-3 .slick-slide {
+        transform: translate(100%, 0);
+    }
 }
 
 @media screen and (max-width: 768px){
@@ -256,4 +274,8 @@ and (min-width: 768px) and (max-width: 1024px){
 
         }
     }
+
+    .slides-3 .slick-slide {
+        transform: translate(99%, 0);
+    }
 }