Merge pull request #885 from BinaryStudioAcademy/task/bt-674-preview-…

…project-to-real-data

bt-785: [BUG] Description and preview of the repo are not displayed on the Preview page

backend/src/bundles/proxy-link-preview/proxy-link-preview.controller.ts

@@ -0,0 +1,47 @@
+import { ApiPath } from '~/common/enums/enums.js';
+import { HttpCode } from '~/common/http/http.js';
+import {
+    type ApiHandlerOptions,
+    type ApiHandlerResponse,
+} from '~/common/packages/controller/controller.js';
+import { type Logger } from '~/common/packages/logger/logger.js';
+import { ControllerBase } from '~/common/packages/packages.js';
+
+import { type ProxyLinkPreviewService } from './proxy-link-preview.service.js';
+
+class ProxyLinkPreviewController extends ControllerBase {
+    private proxyLinkPreviewService: ProxyLinkPreviewService;
+
+    public constructor(
+        logger: Logger,
+        proxyLinkPreviewService: ProxyLinkPreviewService,
+    ) {
+        super(logger, ApiPath.PROXY_LINK_PREVIEW);
+        this.proxyLinkPreviewService = proxyLinkPreviewService;
+
+        this.addRoute({
+            path: '/',
+            method: 'GET',
+            handler: (options) => {
+                return this.proxyLinkPreview(
+                    options as ApiHandlerOptions<{
+                        query: { url: string };
+                    }>,
+                );
+            },
+        });
+    }
+
+    private async proxyLinkPreview(
+        options: ApiHandlerOptions<{ query: { url: string } }>,
+    ): Promise<ApiHandlerResponse> {
+        return {
+            status: HttpCode.OK,
+            payload: await this.proxyLinkPreviewService.proxyLinkPreview(
+                options.query,
+            ),
+        };
+    }
+}
+
+export { ProxyLinkPreviewController };

backend/src/bundles/proxy-link-preview/proxy-link-preview.service.ts

@@ -0,0 +1,13 @@
+import fetch from 'node-fetch';
+
+class ProxyLinkPreviewService {
+    public async proxyLinkPreview(payload: {
+        url: string;
+    }): Promise<{ data: string }> {
+        const response = await fetch(payload.url);
+        const data = await response.text();
+        return { data };
+    }
+}
+
+export { ProxyLinkPreviewService };

backend/src/bundles/proxy-link-preview/proxy-link-preview.ts

@@ -0,0 +1,12 @@
+import { logger } from '~/common/packages/packages.js';
+
+import { ProxyLinkPreviewController } from './proxy-link-preview.controller.js';
+import { ProxyLinkPreviewService } from './proxy-link-preview.service.js';
+
+const proxyLinkPreviewService = new ProxyLinkPreviewService();
+const proxyLinkPreviewController = new ProxyLinkPreviewController(
+    logger,
+    proxyLinkPreviewService,
+);
+
+export { proxyLinkPreviewController, proxyLinkPreviewService };

backend/src/common/server-application/server-application.ts

@@ -5,6 +5,7 @@ import { contactsController } from '~/bundles/contacts/contacts.js';
 import { fileController } from '~/bundles/files/files.js';
 import { hardSkillsController } from '~/bundles/hard-skills/hard-skills.js';
 import { hiringInfoController } from '~/bundles/hiring-info/hiring-info.js';
+import { proxyLinkPreviewController } from '~/bundles/proxy-link-preview/proxy-link-preview.js';
 import { userDetailsController } from '~/bundles/user-details/user-details.js';
 import { userController } from '~/bundles/users/users.js';
 import { config, database, logger } from '~/common/packages/packages.js';
