Merge pull request #150 from gobitfly/RESEARCH/AsyncStores

Research/async stores

frontend/components/bc/BcTooltip.vue

@@ -16,9 +16,7 @@ const props = defineProps<Props>()
 const bcTooltipOwner = ref<HTMLElement | null>(null)
 const bcTooltip = ref<HTMLElement | null>(null)
 const tooltipAddedTimeout = ref<NodeJS.Timeout | null>(null)
-const ttStore = useTooltipStore()
-const { doSelect } = ttStore
-const { selected } = storeToRefs(ttStore)
+const { selected, doSelect } = useTooltipStore()
 const { width, height } = useWindowSize()
 
 // this const will be avaiable on template

frontend/components/bc/header/MainHeader.vue

@@ -1,17 +1,14 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia'
 import { useLatestStateStore } from '~/stores/useLatestStateStore'
 
-const store = useLatestStateStore()
-const { getLatestState } = store
-await useAsyncData('latest_state', () => getLatestState())
-const { latest } = storeToRefs(store)
+const { latestState, refreshLatestState } = useLatestStateStore()
+await useAsyncData('latest_state', () => refreshLatestState())
 
 </script>
 <template>
   <div class="header top">
     <div class="content">
-      <div>Current Epoch: {{ latest?.currentEpoch }}</div>
+      <div>Current Epoch: {{ latestState?.currentEpoch }}</div>
 
       <NuxtLink to="/login">
         Login

frontend/components/dashboard/DashboardHeader.vue

@@ -5,12 +5,9 @@ import { useUserDashboardStore } from '~/stores/dashboard/useUserDashboardStore'
 const { width } = useWindowSize()
 
 const { t: $t } = useI18n()
-const store = useUserDashboardStore()
-const { getDashboards } = store
 const { path } = useRoute()
 
-const { dashboards } = storeToRefs(store)
-await useAsyncData('validator_dashboards', () => getDashboards()) // TODO: This is called here and in DashboardValidatorManageValidators.vue. Should just be called once?
+const { dashboards } = useUserDashboardStore()
 
 const emit = defineEmits<{(e: 'showCreation'): void }>()
 

frontend/components/dashboard/GroupManagementModal.vue

@@ -28,12 +28,8 @@ const { width, isMobile } = useWindowSize()
 
 const visible = defineModel<boolean>()
 
-const overviewStore = useValidatorDashboardOverviewStore()
-const { getOverview } = overviewStore
-const { overview } = storeToRefs(overviewStore)
-
-const dashboardStore = useUserDashboardStore()
-const { dashboards } = storeToRefs(dashboardStore)
+const { overview, refreshOverview } = useValidatorDashboardOverviewStore()
+const { dashboards } = useUserDashboardStore()
 
 const cursor = ref<Cursor>(0)
 const pageSize = ref<number>(5)
@@ -82,7 +78,7 @@ const addGroup = async () => {
     return
   }
   await fetch(API_PATH.DASHBOARD_VALIDATOR_GROUPS, { method: 'POST', body: { name: newGroupName.value } }, { dashboardKey: props.dashboardKey })
-  await getOverview(props.dashboardKey)
+  await refreshOverview(props.dashboardKey)
   newGroupName.value = ''
 }
 
