Refactor into useLocalizedData

composables/useLocalizedData.ts

@@ -0,0 +1,12 @@
+export default async function useLocalizedData<T>(producer: (locale: string) => Promise<T>) {
+  const { currentLocale } = useLocale();
+  const data = ref(await producer(currentLocale.value));
+  watch(currentLocale, async () => {
+    data.value = await producer(currentLocale.value);
+  });
+
+  return {
+    currentLocale,
+    data
+  };
+}

pages/champions/[id].vue

@@ -5,14 +5,9 @@ const route = useRoute();
 const id = route.params.id as unknown;
 
 const { client } = useClient();
-const { currentLocale } = useLocale();
+const { currentLocale, data: champion } = await useLocalizedData(async (x) => await client.champions.getAsync(id as number, {locale: x, version: "latest"}));
-const getChampion = async () => await client.champions.getAsync(id as number, {locale: currentLocale.value, version: "latest"});
 
-const champion = ref(await getChampion());
 const data = computed(() => `https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champions/${champion.value.id}.json`);
-watch(currentLocale, async () => {
-  champion.value = await getChampion();
-});
 
 const currentSkin = ref(champion.value.skins[0]);
 const swapCurrentSkin = (id: number) => {

pages/champions/index.vue

@@ -1,17 +1,11 @@
 <script setup lang="ts">
 const { client } = useClient();
 const { currentLocale } = useLocale();
-const getSummaries = async () => (await client.championSummaries.listAsync({locale: currentLocale.value, version: "latest"}))
-    .filter((x) => x.id != -1) // Remove placeholder champion
-    .sort((a, b) => a.name.localeCompare(b.name));
-const getSkins = async () => await client.skins.listAsync({locale: currentLocale.value, version: "latest"});
 
-const summaries = ref(await getSummaries());
+const { data: summaries } = await useLocalizedData(async (x) => (await client.championSummaries.listAsync({locale: x, version: "latest"}))
-const skins = ref(await getSkins());
+    .filter((x) => x.id != -1) // Remove placeholder champion
-watch(currentLocale, async () => {
+    .sort((a, b) => a.name.localeCompare(b.name)));
-    summaries.value = await getSummaries();
+const { data: skins } = await useLocalizedData(async (x) => await client.skins.listAsync({locale: x, version: "latest"}));
-    skins.value = await getSkins();
-});
 
 const { query, results } = useQueryable(summaries, (x) => x.id, (x) => x.name);
 </script>

pages/cherry-augments/index.vue

@@ -1,14 +1,9 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getCherryAugments = async () => (await client.cherryAugments.listAsync({locale: currentLocale.value, version: "latest"}))
-  .sort((a, b) => a.id - b.id);
-
-const cherryAugments = ref(await getCherryAugments());
-watch (currentLocale, async() => {
-  cherryAugments.value = await getCherryAugments();
-});
 
+const { data: cherryAugments } = await useLocalizedData(async (x) => (await client.cherryAugments.listAsync({locale: x, version: "latest"}))
+  .sort((a, b) => a.id - b.id));
+  
 const { query, results } = useQueryable(cherryAugments, (x) => x.id, (x) => x.nameTRA);
 </script>
 

pages/companions/index.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getCompanions = async () => (await client.companions.listAsync({locale: currentLocale.value, version: "latest"}))
-.sort((a, b) => a.itemId - b.itemId);
 
-const companions = ref(await getCompanions());
+const { data: companions } = await useLocalizedData(async (x) => (await client.companions.listAsync({locale: x, version: "latest"}))
-watch(currentLocale, async() => {
+.sort((a, b) => a.itemId - b.itemId));
-  companions.value = await getCompanions();
-});
 
 const { query, paginate } = useQueryable(companions, (x) => x.itemId, (x) => x.name);
 const pagination = paginate(100);

pages/items/[id].vue

@@ -5,10 +5,9 @@ const route = useRoute();
 const id = route.params.id as unknown;
 
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getItems = async () => await client.items.listAsync({locale: currentLocale.value, version: "latest"});
 
-const items = ref(await getItems());
+const { data: items } = await useLocalizedData(async (x) => await client.items.listAsync({locale: x, version: "latest"}));
+
 const _default = new Item({});
 
 const item = computed(() => items.value.find((x) => x.id == id) || _default);

pages/items/index.vue

@@ -1,12 +1,7 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getItems = async () => await client.items.listAsync({ locale: currentLocale.value, version: "latest"});
 
-const items = ref(await getItems());
+const { data: items } = await useLocalizedData(async (x) => await client.items.listAsync({ locale: x, version: "latest"}));
-watch(currentLocale, async () => {
-    items.value = await getItems();
-});
 
 const { query, results } = useQueryable(items, (x) => x.id, (x) => x.name);
 </script>

pages/loots/index.vue

@@ -1,25 +1,22 @@
 <script setup lang="ts">
-import { Loot } from '../../core/models';
+import { Loot } from '~/core/models';
 
 const { client } = useClient();
-const { currentLocale } = useLocale();
 
 const query = ref("");
 const filter = ref("");
-const getLoots = async () => (await client.loots.listAsync({locale: currentLocale.value, version: "latest"}))
+
+const { data: loots } = await useLocalizedData(async (x) => (await client.loots.listAsync({locale: x, version: "latest"}))
   .sort((a, b) => a.id.localeCompare(b.id))
-  .filter((x) => x.id != "");
+  .filter((x) => x.id != ""));
-const getSummaries = async () => await client.championSummaries.listAsync({locale: currentLocale.value, version: "latest"});
+
+const { data: summaries } = await useLocalizedData(async (x) => await client.championSummaries.listAsync({locale: x, version: "latest"}));
 
 const clearFilter = () => filter.value = "";
 const applyFilter = (category: string) => filter.value = category;
 
-// Alphanumerically sort by id, remove null entries
-const loots = ref(await getLoots());
-
 const categories = new Set(loots.value.map((x) => x.type));
 
-const { isNumeric } = useIsNumeric();
 const pagination = computed(() => {
   let filtered = [];
   
@@ -30,19 +27,12 @@ const pagination = computed(() => {
   return usePagination(filtered, 100);
 });
 
-const summaries = ref(await getSummaries());
-
 const getLootImage = (loot: Loot) => {
   if (loot.type.includes('Statstone'))
     return summaries.value.find((x) => loot.name.toLowerCase().includes(x.name.toLowerCase()))?.getIcon({locale: "default", version: "latest"});
 
   return loot.getImage('latest');
 }
-
-watch(currentLocale, async() => {
-  loots.value = await getLoots();
-  summaries.value = await getSummaries();
-});
 </script>
 
 <template>  

pages/runes/index.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getRunes = async () => (await client.perks.listAsync({locale: currentLocale.value, version: "latest"}))
-.sort((a, b) => a.id - b.id)
 
-const runes = ref(await getRunes());
+const { data: runes } = await useLocalizedData(async (x) => (await client.perks.listAsync({locale: x, version: "latest"}))
-watch(currentLocale, async() => {
+.sort((a, b) => a.id - b.id));
-    runes.value = await getRunes();
-});
 
 const { query, results } = useQueryable(runes, (x) => x.id, (x) => x.name);
 </script>

pages/summoner-emotes/index.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getEmotes = async () => (await client.summonerEmotes.listAsync({locale: currentLocale.value, version: "latest"}))
-.sort((a, b) => a.id - b.id);
 
-const emotes = ref(await getEmotes());
+const { data: emotes } = await useLocalizedData(async (x) => (await client.summonerEmotes.listAsync({locale: x, version: "latest"}))
-watch(currentLocale, async() => {
+.sort((a, b) => a.id - b.id));
-  emotes.value = await getEmotes();
-});
 
 const { query, paginate } = useQueryable(emotes, (x) => x.id, (x) => x.name);
 const pagination = paginate(100);

pages/summoner-icons/index.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getIcons = async () => (await client.summonerIcons.listAsync({locale: currentLocale.value, version: "latest"}))
-.sort((a, b) => a.id - b.id);
 
-const icons = ref(await getIcons());
+const { data: icons } = await useLocalizedData(async (x) => (await client.summonerIcons.listAsync({locale: x, version: "latest"}))
-watch(currentLocale, async() => {
+.sort((a, b) => a.id - b.id));
-    icons.value = await getIcons();
-});
 
 const { query, paginate } = useQueryable(icons, (x) => x.id, (x) => x.title);
 const pagination = paginate(100);

pages/tft-damage-skins/index.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getTftDamageSkins = async () => (await client.tftDamageSkins.listAsync({ locale: currentLocale.value, version: "latest"}))
-  .sort((a, b) => a.itemId - b.itemId);
 
-const tftDamageSkins = ref(await getTftDamageSkins());
+const { currentLocale, data: tftDamageSkins } = await useLocalizedData(async (x) => (await client.tftDamageSkins.listAsync({ locale: x, version: "latest"}))
-watch(currentLocale, async() => {
+  .sort((a, b) => a.itemId - b.itemId));
-  tftDamageSkins.value = await getTftDamageSkins();
-});
 
 const { query, results } = useQueryable(tftDamageSkins, (x) => x.itemId, (x) => x.name);
 </script>

pages/tft-items/index.vue

@@ -1,12 +1,7 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getTftItems = async() => await client.tftItems.listAsync({ locale: currentLocale.value, version: "latest"});
 
-const tftItems = ref(await getTftItems());
+const { data: tftItems } = await useLocalizedData(async(x) => await client.tftItems.listAsync({ locale: x, version: "latest"}));
-watch(currentLocale, async() => {
-  tftItems.value = await getTftItems();
-});
 </script>
 
 <template>

pages/tft-map-skins/index.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getTftMapSkins = async () => (await client.tftMapSkins.listAsync({ locale: currentLocale.value, version: "latest"}))
-  .sort((a, b) => a.itemId - b.itemId);
 
-const tftMapSkins = ref(await getTftMapSkins());
+const { data: tftMapSkins } = await useLocalizedData(async (x) => (await client.tftMapSkins.listAsync({ locale: x, version: "latest"}))
-watch(currentLocale, async() => {
+  .sort((a, b) => a.itemId - b.itemId));
-  tftMapSkins.value = await getTftMapSkins();
-});
 
 const { query, results } = useQueryable(tftMapSkins, (x) => x.itemId, (x) => x.name);
 </script>

pages/ward-skins/index.vue

@@ -1,12 +1,7 @@
 <script setup lang="ts">
 const { client } = useClient();
-const { currentLocale } = useLocale();
-const getSkins = async () => await client.wardSkins.listAsync({locale: currentLocale.value, version: "latest"});
 
-const skins = ref(await getSkins());
+const { data: skins } = await useLocalizedData(async (x) => await client.wardSkins.listAsync({locale: x, version: "latest"}));
-watch(currentLocale, async() => {
-    skins.value = await getSkins();
-});
 
 const { query, results } = useQueryable(skins, (x) => x.id, (x) => x.name);
 </script>