Design a Notification System

1
interface NotificationTemplate {
2
  templateId: string
3
  name: string
4
  category: "transactional" | "marketing" | "system"
5
  channels: {
6
    push?: {
7
      title: string // "Your order {{orderId}} has shipped"
8
      body: string // "Track your package: {{trackingUrl}}"
9
      data?: Record<string, string>
10
    }
11
    email?: {
12
      subject: string
13
      htmlBody: string
14
      textBody: string
15
    }
16
    sms?: {
17
      body: string // Max 160 chars for single segment
18
    }
19
  }
20
  variables: VariableDefinition[]
21
  defaultLocale: string
22
  translations: Record<string, ChannelContent>
23
}

1
interface UserPreferences {
2
  userId: string
3
  globalEnabled: boolean
4
  quietHours?: {
5
    enabled: boolean
6
    start: string // "22:00"
7
    end: string // "07:00"
8
    timezone: string // "America/New_York"
9
  }
10
  channels: {
11
    push: ChannelPreference
12
    email: ChannelPreference
13
    sms: ChannelPreference
14
    inApp: ChannelPreference
15
  }
16
  categories: {
17
    [category: string]: {
18
      enabled: boolean
19
      channels: string[] // Override global channel prefs
20
      frequency?: "immediate" | "daily_digest" | "weekly_digest"
21
    }
22
  }
23
}
24

25
interface ChannelPreference {
26
  enabled: boolean
27
  frequency?: FrequencyLimit // Max 5/hour, 20/day
28
}

1
interface DeviceToken {
2
  userId: string
3
  deviceId: string
4
  platform: "ios" | "android" | "web"
5
  token: string
6
  tokenType: "apns" | "fcm" | "web_push"
7
  appVersion: string
8
  lastSeen: Date
9
  createdAt: Date
10
  updatedAt: Date
11
  status: "active" | "stale" | "invalid"
12
}

1
{
2
  "notificationId": "uuid-client-generated",
3
  "templateId": "order_shipped",
4
  "recipients": [
5
    {
6
      "userId": "user_123",
7
      "variables": {
8
        "orderId": "ORD-456",
9
        "trackingUrl": "https://track.example.com/ORD-456"
10
      }
11
    }
12
  ],
13
  "priority": "high",
14
  "channels": ["push", "email"],
15
  "options": {
16
    "ttl": 86400,
17
    "collapseKey": "order_update_ORD-456",
18
    "scheduledAt": null
19
  }
20
}

1
{
2
  "requestId": "req_abc123",
3
  "notificationId": "uuid-client-generated",
4
  "status": "accepted",
5
  "recipientCount": 1,
6
  "estimatedDelivery": "2024-02-03T10:00:05Z"
7
}

1
{
2
  "notificationId": "bulk_uuid",
3
  "templateId": "weekly_digest",
4
  "recipientQuery": {
5
    "segment": "active_users_7d",
6
    "excludeOptedOut": true
7
  },
8
  "priority": "low",
9
  "channels": ["email"],
10
  "options": {
11
    "spreadOverMinutes": 60,
12
    "respectQuietHours": true
13
  }
14
}

1
{
2
  "requestId": "bulk_req_xyz",
3
  "notificationId": "bulk_uuid",
4
  "status": "queued",
5
  "estimatedRecipients": 150000,
6
  "estimatedCompletion": "2024-02-03T11:00:00Z"
7
}

1
{
2
  "notificationId": "uuid",
3
  "status": "delivered",
4
  "recipients": [
5
    {
6
      "userId": "user_123",
7
      "channels": {
8
        "push": {
9
          "status": "delivered",
10
          "deliveredAt": "2024-02-03T10:00:02Z",
11
          "openedAt": "2024-02-03T10:05:00Z"
12
        },
13
        "email": {
14
          "status": "sent",
15
          "sentAt": "2024-02-03T10:00:03Z",
16
          "openedAt": null
17
        }
18
      }
19
    }
20
  ]
21
}

