@stack-spot/portal-components 2.26.0 → 2.27.0

package/src/context/notification/NotificationController.ts

@@ -1,104 +1,104 @@
-import { pull } from 'lodash'
-import { LazyNotificationList } from './LazyNotificationList'
-import { LoadNotificationsFilters, NotificationConfig, UnreadNotificationListener } from './types'
-
-const DEFAULT_POLLING_MS = 120000
-
-export class NotificationController {
-  private lazyLists = new Map<number, LazyNotificationList>()
-  readonly config: NotificationConfig
-  private readStatusMap = new Map<string, boolean>()
-  private nextId = 1
-  private unreadNotification = false
-  private lastUnreadVerification: Date | undefined
-  private pollingTimeoutId: number | undefined
-  private unreadNotificationListeners: UnreadNotificationListener[] = []
-
-  constructor(config: NotificationConfig) {
-    this.config = config
-    config.pollingMS ??= DEFAULT_POLLING_MS
-    config.notificationsPath ??= '/notifications'
-  }
-
-  private hasUnreadNotificationInMemory() {
-    for (const [, read] of this.readStatusMap) {
-      if (!read.valueOf()) return true
-    }
-    return false
-  }
-
-  private setUnreadNotification(value: boolean) {
-    this.unreadNotification = value
-    if (!value) {
-      this.pollingTimeoutId = window.setTimeout(() => this.checkUnread(), this.config.pollingMS)
-    }
-    this.unreadNotificationListeners.forEach(l => l(value))
-  }
-
-  createLazyNotificationList(filters?: LoadNotificationsFilters): LazyNotificationList {
-    const list = new LazyNotificationList({
-      id: this.nextId++,
-      filters,
-      load: async (options) => {
-        const result = await this.config.load(options)
-        result.items.forEach((i) => {
-          this.readStatusMap.set(i.id, i.committed)
-          // updating the unread indicator, since it might be stale
-          if (!i.committed) this.setUnreadNotification(true)
-        })
-        this.lazyLists.forEach(l => l !== list && list.update(this.readStatusMap))
-        return result
-      },
-    })
-    this.lazyLists.set(list.id, list)
-    return list
-  }
-
-  destroyLazyNotificationList(id: number) {
-    this.lazyLists.get(id)?.mute()
-    this.lazyLists.delete(id)
-  }
-
-  async checkUnread() {
-    window.clearInterval(this.pollingTimeoutId)
-    this.setUnreadNotification(await this.config.checkForUnreadNotificationsSince(this.lastUnreadVerification))
-    this.lastUnreadVerification = new Date()
-  }
-
-  async markAsCommitted(notificationId: string) {
-    if (this.readStatusMap.get(notificationId)) return
-    this.readStatusMap.set(notificationId, true)
-    this.lazyLists.forEach(l => l.update(this.readStatusMap))
-    try {
-      await this.config.markAsCommitted(notificationId)
-      // update the notification indicator: this is an inconsistency, we should actually ask the API, but since it's an expensive
-      // operation in the backend, we won't, instead, we'll only check the notifications we have loaded in memory.
-      if (!this.hasUnreadNotificationInMemory()) this.setUnreadNotification(false)
-    } catch {
-      this.readStatusMap.set(notificationId, false)
-      this.lazyLists.forEach(l => l.update(this.readStatusMap))
-    }
-  }
-
-  onUnreadNotificationChange(listener: UnreadNotificationListener) {
-    this.unreadNotificationListeners.push(listener)
-    return () => {
-      pull(this.unreadNotificationListeners, listener)
-    }
-  }
-
-  hasUnreadNotification() {
-    return this.unreadNotification
-  }
-
-  reset() {
-    this.lazyLists.clear()
-    this.readStatusMap.clear()
-    this.lastUnreadVerification = undefined
-    this.unreadNotification = false
-  }
-
-  mute() {
-    this.unreadNotificationListeners = []
-  }
-}
+import { pull } from 'lodash'
+import { LazyNotificationList } from './LazyNotificationList'
+import { LoadNotificationsFilters, NotificationConfig, UnreadNotificationListener } from './types'
+
+const DEFAULT_POLLING_MS = 120000
+
+export class NotificationController {
+  private lazyLists = new Map<number, LazyNotificationList>()
+  readonly config: NotificationConfig
+  private readStatusMap = new Map<string, boolean>()
+  private nextId = 1
+  private unreadNotification = false
+  private lastUnreadVerification: Date | undefined
+  private pollingTimeoutId: number | undefined
+  private unreadNotificationListeners: UnreadNotificationListener[] = []
+
+  constructor(config: NotificationConfig) {
+    this.config = config
+    config.pollingMS ??= DEFAULT_POLLING_MS
+    config.notificationsPath ??= '/notifications'
+  }
+
+  private hasUnreadNotificationInMemory() {
+    for (const [, read] of this.readStatusMap) {
+      if (!read.valueOf()) return true
+    }
+    return false
+  }
+
+  private setUnreadNotification(value: boolean) {
+    this.unreadNotification = value
+    if (!value) {
+      this.pollingTimeoutId = window.setTimeout(() => this.checkUnread(), this.config.pollingMS)
+    }
+    this.unreadNotificationListeners.forEach(l => l(value))
+  }
+
+  createLazyNotificationList(filters?: LoadNotificationsFilters): LazyNotificationList {
+    const list = new LazyNotificationList({
+      id: this.nextId++,
+      filters,
+      load: async (options) => {
+        const result = await this.config.load(options)
+        result.items.forEach((i) => {
+          this.readStatusMap.set(i.id, i.committed)
+          // updating the unread indicator, since it might be stale
+          if (!i.committed) this.setUnreadNotification(true)
+        })
+        this.lazyLists.forEach(l => l !== list && list.update(this.readStatusMap))
+        return result
+      },
+    })
+    this.lazyLists.set(list.id, list)
+    return list
+  }
+
+  destroyLazyNotificationList(id: number) {
+    this.lazyLists.get(id)?.mute()
+    this.lazyLists.delete(id)
+  }
+
+  async checkUnread() {
+    window.clearInterval(this.pollingTimeoutId)
+    this.setUnreadNotification(await this.config.checkForUnreadNotificationsSince(this.lastUnreadVerification))
+    this.lastUnreadVerification = new Date()
+  }
+
+  async markAsCommitted(notificationId: string) {
+    if (this.readStatusMap.get(notificationId)) return
+    this.readStatusMap.set(notificationId, true)
+    this.lazyLists.forEach(l => l.update(this.readStatusMap))
+    try {
+      await this.config.markAsCommitted(notificationId)
+      // update the notification indicator: this is an inconsistency, we should actually ask the API, but since it's an expensive
+      // operation in the backend, we won't, instead, we'll only check the notifications we have loaded in memory.
+      if (!this.hasUnreadNotificationInMemory()) this.setUnreadNotification(false)
+    } catch {
+      this.readStatusMap.set(notificationId, false)
+      this.lazyLists.forEach(l => l.update(this.readStatusMap))
+    }
+  }
+
+  onUnreadNotificationChange(listener: UnreadNotificationListener) {
+    this.unreadNotificationListeners.push(listener)
+    return () => {
+      pull(this.unreadNotificationListeners, listener)
+    }
+  }
+
+  hasUnreadNotification() {
+    return this.unreadNotification
+  }
+
+  reset() {
+    this.lazyLists.clear()
+    this.readStatusMap.clear()
+    this.lastUnreadVerification = undefined
+    this.unreadNotification = false
+  }
+
+  mute() {
+    this.unreadNotificationListeners = []
+  }
+}

