fix: прочтение уведомления

src/app/providers/router/config.tsx

@@ -4,8 +4,8 @@ import { ChatsPage, ChatsPageDesktop } from '~/pages/chats';
 import { DialogPage } from '~/pages/dialog';
 import { MainPage } from '~/pages/main';
 import { NotFoundPage } from '~/pages/not-found';
-import { NotificationPage, NotificationPageDesktop } from '~/pages/notification';
-import { NotificationsPage, NotificationsPageDesktop } from '~/pages/notifications';
+import { NotificationPage } from '~/pages/notification';
+import { NotificationsPage } from '~/pages/notifications';
 import { OnboardingPage } from '~/pages/onboarding';
 import { PositionPage } from '~/pages/position';
 import { ProfileMePage, ProfilePageDesktop, ProfileUserPage } from '~/pages/profile';
@@ -110,11 +110,11 @@ export const normalRoutes = [
   },
   {
     path: PATHS.notifications,
-    view: { base: NotificationsPage, desktop: NotificationsPageDesktop },
+    view: { base: NotificationsPage },
   },
   {
     path: PATHS.notification,
-    view: { base: NotificationPage, desktop: NotificationPageDesktop },
+    view: { base: NotificationPage },
   },
   { path: PATHS.settings, view: { base: SettingsPage } },
   { path: PATHS.profileSettings, view: { base: ProfileSettingsPage } },

src/entities/notification/Notification.tsx

@@ -1,11 +1,28 @@
-import { Flex, Text, Box, Heading, VStack, Button } from '@chakra-ui/react';
-import { Link } from 'react-router-dom';
+import { Flex, Heading, VStack, Button, Text } from '@chakra-ui/react';
+import { useEffect } from 'react';
+import { generatePath, Link } from 'react-router-dom';
 
 import { useIsMobile } from '~/shared/hooks';
+import { formatDate, formatTime } from '~/shared/lib/adapters';
 import { PATHS } from '~/shared/lib/router';
+import { NotificationImage } from '~/shared/ui/NotificationImage';
 
-export function Notification() {
+import { useGetNotification } from './api';
+import { NOTIFICATIONS } from './Notification.constants';
+
+interface NotificationProps {
+  notificationId: string;
+  read: () => void;
+}
+
+export function Notification({ notificationId, read }: NotificationProps) {
   const isMobile = useIsMobile();
+  const { data: notification } = useGetNotification(notificationId);
+
+  useEffect(() => {
+    if (!notification || notification.is_read) return;
+    read();
+  }, [notification]);
 
   return (
     <Flex
@@ -15,21 +32,29 @@ export function Notification() {
       px={isMobile ? 5 : 6}
       py={isMobile ? 5 : 20}
       borderRadius="2xl"
-      gap={8}
+      gap={5}
       grow={1}
     >
-      <Box w={48} h={48} bg="gray.300"></Box>
-      <VStack spacing={0} gap={4}>
+      <VStack spacing={0} gap={3}>
+        <NotificationImage />
         <Heading variant="h2" mb={0}>
-          Вы приняты в команду!
+          {notification && NOTIFICATIONS[notification.type as keyof typeof NOTIFICATIONS]}
         </Heading>
-        <Text maxW={isMobile ? 72 : 80} textAlign="center">
-          Привет! Приглашаю тебя присоединиться к нашей команде Dream Team и создать
-          проект вместе!
+        <Text variant="caption">
+          {notification && `от ${formatDate(notification.created_at)}`}{' '}
+          {notification && formatTime(notification.created_at)}
         </Text>
       </VStack>
       <Button w="full" maxW={isMobile ? 72 : 80}>
-        <Link to={PATHS.chats}>Перейти в чат</Link>
+        <Link
+          to={
+            notification
+              ? generatePath(PATHS.position, { id: notification.data.position_id })
+              : '#'
+          }
+        >
+          Перейти к проекту
+        </Link>
       </Button>
     </Flex>
   );

src/entities/notification/api/index.ts

@@ -0,0 +1 @@
+export * from './useGetNotification';

src/entities/notification/api/useGetNotification.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { api } from '~/shared/contexts';
+
+export const useGetNotification = (notificationId: string) =>
+  useQuery({
+    queryKey: ['notificatiions', notificationId],
+    queryFn: () => api.notificationsApi.get(notificationId),
+    staleTime: 15000,
+  });

src/entities/notification/index.ts

@@ -1 +1,2 @@
 export * from './Notification';
+export * from './Notification.constants';

src/features/notifications/api/index.ts

@@ -0,0 +1 @@
+export * from './useReadNotification';

src/features/notifications/api/useReadNotification.tsx

@@ -0,0 +1,14 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { api } from '~/shared/contexts';
+
+export const useReadNotification = (notificationId: string) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => api.notificationsApi.read(notificationId),
+    onSuccess: () => {
+      queryClient.invalidateQueries(['notifications']);
+    },
+  });
+};