@@ -24,6 +25,7 @@ const apiV1 = new ServerAppApiBase(
     ...bsaBadgesController.routes,
     ...hiringInfoController.routes,
     ...chatMessagesController.routes,
+    ...proxyLinkPreviewController.routes,
 );
 const serverApp = new ServerAppBase({
     config,

frontend/src/bundles/candidate-details/components/candidate-profile/candidate-profile.tsx

@@ -105,9 +105,18 @@ const CandidateProfile: React.FC<Properties> = ({
     const userId = currentUser?.id;
 
     useEffect(() => {
+        if (!isFifthStep && currentUser?.role == UserRole.EMPLOYER) {
+            void dispatch(
+                lmsActions.getTalentLmsData({ userId: data.userId ?? '' }),
+            );
+        }
+
         if (!userId || isProfileCard) {
             return;
         }
+
+        void dispatch(lmsActions.getTalentLmsData({ userId }));
+
         if (!isFifthStep && currentUser.role == UserRole.EMPLOYER) {
             void dispatch(
                 hiringInfoActions.getHiringInfo({
@@ -148,6 +157,7 @@ const CandidateProfile: React.FC<Properties> = ({
             void dispatch(chatActions.updateChatId(chatWithCandidate.chatId));
         }
     }, [chats, data.userId, dispatch, hasSentAlreadyFirstMessage]);
+
     useEffect(() => {
         if (currentUser?.role == UserRole.TALENT) {
             void dispatch(lmsActions.getTalentBadges(currentUser.id));
@@ -197,6 +207,7 @@ const CandidateProfile: React.FC<Properties> = ({
         employmentType: data.employmentType as string[],
         notConsidered: data.notConsidered as string[],
         cvId: data.cvId as string,
+        lmsProject: reduxData.lmsProject,
     };
     const isContactButtonVisible =
         !isProfileOpen && !isFifthStep && !isProfileCard;

frontend/src/bundles/common/components/link-preview/fetch-link-preview-api.ts

@@ -0,0 +1,30 @@
+import { ApiPath, ContentType } from '~/bundles/common/enums/enums.js';
+import { HttpApiBase } from '~/framework/api/api.js';
+import { type Http } from '~/framework/http/http.js';
+import { type Storage } from '~/framework/storage/storage.js';
+
+type Constructor = {
+    baseUrl: string;
+    http: Http;
+    storage: Storage;
+};
+
+class FetchLinkPreviewApi extends HttpApiBase {
+    public constructor({ baseUrl, http, storage }: Constructor) {
+        super({ path: ApiPath.PROXY_LINK_PREVIEW, baseUrl, http, storage });
+    }
+
+    public async fetchLinkPreviewData(url: string): Promise<{ data: string }> {
+        const response = await this.load(
+            this.getFullEndpoint(`/?url=${url}`, {}),
+            {
+                method: 'GET',
+                contentType: ContentType.JSON,
+                hasAuth: true,
+            },
+        );
+        return response.json();
+    }
+}
+
+export { FetchLinkPreviewApi };

frontend/src/bundles/common/components/link-preview/fetch-link-preview.helper.ts

@@ -1,11 +1,16 @@
+import { fetchLinkPreviewApi } from './fetch-link-preview.js';
 import { type LinkPreviewData } from './link-preview-data.type.js';
 
 const fetchLinkPreview = async (
     url: string,
 ): Promise<LinkPreviewData | null> => {
+    if (!url) {
+        return null;
+    }
+
     try {
-        const response = await fetch(url);
-        const data = await response.text();
+        const response = await fetchLinkPreviewApi.fetchLinkPreviewData(url);
+        const data = response.data;
         const parser = new DOMParser();
         const document = parser.parseFromString(data, 'text/html');
         const title = document.querySelector('title')?.textContent ?? '';

frontend/src/bundles/common/components/link-preview/fetch-link-preview.ts

@@ -0,0 +1,13 @@
+import { config } from '~/framework/config/config.js';
+import { http } from '~/framework/http/http.js';
+import { storage } from '~/framework/storage/storage.js';
+
+import { FetchLinkPreviewApi } from './fetch-link-preview-api.js';
+
+const fetchLinkPreviewApi = new FetchLinkPreviewApi({
+    baseUrl: config.ENV.API.ORIGIN_URL,
+    storage,
+    http,
+});
+
+export { fetchLinkPreviewApi };

frontend/src/bundles/common/components/link-preview/link-preview.tsx

@@ -16,7 +16,11 @@ const LinkPreview: React.FC<Properties> = ({ url, withHeader = false }) => {
     useEffect(() => {
         const fetchData = async (): Promise<void> => {
             const data = await fetchLinkPreview(url);
+            if (!data) {
+                return;
+            }
             setPreviewData(data);
+
             setLoading(false);
         };
 
@@ -85,7 +89,7 @@ const LinkPreview: React.FC<Properties> = ({ url, withHeader = false }) => {
                 ) : (
                     <Grid container item className={styles.imagePlaceholder}>
                         <Typography variant="h3" className={styles.notFound}>
-                            Something went wrong...
+                            Connecting...
                         </Typography>
                     </Grid>
                 )}

frontend/src/bundles/common/components/link-preview/styles.module.scss

@@ -46,7 +46,6 @@
 .image {
     max-width: 100%;
     height: auto;
-    max-height: 400px;
     border-radius: 10px;
     object-fit: fill;
 }
@@ -57,7 +56,7 @@
     min-width: clamp(240px, 50vw, 600px);
     min-height: clamp(120px, 40vw, 300px);
     color: #000000;
-    background-color: var(--botticelli);
+    background-color: var(--cloudy-sky);
     border: 1px solid var(--gray-1);
     border-radius: 10px;
 
@@ -92,6 +91,8 @@
 
 .imgWrapper.skeleton {
     height: 30vw;
-    background-color: var(--slate-gray);
+    color: #000000;
+    text-decoration: none;
+    background-color: var(--cloudy-sky);
     border-radius: 10px;
 }

frontend/src/bundles/talent-onboarding/types/candidate-profile/candidate-profile.ts

@@ -33,6 +33,7 @@ type SecondSectionDetails = {
     employmentType: string[];
     notConsidered: string[];
     cvId: string;
+    lmsProject?: Project;
 };
 
 export { type FirstSectionDetails, type SecondSectionDetails };

mobile/src/bundles/chat/components/chat-header/chat-header.tsx

@@ -17,21 +17,20 @@ import { styles } from './styles';
 
 type Properties = {
     partnerName: string;
-    partnerAvatar?: string;
+    partnerAvatar: string;
     partnerId: string;
     chatId: string;
 };
 
 const ChatHeader: React.FC<Properties> = ({
     partnerName,
-    partnerId,
+    partnerAvatar,
     chatId,
 }) => {
-    const { partners } = useAppSelector(({ chat }) => chat);
     const { currentUserData } = useAppSelector(({ auth }) => auth);
     const avatar = (
         <Avatar
-            uri={partners[partnerId]}
+            uri={partnerAvatar}
             avatarSize={PhotoType.MEDIUM}
             customPhotoStyle={{
                 photoShape: globalStyles.borderRadius15,

mobile/src/bundles/chat/components/chat-item/chat-item.tsx

@@ -9,7 +9,7 @@ import { styles } from './styles';
 
 type Properties = {
     senderId: string;
-    senderAvatar?: string;
+    senderAvatar: string;
     message: string;
 };
 

mobile/src/bundles/chat/components/chat-list-item/chat-list-item.tsx

@@ -23,7 +23,6 @@ type Properties = {
 
 const ChatListItem: React.FC<Properties> = ({ item, onSelect }) => {
     const { currentUserData } = useAppSelector(({ auth }) => auth);
-    const { partners } = useAppSelector(({ chat }) => chat);
     const { chatId, participants, lastMessage, lastMessageCreatedAt } = item;
 
     const lastMessageTimeDelivery = useRealTimeElapsed(lastMessageCreatedAt);
@@ -37,7 +36,7 @@ const ChatListItem: React.FC<Properties> = ({ item, onSelect }) => {
 
     const itemAvatar = (
         <Avatar
-            uri={partners[ownerChat.id]}
+            uri={ownerChat.avatarUrl}
             avatarSize={PhotoType.MEDIUM}
             customPhotoStyle={{
                 photoShape: globalStyles.borderRadius15,

mobile/src/bundles/chat/helpers/set-partner-avatar/set-partner-avatar.ts

@@ -1,7 +1,3 @@
-import {
-    EMPLOYER_AVATAR,
-    TALENT_AVATAR,
-} from '~/bundles/chat/constants/constants';
 import { type ChatResponseDto } from '~/bundles/chat/types/types';
 
 type Partners = Record<string, string>;
@@ -19,16 +15,7 @@ const setPartnerAvatar = (
         ];
         participants.map((participant) => {
             if (!partners[participant.id]) {
-                const avatarList = participant.companyName
-                    ? EMPLOYER_AVATAR
-                    : TALENT_AVATAR;
-
-                const randomIndex = Math.floor(
-                    Math.random() * avatarList.length,
-                );
-                const avatarUrl = avatarList[randomIndex];
-
-                partners[participant.id] = avatarUrl;
+                partners[participant.id] = participant.avatarUrl;
             }
         });
     });

mobile/src/bundles/chat/store/actions.ts

@@ -69,8 +69,12 @@ const getAllMessagesByChatId = createAsyncThunk<
             const employer = await commonApi.getUserDetailsByUserId({
                 userId: employerId,
             });
+
             const employerDetails = {
-                logoUrl: employer?.companyLogoId ?? '',
+                logoUrl:
+                    (employer?.profileName
+                        ? employer.companyLogoUrl
+                        : employer?.photoUrl) ?? '',
                 companyName: employer?.companyName ?? '',
                 employerName: employer?.fullName ?? '',
                 employerPosition: employer?.employerPosition ?? '',

mobile/src/bundles/common/types/navigation/chat-navigation-properties.type.ts

@@ -2,7 +2,7 @@ type ChatNavigationProperties = {
     chatId: string;
     partnerName: string;
     partnerId: string;
-    partnerAvatar?: string;
+    partnerAvatar: string;
 };
 
 export { type ChatNavigationProperties };

mobile/src/bundles/employer/screens/contact-candidate/contact-candidate.tsx

@@ -52,11 +52,11 @@ const ContactCandidate: React.FC = () => {
     }, [currentUserData?.id, dispatch, talentId]);
 
     useEffect(() => {
-        if (startedChat) {
+        if (startedChat && currentUserData?.id) {
             const { chatId, participants } = startedChat;
 
             const { partnerName, partnerAvatar, partnerId } = getPartnerInfo(
-                chatId,
+                currentUserData.id,
                 participants,
             );
 
@@ -69,7 +69,7 @@ const ContactCandidate: React.FC = () => {
                 }),
             );
         }
-    }, [navigation, chats, startedChat]);
+    }, [navigation, chats, startedChat, currentUserData?.id]);
 
     const handleFormSubmit = useCallback(
         (payload: ContactCandidateDto): void => {