1
{
2
  "userId": "user_123",
3
  "globalEnabled": true,
4
  "quietHours": {
5
    "enabled": true,
6
    "start": "22:00",
7
    "end": "07:00",
8
    "timezone": "America/New_York"
9
  },
10
  "channels": {
11
    "push": { "enabled": true },
12
    "email": { "enabled": true, "frequency": { "maxPerDay": 10 } },
13
    "sms": { "enabled": false }
14
  },
15
  "categories": {
16
    "marketing": { "enabled": false },
17
    "order_updates": { "enabled": true, "channels": ["push", "email"] },
18
    "security": { "enabled": true, "channels": ["push", "sms", "email"] }
19
  }
20
}

1
{
2
  "categories": {
3
    "marketing": { "enabled": true, "frequency": "weekly_digest" }
4
  }
5
}

1
{
2
  "userId": "user_123",
3
  "deviceId": "device_abc",
4
  "platform": "ios",
5
  "token": "apns_token_xyz",
6
  "appVersion": "3.2.1"
7
}

1
{
2
  "deviceId": "device_abc",
3
  "status": "active",
4
  "registeredAt": "2024-02-03T10:00:00Z"
5
}

1
{
2
  "notifications": [
3
    {
4
      "notificationId": "uuid_1",
5
      "templateId": "order_shipped",
6
      "title": "Your order has shipped",
7
      "body": "Track your package...",
8
      "channel": "push",
9
      "status": "read",
10
      "createdAt": "2024-02-03T10:00:00Z",
11
      "readAt": "2024-02-03T10:05:00Z"
12
    }
13
  ],
14
  "nextCursor": "cursor_abc",
15
  "hasMore": true
16
}

1
CREATE TABLE notifications (
2
    user_id UUID,
3
    created_at TIMESTAMP,
4
    notification_id UUID,
5
    template_id TEXT,
6
    priority TEXT,
7
    content FROZEN<notification_content>,
8
    channels SET<TEXT>,
9
    status TEXT,
10
    delivery_attempts INT,
11
    PRIMARY KEY ((user_id), created_at, notification_id)
12
) WITH CLUSTERING ORDER BY (created_at DESC, notification_id ASC)
13
  AND default_time_to_live = 7776000; -- 90 days
14

15
CREATE TYPE notification_content (
16
    title TEXT,
17
    body TEXT,
18
    data MAP<TEXT, TEXT>,
19
    image_url TEXT
20
);
21

22
-- For notification lookup by ID
23
CREATE TABLE notifications_by_id (
24
    notification_id UUID PRIMARY KEY,
25
    user_id UUID,
26
    created_at TIMESTAMP,
27
    template_id TEXT,
28
    priority TEXT,
29
    content FROZEN<notification_content>,
30
    channels SET<TEXT>,
31
    status TEXT
32
);

1
CREATE TABLE delivery_status (
2
    notification_id UUID,
3
    channel TEXT,
4
    user_id UUID,
5
    device_id TEXT,
6
    status TEXT,        -- queued, sent, delivered, failed, opened, clicked
7
    provider_id TEXT,   -- APNs message ID, SES message ID, etc.
8
    error_code TEXT,
9
    error_message TEXT,
10
    timestamp TIMESTAMP,
11
    PRIMARY KEY ((notification_id), channel, device_id)
12
);
13

14
-- Index for retry processing
15
CREATE TABLE failed_deliveries (
16
    retry_bucket INT,   -- Hour bucket for time-based retry
17
    notification_id UUID,
18
    channel TEXT,
19
    user_id UUID,
20
    attempt_count INT,
21
    last_error TEXT,
22
    next_retry_at TIMESTAMP,
23
    PRIMARY KEY ((retry_bucket), next_retry_at, notification_id)
24
) WITH CLUSTERING ORDER BY (next_retry_at ASC);

