Rewrite leaderboard generation code in TypeScript

src/data/index.ts

@@ -1,2 +1,3 @@
 export { default as siteName } from "./siteName"
 export { default as supportedServers, RegionEnum } from "./supportedServers"
+export { PrivacyLevelEnum } from "./privacyLevels"

src/data/privacyLevels.ts

@@ -0,0 +1,6 @@
+export enum PrivacyLevelEnum {
+	LEVEL = 0b1,
+	GUILD = 0b10,
+	CONTRIB = 0b100,
+	SPECS = 0b1000,
+}

src/hooks/API.ts

@@ -1,22 +1,13 @@
 import { ComputedRef, reactive, readonly } from "vue"
 import { RegionEnum } from "@/data"
-
-type Player = {
-	profileTarget: string
-	region: RegionEnum
-}
-
-type Guild = {
-	population: number
-	members: Player[]
-}
+import type { Guild, Player } from "@/types"
 
 type Err = {
 	code?: number
 	message: string
 }
 
-type APIResult = {
+export type APIResult = {
 	errors: Err[]
 	guild: Guild
 	players: Player[]
@@ -46,12 +37,14 @@ function parseResponse<T>(response: Response): Promise<T> {
 }
 
 // Custom hook to fetch guild and player data
-export default function useGuild(params: ComputedRef<{ guildName?: string, region?: RegionEnum, players?: Player[] }>) {
+export default function useGuild(params: ComputedRef<{ guildName?: Guild["name"], region?: Guild["region"], players?: Player[] }>) {
 	const result = reactive<APIResult>({
 		errors: [],
 		guild: {
 			members: [],
+			name: "",
 			population: 0,
+			region: RegionEnum.EU,
 		},
 		players: [],
 		progress: 0
@@ -63,7 +56,9 @@ export default function useGuild(params: ComputedRef<{ guildName?: string, regio
 		result.errors = []
 		result.guild = {
 			members: [],
+			name: "",
 			population: 0,
+			region: RegionEnum.EU,
 		}
 		result.players = []
 		result.progress = 0

src/hooks/index.ts

@@ -1,2 +1 @@
 export { default as useIsMobile } from "./useIsMobile"
-export { default as useNavigation } from "./useNavigation"

src/pages/home/components/SearchCard.vue

@@ -17,7 +17,7 @@
 	import { ref } from "vue"
 	import { type RegionEnum, supportedServers } from "@/data"
 	import { useMainStore } from "@/stores"
-	import { useNavigation } from "@/hooks"
+	import { useNavigation } from "../hooks"
 
 	const { navigateToCustomLeaderboard, navigateToGuildLeaderboard } = useNavigation()
 	const store = useMainStore()

src/pages/home/components/SearchHistoryCard.vue

@@ -14,7 +14,7 @@
 	import { formatDistanceToNow } from "date-fns"
 	import { type RegionEnum } from "@/data"
 	import { useMainStore } from "@/stores"
-	import { useNavigation } from "@/hooks"
+	import { useNavigation } from "../hooks"
 
 	const { navigateToGuildLeaderboard } = useNavigation()
 	const store = useMainStore()

src/pages/home/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useNavigation } from "./useNavigation"

src/pages/leaderboard/components/LeaderboardCard.vue

@@ -9,25 +9,23 @@
 	<LoadingCard v-else id="leaderboard" :progress="data.progress" />
 </template>
 
-<script setup>
+<script setup lang="ts">
 	import { computed } from "vue"
 	import { ContentCard } from "@/components"
+	import { generateLeaderboardItems } from "../logic"
 	import { LeaderboardHeaderLine, LeaderboardLine, LoadingCard } from "."
+	import { PrivacyLevelEnum } from "@/data"
 	import { routeNameEnum } from "@/router"
+	import { useDiscipline } from "../hooks"
 	import { useRoute } from "vue-router"
-	import generateLeaderboardItems from "@/core/generateLeaderboardItems"
+	import type { APIResult } from "@/hooks/API"
 
 	const route = useRoute()
-	const props = defineProps({
-		data: {
-			type: Object,
-			required: true,
-		},
-		refreshData: {
-			type: Function,
-			required: true,
-		},
-	})
+	const props = defineProps<{
+		data: APIResult
+		refreshData: () => void
+	}>()
+	const discipline = useDiscipline()
 
 	const leaderboardItems = computed(() => {
 		if (props.data.progress < 1) {
@@ -43,7 +41,7 @@
 				if (player.guild !== undefined && player.guild.name.toLowerCase() == props.data.guild.name.toLowerCase()) {
 					// They are probably in the guild: double checked
 					return true
-				} else if (player.privacy & 0b10) {
+				} else if (player.privacy & PrivacyLevelEnum.GUILD) {
 					// The guild in the profile is set to private: can't double check
 					return true
 				} else {
@@ -52,7 +50,7 @@
 				}
 			})
 
-		return generateLeaderboardItems(route.params.discipline, players)
+		return generateLeaderboardItems(discipline.value, players)
 	})
 </script>
 

src/pages/leaderboard/components/LeaderboardHeaderLine.vue

@@ -4,16 +4,12 @@
 
 <script setup lang="ts">
 	import { computed } from "vue"
-	import { useRoute } from "vue-router"
+	import { useDiscipline } from "../hooks"
 
-	const route = useRoute()
+	const discipline = useDiscipline()
 
 	const headers = computed(() => {
-		const discipline = Array.isArray(route.params.discipline)
-			? route.params.discipline[0]
-			: route.params.discipline
-
-		const thrirdCol = ["contribution", "combat", "life", "characters", "age"].includes(discipline)
+		const thrirdCol = ["contribution", "combat", "life", "characters", "age"].includes(discipline.value)
 			? null
 			: "Character"
 
@@ -24,7 +20,7 @@
 			life: "Life Fame",
 			characters: "Characters",
 			age: "Age",
-		}[discipline] ?? "Rank"
+		}[discipline.value] ?? "Rank"
 
 		return ["#", "Family Name", thrirdCol, fourthCol]
 	})

src/pages/leaderboard/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useDiscipline } from "./useDiscipline"

src/pages/leaderboard/hooks/useDiscipline.ts

@@ -0,0 +1,12 @@
+import { computed, readonly } from "vue"
+import { useRoute } from "vue-router"
+
+export default function useDiscipline() {
+	const route = useRoute()
+
+	return readonly(computed(() => {
+		return Array.isArray(route.params.discipline)
+			? route.params.discipline[0]
+			: route.params.discipline
+	}))
+}