Merge pull request #273 from habralab/feat/notifications-client

feat/notifications-client

common/client/entrypoints/renderer/locales/ru.json

@@ -1,6 +1,12 @@
 {
   "header.exit_message": "Вы действительно хотите выйти?",
   "header.exit": "Выйти",
+  "header.notifications.accept": "Принять",
+  "header.notifications.more_detailed": "Подробнее",
+  "header.notifications.no_notifications_yet": "Пока нет уведомлений",
+  "header.notifications.notifications": "Уведомления",
+  "header.notifications.reject": "Отклонить",
+  "header.notifications.watch_all": "Смотреть все",
   "header.profile": "Профиль",
   "header.projects": "Проекты",
   "header.teams": "Команды",

common/client/fragments/header-fragment/package.json

@@ -5,6 +5,8 @@
   "dependencies": {
     "@shared/data": "workspace:0.0.1",
     "@shared/routes": "workspace:0.0.1",
+    "@shared/utils": "workspace:0.0.1",
+    "@ui/avatar": "workspace:0.0.1",
     "@ui/background": "workspace:0.0.1",
     "@ui/button": "workspace:0.0.1",
     "@ui/condition": "workspace:0.0.1",
@@ -13,9 +15,11 @@
     "@ui/link": "workspace:0.0.1",
     "@ui/logo": "workspace:0.0.1",
     "@ui/modal": "workspace:0.0.1",
-    "@ui/text": "workspace:0.0.1"
+    "@ui/text": "workspace:0.0.1",
+    "react-laag": "2.0.5"
   },
   "devDependencies": {
+    "@apollo/client": "3.8.7",
     "@atls/next-identity-integration": "0.0.17",
     "@emotion/react": "11.9.3",
     "@emotion/styled": "11.9.3",
@@ -30,6 +34,7 @@
   },
   "peerDependencies": {
     "@atls/next-identity-integration": "*",
+    "@emotion/css": "*",
     "@emotion/react": "*",
     "@emotion/styled": "*",
     "@stores/session": "workspace:*",

common/client/fragments/header-fragment/src/button-exit/button-exit.component.tsx

@@ -10,7 +10,6 @@ import { Button }           from '@ui/button'
 import { Condition }        from '@ui/condition'
 import { LogoutIcon }       from '@ui/icon'
 import { Layout }           from '@ui/layout'
-import { Box }              from '@ui/layout'
 import { Modal }            from '@ui/modal'
 import { Text }             from '@ui/text'
 import { useSession }       from '@stores/session'
@@ -33,32 +32,29 @@ export const ButtonExit: FC = () => {
   return (
     <>
       <Condition match={!isLogout}>
-        <Box fill justifyContent='flex-end'>
-          <Button variant='link' onClick={toggleModalOpen}>
-            <Text fontSize='medium' color='currentColor'>
-              <FormattedMessage id='header.exit' />
-            </Text>
-            <LogoutIcon width={24} height={24} color='currentColor' />
-          </Button>
-          <Modal
-            theme='exit'
-            open={modalOpen}
-            confirmText={formatMessage({ id: 'header.exit' })}
-            onConfirm={handleExit}
-            onCancel={toggleModalOpen}
-            onClose={toggleModalOpen}
-          >
-            <Text fontSize='semiMedium' fontWeight='bold' color='text.secondary'>
-              {fullName}
-            </Text>
-            <Layout flexBasis={4} flexShrink={0} />
-            <Text fontSize='semiMedium' color='text.secondary'>
-              <FormattedMessage id='header.exit_message' />
-            </Text>
-            <Layout flexBasis={40} />
-          </Modal>
-          <Layout flexBasis={24} flexShrink={0} />
-        </Box>
+        <Button variant='link' size='micro' onClick={toggleModalOpen}>
+          <Text fontSize='medium' color='currentColor'>
+            <FormattedMessage id='header.exit' />
+          </Text>
+          <LogoutIcon width={24} height={24} color='currentColor' />
+        </Button>
+        <Modal
+          theme='exit'
+          open={modalOpen}
+          confirmText={formatMessage({ id: 'header.exit' })}
+          onConfirm={handleExit}
+          onCancel={toggleModalOpen}
+          onClose={toggleModalOpen}
+        >
+          <Text fontSize='semiMedium' fontWeight='bold' color='text.secondary'>
+            {fullName}
+          </Text>
+          <Layout flexBasis={4} flexShrink={0} />
+          <Text fontSize='semiMedium' color='text.secondary'>
+            <FormattedMessage id='header.exit_message' />
+          </Text>
+          <Layout flexBasis={40} />
+        </Modal>
       </Condition>
       <Condition match={isLogout}>
         <Layout />

common/client/fragments/header-fragment/src/data/data.interfaces.ts

@@ -0,0 +1,30 @@
+// eslint-disable-next-line no-shadow
+export enum NotificationTypes {
+  ProjectEditOwner = 'ProjectEditOwner',
+  TeamJoinProjectRequest = 'TeamJoinProjectRequest',
+  TeamJoinRequestDecide = 'TeamJoinRequestDecide',
+  TeamLeaveProject = 'TeamLeaveProject',
+  TeamEditOwner = 'TeamEditOwner',
+  TeamInvite = 'TeamInvite',
+  TeamInviteDecide = 'TeamInviteDecide',
+  TeamParticipantLeaveTeam = 'TeamParticipantLeaveTeam',
+  TeamUserJoinRequest = 'TeamUserJoinRequest',
+  TeamUserJoinRequestDecide = 'TeamUserJoinRequestDecide',
+}
+
+export interface QuotedEntity {
+  id?: string
+  avatarUrl?: string
+  quote?: string
+}
+
+export interface Notification {
+  id?: string
+  userId?: string
+  linkedEntityId?: string
+  title?: string
+  body?: string
+  type?: NotificationTypes
+  createdAt?: string
+  quotedEntities: QuotedEntity[]
+}

common/client/fragments/header-fragment/src/data/decide-project-team-join-request/decide-project-team-join-request.mutation.ts

@@ -0,0 +1,12 @@
+import { gql } from '@apollo/client'
+
+export const DECIDE_PROJECT_TEAM_JOIN_REQUEST = gql`
+  mutation ProjectTeamJoinRequestDecide($id: String!, $approve: Boolean!) {
+    projectTeamJoinRequestDecide(input: { projectTeamJoinRequestId: $id, isApproved: $approve }) {
+      id
+      teamId
+      teamName
+      projectId
+    }
+  }
+`

common/client/fragments/header-fragment/src/data/decide-project-team-join-request/index.ts

@@ -0,0 +1 @@
+export * from './use-decide-project-team-join-request.hook'

common/client/fragments/header-fragment/src/data/decide-project-team-join-request/use-decide-project-team-join-request.hook.ts

@@ -0,0 +1,26 @@
+import { useMutation }                      from '@apollo/client'
+
+import { JoinRequest }                      from '@shared/data'
+
+import { DECIDE_PROJECT_TEAM_JOIN_REQUEST } from './decide-project-team-join-request.mutation'
+
+export interface DecideProjectTeamJoinRequestResponse {
+  id?: string
+  teamId?: string
+  teamName?: string
+  projectId?: string
+}
+
+export interface DecideProjectTeamJoinRequestInput {
+  id: JoinRequest['id']
+  approve: boolean
+}
+
+export const useDecideProjectTeamJoinRequest = () => {
+  const [decideProjectTeamJoinRequest, { data, loading }] = useMutation<
+    DecideProjectTeamJoinRequestResponse,
+    DecideProjectTeamJoinRequestInput
+  >(DECIDE_PROJECT_TEAM_JOIN_REQUEST)
+
+  return { decideProjectTeamJoinRequest, data, loading }
+}

common/client/fragments/header-fragment/src/data/decide-team-join-request/decide-team-join-request.mutation.ts

@@ -0,0 +1,13 @@
+import { gql } from '@apollo/client'
+
+export const DECIDE_TEAM_JOIN_REQUEST = gql`
+  mutation TeamUserJoinRequestDecide($id: String!, $approve: Boolean!) {
+    teamUserJoinRequestDecide(input: { userJoinRequestId: $id, isApproved: $approve }) {
+      teamUserJoinRequestPayload {
+        id
+        userId
+        teamId
+      }
+    }
+  }
+`

common/client/fragments/header-fragment/src/data/decide-team-join-request/index.ts

@@ -0,0 +1 @@
+export * from './use-decide-team-join-request.hook'

common/client/fragments/header-fragment/src/data/decide-team-join-request/use-decide-team-join-request.hook.ts

@@ -0,0 +1,25 @@
+import { useMutation }              from '@apollo/client'
+
+import { JoinRequest }              from '@shared/data'
+
+import { DECIDE_TEAM_JOIN_REQUEST } from './decide-team-join-request.mutation'
+
+export interface DecideTeamJoinRequestResponse {
+  teamUserJoinRequestDecide: {
+    teamUserJoinRequestPayload: JoinRequest
+  }
+}
+
+export interface DecideTeamJoinRequestInput {
+  id: JoinRequest['id']
+  approve: boolean
+}
+
+export const useDecideTeamJoinRequest = () => {
+  const [decideTeamJoinRequest, { data, loading }] = useMutation<
+    DecideTeamJoinRequestResponse,
+    DecideTeamJoinRequestInput
+  >(DECIDE_TEAM_JOIN_REQUEST)
+
+  return { decideTeamJoinRequest, data, loading }
+}

common/client/fragments/header-fragment/src/data/decide-user-team-join-invite/decide-user-team-join-invite.mutation.ts

@@ -0,0 +1,13 @@
+import { gql } from '@apollo/client'
+
+export const DECIDE_USER_TEAM_JOIN_INVITE = gql`
+  mutation TeamJoinInvitationDecide($id: String!, $approve: Boolean!) {
+    teamJoinInvitationDecide(input: { joinInvitationId: $id, isApproved: $approve }) {
+      teamJoinInvitePayload {
+        id
+        userId
+        teamId
+      }
+    }
+  }
+`

common/client/fragments/header-fragment/src/data/decide-user-team-join-invite/index.ts

@@ -0,0 +1 @@
+export * from './use-decide-user-team-join-invite.hook'

common/client/fragments/header-fragment/src/data/decide-user-team-join-invite/use-decide-user-team-join-invite.hook.ts

@@ -0,0 +1,25 @@
+import { useMutation }                  from '@apollo/client'
+
+import { JoinRequest }                  from '@shared/data'
+
+import { DECIDE_USER_TEAM_JOIN_INVITE } from './decide-user-team-join-invite.mutation'
+
+export interface DecideUserTeamJoinInviteResponse {
+  id?: string
+  userId?: string
+  teamId?: string
+}
+
+export interface DecideUserTeamJoinInviteInput {
+  id: JoinRequest['id']
+  approve: boolean
+}
+
+export const useDecideUserTeamJoinInvite = () => {
+  const [decideUserTeamJoinInvite, { data, loading }] = useMutation<
+    DecideUserTeamJoinInviteResponse,
+    DecideUserTeamJoinInviteInput
+  >(DECIDE_USER_TEAM_JOIN_INVITE)
+
+  return { decideUserTeamJoinInvite, data, loading }
+}

common/client/fragments/header-fragment/src/data/delete-notification/delete-notification.mutation.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client'
+
+export const DELETE_NOTIFICATION = gql`
+  mutation NotificationDelete($id: String!) {
+    notificationDelete(input: { notificationId: $id }) {
+      id
+    }
+  }
+`

common/client/fragments/header-fragment/src/data/delete-notification/index.ts

@@ -0,0 +1 @@
+export * from './use-delete-notification.hook'

common/client/fragments/header-fragment/src/data/delete-notification/use-delete-notification.hook.ts

@@ -0,0 +1,20 @@
+import { useMutation }         from '@apollo/client'
+
+import { DELETE_NOTIFICATION } from './delete-notification.mutation'
+
+export interface DeleteNotificationResponse {
+  id?: string
+}
+
+export interface DeleteNotificationInput {
+  id?: string
+}
+
+export const useDeleteNotification = () => {
+  const [deleteNotification, { data, loading }] = useMutation<
+    DeleteNotificationResponse,
+    DeleteNotificationInput
+  >(DELETE_NOTIFICATION)
+
+  return { deleteNotification, data, loading }
+}

common/client/fragments/header-fragment/src/data/get-notifications/get-notifications.query.ts

@@ -0,0 +1,17 @@
+import { gql } from '@apollo/client'
+
+export const GET_NOTIFICATIONS = gql`
+  query NotificationGet {
+    notificationsGetListByCurrentUser {
+      notifications {
+        id
+        title
+        body
+        type
+        userId
+        createdAt
+        linkedEntityId
+      }
+    }
+  }
+`

common/client/fragments/header-fragment/src/data/get-notifications/index.ts

@@ -0,0 +1 @@
+export * from './use-get-notifications.hook'

common/client/fragments/header-fragment/src/data/get-notifications/use-get-notifications.hook.ts

@@ -0,0 +1,19 @@
+import { useQuery }          from '@apollo/client'
+
+import { Notification }      from '../data.interfaces'
+import { GET_NOTIFICATIONS } from './get-notifications.query'
+
+export interface GetNotificationsResponse {
+  notificationsGetListByCurrentUser: {
+    notifications?: Notification[]
+  }
+}
+
+export const useGetNotifications = () => {
+  const { data, refetch } = useQuery<GetNotificationsResponse>(GET_NOTIFICATIONS)
+
+  return {
+    notifications: data?.notificationsGetListByCurrentUser?.notifications || [],
+    refetch,
+  }
+}

common/client/fragments/header-fragment/src/data/index.ts

@@ -0,0 +1,6 @@
+export * from './data.interfaces'
+export * from './decide-project-team-join-request'
+export * from './decide-team-join-request'
+export * from './decide-user-team-join-invite'
+export * from './delete-notification'
+export * from './get-notifications'