package/src/context/notification/context.tsx

@@ -1,23 +1,23 @@
-import { createContext, useContext } from 'react'
-import { NotificationController } from './NotificationController'
-
-export interface Props {
-  children: React.ReactNode,
-  controller: NotificationController,
-}
-
-const context = createContext<NotificationController | undefined>(undefined)
-
-export const NotificationProvider = ({ children, controller }: Props) => (
-  <context.Provider value={controller}>{children}</context.Provider>
-)
-
-export function useNotificationController() {
-  const controller = useContext(context)
-  if (!controller) {
-    throw new Error(
-      'A NotificationController was requested, but no NotificationController is available in the React Context. Please, be sure to wrap your component in a NotificationProvider.',
-    )
-  }
-  return controller
-}
+import { createContext, useContext } from 'react'
+import { NotificationController } from './NotificationController'
+
+export interface Props {
+  children: React.ReactNode,
+  controller: NotificationController,
+}
+
+const context = createContext<NotificationController | undefined>(undefined)
+
+export const NotificationProvider = ({ children, controller }: Props) => (
+  <context.Provider value={controller}>{children}</context.Provider>
+)
+
+export function useNotificationController() {
+  const controller = useContext(context)
+  if (!controller) {
+    throw new Error(
+      'A NotificationController was requested, but no NotificationController is available in the React Context. Please, be sure to wrap your component in a NotificationProvider.',
+    )
+  }
+  return controller
+}

