@mx-cartographer/experiences 4.0.14-alpha.JB1 → 4.0.14-alpha.JB2

package/src/common/hooks/useDimensions.tsx

@@ -1,78 +0,0 @@
-// Based off the useMeasure hook from useHooks.com/usemeasure(ui.dev). Converted to typescript and added a debounce. https://github.com/uidotdev/usehooks/blob/main/index.js
-
-import React from 'react'
-
-type Dimensions = {
-  width: number
-  height: number
-}
-
-// Memoized debounce function
-const useDebounce = <T extends (...args: any[]) => void>(func: T, delay: number) => {
-  return React.useMemo(() => {
-    let timeoutId: NodeJS.Timeout | null = null
-    return (...args: Parameters<T>) => {
-      if (timeoutId) {
-        clearTimeout(timeoutId)
-      }
-      timeoutId = setTimeout(() => {
-        func(...args)
-      }, delay)
-    }
-  }, [func, delay])
-}
-
-export function useDimensions(
-  debounceDelay: number = 100,
-): [React.RefCallback<HTMLElement>, Dimensions] {
-  const [dimensions, setDimensions] = React.useState<Dimensions>({
-    width: 0,
-    height: 0,
-  })
-
-  const observerRef = React.useRef<ResizeObserver | null>(null)
-  const previousDimensions = React.useRef<Dimensions>(dimensions)
-
-  const debouncedSetDimensions = useDebounce((width: number, height: number) => {
-    if (
-      width !== previousDimensions.current.width ||
-      height !== previousDimensions.current.height
-    ) {
-      setDimensions({ width, height })
-      previousDimensions.current = { width, height }
-    }
-  }, debounceDelay)
-
-  const customRef = React.useCallback(
-    (node: HTMLElement | null) => {
-      if (observerRef.current) {
-        observerRef.current.disconnect()
-        observerRef.current = null
-      }
-
-      if (node?.nodeType === Node.ELEMENT_NODE) {
-        const observer = new ResizeObserver(([entry]) => {
-          if (entry && entry.borderBoxSize) {
-            const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0]
-            debouncedSetDimensions(width, height)
-          }
-        })
-
-        observer.observe(node)
-        observerRef.current = observer
-      }
-    },
-    [debouncedSetDimensions],
-  )
-
-  // Add cleanup effect
-  React.useEffect(() => {
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect()
-      }
-    }
-  }, [])
-
-  return [customRef, dimensions]
-}

package/src/common/hooks/usePrevious.tsx

@@ -1,10 +0,0 @@
-import { useEffect, useRef } from 'react'
-
-export const usePrevious = (value: any) => {
-  const ref = useRef()
-  useEffect(() => {
-    ref.current = value
-  }, [value])
-  return ref.current
-}
-export default usePrevious

package/src/common/hooks/useScreenSize.tsx

@@ -1,15 +0,0 @@
-import useTheme from '@mui/material/styles/useTheme'
-import useMediaQuery from '@mui/material/useMediaQuery'
-
-export const useScreenSize = () => {
-  return {
-    // Larger than 1200
-    isDesktop: useMediaQuery(useTheme().breakpoints.up('xl')),
-    // Smaller than 768
-    isMobile: useMediaQuery(useTheme().breakpoints.down('md')),
-    // Between 768 and 992
-    isSmallTablet: useMediaQuery(useTheme().breakpoints.between('md', 'lg')),
-    // Between 768 and 1200
-    isTablet: useMediaQuery(useTheme().breakpoints.between('md', 'xl')),
-  }
-}

package/src/common/index.ts

@@ -1,23 +0,0 @@
-// API
-export * from './api'
-
-// Components
-export * from './components'
-
-// Constants
-export * from './constants'
-
-// Context
-export * from './context'
-
-// Hooks
-export * from './hooks'
-
-// MobX stores
-export * from './stores'
-
-// Types
-export * from './types'
-
-// Utils
-export * from './utils'

package/src/common/stores/ConnectStore.ts

@@ -1,26 +0,0 @@
-import { makeAutoObservable } from 'mobx'
-
-import { WidgetApi } from '../../common'
-
-import type { GlobalStore } from '../../common'
-
-export class ConnectStore {
-  widgetApi: WidgetApi = new WidgetApi('/', '')
-
-  globalStore: GlobalStore
-
-  constructor(globalStore: GlobalStore) {
-    this.globalStore = globalStore
-    makeAutoObservable(this)
-  }
-
-  initialize = async (endpoint: string, token: string) => {
-    this.widgetApi = new WidgetApi(endpoint, token)
-  }
-
-  loadWidget = async ({ widget = 'connect_widget', mode = 'light', ...rest }) => {
-    return await this.widgetApi.requestWidgetUrl({
-      widget_url: { widget_type: widget, color_scheme: mode, ...rest },
-    })
-  }
-}

package/src/common/stores/GlobalCopyStore.ts