1
CREATE TABLE user_preferences (
2
    user_id UUID PRIMARY KEY,
3
    global_enabled BOOLEAN DEFAULT true,
4
    quiet_hours JSONB,  -- {"enabled":true,"start":"22:00","end":"07:00","tz":"America/New_York"}
5
    channel_prefs JSONB,
6
    category_prefs JSONB,
7
    created_at TIMESTAMPTZ DEFAULT NOW(),
8
    updated_at TIMESTAMPTZ DEFAULT NOW()
9
);
10

11
-- Audit history for compliance
12
CREATE TABLE preference_history (
13
    id BIGSERIAL PRIMARY KEY,
14
    user_id UUID NOT NULL,
15
    changed_at TIMESTAMPTZ DEFAULT NOW(),
16
    change_type TEXT,  -- 'opt_in', 'opt_out', 'update'
17
    old_value JSONB,
18
    new_value JSONB,
19
    source TEXT        -- 'user', 'system', 'compliance'
20
);
21

22
CREATE INDEX idx_pref_history_user ON preference_history(user_id, changed_at DESC);

1
CREATE TABLE device_tokens (
2
    device_id TEXT PRIMARY KEY,
3
    user_id UUID NOT NULL,
4
    platform TEXT NOT NULL,  -- ios, android, web
5
    token TEXT NOT NULL,
6
    token_type TEXT NOT NULL, -- apns, fcm, web_push
7
    app_version TEXT,
8
    last_seen TIMESTAMPTZ,
9
    status TEXT DEFAULT 'active',  -- active, stale, invalid
10
    created_at TIMESTAMPTZ DEFAULT NOW(),
11
    updated_at TIMESTAMPTZ DEFAULT NOW()
12
);
13

14
CREATE INDEX idx_tokens_user ON device_tokens(user_id);
15
CREATE INDEX idx_tokens_status ON device_tokens(status) WHERE status = 'active';

1
# User's active tokens (set)
2
SADD user:tokens:{user_id} {device_id_1} {device_id_2}
3

4
# Token details (hash)
5
HSET token:{device_id}
6
    user_id "user_123"
7
    platform "ios"
8
    token "apns_xyz"
9
    token_type "apns"
10
    status "active"
11

12
# Token lookup (string with TTL for stale detection)
13
SETEX token:active:{device_id} 2592000 "1"  -- 30 days

1
CREATE TABLE notification_templates (
2
    template_id TEXT PRIMARY KEY,
3
    name TEXT NOT NULL,
4
    category TEXT NOT NULL,
5
    channels JSONB NOT NULL,
6
    variables JSONB,
7
    default_locale TEXT DEFAULT 'en',
8
    is_active BOOLEAN DEFAULT true,
9
    created_at TIMESTAMPTZ DEFAULT NOW(),
10
    updated_at TIMESTAMPTZ DEFAULT NOW(),
11
    version INT DEFAULT 1
12
);
13

14
CREATE TABLE template_translations (
15
    template_id TEXT REFERENCES notification_templates(template_id),
16
    locale TEXT,
17
    channels JSONB NOT NULL,
18
    PRIMARY KEY (template_id, locale)
19
);
20

21
CREATE TABLE template_versions (
22
    template_id TEXT,
23
    version INT,
24
    channels JSONB NOT NULL,
25
    created_at TIMESTAMPTZ DEFAULT NOW(),
26
    created_by TEXT,
27
    PRIMARY KEY (template_id, version)
28
);

10 collapsed lines
1
class DeduplicationService {
2
  private readonly redis: RedisCluster
3
  private readonly DEDUP_TTL = 172800 // 48 hours in seconds
4

5
  async isDuplicate(userId: string, notificationId: string): Promise<boolean> {
6
    const key = `dedup:${userId}:${notificationId}`
7

8
    // SETNX returns 1 if key was set (not duplicate), 0 if exists (duplicate)
9
    const result = await this.redis.set(key, "1", {
10
      NX: true,
11
      EX: this.DEDUP_TTL,
12
    })
13

14
    return result === null // null means key existed (duplicate)
15
  }
16

17
  // Bloom filter for fast "definitely not duplicate" check
18
  async checkBloomFilter(userId: string, notificationId: string): Promise<boolean> {
19
    const key = `bloom:dedup:${userId}`
20
    return await this.redis.bf.exists(key, notificationId)
21
  }
22
}