package/src/context/notification/hooks.ts

@@ -1,98 +1,98 @@
-import { useLanguage } from '@stack-spot/portal-translate'
-import { useCallback, useRef, useState } from 'react'
-import { useManualRender } from '../../hooks/manual-render'
-import { useEffectOnce } from '../../hooks/use-effect-once'
-import { GetTenantNotificationsResponse } from '../../notifications'
-import { useNotificationController } from './context'
-import { LazyNotificationList } from './LazyNotificationList'
-import { LoadNotificationsFilters } from './types'
-
-export function useNotificationList(initialFilters: LoadNotificationsFilters = {}) {
-  const { repaint } = useManualRender()
-  const [status, setStatus] = useState<'startup' | 'idle' | 'error' | 'loading'>('startup')
-  const error = useRef<any>()
-  const controller = useNotificationController()
-  const [filters, setFilters] = useState(initialFilters)
-  const list = useRef<LazyNotificationList | undefined>()
-
-  useEffectOnce(() => {
-    async function start() {
-      list.current = controller.createLazyNotificationList(initialFilters)
-      list.current.subscribe(repaint)
-      try {
-        await list.current?.loadMore()
-        setStatus('idle')
-      } catch (e) {
-        setStatus('error')
-        error.current = e
-      }
-    }
-    start()
-    return () => {
-      if (list.current) controller.destroyLazyNotificationList(list.current.id)
-    }
-  })
-
-  const applyFilters = useCallback(async (newFilters: LoadNotificationsFilters) => {
-    if (!list.current) return
-    setStatus('loading')
-    // since we're inside a useCallback, we don't have direct access to the current value of "filters". The only way we can access this
-    // value is from the function "setFilters". But "setFilters" run async. For this reason, we wait the function to run and retrieve the
-    // current value before continuing, hence the use of the await and promise below.
-    const { next, prev } = await new Promise<{ next: LoadNotificationsFilters, prev: LoadNotificationsFilters }>((resolve) => {
-      setFilters((filters) => {
-        const prev = filters
-        const next = { ...filters, ...newFilters }
-        resolve({ prev, next })
-        return next
-      })
-    })
-    try {
-      await list.current.applyFilters(next)
-      setStatus('idle')
-      error.current = undefined
-    } catch (e) {
-      setFilters(prev)
-      if (error.current) {
-        error.current = e
-        setStatus('error')
-      } else {
-        setStatus('idle')
-      }
-    }
-  }, [])
-
-  return {
-    status,
-    items: list.current?.items ?? [],
-    hasMore: list.current?.hasMore() ?? false,
-    loadMore: () => list.current?.loadMore(),
-    refresh: () => applyFilters(filters),
-    applyFilters,
-    filters,
-    error: error.current,
-  }
-}
-
-export function useGetNotificationTitleAndDescription({ content }: GetTenantNotificationsResponse) {
-  const language = useLanguage()
-  const { title, description } = content?.[language] || content?.en || {}
-
-  return {
-    title,
-    description,
-  }
-}
-
-export function useUnreadNotifications() {
-  const [hasUnreadNotifications, setUnreadNotifications] = useState(false)
-  const controller = useNotificationController()
-
-  useEffectOnce(() => {
-    const unsubscribe = controller.onUnreadNotificationChange(setUnreadNotifications)
-    controller.checkUnread()
-    return unsubscribe
-  })
-
-  return hasUnreadNotifications
-}
+import { useLanguage } from '@stack-spot/portal-translate'
+import { useCallback, useRef, useState } from 'react'
+import { useManualRender } from '../../hooks/manual-render'
+import { useEffectOnce } from '../../hooks/use-effect-once'
+import { GetTenantNotificationsResponse } from '../../notifications'
+import { useNotificationController } from './context'
+import { LazyNotificationList } from './LazyNotificationList'
+import { LoadNotificationsFilters } from './types'
+
+export function useNotificationList(initialFilters: LoadNotificationsFilters = {}) {
+  const { repaint } = useManualRender()
+  const [status, setStatus] = useState<'startup' | 'idle' | 'error' | 'loading'>('startup')
+  const error = useRef<any>()
+  const controller = useNotificationController()
+  const [filters, setFilters] = useState(initialFilters)
+  const list = useRef<LazyNotificationList | undefined>()
+
+  useEffectOnce(() => {
+    async function start() {
+      list.current = controller.createLazyNotificationList(initialFilters)
+      list.current.subscribe(repaint)
+      try {
+        await list.current?.loadMore()
+        setStatus('idle')
+      } catch (e) {
+        setStatus('error')
+        error.current = e
+      }
+    }
+    start()
+    return () => {
+      if (list.current) controller.destroyLazyNotificationList(list.current.id)
+    }
+  })
+
+  const applyFilters = useCallback(async (newFilters: LoadNotificationsFilters) => {
+    if (!list.current) return
+    setStatus('loading')
+    // since we're inside a useCallback, we don't have direct access to the current value of "filters". The only way we can access this
+    // value is from the function "setFilters". But "setFilters" run async. For this reason, we wait the function to run and retrieve the
+    // current value before continuing, hence the use of the await and promise below.
+    const { next, prev } = await new Promise<{ next: LoadNotificationsFilters, prev: LoadNotificationsFilters }>((resolve) => {
+      setFilters((filters) => {
+        const prev = filters
+        const next = { ...filters, ...newFilters }
+        resolve({ prev, next })
+        return next
+      })
+    })
+    try {
+      await list.current.applyFilters(next)
+      setStatus('idle')
+      error.current = undefined
+    } catch (e) {
+      setFilters(prev)
+      if (error.current) {
+        error.current = e
+        setStatus('error')
+      } else {
+        setStatus('idle')
+      }
+    }
+  }, [])
+
+  return {
+    status,
+    items: list.current?.items ?? [],
+    hasMore: list.current?.hasMore() ?? false,
+    loadMore: () => list.current?.loadMore(),
+    refresh: () => applyFilters(filters),
+    applyFilters,
+    filters,
+    error: error.current,
+  }
+}
+
+export function useGetNotificationTitleAndDescription({ content }: GetTenantNotificationsResponse) {
+  const language = useLanguage()
+  const { title, description } = content?.[language] || content?.en || {}
+
+  return {
+    title,
+    description,
+  }
+}
+
+export function useUnreadNotifications() {
+  const [hasUnreadNotifications, setUnreadNotifications] = useState(false)
+  const controller = useNotificationController()
+
+  useEffectOnce(() => {
+    const unsubscribe = controller.onUnreadNotificationChange(setUnreadNotifications)
+    controller.checkUnread()
+    return unsubscribe
+  })
+
+  return hasUnreadNotifications
+}

