Приглашение на доску

frontend-park-mail-ru · Dec 15, 2024 · 820a441 · 820a441
1 parent 3abb45e
commit 820a441
Show file tree

Hide file tree

Showing 14 changed files with 322 additions and 37 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -11,6 +11,8 @@ import { getFlagRoutes } from './routes/routesFlag';
 import { CsatPoll } from './screens/CsatPoll';
 import { CsatResults } from './screens/CsatResults';
 import { setCsatStore, useCsatStore } from './stores/csatStore';
+import { loadBoard, useActiveBoardStore } from './stores/activeBoardStore';
+import { useDndStore } from './stores/dndStore';
 
 const App: IComponentFunction = () => {
   const routerStore = useRouterStore();
@@ -37,7 +39,6 @@ setTimeout(() => {
 
 window.addEventListener('message', (ev: MessageEvent<string>) => {
   if (ev.data === 'close_csat') {
-    console.log('should output');
     setTimeout(() => {
       setCsatStore({ ...useCsatStore(), isOpened: false });
     }, 0);
@@ -62,11 +63,14 @@ if ('serviceWorker' in navigator) {
   console.error('Service Worker is not available');
 }
 
-// const REFETCH_DELAY = 5000;
+const REFETCH_DELAY = 5000;
 
-// setInterval(() => {
-//   const activeBoard = useActiveBoardStore();
-//   if (activeBoard !== undefined) {
-//     loadBoard(activeBoard.id, true);
-//   }
-// }, REFETCH_DELAY);
+setInterval(() => {
+  const activeBoard = useActiveBoardStore();
+  const dnd = useDndStore();
+  if (dnd === undefined) {
+    if (activeBoard !== undefined) {
+      loadBoard(activeBoard.board.id, true);
+    }
+  }
+}, REFETCH_DELAY);
diff --git a/src/api/cardDetails.ts b/src/api/cardDetails.ts
@@ -12,6 +12,7 @@ import {
   apiPost,
   apiPut,
   HTTP_STATUS_CREATED,
+  HTTP_STATUS_NOT_FOUND,
   HTTP_STATUS_OK,
 } from './apiHelper';
 import {
@@ -25,6 +26,7 @@ import {
   CardDetailsResponse,
   CheckListFieldResponse,
   CommentResponse,
+  SharedCardResponse,
   UserResponse,
 } from './responseTypes';
 import {
@@ -191,3 +193,22 @@ export const addAttachment = async (
       showToast('Ошибка при добавлении файла', 'error');
   }
 };
+
+export const getCardByLink = async (
+  cardUuid: string
+): Promise<SharedCardResponse | undefined> => {
+  const response = await apiGet(`/sharedCard/${cardUuid}`);
+  switch (response.status) {
+    case HTTP_STATUS_CREATED:
+    case HTTP_STATUS_OK: {
+      const res = response.body as SharedCardResponse;
+      return res;
+    }
+    case HTTP_STATUS_NOT_FOUND:
+      showToast('Карточка удалена или ссылка повреждена', 'error');
+      return undefined;
+    default:
+      showToast('Неизвестная ошибка при получении карточки', 'error');
+      return undefined;
+  }
+};
diff --git a/src/api/members.ts b/src/api/members.ts
@@ -1,13 +1,16 @@
-import { UserToBoard } from '@/types/types';
+import { Board, UserToBoard } from '@/types/types';
 import {
   apiDelete,
   apiGet,
+  apiPost,
   apiPut,
+  HTTP_STATUS_CREATED,
+  HTTP_STATUS_NOT_FOUND,
   HTTP_STATUS_OK,
 } from './apiHelper';
 import { showToast } from '@/stores/toastNotificationStore';
-import { MemberWithPermissionsResponse } from './responseTypes';
-import { decodeMember } from './decode';
+import { BoardResponse, MemberWithPermissionsResponse } from './responseTypes';
+import { decodeBoard, decodeMember } from './decode';
 
 export const getBoardPermissions = async (
   boardId: number
@@ -57,3 +60,75 @@ export const updateMember = async (
       throw new Error('Неизвестная ошибка');
   }
 };
+
+export const createInviteLink = async (
+  boardId: number
+): Promise<string | undefined> => {
+  const response = await apiPut(`/inviteLink/board_${boardId}`);
+  switch (response.status) {
+    case HTTP_STATUS_OK:
+    case HTTP_STATUS_CREATED:
+      return response.body.inviteLinkUuid as string;
+    default:
+      showToast('Ошибка при задании ссылки-приглашения', 'error');
+      return;
+  }
+};
+
+export const deleteInviteLink = async (boardId: number): Promise<boolean> => {
+  const response = await apiDelete(`/inviteLink/board_${boardId}`);
+  switch (response.status) {
+    case HTTP_STATUS_OK:
+    case HTTP_STATUS_CREATED:
+      return true;
+    default:
+      showToast('Ошибка при задании ссылки-приглашения', 'error');
+      return false;
+  }
+};
+
+export const fetchInviteLink = async (
+  inviteLinkUuid: string
+): Promise<Board | undefined> => {
+  const response = await apiGet(`/joinBoard/${inviteLinkUuid}`);
+  switch (response.status) {
+    case HTTP_STATUS_OK:
+    case HTTP_STATUS_CREATED:
+      return decodeBoard(response.body as BoardResponse);
+    case HTTP_STATUS_NOT_FOUND:
+      showToast(
+        'Возможно, ссылка-приглашение была удалена или повреждена',
+        'error'
+      );
+      return undefined;
+    default:
+      showToast(
+        'Неизвестная ошибка при получении приглашения на доску',
+        'error'
+      );
+      return undefined;
+  }
+};
+
+export const joinInviteLink = async (
+  inviteLinkUuid: string
+): Promise<Board | undefined> => {
+  const response = await apiPost(`/joinBoard/${inviteLinkUuid}`);
+  switch (response.status) {
+    case HTTP_STATUS_OK:
+    case HTTP_STATUS_CREATED:
+      return decodeBoard(response.body as BoardResponse);
+    case HTTP_STATUS_NOT_FOUND:
+      showToast(
+        'Возможно, ссылка-приглашение была удалена или повреждена',
+        'error'
+      );
+      return undefined;
+    default:
+      showToast(
+        'Неизвестная ошибка при получении приглашения на доску',
+        'error'
+      );
+      return undefined;
+  }
+};
diff --git a/src/api/responseTypes.ts b/src/api/responseTypes.ts
@@ -1,4 +1,4 @@
-import { CsatQuestion } from "@/types/types";
+import { CsatQuestion } from '@/types/types';
 
 export interface BoardContentResponse {
   myRole: 'viewer' | 'editor' | 'editor_chief' | 'admin';
@@ -92,3 +92,19 @@ export interface CardDetailsResponse {
   comments: CommentResponse[];
   assignedUsers: UserResponse[];
 }
+
+export type SharedCardResponse =
+  | MySharedCardResponse
+  | ForeignSharedCardResponse;
+
+export interface MySharedCardResponse {
+  type: 'my';
+  boardId: number;
+  cardId: number;
+}
+
+export interface ForeignSharedCardResponse {
+  type: 'foreign';
+  board: BoardResponse;
+  card: CardDetailsResponse;
+}
diff --git a/src/containers/BoardSettings.tsx b/src/containers/BoardSettings.tsx
@@ -7,7 +7,7 @@ import {
   useActiveBoardStore,
 } from '@/stores/activeBoardStore';
 import { Input } from '@/components/Input';
-import {  removeMember, updateMember } from '@/api/members';
+import { createInviteLink, removeMember, updateMember } from '@/api/members';
 import { setMembersStore, useMembersStore } from '@/stores/members';
 import { showToast } from '@/stores/toastNotificationStore';
 import { useMeStore } from '@/stores/meStore';
@@ -142,7 +142,7 @@ export const BoardSettings = () => {
                   <h1>Ссылка-приглашение</h1>
                   <Input
                     key="invite_link_input"
-                    initialValue="https://kanban-pumpkin.ru/card/228"
+                    initialValue={`${window.location.origin}/inviteBoard/${activeBoard.board.myInviteLinkUuid}`}
                   />
                 </div>
               ) : (
@@ -151,6 +151,20 @@ export const BoardSettings = () => {
                     key="create_invite_link"
                     text="Создать ссылку-приглашение"
                     icon="bi-link-45deg"
+                    callback={() => {
+                      createInviteLink(activeBoard.board.id).then(
+                        (linkUuid) => {
+                          if (linkUuid !== undefined) {
+                            showToast(
+                              'Успешно задана ссылка-приглашение!',
+                              'success'
+                            );
+                            activeBoard.board.myInviteLinkUuid = linkUuid;
+                            setActiveBoardStore(activeBoard);
+                          }
+                        }
+                      );
+                    }}
                   />
                 </div>
               )}

diff --git a/src/containers/CardDetails.tsx b/src/containers/CardDetails.tsx
@@ -276,7 +276,7 @@ export const CardDetailsContainer = (props: ComponentProps) => {
           )}
         </div>
         <div class="card-details_block">
-          <h1>Комментарии</h1>
+          {cardDetails.comments.length && <h1>Комментарии</h1>}
           {commentInput ? (
             <>
               <Input
@@ -366,7 +366,9 @@ export const CardDetailsContainer = (props: ComponentProps) => {
           />
         </div>
         <div class="card-details_block">
-          <h1>Назначенные пользователи</h1>
+          {cardDetails.assignedUsers.length && (
+            <h1>Назначенные пользователи</h1>
+          )}
           {cardDetails.assignedUsers.map((u) => {
             return (
               <div className="assigned-user">

diff --git a/src/containers/cardDetails.scss b/src/containers/cardDetails.scss
@@ -5,11 +5,6 @@
   gap: 20px;
 }
 
-.card-details_block {
-  min-height: 140px;
-  max-width: 450px;
-}
-
 .card-details__left-section {
   width: 60%;
   display: flex;

diff --git a/src/routes/routes.ts b/src/routes/routes.ts
diff --git a/src/routes/routesFlag.ts b/src/routes/routesFlag.ts
@@ -1,33 +1,65 @@
 import { loadBoard } from '@/stores/activeBoardStore';
 import { updateBoards } from '@/stores/boardsStore';
+import {
+  loadBoardInvitePreview,
+  loadCardPreview,
+} from '@/stores/previewStore';
 
 export interface RouterFlags {
   isHome: boolean;
   isApp: boolean;
   isPoll: boolean;
+  isPreview: boolean; // Является ли просмотром карточки по ссылке или просмотром приглашения
+  isCardPreview: boolean;
+  isBoardPreview: boolean;
+  cardUuid: string | undefined;
+  boardInviteUuid: string | undefined;
   isCsatResults: boolean;
   boardId: number | undefined;
 }
 
 export const getFlagRoutes = (currentPath: string): RouterFlags => {
   let boardId: number | undefined = undefined;
-  if (currentPath.startsWith('/app')) {
+  let cardUuid: string | undefined;
+  let boardInviteUuid: string | undefined;
+
+  const isBoardPreview = currentPath.startsWith('/inviteBoard');
+  const isCardPreview = currentPath.startsWith('/card');
+  const isApp =
+    currentPath.startsWith('/app') || isBoardPreview || isCardPreview;
+  if (isApp) {
     if (currentPath.startsWith('/app/board_')) {
       boardId = parseInt(currentPath.slice('/app/board_'.length));
     } else {
       boardId = undefined;
     }
   }
-  if (currentPath.startsWith('/app')) {
+
+  if (isApp && !(isCardPreview || isBoardPreview)) {
     updateBoards();
     loadBoard(boardId);
   }
 
+  if (isCardPreview) {
+    cardUuid = currentPath.slice('/card/'.length);
+    loadCardPreview(cardUuid);
+  }
+
+  if (isBoardPreview) {
+    boardInviteUuid = currentPath.slice('/inviteBoard/'.length);
+    loadBoardInvitePreview(boardInviteUuid);
+  }
+
   return {
     isHome: ['/login', '/register', '/'].indexOf(currentPath) !== -1,
     isCsatResults: currentPath === '/csat_results',
     isPoll: currentPath === '/csat_poll',
-    isApp: currentPath.startsWith('/app'),
+    isApp,
     boardId,
+    boardInviteUuid,
+    cardUuid,
+    isPreview: isBoardPreview || isCardPreview,
+    isBoardPreview,
+    isCardPreview,
   };
 };