src/features/notifications/index.ts

@@ -1,3 +1,4 @@
 export * from './notification';
 export * from './notification-settings';
 export * from './notifications-filter';
+export * from './api';

src/pages/notification/NotificationBasePage.tsx

@@ -0,0 +1,27 @@
+import { Container, Flex, Heading } from '@chakra-ui/react';
+
+import { useReadNotification } from '~/features/notifications';
+
+import { Notification } from '~/entities/notification';
+
+import { GoBack } from '~/shared/ui/GoBack';
+
+interface NotificationBasePage {
+  notificationId: string;
+}
+
+export function NotificationBasePage({ notificationId }: NotificationBasePage) {
+  const { mutate: readNotification } = useReadNotification(notificationId);
+
+  return (
+    <Container maxW="md" mt={2} mb={4}>
+      <Flex alignItems="center" gap={2} my={4}>
+        <GoBack />
+        <Heading as="h1" variant="h1">
+          Уведомления
+        </Heading>
+      </Flex>
+      <Notification notificationId={notificationId} read={readNotification} />
+    </Container>
+  );
+}

src/pages/notification/NotificationPage.tsx

@@ -1,19 +1,15 @@
-import { Container, Flex, Heading } from '@chakra-ui/react';
+import { Navigate, useParams } from 'react-router-dom';
 
-import { Notification } from '~/entities/notification';
+import { PATHS } from '~/shared/lib/router';
 
-import { GoBack } from '~/shared/ui/GoBack';
+import { NotificationBasePage } from './NotificationBasePage';
 
 export function NotificationPage() {
-  return (
-    <Container maxW="md" mt={2} mb={4}>
-      <Flex alignItems="center" gap={2} my={4}>
-        <GoBack />
-        <Heading as="h1" variant="h1">
-          Уведомления
-        </Heading>
-      </Flex>
-      <Notification />
-    </Container>
+  const { id: notificationId } = useParams();
+
+  return !notificationId ? (
+    <Navigate to={PATHS.notFound} replace />
+  ) : (
+    <NotificationBasePage notificationId={notificationId} />
   );
 }

src/pages/notification/index.ts

@@ -1,2 +1 @@
 export * from './NotificationPage';
-export * from './NotificationPage.desktop';

src/shared/api/clients/notifications.ts

@@ -8,11 +8,27 @@ export type GetListParameters =
 export type GetListResponse =
   paths['/api/rest/notifications/']['get']['responses']['200']['content']['application/json'];
 
+export type GetResponse =
+  paths['/api/rest/notifications/{notification_id}']['get']['responses']['200']['content']['application/json'];
+
 export class NotificationsApiClient extends BaseApiClient {
   async getList(params: GetListParameters) {
     const { data } = await this.client.get<GetListResponse>(`/api/rest/notifications/`, {
       params,
     });
     return data;
   }
+
+  async get(notification_id: string) {
+    const { data } = await this.client.get<GetResponse>(
+      `/api/rest/notifications/${notification_id}`,
+    );
+    return data;
+  }
+
+  async read(notification_id: string) {
+    return this.client.post(`/api/rest/notifications/${notification_id}`, {
+      is_read: true,
+    });
+  }
 }

src/widgets/notification-list/NotificationItem.tsx

@@ -1,14 +1,14 @@
 import { Stack, Flex, Heading, Text, Circle } from '@chakra-ui/react';
 import { generatePath } from 'react-router-dom';
 
+import { NOTIFICATIONS } from '~/entities/notification';
+
 import { NotificationResponse } from '~/shared/api/types';
 import { useIsMobile } from '~/shared/hooks';
 import { formatDate, formatTime } from '~/shared/lib/adapters';
 import { PATHS } from '~/shared/lib/router';
 import { SLink } from '~/shared/ui/SLink';
 
-import { NOTIFICATIONS } from './Notifications.constants';
-
 interface NotificationItemProps {
   notification: NotificationResponse;
 }