@@ -1,36 +0,0 @@
-import { makeAutoObservable, runInAction } from 'mobx'
-import { GlobalCopyApi } from '../api/GlobalCopyApi'
-import { GlobalCopy } from '../types'
-
-export class GlobalCopyStore {
-  copy: GlobalCopy = {} as GlobalCopy
-  featureNamespace = 'experiences'
-
-  api: GlobalCopyApi = new GlobalCopyApi('/', '')
-  isInitialized = false
-
-  constructor() {
-    makeAutoObservable(this)
-  }
-
-  initialize = async (endpoint: string, token: string) => {
-    this.api = new GlobalCopyApi(endpoint, token)
-
-    await this.getCopy(this.featureNamespace)
-    runInAction(() => {
-      this.isInitialized = true
-    })
-  }
-
-  getCopy = async (namespace: string, translationKey: string = '') => {
-    try {
-      const newCopy = await this.api.getGlobalCopy(namespace, translationKey)
-
-      runInAction(() => {
-        this.copy = newCopy[namespace]
-      })
-    } catch (error) {
-      console.error(`Error occurred while fetching ${this.featureNamespace} copy: ${error}`)
-    }
-  }
-}

package/src/common/stores/GlobalStore.ts

@@ -1,83 +0,0 @@
-import { makeAutoObservable } from 'mobx'
-
-import { AccountStore } from '../../accounts'
-import { BeatStore } from '../../insights/store/BeatStore'
-import { BudgetsStore } from '../../budgets/store/BudgetsStore'
-import { CashflowStore } from '../../cashflow'
-import { CategoryStore } from '../../categories'
-import { ConnectStore } from './ConnectStore'
-import { DebtsStore } from '../../debts/index'
-import { GlobalUiStore } from './GlobalUiStore'
-import { GoalStore } from '../../goals'
-import { MerchantStore } from '../../merchants'
-import { NetWorthStore } from '../../networth'
-import { NotificationStore } from '../../notifications'
-import { RecurringActivityStore } from '../../recurringactivity'
-import { TransactionStore } from '../../transactions'
-import { UserStore } from './UserStore'
-import { GlobalCopyStore } from './GlobalCopyStore'
-
-export class GlobalStore {
-  accountStore: AccountStore
-  beatStore: BeatStore
-  budgetsStore: BudgetsStore
-  cashflowStore: CashflowStore
-  categoryStore: CategoryStore
-  connectStore: ConnectStore
-  copyStore: GlobalCopyStore
-  goalStore: GoalStore
-  debtsStore: DebtsStore
-  merchantStore: MerchantStore
-  netWorthStore: NetWorthStore
-  notificationStore: NotificationStore
-  recurringActivityStore: RecurringActivityStore
-  transactionStore: TransactionStore
-  userStore: UserStore
-
-  globalUiStore: GlobalUiStore
-
-  isInitialized = false
-
-  constructor() {
-    this.accountStore = new AccountStore(this)
-    this.beatStore = new BeatStore()
-    this.budgetsStore = new BudgetsStore(this)
-    this.cashflowStore = new CashflowStore(this)
-    this.categoryStore = new CategoryStore(this)
-    this.connectStore = new ConnectStore(this)
-    this.goalStore = new GoalStore(this)
-    this.debtsStore = new DebtsStore(this)
-    this.copyStore = new GlobalCopyStore()
-    this.merchantStore = new MerchantStore()
-    this.netWorthStore = new NetWorthStore(this)
-    this.notificationStore = new NotificationStore()
-    this.recurringActivityStore = new RecurringActivityStore(this)
-    this.transactionStore = new TransactionStore(this)
-    this.userStore = new UserStore()
-
-    this.globalUiStore = new GlobalUiStore(this)
-
-    makeAutoObservable(this)
-  }
-
-  initialize = async (endpoint: string, token: string) => {
-    await this.copyStore.initialize(endpoint, token)
-
-    Promise.all([
-      this.accountStore.initialize(endpoint, token),
-      this.beatStore.initialize(endpoint, token),
-      this.goalStore.initialize(endpoint, token),
-      this.merchantStore.initialize(endpoint, token),
-      this.userStore.initialize(endpoint, token),
-      this.categoryStore.initialize(endpoint, token),
-      this.transactionStore.initialize(endpoint, token),
-      this.recurringActivityStore.initialize(endpoint, token),
-      this.budgetsStore.initialize(endpoint, token),
-      this.notificationStore.initialize(endpoint, token),
-      this.connectStore.initialize(endpoint, token),
-    ]).then(() => {
-      this.isInitialized = true
-      this.globalUiStore.setInitialized(true)
-    })
-  }
-}

package/src/common/stores/GlobalUiStore.ts