12 collapsed lines
1
interface RateLimitConfig {
2
  channel: string
3
  maxPerHour: number
4
  maxPerDay: number
5
}
6

7
class RateLimiter {
8
  private readonly redis: RedisCluster
9

10
  async checkAndConsume(
11
    userId: string,
12
    channel: string,
13
    config: RateLimitConfig,
14
  ): Promise<{ allowed: boolean; retryAfter?: number }> {
15
    const hourKey = `ratelimit:${userId}:${channel}:hour:${this.getCurrentHour()}`
16
    const dayKey = `ratelimit:${userId}:${channel}:day:${this.getCurrentDay()}`
17

18
    // Lua script for atomic check-and-increment
19
    const result = await this.redis.eval(
20
      `
21
      local hourCount = redis.call('INCR', KEYS[1])
22
      if hourCount == 1 then
23
        redis.call('EXPIRE', KEYS[1], 3600)
24
      end
25

26
      local dayCount = redis.call('INCR', KEYS[2])
27
      if dayCount == 1 then
28
        redis.call('EXPIRE', KEYS[2], 86400)
29
      end
30

31
      if hourCount > tonumber(ARGV[1]) then
32
        redis.call('DECR', KEYS[1])
33
        return {0, 3600 - redis.call('TTL', KEYS[1])}
34
      end
35

36
      if dayCount > tonumber(ARGV[2]) then
37
        redis.call('DECR', KEYS[1])
38
        redis.call('DECR', KEYS[2])
39
        return {0, 86400 - redis.call('TTL', KEYS[2])}
40
      end
41

42
      return {1, 0}
43
    `,
44
      [hourKey, dayKey],
45
      [config.maxPerHour, config.maxPerDay],
46
    )
47

48
    return {
49
      allowed: result[0] === 1,
50
      retryAfter: result[1] > 0 ? result[1] : undefined,
51
    }
52
  }
53
}

15 collapsed lines
1
interface AggregationRule {
2
  category: string
3
  collapseKey: string // Template for grouping, e.g., "likes_{postId}"
4
  windowSeconds: number // Aggregation window
5
  minCount: number // Minimum to trigger aggregation
6
  maxCount: number // Maximum before force-flush
7
  digestTemplate: string // "{{count}} people liked your post"
8
}
9

10
class NotificationAggregator {
11
  private readonly redis: RedisCluster
12

13
  async shouldAggregate(
14
    userId: string,
15
    notification: Notification,
16
    rule: AggregationRule,
17
  ): Promise<{ aggregate: boolean; pending: Notification[] }> {
18
    const collapseKey = this.renderCollapseKey(rule.collapseKey, notification)
19
    const bufferKey = `agg:${userId}:${collapseKey}`
20

21
    // Add to buffer
22
    await this.redis.rpush(bufferKey, JSON.stringify(notification))
23
    await this.redis.expire(bufferKey, rule.windowSeconds)
24

25
    const count = await this.redis.llen(bufferKey)
26

27
    if (count >= rule.maxCount) {
28
      // Force flush
29
      const pending = await this.flushBuffer(bufferKey)
30
      return { aggregate: true, pending }
31
    }
32

33
    if (count >= rule.minCount) {
34
      // Schedule aggregated delivery at window end
35
      await this.scheduleFlush(userId, collapseKey, rule.windowSeconds)
36
    }
37

38
    return { aggregate: false, pending: [] }
39
  }
40

41
  async createDigest(notifications: Notification[], rule: AggregationRule): Promise<Notification> {
42
    const count = notifications.length
43
    const actors = [...new Set(notifications.map((n) => n.actorId))].slice(0, 3)
44

45
    return {
46
      ...notifications[0],
47
      content: {
48
        title: this.renderTemplate(rule.digestTemplate, { count, actors }),
49
        body: `${actors[0]} and ${count - 1} others`,
50
      },
51
      metadata: {
52
        aggregatedCount: count,
53
        originalIds: notifications.map((n) => n.notificationId),
54
      },
55
    }
56
  }
57
}

