/
NotificationsLatest.tsx
108 lines (94 loc) · 2.72 KB
/
NotificationsLatest.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import gql from 'graphql-tag';
import { IUser } from 'modules/auth/types';
import Spinner from 'modules/common/components/Spinner';
import {
Alert,
sendDesktopNotification,
withProps
} from 'modules/common/utils';
import React from 'react';
import { compose, graphql } from 'react-apollo';
import strip from 'strip';
import NotificationsLatest from '../components/NotificationsLatest';
import { mutations, queries, subscriptions } from '../graphql';
import {
MarkAsReadMutationResponse,
NotificationsQueryResponse
} from '../types';
type Props = {
update?: () => void;
currentUser: IUser;
};
type FinalProps = {
notificationsQuery: NotificationsQueryResponse;
} & Props &
MarkAsReadMutationResponse;
const subscription = gql(subscriptions.notificationSubscription);
class NotificationsLatestContainer extends React.Component<FinalProps> {
componentWillMount() {
const { notificationsQuery, currentUser } = this.props;
notificationsQuery.subscribeToMore({
document: subscription,
variables: { userId: currentUser ? currentUser._id : null },
updateQuery: (prev, { subscriptionData: { data } }) => {
const { notificationInserted } = data;
const { title, content } = notificationInserted;
sendDesktopNotification({ title, content: strip(content || '') });
notificationsQuery.refetch();
}
});
}
render() {
const {
notificationsQuery,
notificationsMarkAsReadMutation,
update
} = this.props;
if (notificationsQuery.loading) {
return <Spinner objective={true} />;
}
const markAsRead = notificationIds => {
notificationsMarkAsReadMutation({ variables: { _ids: notificationIds } })
.then(() => {
notificationsQuery.refetch();
Alert.success('Notification have been seen');
})
.catch(error => {
Alert.error(error.message);
});
};
const updatedProps = {
...this.props,
markAsRead,
update,
notifications: notificationsQuery.notifications || []
};
return <NotificationsLatest {...updatedProps} />;
}
}
export default withProps<Props>(
compose(
graphql<Props, MarkAsReadMutationResponse, { _ids: string[] }>(
gql(mutations.markAsRead),
{
name: 'notificationsMarkAsReadMutation',
options: {
refetchQueries: () => ['notificationCounts']
}
}
),
graphql<
Props,
NotificationsQueryResponse,
{ limit: number; requireRead: boolean }
>(gql(queries.notifications), {
name: 'notificationsQuery',
options: () => ({
variables: {
limit: 10,
requireRead: false
}
})
})
)(NotificationsLatestContainer)
);