Update release/1.1.0 with changes from release/1.0.0

src/app/common/components/ArtGallery/ArtGalleryBlock.component.tsx

@@ -90,13 +90,14 @@ const ArtGallery = ({
     if (streetcodeIdValidAndFetchingRequired()) {
       secondRender.current = true;
       if (isFillArtsStore) {
-        await fetchAllToDefaultTemplate(getStreetCodeId !== -1 ? getStreetCodeId : parseId);
+        let currStreetcodeId = getStreetCodeId !== -1 ? getStreetCodeId : parseId;
+        const startingSlide = await fetchAllToDefaultTemplate(currStreetcodeId);
 
-        let currentSlide = 0;
+        let currentSlide = startingSlide ?? 0;
         while (currentSlide < MAX_SLIDES_AMOUNT) {
           try {
             // eslint-disable-next-line no-await-in-loop
-            await fetchAllArtSlidesByStreetcodeId(getStreetCodeId !== -1 ? getStreetCodeId : parseId, currentSlide);
+            await fetchAllArtSlidesByStreetcodeId(currStreetcodeId, currentSlide);
 
             currentSlide += amountOfSlides;
           } catch (error: unknown) {
@@ -340,4 +341,4 @@ const ArtGallery = ({
   );
 };
 
-export default observer(ArtGallery);
+export default observer(ArtGallery);

src/app/stores/streetcode-art-slide-store.ts

@@ -81,9 +81,13 @@ export default class StreetcodeArtSlideStore {
         }
     };
 
-    public fetchAllToDefaultTemplate = async (streetcodeid: number) => {
-        const slidesCount = await StreetcodeArtApi.getAllCountByStreetcodeId(streetcodeid)
-        this.streetcodeArtSlides = new Array<StreetcodeArtSlideAdmin>(slidesCount).fill(bindStreetcodeIdToDefaultSlide(streetcodeid), 0, slidesCount)
+    public fetchAllToDefaultTemplate = async (streetcodeId: number): Promise<number | void> => {
+        if (this.streetcodeWasFetched.includes(streetcodeId)) {return;}
+        const startingPosition = this.streetcodeArtSlides.length;
+        const slidesCount = await StreetcodeArtApi.getAllCountByStreetcodeId(streetcodeId)
+        const placeholders = new Array<StreetcodeArtSlideAdmin>(slidesCount).fill(bindStreetcodeIdToDefaultSlide(streetcodeId), 0, slidesCount);
+        this.streetcodeArtSlides.push(...placeholders); 
+        return startingPosition;
     }
 
     public fetchAllArtSlidesByStreetcodeId = async (streetcodeid: number, startIndex: number) => {
@@ -125,4 +129,4 @@ export default class StreetcodeArtSlideStore {
                 return convertedSlide as unknown as StreetcodeArtSlideCreateUpdate;
             });
     }
-}
+}

src/features/AdminPage/TeamPage/TeamLink.component.tsx

@@ -1,18 +1,11 @@
 import React from 'react';
-import behance from '@assets/images/partners/behance.svg';
-import facebook from '@assets/images/partners/facebook.svg';
-import http from '@assets/images/partners/http.svg';
-import instagram from '@assets/images/partners/instagram.svg';
-import linkedin from '@assets/images/partners/linkedin.svg';
-import tiktok from '@assets/images/partners/tiktok.svg';
-import twitter from '@assets/images/partners/twitterNew.svg';
-import youtube from '@assets/images/partners/youtube.svg';
 
 import { TeamMemberLinkCreateUpdate } from '@/models/team/team.model';
 
-const LogoType = [twitter, instagram, facebook, youtube, linkedin, tiktok, behance, http];
+import LOGO_ICONS from './TeamModal/constants/logoIcons';
+
 const TeamLink: React.FC<{ link: TeamMemberLinkCreateUpdate }> = ({ link }) => {
-    const LogoComponent = LogoType[link.logoType];
+    const LogoComponent = LOGO_ICONS.find( logo => logo.type === link.logoType)!.icon;
 
     return (
         <a

src/features/AdminPage/TeamPage/TeamModal/TeamModal.component.tsx

@@ -19,7 +19,7 @@ import {
     Checkbox,
     Form, Input, message, Modal, Popover, Select, UploadFile,
 } from 'antd';
-import FormItem from 'antd/es/form/FormItem';
+
 import TextArea from 'antd/es/input/TextArea';
 import { Option } from 'antd/es/mentions';
 
@@ -151,37 +151,41 @@ const TeamModal: React.FC<{
 
     const onSuccesfulSubmitLinks = (formValues: any) => {
         const url = formValues.url as string;
-        const logotype = teamLinksForm.getFieldValue('logotype');
+        const socialName = teamLinksForm.getFieldValue('logotype');
+        const logotype = SOCIAL_OPTIONS.find( opt => opt.value === socialName)?.logo;
         setExistWarningVisible(false);
         setCustomWarningVisible(false);
         setInvalidWarningVisible(false);
 
-        if(!url){
+        if (!url) {
+            return;
+        }
+        if (logotype === undefined) {
             return;
         }
 
-        if(!URL.canParse(url)){
+        try {
+            const urlObject = new URL(url);
+        } catch {
             setInvalidWarningVisible(true);
             return;
         }
 
-        if (!url.toLocaleLowerCase().includes(logotype)) {
+        if (!url.toLocaleLowerCase().includes(socialName)) {
             setCustomWarningVisible(true);
         } else {
             const newId = getNewId(teamSourceLinks);
-            const isLogoTypePresent = teamSourceLinks.some(obj => obj.logoType === Number(LogoType[logotype]));
-            
-            if(isLogoTypePresent){
+            const isLogoTypePresent = teamSourceLinks.some(obj => obj.logoType === logotype);
+
+            if (isLogoTypePresent) {
                 setExistWarningVisible(true);
-            }
-            else {
+            } else {
                 setTeamSourceLinks([...teamSourceLinks, {
                     id: newId,
-                    logoType: Number(LogoType[logotype]),
+                    logoType: logotype,
                     targetUrl: url,
                 }]);
             }
-
         }
     };
 
@@ -359,12 +363,13 @@ const TeamModal: React.FC<{
                 layout="vertical"
                 form={teamLinksForm}
                 onFinish={onSuccesfulSubmitLinks}
+                data-testid="link-form"
             >
                 <div className="team-source-list">
-
-                    {teamSourceLinks.map((link) => (
+                    {teamSourceLinks.map((link, index) => (
                         <div
                             className="link-container"
+                            data-testid={`team-source-list-${index}`}
                             key={`${link.id}${link.logoType}`}
                         >
                             <TeamLink link={link} />
@@ -377,29 +382,30 @@ const TeamModal: React.FC<{
                     ))}
                 </div>
                 <div className="link-container">
-                    <FormItem
+                    <Form.Item
                         name="logotype"
                         label="Соціальна мережа"
                         rules={[{ required: true, message: 'Оберіть соц. мережу' }]}
                     >
                         <Select
+                            data-testid="logotype-select"
                             options={SOCIAL_OPTIONS}
                         />
-                    </FormItem>
+                    </Form.Item>
                     <Form.Item
                         label="Посилання"
                         className="url-input"
                         name="url"
                         rules={[{ required: true, message: 'Введіть посилання' }]}
                     >
-                        <Input min={1} max={255} showCount />
+                        <Input min={1} max={255} showCount data-testid="link-input" />
                     </Form.Item>
 
                     <Form.Item
                         label=" "
                     >
                         <Popover content="Додати" trigger="hover">
-                            <Button htmlType="submit" className="plus-button">
+                            <Button htmlType="submit" className="plus-button" data-testid="add-button">
                                 <PlusOutlined />
                             </Button>
                         </Popover>

src/features/AdminPage/TeamPage/TeamModal/TeamModal.spec.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+import '@testing-library/jest-dom';
+
+import TeamModal from './TeamModal.component';
+
+const mockSetIsModalOpen = jest.fn();
+
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // Deprecated
+        removeListener: jest.fn(), // Deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+    })),
+});
+
+jest.mock('@/app/api/team/positions.api', () => ({
+    getAll: jest.fn(() => Promise.resolve([])),
+}));
+
+describe('TeamModal', () => {
+    it('should add link on add button click when input is valid', async () => {
+        render(<TeamModal open setIsModalOpen={mockSetIsModalOpen} />);
+
+        const form = screen.getByTestId('link-form');
+        const logotypeInput = screen.getByTestId('logotype-select').firstElementChild;
+        const urlInput = screen.getByTestId('link-input');
+        const addButton = screen.getByTestId('add-button');
+
+        fireEvent.mouseDown(logotypeInput!);
+        const logotypeOption = screen.getByText('TikTok');
+        fireEvent.click(logotypeOption);
+        fireEvent.change(urlInput, { target: { value: 'https://tiktok.com/@user' } });
+        fireEvent.submit(addButton);
+
+        await waitFor(() => {
+            const item = screen.getByTestId('team-source-list-0');
+            expect(item).toBeInTheDocument();
+        });
+    });
+});

src/features/AdminPage/TeamPage/TeamModal/constants/logoIcons.ts

@@ -0,0 +1,51 @@
+import { FunctionComponent, SVGAttributes } from 'react';
+import behance from '@assets/images/partners/behance.svg';
+import facebook from '@assets/images/partners/facebook.svg';
+import http from '@assets/images/partners/http.svg';
+import instagram from '@assets/images/partners/instagram.svg';
+import linkedin from '@assets/images/partners/linkedin.svg';
+import tiktok from '@assets/images/partners/tiktok.svg';
+import twitter from '@assets/images/partners/twitterNew.svg';
+import youtube from '@assets/images/partners/youtube.svg';
+
+import { LogoType } from '@/models/team/team.model';
+
+interface LogoIcon {
+    type: LogoType,
+    icon: FunctionComponent<SVGAttributes<SVGElement>>
+}
+const LOGO_ICONS: LogoIcon[] = [
+    {
+        type: LogoType.instagram,
+        icon: instagram,
+    },
+    {
+        type: LogoType.facebook,
+        icon: facebook,
+    },
+    {
+        type: LogoType.youtube,
+        icon: youtube,
+    },
+    {
+        type: LogoType.linkedin,
+        icon: linkedin,
+    },
+    {
+        type: LogoType.behance,
+        icon: behance,
+    },
+    {
+        type: LogoType.tiktok,
+        icon: tiktok,
+    },
+    {
+        type: LogoType.twitter,
+        icon: twitter,
+    },
+    {
+        type: LogoType.http,
+        icon: http,
+    },
+];
+export default LOGO_ICONS;

src/features/AdminPage/TeamPage/TeamModal/constants/socialOptions.ts

@@ -1,35 +1,50 @@
-const SOCIAL_OPTIONS = [
+import { LogoType } from '@/models/team/team.model';
+
+interface SocialItem {
+    label: string
+    value: string
+    logo: LogoType
+}
+const SOCIAL_OPTIONS: SocialItem[] = [
     {
         value: 'x.com',
         label: 'X',
+        logo: LogoType.twitter,
     },
     {
         value: 'instagram.com',
         label: 'Instagram',
+        logo: LogoType.instagram,
     },
     {
         value: 'facebook.com',
         label: 'Facebook',
+        logo: LogoType.facebook,
     },
     {
         value: 'youtube.com',
         label: 'Youtube',
+        logo: LogoType.youtube,
     },
     {
         value: 'linkedin.com',
         label: 'LinkedIn',
+        logo: LogoType.linkedin,
     },
     {
         value: 'tiktok.com',
         label: 'TikTok',
+        logo: LogoType.tiktok,
     },
     {
         value: 'behance.net',
         label: 'Behance',
+        logo: LogoType.behance,
     },
     {
         value: 'http',
         label: 'Ваш сайт',
+        logo: LogoType.http,
     },
 ];
 

src/features/AdminPage/TeamPage/TeamPage.component.tsx

@@ -3,14 +3,7 @@ import './TeamPage.styles.scss';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
 import { DeleteOutlined, EditOutlined, StarOutlined } from '@ant-design/icons';
-import behance from '@assets/images/partners/behance.svg';
-import facebook from '@assets/images/partners/facebook.svg';
-import http from '@assets/images/partners/http.svg';
-import instagram from '@assets/images/partners/instagram.svg';
-import linkedin from '@assets/images/partners/linkedin.svg';
-import tiktok from '@assets/images/partners/tiktok.svg';
-import twitter from '@assets/images/partners/twitterNew.svg';
-import youtube from '@assets/images/partners/youtube.svg';
+
 
 import { Button, Table } from 'antd';
 import { ColumnsType } from 'antd/es/table';
@@ -24,11 +17,11 @@ import TeamMember, { TeamMemberLink } from '../../../models/team/team.model';
 import PageBar from '../PageBar/PageBar.component';
 
 import TeamModal from './TeamModal/TeamModal.component';
+import LOGO_ICONS from './TeamModal/constants/logoIcons';
 
 const TeamPage = () => {
     const { teamStore } = useMobx();
     const { modalStore } = useModalContext();
-    const LogoType = [twitter, instagram, facebook, youtube, linkedin, tiktok, behance, http];
     const [modalAddOpened, setModalAddOpened] = useState<boolean>(false);
     const [modalEditOpened, setModalEditOpened] = useState<boolean>(false);
     const [teamToEdit, setTeamToedit] = useState<TeamMember>();
@@ -115,7 +108,7 @@ const TeamPage = () => {
             render: (links: TeamMemberLink[], team) => (
                 <div key={`${links.length}${team.id}${team.imageId}`} className="team-links">
                     {links.map((link) => {
-                        const LogoComponent = LogoType[link.logoType];
+                        const LogoComponent = LOGO_ICONS.find( logo => logo.type === link.logoType)!.icon;
                         return (
                             <a
                                 key={`${link.id}${link.targetUrl}`}

src/features/SlickSlider/SlickSlider.component.tsx

@@ -14,7 +14,7 @@ const GenericSlider: FC<SliderProps> = ({
     ...sliderProps
 }) => {
     const sliderRef = useRef<Slider>(null);
-
+    sliderRef.current?.slickGoTo(0); //Does anybody see issue with this?
     const handleClick = useCallback((index: number, direction: 'right' | 'left') => {
         if (sliderRef && sliderRef.current && swipeOnClick) {
             if (direction === 'right') {

src/models/team/team.model.ts

@@ -28,7 +28,7 @@ export interface TeamMemberLinkCreateUpdate {
 export interface TeamMemberLink {
     id: number;
     targetUrl: Url;
-    logoType: number;
+    logoType: LogoType;
 }
 export interface Positions {
     id: number;