package/src/context/notification/types.ts

@@ -1,65 +1,65 @@
-import { GetTenantNotificationsResponse, ResponseModelGetTenantNotificationsResponse } from '../../notifications'
-
-export type NotificationPriority = 'HIGH' | 'MEDIUM' | 'LOW'
-
-export type NotificationContext = 'ACCOUNT' | 'STUDIO' | 'WORKSPACE'
-
-export interface LoadNotificationsFilters {
-  committed?: boolean,
-  criticality?: NotificationPriority,
-  search?: string,
-  context?: NotificationContext,
-  size?: number,
-  isBanner?: boolean,
-}
-
-export interface LoadNotificationsOptions extends LoadNotificationsFilters {
-  page: number,
-  isBanner?: boolean,
-}
-
-export type LazyNotificationListener = (notifications: GetTenantNotificationsResponse[], hasMore: boolean) => void
-
-export interface NotificationConfig {
-  /**
-   * Fetches the notifications according to the options passed as parameters.
-   * @param options page, size and filters.
-   * @returns a promise that resolves to a {@link ResponseModelGetTenantNotificationsResponse}.
-   */
-  load(options: LoadNotificationsOptions): Promise<ResponseModelGetTenantNotificationsResponse>,
-  /**
-   * Check for unread notifications since the date passed as parameter.
-   * @param date the date to start the search from
-   * @returns a promise that resolves to true if there are unread notifications or false otherwise.
-   */
-  checkForUnreadNotificationsSince(date?: Date): Promise<boolean>,
-  /**
-   * Marks the notification with the id passed as parameter as read (committed).
-   * @param id the id of the notification.
-   */
-  markAsCommitted(id: string): Promise<void>,
-  /**
-   * How long (ms) we should wait before checking for unread notifications again.
-   * @default 120000
-   */
-  pollingMS?: number,
-  /**
-   * Path to the notifications page.
-   * @default '/notifications'
-   */
-  notificationsPath?: string,
-  /**
-   * A function to call whenever an action button of a notification is clicked. It receives the id of the notification as a parameter.
-   * 
-   * Useful for adding a behavior other than committing the notification and redirecting to its action. Example: analytics.
-   * 
-   * @param id the id of the notification.
-   */
-  onClickAction?: (id: string) => void,
-  /**
-   * Function that is called whenever the "read more" button is clicked.
-   */
-  onClickViewNotification?: () => void,
-}
-
-export type UnreadNotificationListener = (hasUnreadNotification: boolean) => void
+import { GetTenantNotificationsResponse, ResponseModelGetTenantNotificationsResponse } from '../../notifications'
+
+export type NotificationPriority = 'HIGH' | 'MEDIUM' | 'LOW'
+
+export type NotificationContext = 'ACCOUNT' | 'STUDIO' | 'WORKSPACE'
+
+export interface LoadNotificationsFilters {
+  committed?: boolean,
+  criticality?: NotificationPriority,
+  search?: string,
+  context?: NotificationContext,
+  size?: number,
+  isBanner?: boolean,
+}
+
+export interface LoadNotificationsOptions extends LoadNotificationsFilters {
+  page: number,
+  isBanner?: boolean,
+}
+
+export type LazyNotificationListener = (notifications: GetTenantNotificationsResponse[], hasMore: boolean) => void
+
+export interface NotificationConfig {
+  /**
+   * Fetches the notifications according to the options passed as parameters.
+   * @param options page, size and filters.
+   * @returns a promise that resolves to a {@link ResponseModelGetTenantNotificationsResponse}.
+   */
+  load(options: LoadNotificationsOptions): Promise<ResponseModelGetTenantNotificationsResponse>,
+  /**
+   * Check for unread notifications since the date passed as parameter.
+   * @param date the date to start the search from
+   * @returns a promise that resolves to true if there are unread notifications or false otherwise.
+   */
+  checkForUnreadNotificationsSince(date?: Date): Promise<boolean>,
+  /**
+   * Marks the notification with the id passed as parameter as read (committed).
+   * @param id the id of the notification.
+   */
+  markAsCommitted(id: string): Promise<void>,
+  /**
+   * How long (ms) we should wait before checking for unread notifications again.
+   * @default 120000
+   */
+  pollingMS?: number,
+  /**
+   * Path to the notifications page.
+   * @default '/notifications'
+   */
+  notificationsPath?: string,
+  /**
+   * A function to call whenever an action button of a notification is clicked. It receives the id of the notification as a parameter.
+   * 
+   * Useful for adding a behavior other than committing the notification and redirecting to its action. Example: analytics.
+   * 
+   * @param id the id of the notification.
+   */
+  onClickAction?: (id: string) => void,
+  /**
+   * Function that is called whenever the "read more" button is clicked.
+   */
+  onClickViewNotification?: () => void,
+}
+
+export type UnreadNotificationListener = (hasUnreadNotification: boolean) => void