12 collapsed lines
1
enum NotificationPriority {
2
  CRITICAL = "critical", // Security alerts, transaction confirmations
3
  HIGH = "high", // Direct messages, mentions
4
  NORMAL = "normal", // Social notifications, updates
5
  LOW = "low", // Marketing, digests
6
}
7

8
class PriorityRouter {
9
  private readonly queues: Map<NotificationPriority, KafkaProducer>
10

11
  async route(notification: EnrichedNotification): Promise<void> {
12
    const priority = this.determinePriority(notification)
13
    const queue = this.queues.get(priority)
14

15
    // Partition by user_id for rate limiting co-location
16
    await queue.send({
17
      topic: `notifications.${priority}`,
18
      messages: [
19
        {
20
          key: notification.userId,
21
          value: JSON.stringify(notification),
22
          headers: {
23
            "notification-id": notification.notificationId,
24
            "created-at": Date.now().toString(),
25
          },
26
        },
27
      ],
28
    })
29
  }
30

31
  private determinePriority(notification: EnrichedNotification): NotificationPriority {
32
    // Critical: security, transactions, time-sensitive
33
    if (notification.category === "security") return NotificationPriority.CRITICAL
34
    if (notification.category === "transaction") return NotificationPriority.CRITICAL
35

36
    // High: direct user interaction
37
    if (notification.category === "message") return NotificationPriority.HIGH
38
    if (notification.category === "mention") return NotificationPriority.HIGH
39

40
    // Low: bulk, marketing
41
    if (notification.category === "marketing") return NotificationPriority.LOW
42
    if (notification.category === "digest") return NotificationPriority.LOW
43

44
    return NotificationPriority.NORMAL
45
  }
46
}

20 collapsed lines
1
interface PushDeliveryResult {
2
  success: boolean
3
  messageId?: string
4
  errorCode?: string
5
  shouldRetry: boolean
6
  invalidToken: boolean
7
}
8

9
class PushProcessor {
10
  private readonly fcm: FirebaseMessaging
11
  private readonly apns: ApnsClient
12
  private readonly deviceRegistry: DeviceRegistry
13

14
  async deliver(notification: Notification, device: DeviceToken): Promise<PushDeliveryResult> {
15
    try {
16
      if (device.tokenType === "fcm") {
17
        return await this.deliverFcm(notification, device)
18
      } else if (device.tokenType === "apns") {
19
        return await this.deliverApns(notification, device)
20
      }
21
    } catch (error) {
22
      return this.handleError(error, device)
23
    }
24
  }
25

26
  private async deliverFcm(notification: Notification, device: DeviceToken): Promise<PushDeliveryResult> {
27
    const message = {
28
      token: device.token,
29
      notification: {
30
        title: notification.content.title,
31
        body: notification.content.body,
32
      },
33
      data: notification.content.data,
34
      android: {
35
        priority: notification.priority === "critical" ? "high" : "normal",
36
        ttl: notification.ttl * 1000,
37
        collapseKey: notification.collapseKey,
38
      },
39
    }
40

41
    const response = await this.fcm.send(message)
42
    return { success: true, messageId: response, shouldRetry: false, invalidToken: false }
43
  }
44

45
  private handleError(error: any, device: DeviceToken): PushDeliveryResult {
46
    // FCM error codes per documentation
47
    const errorCode = error.code
48

49
    // Invalid token - remove immediately
50
    if (["messaging/invalid-registration-token", "messaging/registration-token-not-registered"].includes(errorCode)) {
51
      this.deviceRegistry.markInvalid(device.deviceId)
52
      return { success: false, errorCode, shouldRetry: false, invalidToken: true }
53
    }
54

55
    // Rate limited - retry with backoff
56
    if (errorCode === "messaging/too-many-requests") {
57
      return { success: false, errorCode, shouldRetry: true, invalidToken: false }
58
    }
59

60
    // Server error - retry with backoff
61
    if (errorCode === "messaging/internal-error") {
62
      return { success: false, errorCode, shouldRetry: true, invalidToken: false }
63
    }
64

65
    return { success: false, errorCode, shouldRetry: false, invalidToken: false }
66
  }
67
}

