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

Merge develop to master
ita-social-projects · Dec 3, 2023 · 893f7ee · 893f7ee
2 parents 3edad20 + 19ed260
commit 893f7ee
Show file tree

Hide file tree

Showing 15 changed files with 245 additions and 123 deletions.
diff --git a/src/app/api/streetcode/streetcodes.api.ts b/src/app/api/streetcode/streetcodes.api.ts
@@ -28,16 +28,22 @@ 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() }))),
+        .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}`,
             new URLSearchParams({ page: page.toString(), count: count.toString() }),
         ),
 
-    getCount: () => Agent.get<number>(`${API_ROUTES.STREETCODES.GET_COUNT}`),
+    getCount: (onlyPublished = false) => Agent.get<number>(
+        `${API_ROUTES.STREETCODES.GET_COUNT}?onlyPublished=${onlyPublished}`,
+    ),
 
     getAllShort: () => Agent.get<Streetcode[]>(`${API_ROUTES.STREETCODES.GET_ALL_SHORT}`),
 

diff --git a/src/app/common/components/ContactForm/ContactForm.component.tsx b/src/app/common/components/ContactForm/ContactForm.component.tsx
@@ -17,7 +17,6 @@ interface Props {
 const ContactForm = forwardRef((customClass: Props , ref) => {
     const [formData, setFormData] = useState({ email: '', message: '' });
     const [isVerified, setIsVerified] = useState(false);
-    const messageLength = formData.message.length | 0;
     const [messageApi, messageContextHolder] = message.useMessage();
     const [form] = Form.useForm();
     const handleChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value });
@@ -36,8 +35,12 @@ const ContactForm = forwardRef((customClass: Props , ref) => {
         if (isVerified) {
             const newEmail: Email = { from: formData.email, content: formData.message };
             EmailApi.send(newEmail)
-                .then(successMessage)
-                .catch(errorMessage);
+                .then(() => {
+                    successMessage();
+                })
+                .catch(() => {
+                    errorMessage();
+                });
         }
     };
 
@@ -88,14 +91,9 @@ const ContactForm = forwardRef((customClass: Props , ref) => {
                         maxLength={MAX_SYMBOLS}
                         onChange={handleChange}
                     />
-                    <p className="custom-character-counter">
-                        {messageLength}
-                        /
-                        {' '}
-                        {MAX_SYMBOLS}
-                    </p>
                 </Form.Item>
                 <Form.Item
+                    className="required-input"
                     name="email"
                     rules={[
                         {
@@ -113,9 +111,9 @@ const ContactForm = forwardRef((customClass: Props , ref) => {
                         onChange={handleChange}
                     />
                 </Form.Item>
-                <div className="captchaBlock ">
+                <div className="captchaBlock">
                     <ReCAPTCHA
-                        className="required-input"
+                        className="required-captcha"
                         sitekey="6Lf0te8mAAAAAN47cZDXrIUk0kjdoCQO9Jl0DtI4"
                         onChange={handleVerify}
                     />

diff --git a/src/app/common/components/ContactForm/ContactForm.styles.scss b/src/app/common/components/ContactForm/ContactForm.styles.scss
@@ -139,19 +139,32 @@
             position: relative;
         }
 
-        .required-input::before {
+        .required-input::after {
             content: '*';
             position: absolute;
-            top: 0;
-            left: f.pxToRem(-8px);
+            top: f.pxToRem(15px);
+            right: f.pxToRem(12px);
             transform: translate(-50%, -50%);
             color: red;
-            font-size: 20px;
+            @include mut.sizedImportant(8px, 8px);
         }
 
         .captchaBlock {
             @include mut.flexed($direction: column, $justify-content: center, $align-items: center);
         }
+
+        .required-captcha {
+            position: relative;
+        }
+        .required-captcha::before {
+            content: '*';
+            position: absolute;
+            top: f.pxToRem(0);
+            left:  f.pxToRem(-8px);
+            transform: translate(-50%, -50%);
+            color: red;
+            @include mut.sizedImportant(8px, 8px);
+        }
     }
 }
 

diff --git a/src/app/common/components/modals/ContactUsModal/ContactUsModal.component.tsx b/src/app/common/components/modals/ContactUsModal/ContactUsModal.component.tsx
@@ -4,6 +4,7 @@ import { Form, Modal, Popover, Typography } from 'antd'
 const { Text } = Typography
 import { useRef, useState } from 'react';
 import CancelBtn from '@images/utils/Cancel_btn.svg';
+import { useMediaQuery } from 'react-responsive';
 
 interface Props {
     text: string;
@@ -15,6 +16,10 @@ export const ContactUsModal = ({ text, toggleState}: Props) => {
     const [isActive, setActive] = useState(false);
     const form = useRef(null);
 
+    const isDesktop = useMediaQuery({
+        query: '(min-width: 1025px)',
+    });
+
     const handleClick = () => {
         setActive(true);
         toggleState();
@@ -34,12 +39,13 @@ export const ContactUsModal = ({ text, toggleState}: Props) => {
                 footer={null}
                 onCancel={() => setActive(false)}
                 width={"max-content"}
-                closeIcon={<Popover content="Внесені зміни не будуть збережені!" trigger='hover'><CancelBtn className='iconSize' onClick={onClear} />
-                </Popover>}
+                closeIcon={(isDesktop ? 
+                    <Popover content="Внесені зміни не будуть збережені!" trigger='hover'>
+                        <CancelBtn onClick={onClear} />
+                    </Popover>
+                    : <CancelBtn onClick={onClear} />)}
             >
-                <Form>
                 <ContactForm customClass={"formWrapper__modal"} ref={form} />
-                </Form>
             </Modal>
         </>
     )

diff --git a/src/app/common/components/modals/ContactUsModal/ContactUsModal.styles.scss b/src/app/common/components/modals/ContactUsModal/ContactUsModal.styles.scss
@@ -6,11 +6,11 @@
     &.ant-modal {
         .ant-modal-content {
             @include mut.full-rounded(20px, $overflow: visible);
-            padding: f.pxToRem(24px) f.pxToRem(40px);
+            @include mut.rem-padded(0px);
             box-shadow: 0 7px 11px 2px rgba(0, 0, 0, 0.25);
         }
         .ant-modal-close {
-            @include mut.positioned-as(absolute, $left: 94%, $top: -25px);
+            @include mut.positioned-as(absolute, $right: -26px, $top: -26px);
             @include mut.circular(80px, c.$pure-white-color);
 
             box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
@@ -27,9 +27,14 @@
 @media screen and (max-width: 1024px) {
     .contactUsModal {
         @include mut.sizedImportant(90%, 498px);
+
+        .formWrapper {
+            @include mut.rem-margined($top: 0px);
+        }
 
         &.ant-modal {
             .ant-modal-close {
+                @include mut.positioned-as($position: absolute, $right: -17px, $top: -17px);
                 @include mut.sizedImportant(60px, 60px);
                 @include mut.circular(65px, c.$pure-white-color);
 
@@ -45,7 +50,7 @@
     .contactUsModal {
         &.ant-modal {
             .ant-modal-close {
-                @include mut.positioned-as($position: absolute, $left: 92.36%, $top: -13px);
+                @include mut.positioned-as($position: absolute, $right: -11px, $top: -11px);
                 @include mut.sizedImportant(40px, 40px);
                 @include mut.circular(65px, c.$pure-white-color);
 

diff --git a/src/app/common/utils/paginateRequest.tsx b/src/app/common/utils/paginateRequest.tsx
@@ -17,7 +17,7 @@ export function paginateRequest(
         }
 
         page = currentPage + 1;
-        return response;
+        return [response, (currentPage - 1) * pageSize, currentPage * pageSize];
     };
 
     return { fetchNextPage };

diff --git a/...Streetcode/InterestingFactsBlock/FactsAdminModal/InterestingFactsAdminModal.component.tsx b/...Streetcode/InterestingFactsBlock/FactsAdminModal/InterestingFactsAdminModal.component.tsx
@@ -8,7 +8,7 @@ import CancelBtn from '@assets/images/utils/Cancel_btn.svg';
 import useMobx from '@stores/root-store';
 
 import {
-    Button, Form, Input, message, Modal, Popover, UploadFile, 
+    Button, Form, Input, message, Modal, Popover, UploadFile,
 } from 'antd';
 import FormItem from 'antd/es/form/FormItem';
 import TextArea from 'antd/es/input/TextArea';
@@ -22,8 +22,6 @@ import { FactCreate, FactUpdate } from '@/models/streetcode/text-contents.model'
 
 import PreviewFileModal from '../../MainBlock/PreviewFileModal/PreviewFileModal.component';
 
-
-
 interface Props {
     fact?: FactCreate,
     open: boolean,
@@ -39,11 +37,11 @@ const InterestingFactsAdminModal = ({ fact, open, setModalOpen, onChange }: Prop
     const [previewOpen, setPreviewOpen] = useState<boolean>(false);
     const [hasUploadedPhoto, setHasUploadedPhoto] = useState<boolean>(false);
 
-    const clearModal=() =>{
+    const clearModal = () => {
         form.resetFields();
         setModalOpen(false);
         setFileList([]);
-    }
+    };
 
     useEffect(() => {
         if (fact && open) {
@@ -80,9 +78,10 @@ const InterestingFactsAdminModal = ({ fact, open, setModalOpen, onChange }: Prop
     }, [fact, open, form]);
 
     const onSuccesfulSubmit = (formValues: any) => {
-        factsStore.getFactArray.map((t) => t).forEach(t => {
-            if (formValues.title == t.title || formValues.factContent == t.factContent || imageId.current == t.imageId)
-                fact = t;
+        factsStore.getFactArray.map((t) => t).forEach((t) => {
+            if (formValues.title === t.title
+                || formValues.factContent === t.factContent
+                || imageId.current === t.imageId) fact = t;
         });
         if (fact) {
             const item = factsStore.factMap.get(fact.id) as FactUpdate;
@@ -116,7 +115,7 @@ const InterestingFactsAdminModal = ({ fact, open, setModalOpen, onChange }: Prop
         try {
             await form.validateFields();
             form.submit();
-            message.success("Wow-факт успішно додано!", 2)
+            message.success('Wow-факт успішно додано!', 2);
         } catch (error) {
             message.config({
                 top: 100,
@@ -140,10 +139,11 @@ const InterestingFactsAdminModal = ({ fact, open, setModalOpen, onChange }: Prop
                 footer={null}
                 maskClosable
                 centered
-
-                closeIcon={<Popover content="Внесені зміни не будуть збережені!" trigger='hover'>               
-                    <CancelBtn className='iconSize'  onClick={clearModal} />      
-                </Popover>}
+                closeIcon={(
+                    <Popover content="Внесені зміни не будуть збережені!" trigger="hover">
+                        <CancelBtn className="iconSize" onClick={clearModal} />
+                    </Popover>
+                )}
             >
                 <div className="modalContainer-content">
                     <Form
@@ -226,7 +226,7 @@ const InterestingFactsAdminModal = ({ fact, open, setModalOpen, onChange }: Prop
                         </Form.Item>
                         <div className="center">
                             <Button
-                                disabled={fileList?.length === 0}
+                                disabled={fileList?.length === 0 || !hasUploadedPhoto}
                                 className="streetcode-custom-button"
                                 onClick={() => handleOk()}
                             >
@@ -236,10 +236,10 @@ const InterestingFactsAdminModal = ({ fact, open, setModalOpen, onChange }: Prop
                     </Form>
                 </div>
             </Modal>
-            <Popover content="popupContent" trigger='hover'></Popover>
+            <Popover content="popupContent" trigger="hover" />
             <PreviewFileModal file={fileList?.at(0) ?? null} opened={previewOpen} setOpened={setPreviewOpen} />
         </div>
-        
+
     );
 };