Add tabs to route query

celenium-io · Oct 10, 2024 · ce6d184 · ce6d184
1 parent 7ec3c31
commit ce6d184
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 116 deletions.
diff --git a/components/modules/rollup/RollupCharts.vue b/components/modules/rollup/RollupCharts.vue
@@ -6,12 +6,9 @@ import { DateTime } from "luxon"
 import { fetchRollupSeries } from "@/services/api/stats.js";
 
 /** Services */
-import { formatBytes, space, spaces } from "@/services/utils"
-import { getNamespaceID, getNamespaceLink } from "@/services/utils/rollups"
 import { getRollupHashSafeURL } from "~/services/utils/rollups"
 
 /** UI */
-import Button from "@/components/ui/Button.vue"
 import LineChart from "@/components/ui/Charts/LineChart.vue"
 
 const props = defineProps({
@@ -63,9 +60,8 @@ const sizeSeries = ref([])
 const actionsSeries = ref([])
 
 const fetchData = async () => {
-	sizeSeries.value = await getRollupSeries('size')
-
-	actionsSeries.value = await getRollupSeries('actions_count')
+	getRollupSeries('size').then((res) => sizeSeries.value = res)
+	getRollupSeries('actions_count').then((res) => actionsSeries.value = res)
 }
 
 await fetchData()
@@ -83,12 +79,6 @@ watch(
 		<LineChart v-if="sizeSeries.length > 0" title="Data Usage" :data="sizeSeries" :period="period" units="bytes" tooltip="Pushed" />
 
 		<LineChart v-if="actionsSeries.length > 0" title="Actions Count" :data="actionsSeries" :period="period" tooltip="Actions" />
-
-		<!-- <LoadingHolder v-if="isLoading" title="Loading charts.." /> -->
-
-		<!-- <ActionsTable v-if="actions.length > 0" :actions="actions" txLink /> -->
-
-		<!-- <EmptyHolder v-else-if="!isLoading" title="This rollup doesn't contain any action" /> -->
 	</Flex>
 </template>
 

diff --git a/components/tables/ActionsTable.vue b/components/tables/ActionsTable.vue
@@ -35,8 +35,6 @@ const props = defineProps({
 	},
 })
 
-console.log('actions', props.actions);
-
 const handleViewRawData = (action) => {
 	cacheStore.current.action = action
 	cacheStore.current._target = "action"

diff --git a/pages/account/[hash].vue b/pages/account/[hash].vue
@@ -17,6 +17,9 @@ import RawDataView from "@/components/shared/RawDataView.vue"
 import Button from "~/components/ui/Button.vue"
 import Tooltip from "~/components/ui/Tooltip.vue"
 
+/** Services */
+import { capitalizeAndReplaceUnderscore } from "~/services/utils"
+
 /** API */
 import { fetchAccountActions, fetchAccountBridgeRoles, fetchAccountByHash, fetchAccountRollups, fetchAccountTransactions } from "~/services/api/account.js"
 
@@ -25,6 +28,7 @@ definePageMeta({
 })
 
 const route = useRoute()
+const router = useRouter()
 
 const account = ref()
 const txs = ref([])
@@ -123,6 +127,23 @@ const fetchBridgeRoles = async () => {
 	isLoading.value = false
 }
 
+const fetchData = async () => {
+	switch (activeTab.value) {
+		case "transactions":
+			fetchTxs()
+			break
+		case "actions":
+			fetchActions()
+			break
+		case "rollups":
+			fetchRollups()
+			break
+		case "bridge_roles":
+			fetchBridgeRoles()
+			break
+	}
+}
+
 /** Pagination */
 const page = ref(1)
 const handleNextCondition = ref(true)
@@ -183,59 +204,47 @@ useHead({
 
 const tabs = ref(
 	[
-		{ name: "Transactions" },
-		{ name: "Actions" },
-		{ name: "Rollups" },
-		{ name: "Bridge Roles" },
+		{ name: "transactions", },
+		{ name: "actions" },
+		{ name: "rollups" },
+		{ name: "bridge_roles" },
 	]
 )
-const activeTab = ref(tabs.value[0].name)
+const activeTab = ref(route.query.tab && tabs.value.map((tab) => tab.name).includes(route.query.tab) ? route.query.tab : tabs.value[0].name)
+
+const updateRouteQuery = () => {
+	router.replace({
+		query: {
+			tab: activeTab.value,
+		},
+	})
+}
 
-await fetchTxs()
+await fetchData()
+updateRouteQuery()
 
+const isUpdatingPaage = ref(false)
 watch(
 	() => activeTab.value,
 	async () => {
-		switch (activeTab.value) {
-			case "Transactions":
-				page.value = 1
-				fetchTxs()
-				break
-			case "Actions":
-				page.value = 1
-				fetchActions()
-				break
-			case "Rollups":
-				page.value = 1
-				fetchRollups()
-				break
-			case "Bridge Roles":
-				page.value = 1
-				fetchBridgeRoles()
-				break
-		}
+		isUpdatingPaage.value = true
+
+		page.value = 1
+		updateRouteQuery()
+		await fetchData()
+
+		isUpdatingPaage.value = false
 	},
 )
 
 watch(
 	() => page.value,
-	() => {
-		if (page.value !== 1) {
-			switch (activeTab.value) {
-				case "Transactions":
-					fetchTxs()
-					break
-				case "Actions":
-					fetchActions()
-					break
-				case "Rollups":
-					fetchRollups()
-					break
-				case "Bridge Roles":
-					fetchBridgeRoles()
-					break
-			}
-		}
+	async () => {
+		// console.log('isUpdatingPaage.value', isUpdatingPaage.value);
+		
+		if (isUpdatingPaage.value) return
+		
+		await fetchData()
 	},
 )
 </script>
@@ -288,7 +297,7 @@ watch(
 						color="secondary"
 						:class="[$style.tab, activeTab === tab.name && $style.active]"
 					>
-						{{ tab.name }}
+						{{ capitalizeAndReplaceUnderscore(tab.name) }}
 					</Text>
 				</Flex>
 
@@ -303,13 +312,13 @@ watch(
 				</Flex>
 			</Flex>
 
-			<AccountTransactions v-if="activeTab === 'Transactions'" :txs="txs" :isLoading="isLoading" />
+			<AccountTransactions v-if="activeTab === 'transactions'" :txs="txs" :isLoading="isLoading" />
 
-			<AccountActions v-if="activeTab === 'Actions'" :actions="actions" :isLoading="isLoading" />
+			<AccountActions v-if="activeTab === 'actions'" :actions="actions" :isLoading="isLoading" />
 
-			<AccountRollups v-if="activeTab === 'Rollups'" :rollups="rollups" :isLoading="isLoading" />
+			<AccountRollups v-if="activeTab === 'rollups'" :rollups="rollups" :isLoading="isLoading" />
 
-			<AccountBridgeRoles v-if="activeTab === 'Bridge Roles'" :roles="bridgeRoles" :isLoading="isLoading" />
+			<AccountBridgeRoles v-if="activeTab === 'bridge_roles'" :roles="bridgeRoles" :isLoading="isLoading" />
 		</Flex>
 	</Flex>
 </template>

diff --git a/pages/block/[height].vue b/pages/block/[height].vue
@@ -1,6 +1,6 @@
 <script setup>
 /** Services */
-import { spaces } from "~/services/utils"
+import { capitalize, spaces } from "~/services/utils"
 
 /** UI */
 import Button from "~/components/ui/Button.vue"
@@ -74,6 +74,17 @@ const fetchActions = async () => {
 	isLoading.value = false
 }
 
+const fetchData = async () => {
+	switch (activeTab.value) {
+		case "transactions":
+			await fetchTxs()
+			break
+		case "actions":
+			await fetchActions()
+			break
+	}
+}
+
 useHead({
 	title: `Block ${spaces(block.value?.height)} - Astria Explorer`,
 	link: [
@@ -110,8 +121,23 @@ useHead({
 	],
 })
 
-const tabs = ref([{ name: "Transactions" }, { name: "Actions" }])
-const activeTab = ref(tabs.value[0].name)
+const tabs = ref([
+	{
+		name: "transactions"
+	},
+	{
+		name: "actions"
+	}
+])
+const activeTab = ref(route.query.tab && tabs.value.map((tab) => tab.name).includes(route.query.tab) ? route.query.tab : tabs.value[0].name)
+
+const updateRouteQuery = () => {
+	router.replace({
+		query: {
+			tab: activeTab.value,
+		},
+	})
+}
 
 const limit = ref(15)
 
@@ -127,35 +153,31 @@ const handlePrev = () => {
 	page.value -= 1
 }
 
+await fetchData()
+updateRouteQuery()
+
+const isUpdatingPaage = ref(false)
 watch(
 	() => activeTab.value,
 	async () => {
-		switch (activeTab.value) {
-			case "Transactions":
-				page.value === 1 ? fetchTxs() : page.value = 1
-				break
-			case "Actions":
-				page.value === 1 ? fetchActions() : page.value = 1
-				break
-		}
+		isUpdatingPaage.value = true
+
+		page.value = 1
+		updateRouteQuery()
+		await fetchData()
+
+		isUpdatingPaage.value = false
 	},
 )
 
 watch(
 	() => page.value,
 	async () => {
-		switch (activeTab.value) {
-			case "Transactions":
-				fetchTxs()
-				break
-			case "Actions":
-				fetchActions()
-				break
-		}
+		if (isUpdatingPaage.value) return
+
+		await fetchData()
 	},
 )
-
-await fetchTxs()
 </script>
 
 <template>
@@ -217,7 +239,7 @@ await fetchTxs()
 						color="secondary"
 						:class="[$style.tab, activeTab === tab.name && $style.active]"
 					>
-						{{ tab.name }}
+						{{ capitalize(tab.name) }}
 					</Text>
 				</Flex>
 
@@ -232,8 +254,8 @@ await fetchTxs()
 				</Flex>
 			</Flex>
 
-			<BlockTransactions v-if="activeTab === 'Transactions'" :txs="txs" :isLoading="isLoading" />
-			<BlockActions v-if="activeTab === 'Actions'" :actions="actions" :isLoading="isLoading" />
+			<BlockTransactions v-if="activeTab === 'transactions'" :txs="txs" :isLoading="isLoading" />
+			<BlockActions v-if="activeTab === 'actions'" :actions="actions" :isLoading="isLoading" />
 		</Flex>
 	</Flex>
 </template>