15 collapsed lines
1
interface RetryConfig {
2
  maxAttempts: number
3
  baseDelayMs: number
4
  maxDelayMs: number
5
  jitterFactor: number
6
}
7

8
class RetryService {
9
  private readonly defaultConfig: RetryConfig = {
10
    maxAttempts: 5,
11
    baseDelayMs: 1000,
12
    maxDelayMs: 300000, // 5 minutes
13
    jitterFactor: 0.2,
14
  }
15

16
  async scheduleRetry(
17
    notification: Notification,
18
    channel: string,
19
    attemptCount: number,
20
    config: RetryConfig = this.defaultConfig,
21
  ): Promise<void> {
22
    if (attemptCount >= config.maxAttempts) {
23
      await this.moveToDlq(notification, channel)
24
      return
25
    }
26

27
    const delay = this.calculateDelay(attemptCount, config)
28
    const retryBucket = Math.floor((Date.now() + delay) / 3600000) // Hour bucket
29

30
    await this.cassandra.execute(
31
      `
32
      INSERT INTO failed_deliveries (
33
        retry_bucket, notification_id, channel, user_id,
34
        attempt_count, last_error, next_retry_at
35
      ) VALUES (?, ?, ?, ?, ?, ?, ?)
36
    `,
37
      [
38
        retryBucket,
39
        notification.notificationId,
40
        channel,
41
        notification.userId,
42
        attemptCount + 1,
43
        notification.lastError,
44
        new Date(Date.now() + delay),
45
      ],
46
    )
47
  }
48

49
  private calculateDelay(attempt: number, config: RetryConfig): number {
50
    // Exponential backoff with jitter
51
    const exponentialDelay = config.baseDelayMs * Math.pow(2, attempt)
52
    const cappedDelay = Math.min(exponentialDelay, config.maxDelayMs)
53
    const jitter = cappedDelay * config.jitterFactor * Math.random()
54

55
    return Math.floor(cappedDelay + jitter)
56
  }
57

58
  private async moveToDlq(notification: Notification, channel: string): Promise<void> {
59
    await this.kafka.send({
60
      topic: "notifications.dlq",
61
      messages: [
62
        {
63
          key: notification.userId,
64
          value: JSON.stringify({
65
            notification,
66
            channel,
67
            reason: "max_retries_exceeded",
68
            timestamp: Date.now(),
69
          }),
70
        },
71
      ],
72
    })
73

74
    // Alert for monitoring
75
    this.metrics.increment("notifications.dlq.count", {
76
      channel,
77
      category: notification.category,
78
    })
79
  }
80
}