@@ -93,7 +89,7 @@ const editGroup = (row: VDBOverviewGroup, newName?: string) => {
 
 const removeGroupConfirmed = async (row: VDBOverviewGroup) => {
   await fetch(API_PATH.DASHBOARD_VALIDATOR_GROUP_DELETE, undefined, { dashboardKey: props.dashboardKey, groupId: row.id })
-  getOverview(props.dashboardKey)
+  refreshOverview(props.dashboardKey)
 }
 
 const removeGroup = (row: VDBOverviewGroup) => {

frontend/components/dashboard/ValidatorManagementModal.vue

@@ -29,9 +29,7 @@ const dialog = useDialog()
 
 const visible = defineModel<boolean>()
 
-const overviewStore = useValidatorDashboardOverviewStore()
-const { getOverview } = overviewStore
-const { overview } = storeToRefs(overviewStore)
+const { overview, refreshOverview } = useValidatorDashboardOverviewStore()
 
 const { value: query, bounce: setQuery } = useDebounceValue<PathValues | undefined>(undefined, 500)
 
@@ -78,7 +76,7 @@ const changeGroup = async (validators?: NumberOrString[], groupId?: number) => {
   await fetch< VDBPostValidatorsData >(API_PATH.DASHBOARD_VALIDATOR_MANAGEMENT, { method: 'POST', body: { validators, group_id: targetGroupId } }, { dashboardKey: props.dashboardKey })
 
   loadData()
-  getOverview(props.dashboardKey)
+  refreshOverview(props.dashboardKey)
 }
 
 const removeValidators = async (validators?: NumberOrString[]) => {
@@ -90,7 +88,7 @@ const removeValidators = async (validators?: NumberOrString[]) => {
   await fetch(API_PATH.DASHBOARD_VALIDATOR_MANAGEMENT, { method: 'DELETE', body: { validators } }, { dashboardKey: props.dashboardKey })
 
   loadData()
-  getOverview(props.dashboardKey)
+  refreshOverview(props.dashboardKey)
 }
 
 const addValidator = () => {

frontend/components/dashboard/ValidatorOverview.vue

@@ -2,30 +2,16 @@
 
 import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
 import type { ClElValue } from '~/types/api/common'
-import type { DashboardKey } from '~/types/dashboard'
 import { type OverviewTableData } from '~/types/dashboard/overview'
 import { TimeFrames, type NumberOrString } from '~/types/value'
 import { totalElClNumbers } from '~/utils/bigMath'
 
-interface Props {
-  dashboardKey: DashboardKey
-}
-const props = defineProps<Props>()
-
 const { t: $t } = useI18n()
 const { converter } = useValue()
 
 const tPath = 'dashboard.validator.overview.'
 
-// TODO: implement dashboard switching
-const { getOverview } = useValidatorDashboardOverviewStore()
-await useAsyncData('validator_dashboard_overview', () => getOverview(props.dashboardKey))
-
-watch(() => props.dashboardKey, () => {
-  getOverview(props.dashboardKey)
-}, { immediate: true })
-
-const { overview } = storeToRefs(useValidatorDashboardOverviewStore())
+const { overview } = useValidatorDashboardOverviewStore()
 
 const formatValueWei = (value: NumberOrString): NumberOrString => {
   return converter.value.weiToValue(value as string, { fixedDecimalCount: 4 }).label
@@ -45,6 +31,7 @@ const createInfo = (key: string, value: ClElValue<number | string>, formatFuncti
 
 const dataList = computed(() => {
   const v = overview.value
+
   const active: OverviewTableData = {
     label: $t(`${tPath}your_online_validators`)
   }
@@ -61,6 +48,7 @@ const dataList = computed(() => {
   if (!v) {
     return list
   }
+
   const onlineClass = v.validators.online ? 'positive' : ''
   const offlineClass = v.validators.online ? 'negative' : ''
   active.value = { label: `<span class="${onlineClass}">${v.validators.online ?? 0}</span> / <span class="${offlineClass}">${v.validators.offline ?? 0}</span>` }

frontend/components/dashboard/ValidatorSlotViz.vue

@@ -9,14 +9,11 @@ interface Props {
 const props = defineProps<Props>()
 const { tick } = useInterval(12000)
 
-const store = useValidatorSlotVizStore()
-
-const { getSlotViz } = store
-const { slotViz } = storeToRefs(store)
-await useAsyncData('validator_dashboard_slot_viz', () => getSlotViz(props.dashboardKey))
+const { slotViz, refreshSlotViz } = useValidatorSlotVizStore()
+await useAsyncData('validator_dashboard_slot_viz', () => refreshSlotViz(props.dashboardKey))
 
 watch(() => [props.dashboardKey, tick.value], () => {
-  getSlotViz(props.dashboardKey)
+  refreshSlotViz(props.dashboardKey)
 }, { immediate: true })
 
 </script>

frontend/components/dashboard/chart/SummaryChart.vue

@@ -15,8 +15,9 @@ import SummaryChartTooltip from './SummaryChartTooltip.vue'
 import { formatEpochToDate } from '~/utils/format'
 import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
 import { getSummaryChartGroupColors, getSummaryChartTextColor, getSummaryChartTooltipBackgroundColor } from '~/utils/colors'
-import type { DashboardKey } from '~/types/dashboard'
-import { DAHSHBOARDS_ALL_GROUPS_ID } from '~/types/dashboard'
+import { type DashboardKey, DAHSHBOARDS_ALL_GROUPS_ID } from '~/types/dashboard'
+import { type InternalGetValidatorDashboardSummaryChartResponse } from '~/types/api/validator_dashboard'
+import { type ChartData } from '~/types/api/common'
 
 use([
   CanvasRenderer,
@@ -27,20 +28,26 @@ use([
   GridComponent
 ])
 
+const { fetch } = useCustomFetch()
+
 interface Props {
   dashboardKey: DashboardKey
 }
 const props = defineProps<Props>()
 
-const store = useValidatorDashboardSummaryChartStore()
-const { getDashboardSummaryChart } = store
-const { chartData } = storeToRefs(store)
+const key = computed(() => props.dashboardKey)
 
-watch(props, () => {
-  getDashboardSummaryChart(props.dashboardKey)
-}, { immediate: true })
+const data = ref<ChartData<number> | undefined >()
+await useAsyncData('validator_overview', async () => {
+  if (key.value === undefined) {
+    data.value = undefined
+    return
+  }
+  const res = await fetch<InternalGetValidatorDashboardSummaryChartResponse>(API_PATH.DASHBOARD_SUMMARY_CHART, undefined, { dashboardKey: key.value })
+  data.value = res.data
+}, { watch: [key], server: false })
 
-const { overview } = storeToRefs(useValidatorDashboardOverviewStore())
+const { overview } = useValidatorDashboardOverviewStore()
 
 const { t: $t } = useI18n()
 const colorMode = useColorMode()
@@ -60,16 +67,20 @@ const fontWeightLight = parseInt(styles.getPropertyValue('--roboto-light'))
 const fontWeightMedium = parseInt(styles.getPropertyValue('--roboto-medium'))
 
 const option = computed(() => {
+  if (data === undefined) {
+    return undefined
+  }
+
   interface SeriesObject {
     data: number[];
     type: string;
     name: string;
   }
 
   const series: SeriesObject[] = []
-  if (chartData.value?.series) {
+  if (data.value?.series) {
     const allGroups = $t('dashboard.validator.summary.chart.all_groups')
-    chartData.value.series.forEach((element) => {
+    data.value.series.forEach((element) => {
       let name = allGroups
       if (element.id !== DAHSHBOARDS_ALL_GROUPS_ID) {
         const group = overview.value?.groups.find(group => group.id === element.id)
@@ -94,7 +105,7 @@ const option = computed(() => {
     },
     xAxis: {
       type: 'category',
-      data: chartData.value?.categories,
+      data: data.value?.categories,
       boundaryGap: false,
       axisLabel: {
         fontSize: textSize,
@@ -188,7 +199,9 @@ const option = computed(() => {
 </script>
 
 <template>
-  <VChart class="chart" :option="option" autoresize />
+  <ClientOnly>
+    <VChart class="chart" :option="option" autoresize />
+  </ClientOnly>
 </template>
 
 <style lang="scss">

frontend/components/dashboard/creation/DashboardCreationController.vue

@@ -4,8 +4,7 @@ import { type DashboardCreationDisplayType, type DashboardCreationState } from '
 
 const router = useRouter()
 
-const store = useUserDashboardStore()
-const { createValidatorDashboard, createAccountDashboard } = store
+const { createValidatorDashboard, createAccountDashboard } = useUserDashboardStore()
 
 interface Props {
   displayType: DashboardCreationDisplayType,

frontend/components/dashboard/group/GroupSelection.vue

@@ -9,7 +9,7 @@ const props = defineProps<Props>()
 
 const emit = defineEmits<{(e: 'setGroup', value: number): void}>()
 
-const { overview } = storeToRefs(useValidatorDashboardOverviewStore())
+const { overview } = useValidatorDashboardOverviewStore()
 
 const list = computed<VDBOverviewGroup[]>(() => {
   const groups = overview.value?.groups ?? []

frontend/components/dashboard/table/DashboardTableSummary.vue

@@ -21,7 +21,7 @@ const { getSummary } = store
 const { summaryMap, queryMap } = storeToRefs(store)
 const { value: query, bounce: setQuery } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
 
-const { overview } = storeToRefs(useValidatorDashboardOverviewStore())
+const { overview } = useValidatorDashboardOverviewStore()
 
 const { width, isMobile } = useWindowSize()
 const colsVisible = computed(() => {

frontend/components/dashboard/table/DashboardTableValidators.vue

@@ -16,7 +16,7 @@ interface Props {
 const props = defineProps<Props>()
 
 const { t: $t } = useI18n()
-const { overview } = storeToRefs(useValidatorDashboardOverviewStore())
+const { overview } = useValidatorDashboardOverviewStore()
 
 const dialog = useDialog()
 

frontend/components/playground/DashboardValidatorManageValidators.vue

@@ -1,18 +1,9 @@
 <script setup lang="ts">
 import { DashboardGroupSelectionDialog } from '#components'
-import { useUserDashboardStore } from '~/stores/dashboard/useUserDashboardStore'
 import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
 import { DAHSHBOARDS_ALL_GROUPS_ID } from '~/types/dashboard'
 
-const overviewStore = useValidatorDashboardOverviewStore()
-const { getOverview } = overviewStore
-await useAsyncData('validator_dashboard_overview', () => getOverview(100))
-const { overview } = storeToRefs(overviewStore)
-
-const store = useUserDashboardStore()
-const { getDashboards } = store
-
-await useAsyncData('validator_dashboards', () => getDashboards())
+const { overview } = useValidatorDashboardOverviewStore()
 
 const selectedGroupId = ref<number>(DAHSHBOARDS_ALL_GROUPS_ID)
 

frontend/components/playground/DashboardValidatorSummary.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
-import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
-
-const { getOverview } = useValidatorDashboardOverviewStore()
-await useAsyncData('validator_dashboard_overview', () => getOverview(100))
-
 </script>
+
 <template>
   <DashboardTableSummary :dashboard-key="1" />
 </template>

frontend/composables/useCurrency.ts

@@ -1,9 +1,8 @@
-import { storeToRefs } from 'pinia'
 import { useLatestStateStore } from '~/stores/useLatestStateStore'
 import { type Currency } from '~/types/currencies'
 
 export function useCurrency () {
-  const { latest } = storeToRefs(useLatestStateStore())
+  const { latestState } = useLatestStateStore()
 
   const selectedCurrency = useCookie<Currency>('currency', { default: () => 'NAT' })
   const currency = readonly(selectedCurrency)
@@ -12,13 +11,13 @@ export function useCurrency () {
   }
 
   const rates = computed(() => {
-    return latest.value?.rates || {} as Record<Currency, number>
+    return latestState.value?.rates || {} as Record<Currency, number>
   })
 
   const available = computed(() => {
     let list: Currency[] = ['NAT', 'ETH']
-    if (latest.value?.rates) {
-      list = list.concat(Object.keys(latest.value.rates) as Currency[])
+    if (latestState.value?.rates) {
+      list = list.concat(Object.keys(latestState.value.rates) as Currency[])
     }
     return list
   })

frontend/composables/useCurrentAds.ts

@@ -1,22 +1,20 @@
-import { storeToRefs } from 'pinia'
 import { useAdConfigurationStore } from '~/stores/useAdConfigurationStore'
 import type { AdConfiguration } from '~/types/adConfiguration'
 
 export function useCurrentAds () {
-  const { getAds } = useAdConfigurationStore()
-  const { configurations } = storeToRefs(useAdConfigurationStore())
+  const { adConfigs, refreshAdConfigs } = useAdConfigurationStore()
   const { path, name } = useRoute()
 
   const pathName = computed(() => name?.toString?.() || path)
 
   watch(pathName, (newName) => {
-    getAds(newName)
+    refreshAdConfigs(newName)
   }, { immediate: true })
 
   // TODO: also validate if user is premium user and config is not for all
   const ads = computed(() => {
-    const configs: AdConfiguration[] = configurations.value[pathName.value]?.filter(c => c.enabled) ?? []
-    configurations.value.global?.forEach((config) => {
+    const configs: AdConfiguration[] = adConfigs.value[pathName.value]?.filter(c => c.enabled) ?? []
+    adConfigs.value.global?.forEach((config) => {
       if (config.enabled && !configs.find(c => c.jquery_selector === config.jquery_selector && c.insert_mode === config.insert_mode)) {
         configs.push(config)
       }