@@ -1,66 +0,0 @@
-import { makeAutoObservable } from 'mobx'
-
-import { addMonths } from 'date-fns/addMonths'
-import { endOfMonth } from 'date-fns/endOfMonth'
-import { getMonth } from 'date-fns/getMonth'
-import { startOfMonth } from 'date-fns/startOfMonth'
-
-import { Account } from '../types'
-import type { GlobalStore } from './GlobalStore'
-
-export class GlobalUiStore {
-  globalStore: GlobalStore
-  isInitialized = false
-
-  selectedAccounts: Account[] = []
-  selectedAccountGuids: string[] = this.selectedAccounts.map((account) => account.guid)
-
-  displayedDate = new Date()
-  displayedDateRange = {
-    start: startOfMonth(this.displayedDate),
-    end: endOfMonth(this.displayedDate),
-  }
-
-  constructor(globalStore: GlobalStore) {
-    makeAutoObservable(this)
-    this.globalStore = globalStore
-  }
-
-  setInitialized = (isInitialized: boolean) => {
-    this.isInitialized = isInitialized
-  }
-
-  setSelectedAccounts = (accounts: Account[]) => {
-    this.selectedAccounts = accounts
-    this.selectedAccountGuids = this.selectedAccounts.map((account) => account.guid)
-  }
-  // Sets an array of selected account guids for the AccountFilter component
-  setSelectedAccountGuids = (guids: string[]) => {
-    this.selectedAccounts = this.globalStore.accountStore.accounts.filter((account) =>
-      guids.includes(account.guid),
-    )
-    this.selectedAccountGuids = guids
-  }
-
-  setDisplayedDate = (startDate: Date, endDate: Date) => {
-    this.displayedDate = endDate
-    this.displayedDateRange = {
-      start: startDate,
-      end: endDate,
-    }
-  }
-
-  get shouldDisableNextDate() {
-    const selectedMonth = getMonth(this.displayedDate)
-    const nextMonth = getMonth(addMonths(new Date(), 1))
-
-    return selectedMonth === nextMonth
-  }
-
-  get shouldDisablePrevDate() {
-    const selectedMonth = getMonth(this.displayedDate)
-    const currentMonth = getMonth(new Date())
-
-    return selectedMonth === currentMonth
-  }
-}

package/src/common/stores/UserStore.ts

@@ -1,45 +0,0 @@
-import { makeAutoObservable, runInAction } from 'mobx'
-
-import { UserApi } from '../api'
-
-import type { UserProfile } from '../types'
-
-export class UserStore {
-  api: UserApi = new UserApi('/', '')
-
-  userProfile: UserProfile | null = null
-
-  constructor() {
-    makeAutoObservable(this)
-  }
-
-  initialize = async (endpoint: string, token: string) => {
-    this.api = new UserApi(endpoint, token)
-
-    await this.loadUserProfile()
-  }
-
-  loadUserProfile = async () => {
-    try {
-      const userProfile = await this.api.getUserProfile()
-
-      runInAction(() => {
-        this.userProfile = userProfile
-      })
-    } catch (error) {
-      console.error(`Error occurred while loading user profile: ${error}`)
-    }
-  }
-
-  updateUserProfile = async (userProfile: UserProfile) => {
-    try {
-      const updatedProfile = await this.api.updateUserProfile(userProfile)
-
-      runInAction(() => {
-        this.userProfile = updatedProfile
-      })
-    } catch (error) {
-      console.error(`Error occurred while updating user profile: ${error}`)
-    }
-  }
-}

package/src/common/stores/__tests__/GlobalCopyStore.test.ts

@@ -1,23 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-import { GlobalStore } from '../GlobalStore'
-
-vi.mock('../../api/GlobalCopyApi')
-
-describe('Testing the GlobalCopyStore', () => {
-  let globalStore
-
-  beforeEach(() => {
-    globalStore = new GlobalStore()
-  })
-
-  describe('initialize()', () => {
-    it('initializes', async () => {
-      expect(Object.keys(globalStore.copyStore.copy)).toHaveLength(0)
-      expect(globalStore.copyStore.featureNamespace).toEqual('experiences')
-
-      await globalStore.copyStore.initialize('/', '')
-
-      expect(Object.keys(globalStore.copyStore.copy)).toHaveLength(15)
-    })
-  })
-})

package/src/common/stores/__tests__/GlobalStore.test.ts

@@ -1,24 +0,0 @@
-import { GlobalStore } from '../GlobalStore'
-import { describe, expect, it } from 'vitest'
-
-describe('Testing the GlobalStore', () => {
-  it('instantiates all stores', async () => {
-    const globalStore = new GlobalStore()
-
-    expect(globalStore).toHaveProperty('accountStore')
-    expect(globalStore).toHaveProperty('beatStore')
-    expect(globalStore).toHaveProperty('budgetsStore')
-    expect(globalStore).toHaveProperty('cashflowStore')
-    expect(globalStore).toHaveProperty('categoryStore')
-    expect(globalStore).toHaveProperty('connectStore')
-    expect(globalStore).toHaveProperty('copyStore')
-    expect(globalStore).toHaveProperty('debtsStore')
-    expect(globalStore).toHaveProperty('goalStore')
-    expect(globalStore).toHaveProperty('merchantStore')
-    expect(globalStore).toHaveProperty('notificationStore')
-    expect(globalStore).toHaveProperty('recurringActivityStore')
-    expect(globalStore).toHaveProperty('transactionStore')
-    expect(globalStore).toHaveProperty('userStore')
-    expect(Object.keys(globalStore)).toHaveLength(18)
-  })
-})

package/src/common/stores/index.ts

@@ -1,3 +0,0 @@
-export { GlobalCopyStore } from './GlobalCopyStore'
-export { GlobalStore } from './GlobalStore'
-export { UserStore } from './UserStore'