10 collapsed lines
1
class QuietHoursHandler {
2
  async shouldDefer(
3
    userId: string,
4
    notification: Notification,
5
    preferences: UserPreferences,
6
  ): Promise<{ defer: boolean; deliverAt?: Date }> {
7
    // Critical notifications bypass quiet hours
8
    if (notification.priority === "critical") {
9
      return { defer: false }
10
    }
11

12
    if (!preferences.quietHours?.enabled) {
13
      return { defer: false }
14
    }
15

16
    const userNow = this.getUserLocalTime(preferences.quietHours.timezone)
17
    const isInQuietHours = this.isTimeInRange(userNow, preferences.quietHours.start, preferences.quietHours.end)
18

19
    if (!isInQuietHours) {
20
      return { defer: false }
21
    }
22

23
    // Calculate when quiet hours end
24
    const deliverAt = this.getQuietHoursEnd(preferences.quietHours.end, preferences.quietHours.timezone)
25

26
    return { defer: true, deliverAt }
27
  }
28

29
  private isTimeInRange(current: Date, start: string, end: string): boolean {
30
    const currentMinutes = current.getHours() * 60 + current.getMinutes()
31
    const [startHour, startMin] = start.split(":").map(Number)
32
    const [endHour, endMin] = end.split(":").map(Number)
33

34
    const startMinutes = startHour * 60 + startMin
35
    const endMinutes = endHour * 60 + endMin
36

37
    // Handle overnight ranges (e.g., 22:00 - 07:00)
38
    if (startMinutes > endMinutes) {
39
      return currentMinutes >= startMinutes || currentMinutes < endMinutes
40
    }
41

42
    return currentMinutes >= startMinutes && currentMinutes < endMinutes
43
  }
44
}

15 collapsed lines
1
class NotificationClient {
2
  private ws: WebSocket | null = null
3
  private reconnectAttempt = 0
4
  private readonly MAX_RECONNECT_DELAY = 30000
5

6
  connect(authToken: string): void {
7
    this.ws = new WebSocket(`wss://notifications.example.com/ws?token=${authToken}`)
8

9
    this.ws.onopen = () => {
10
      this.reconnectAttempt = 0
11
      this.syncMissedNotifications()
12
    }
13

14
    this.ws.onmessage = (event) => {
15
      const notification = JSON.parse(event.data)
16
      this.handleNotification(notification)
17
    }
18

19
    this.ws.onclose = () => {
20
      this.scheduleReconnect()
21
    }
22
  }
23

24
  private handleNotification(notification: Notification): void {
25
    // Update badge count
26
    this.incrementBadge()
27

28
    // Add to notification list
29
    this.store.dispatch(addNotification(notification))
30

31
    // Show toast if appropriate
32
    if (notification.priority === "high" && !document.hasFocus()) {
33
      this.showToast(notification)
34
    }
35

36
    // Request browser notification permission if needed
37
    if (notification.showBrowserNotification) {
38
      this.showBrowserNotification(notification)
39
    }
40
  }
41

42
  private async syncMissedNotifications(): Promise<void> {
43
    const lastSeen = localStorage.getItem("lastNotificationTimestamp")
44

45
    const response = await fetch(`/api/v1/notifications?since=${lastSeen}&limit=50`)
46
    const { notifications } = await response.json()
47

48
    notifications.forEach((n) => this.handleNotification(n))
49
  }
50
}

12 collapsed lines
1
interface NotificationListProps {
2
  userId: string
3
  pageSize: number
4
}
5

6
const NotificationList: React.FC<NotificationListProps> = ({ userId, pageSize }) => {
7
  const {
8
    data,
9
    fetchNextPage,
10
    hasNextPage,
11
    isFetchingNextPage
12
  } = useInfiniteQuery({
13
    queryKey: ['notifications', userId],
14
    queryFn: ({ pageParam }) =>
15
      fetchNotifications(userId, { cursor: pageParam, limit: pageSize }),
16
    getNextPageParam: (lastPage) => lastPage.nextCursor
17
  })
18

19
  const notifications = data?.pages.flatMap(p => p.notifications) ?? []
20

21
  return (
22
    <VirtualList
23
      items={notifications}
24
      estimatedItemSize={80}
25
      onEndReached={() => hasNextPage && fetchNextPage()}
26
      renderItem={(notification) => (
27
        <NotificationItem
28
          key={notification.id}
29
          notification={notification}
30
          onRead={markAsRead}
31
        />
32
      )}
33
    />
34
  )
35
}