Chat backend integration

frontend/src/lib/components/header/Header.svelte

@@ -5,24 +5,46 @@
 	import { createQuery } from '@tanstack/svelte-query';
 	import { showLogoutModal } from './LogoutModal.svelte';
 	import LightSwitch from '../../utils/LightSwitch/LightSwitch.svelte';
+	// import { page } from '$app/stores';
 
 	$: userInfoGet = createGetQuery('/api/v1/auth/user_info');
 	$: userInfo = createQuery({
 		queryKey: userInfoGet.key,
 		queryFn: () => userInfoGet.runQuery()
 	});
 
+	$: userRecordsGet = createGetQuery('/api/v1/users/records');
+	$: userRecordsQuery = createQuery({
+		queryKey: userRecordsGet.key,
+		queryFn() {
+			return userRecordsGet.runQuery();
+		},
+		select(res) {
+			return res.data || null;
+		}
+	});
+
 	const navCreatePopup: PopupSettings = {
 		event: 'click',
 		target: 'nav-create-popup',
 		placement: 'bottom'
 	};
-	const navProfilePopup: PopupSettings = {
+
+	const modalStore = getModalStore();
+
+	// $: recordId = $page.params.id || '';
+	// $: isCV = ($userRecordsQuery.data?.cv_ids || []).includes(recordId) || false;
+	$: chatPickerPopup = {
 		event: 'click',
-		target: 'nav-profile-popup',
+		target: 'chat-picker-popup',
+		placement: 'bottom'
+	};
+
+	$: matchPickerPopup = {
+		event: 'click',
+		target: 'match-picker-popup',
 		placement: 'bottom'
 	};
-	const modalStore = getModalStore();
 </script>
 
 <header class="p-2 text-black dark:text-white">
@@ -35,35 +57,76 @@
 			/>
 		</a>
 		<div class="flex items-center gap-3">
-			<a href={route('/profile/chat')}>Chats</a>
-			<button use:popup={navProfilePopup}>
-				Match
+			{#if $userRecordsQuery.data?.cv_ids || $userRecordsQuery.data?.vacancy_ids}
+				<button use:popup={matchPickerPopup}> Match </button>
 				<div
-					data-popup={navProfilePopup.target}
+					data-popup={matchPickerPopup.target}
 					class="bg-app-blue-50 px-4 py-2 text-black drop-shadow-md"
 				>
-					<div class="flex flex-col gap-2">
-						<a href={route('/cv/match')}>CV</a>
-						<hr />
-						<a href={route('/vacancy/match')}>Vacancy</a>
-					</div>
-					<div class="arrow bg-app-blue-50"></div>
+					{#if $userRecordsQuery.data?.cv_ids}
+						<h3>CV:</h3>
+						<ul class="list pl-2">
+							{#each $userRecordsQuery.data.cv_ids as id}
+								<li>
+									<a href={route('/cv/match/' + id)}> {id} </a>
+								</li>
+							{/each}
+						</ul>
+					{/if}
+					{#if $userRecordsQuery.data?.vacancy_ids}
+						<h3>Vacancy:</h3>
+						<ul class="list pl-2">
+							{#each $userRecordsQuery.data.vacancy_ids as id}
+								<li>
+									<a href={route('/vacancy/match/' + id)}> {id} </a>
+								</li>
+							{/each}
+						</ul>
+					{/if}
 				</div>
-			</button>
-			<button use:popup={navCreatePopup}>
-				Create
+			{/if}
+
+			{#if $userRecordsQuery.data?.cv_ids || $userRecordsQuery.data?.vacancy_ids}
+				<button use:popup={chatPickerPopup}> Chats </button>
 				<div
-					data-popup={navCreatePopup.target}
+					data-popup={chatPickerPopup.target}
 					class="bg-app-blue-50 px-4 py-2 text-black drop-shadow-md"
 				>
-					<div class="flex flex-col gap-2">
-						<a href={route('/cv/create')}>CV</a>
-						<hr />
-						<a href={route('/vacancy/create')}>Vacancy</a>
-					</div>
-					<div class="arrow bg-app-blue-50"></div>
+					{#if $userRecordsQuery.data?.cv_ids}
+						<h3>CV:</h3>
+						<ul class="list pl-2">
+							{#each $userRecordsQuery.data.cv_ids as id}
+								<li>
+									<a href={route('/profile/chat/' + id)}> {id} </a>
+								</li>
+							{/each}
+						</ul>
+					{/if}
+					{#if $userRecordsQuery.data?.vacancy_ids}
+						<h3>Vacancy:</h3>
+						<ul class="list pl-2">
+							{#each $userRecordsQuery.data.vacancy_ids as id}
+								<li>
+									<a href={route('/profile/chat/' + id)}> {id} </a>
+								</li>
+							{/each}
+						</ul>
+					{/if}
+				</div>
+			{/if}
+
+			<button use:popup={navCreatePopup}> Create </button>
+			<div
+				data-popup={navCreatePopup.target}
+				class="bg-app-blue-50 px-4 py-2 text-black drop-shadow-md"
+			>
+				<div class="flex flex-col gap-2">
+					<a href={route('/cv/create')}>CV</a>
+					<hr />
+					<a href={route('/vacancy/create')}>Vacancy</a>
 				</div>
-			</button>
+				<div class="arrow bg-app-blue-50"></div>
+			</div>
 			<a
 				href={route('/integrations')}
 				class="hidden sm:block">Api</a

frontend/src/lib/utils/types.ts

@@ -8,3 +8,9 @@ export type VacancyRequest = components['schemas']['VacancyRequestSchema'];
 
 export type CvResponse = components['schemas']['CVResponseSchema'];
 export type VacancyResponse = components['schemas']['VacancyResponseSchema'];
+
+export type MessageRequestSchema = components['schemas']['MessageRequestSchema'];
+export type MessageResponseSchema = components['schemas']['MessageResponseSchema'];
+
+export type ChatResponseSchema = components['schemas']['ChatResponseSchema'];
+export type ChatsResponseSchema = components['schemas']['ChatsResponseSchema'];

frontend/src/routes/[type=type]/match/+page.svelte

@@ -32,6 +32,7 @@
 			return res.data;
 		}
 	});
+
 	const modalStore = getModalStore();
 	function showModal() {
 		showWarningModal(modalStore, {

frontend/src/routes/[type=type]/match/[id]/+page.svelte

@@ -8,7 +8,6 @@
 	import Loading from '../Loading.svelte';
 	import Match, { constructMatcher } from '../Match.svelte';
 	import RandomMatch from '../RandomMatch.svelte';
-	import { getRandomCv, getRandomVacancy } from '../mock';
 
 	export let data;
 	$: userMatchGet = data.isCvRoute
@@ -44,14 +43,18 @@
 		}
 	});
 
+	$: randomMatchGet = createGetQuery(
+		data.isCvRoute ? '/api/v1/vacancies/random_vacancy' : '/api/v1/vacancies/random_vacancy'
+	);
 	$: randomMatchQuery = createQuery({
-		queryKey: data.isCvRoute ? ['random vacancy'] : ['random cv'],
+		queryKey: randomMatchGet.key,
 		queryFn() {
-			return data.isCvRoute ? getRandomVacancy() : getRandomCv();
+			return randomMatchGet.runQuery();
 		},
-		staleTime: Infinity
+		select(res) {
+			return res.data;
+		}
 	});
-
 	$: matcher = constructMatcher($userMatchQuery.data, $randomMatchQuery.data);
 </script>