package/src/hooks/date.ts

@@ -1,31 +1,31 @@
-import { Language, useLanguage } from '@stack-spot/portal-translate'
-import { format } from 'date-fns'
-import { ptBR } from 'date-fns/locale'
-
-function formatDate(date: string, locale: Language, includeTime: boolean) {
-  const time = includeTime ? ' HH:mm' : ''
-  return locale === 'pt'
-    ? format(new Date(date), `dd/MM/yyyy${time}`, { locale: ptBR })
-    : format(new Date(date), `MMMM dd yyyy${time}`)
-}
-
-function formatSimpleDate(date: string, locale: Language) {
-
-  return locale === 'pt'
-    ? format(new Date(date), 'dd/MM/yyyy', { locale: ptBR })
-    : format(new Date(date), 'MM/dd/yyyy')
-}
-
-/**
- * A utility for formatting dates.
- * @param date 
- * @returns a date formatter object.
- */
-export function useDateFormatter() {
-  const locale = useLanguage()
-  return {
-    formatDate: (date?: string) => date ? formatDate(date, locale, false) : undefined,
-    formatDateWithTime: (date?: string) => date ? formatDate(date, locale, true) : undefined,
-    formatSimpleDate: (date?: string) => date ? formatSimpleDate(date, locale) : undefined,
-  }
-}
+import { Language, useLanguage } from '@stack-spot/portal-translate'
+import { format } from 'date-fns'
+import { ptBR } from 'date-fns/locale'
+
+function formatDate(date: string, locale: Language, includeTime: boolean) {
+  const time = includeTime ? ' HH:mm' : ''
+  return locale === 'pt'
+    ? format(new Date(date), `dd/MM/yyyy${time}`, { locale: ptBR })
+    : format(new Date(date), `MMMM dd yyyy${time}`)
+}
+
+function formatSimpleDate(date: string, locale: Language) {
+
+  return locale === 'pt'
+    ? format(new Date(date), 'dd/MM/yyyy', { locale: ptBR })
+    : format(new Date(date), 'MM/dd/yyyy')
+}
+
+/**
+ * A utility for formatting dates.
+ * @param date 
+ * @returns a date formatter object.
+ */
+export function useDateFormatter() {
+  const locale = useLanguage()
+  return {
+    formatDate: (date?: string) => date ? formatDate(date, locale, false) : undefined,
+    formatDateWithTime: (date?: string) => date ? formatDate(date, locale, true) : undefined,
+    formatSimpleDate: (date?: string) => date ? formatSimpleDate(date, locale) : undefined,
+  }
+}