Abstract router.push and router.replace

app.vue

@@ -49,7 +49,6 @@ useSeoMeta({
 });
 
 const route = useRoute();
-const router = useRouter();
 
 const userStore = useUserStore();
 const { isDarkMode } = storeToRefs(userStore);
@@ -98,18 +97,18 @@ onBeforeMount(() => {
 // layout
 const showContributors = ref(false);
 watch(showContributors, (value) => {
-  if (!value) return void router.replace({ query: { ...route.query, ct: undefined } });
-  if (!route.query.ct) void router.replace({ query: { ...route.query, ct: "true" } });
+  if (!value) return void changeRouteQuery({ ct: undefined });
+  if (!route.query.ct) void changeRouteQuery({ ct: "true" });
 });
 const showChangelog = ref(false);
 watch(showChangelog, (value) => {
-  if (!value) return void router.replace({ query: { ...route.query, v: undefined } });
-  if (!route.query.v) void router.replace({ query: { ...route.query, v: changelog[changelog.length - 1].version } });
+  if (!value) return void changeRouteQuery({ v: undefined });
+  if (!route.query.v) void changeRouteQuery({ v: changelog[changelog.length - 1].version });
 });
 const showContact = ref(false);
 watch(showContact, (value) => {
-  if (!value) return void router.replace({ query: { ...route.query, c: undefined } });
-  if (!route.query.c) void router.replace({ query: { ...route.query, c: "true" } });
+  if (!value) return void changeRouteQuery({ c: undefined });
+  if (!route.query.c) void changeRouteQuery({ c: "true" });
 });
 
 function handleQueries(query: LocationQuery) {

components/Blueprints/Toolbar.vue

@@ -129,7 +129,6 @@ watch(
 );
 
 const route = useRoute();
-const router = useRouter();
 const userStore = useUserStore();
 
 const toolbar = useTemplateRef("toolbar");
@@ -177,7 +176,7 @@ function createNewAccount() {
   if (!userStore.user) return;
 
   userStore.createNewAccount = true;
-  void router.push({ query: { ...route.query, a: userStore.user.blueprints.length } });
+  void changeRouteQuery({ a: userStore.user.blueprints.length }, "push");
 }
 
 async function saveBlueprints() {
@@ -257,7 +256,7 @@ async function deleteAccount() {
   if (!fetchSuccess && error) return console.error(error);
 
   deleteSuccess.value = true;
-  void router.replace({ query: { ...route.query, a: userStore.user.blueprints.length - 2 } });
+  void changeRouteQuery({ a: userStore.user.blueprints.length - 2 });
 
   setTimeout(() => {
     deleteModal.value = undefined;

components/Home/Contributors.vue

@@ -5,12 +5,10 @@
     <div class="flex h-96 w-full flex-col gap-2 overflow-y-scroll p-4">
       <HomeContributorsItem v-for="(contributor, index) in credits" :key="contributor.name" :contributor="contributor" :index="index" />
     </div>
-    <p>Got something to share? <button class="font-medium hover:underline" type="button" @click="router.push({ query: { c: 'true' } })">Reach out!</button></p>
+    <p>Got something to share? <button class="font-medium hover:underline" type="button" @click="changeRouteQuery({ c: 'true' })">Reach out!</button></p>
   </div>
 </template>
 
-<script setup lang="ts">
-const router = useRouter();
-</script>
+<script setup lang="ts"></script>
 
 <style scoped></style>

components/Home/Footer.vue

@@ -8,7 +8,11 @@
       <aside class="flex w-4/6 items-center justify-center sm:w-1/2 md:w-1/3 lg:w-1/2">
         <p class="text-center transition duration-500">
           Gravity Assist
-          <button type="button" class="text-lg font-semibold no-underline transition duration-500 hover:underline hover:duration-150 dark:hover:text-white" @click="footerOpenChangelog">
+          <button
+            type="button"
+            class="text-lg font-semibold no-underline transition duration-500 hover:underline hover:duration-150 dark:hover:text-white"
+            @click="changeRouteQuery({ v: changelog[changelog.length - 1].version })"
+          >
             v{{ changelog[changelog.length - 1].version }}
           </button>
           by DubNubz
@@ -26,14 +30,7 @@
   </footer>
 </template>
 
-<script setup lang="ts">
-const route = useRoute();
-const router = useRouter();
-
-function footerOpenChangelog() {
-  void router.replace({ query: { ...route.query, v: changelog[changelog.length - 1].version } });
-}
-</script>
+<script setup lang="ts"></script>
 
 <style scoped>
 footer {

components/Library/Showcase/SourceBanner.vue

@@ -8,7 +8,7 @@
       </h5>
       <span class="inline-flex flex-col items-center justify-center text-sm xl:flex-row xl:gap-1">
         Want to contribute? Check out
-        <button class="flex items-center justify-center gap-1 font-medium hover:underline" type="button" @click="router.push({ query: { ...route.query, c: 'true' } })">
+        <button class="flex items-center justify-center gap-1 font-medium hover:underline" type="button" @click="changeRouteQuery({ c: 'true' }, 'push')">
           how to contribute
           <span class="du-tooltip" data-tip="Contact">
             <span class="fo-btn fo-btn-circle fo-btn-text size-6 min-h-6">
@@ -24,11 +24,7 @@
 <script setup lang="ts">
 const props = defineProps<{ currentModule: AllModule | undefined }>();
 
-const route = useRoute();
-const router = useRouter();
-
 const mod = ref<AllModule>();
-
 let lastModule: symbol | undefined;
 watch(
   () => props.currentModule,

components/Library/Showcase/UnknownHero.vue

@@ -3,16 +3,13 @@
     <p class="transition duration-500">Have this module unlocked? Contact me!</p>
 
     <div class="du-tooltip mt-4" data-tip="Contact">
-      <button type="button" class="fo-btn fo-btn-circle fo-btn-text" @click="router.push({ query: { ...route.query, c: 'true' } })">
+      <button type="button" class="fo-btn fo-btn-circle fo-btn-text" @click="changeRouteQuery({ c: 'true' }, 'push')">
         <img class="size-6 transition duration-500 dark:invert" src="/ui/contact.svg" alt="Contact me" />
       </button>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-const route = useRoute();
-const router = useRouter();
-</script>
+<script setup lang="ts"></script>
 
 <style scoped></style>

components/Mail/Buttons/Save.vue

@@ -74,7 +74,6 @@
 import type { Op } from "quill";
 
 const route = useRoute();
-const router = useRouter();
 
 const userStore = useUserStore();
 const userQuery = route.query.u;
@@ -143,11 +142,13 @@ async function saveText() {
     success.value = true;
     (template as SaveTemplate) = content;
     userStore.user.savedMails = outcomeMails;
+
     setTimeout(() => {
       success.value = false;
       emit("toggleDialog", false);
     }, 1000);
-    void router.push({ query: { u: userStore.user.uid, id: content.id } });
+
+    void changeRouteQuery({ u: userStore.user.uid, id: content.id });
     emit("newQuery", userStore.user.uid, content.id);
   }
 }

pages/home.vue

@@ -7,7 +7,7 @@
 
     <p class="text-xl transition duration-500">
       By
-      <button class="fo-link font-semibold no-underline transition duration-500 hover:underline" type="button" @click="router.replace({ query: { ...route.query, c: 'true' } })">DubNubz</button>
+      <button class="fo-link font-semibold no-underline transition duration-500 hover:underline" type="button" @click="changeRouteQuery({ c: 'true' })">DubNubz</button>
     </p>
 
     <div class="mt-8 flex flex-col items-center justify-center gap-2">
@@ -22,11 +22,11 @@
       <div class="min-w-[20rem] rounded-2xl bg-neutral-100/50 p-4 transition duration-500 dark:bg-neutral-900">
         <div class="w-full p-4">
           <ol class="relative border-s border-neutral-200 transition duration-500 dark:border-neutral-700">
-            <HomeChangelogItem class="ms-6" :change="latestChange" />
+            <HomeChangelogItem class="ms-6" :change="changelog[changelog.length - 1]" />
           </ol>
         </div>
       </div>
-      <button type="button" class="flex w-full items-center justify-end gap-2" @click="router.push({ query: { v: 'latest' } })">
+      <button type="button" class="flex w-full items-center justify-end gap-2" @click="changeRouteQuery({ v: 'latest' }, 'push')">
         <p class="transition duration-500 hover:underline">View full changelog</p>
         <div class="du-tooltip" data-tip="View">
           <div class="fo-btn fo-btn-circle fo-btn-text">
@@ -43,7 +43,7 @@
       </div>
       <div class="flex w-[80vw] flex-col gap-2 md:w-[25rem] lg:w-[35rem] xl:w-[40rem]">
         <HomeContributorsItem v-for="(contributor, index) in credits.slice(0, 5)" :key="contributor.name" :contributor="contributor" :index="index" />
-        <button type="button" class="flex w-full items-center justify-end gap-2" @click="router.push({ query: { ct: 'true' } })">
+        <button type="button" class="flex w-full items-center justify-end gap-2" @click="changeRouteQuery({ ct: 'true' }, 'push')">
           <p class="transition duration-500 hover:underline">View all contributors</p>
           <div class="du-tooltip" data-tip="View">
             <div class="fo-btn fo-btn-circle fo-btn-text">
@@ -84,11 +84,6 @@ useSeoMeta({
   ogDescription: "Create colored text, search modules and research paths, track your progress, and more. Gravity Assist is an all-in-one tool for anything you may need in Infinite Lagrange.",
   twitterDescription: "Create colored text, search modules and research paths, track your progress, and more. Gravity Assist is an all-in-one tool for anything you may need in Infinite Lagrange."
 });
-
-const route = useRoute();
-const router = useRouter();
-
-const latestChange = changelog[changelog.length - 1];
 </script>
 
 <style scoped></style>

pages/index.vue

@@ -4,7 +4,6 @@
 
 <script setup lang="ts">
 const router = useRouter();
-
 onMounted(() => router.replace("/home"));
 </script>
 

pages/modules/blueprint-tracker.vue

@@ -55,7 +55,6 @@ const lastSaved = ref("");
 const data = ref<BlueprintAllShip[]>();
 
 const route = useRoute();
-const router = useRouter();
 const userStore = useUserStore();
 
 const accountIndex = ref(0);
@@ -78,11 +77,11 @@ onMounted(() => (data.value = userStore.blueprintsAutosave));
 const isOwner = computed(() => {
   if (!userStore.shipData) return;
   if (!route.query.u && userStore.user) {
-    void router.replace({ query: { ...route.query, u: userStore.user.uid } });
+    void changeRouteQuery({ u: userStore.user.uid });
     return true;
   }
   if (!route.query.a) {
-    void router.replace({ query: { ...route.query, a: 0 } });
+    void changeRouteQuery({ a: 0 });
     return true;
   }
 
@@ -142,13 +141,13 @@ onMounted(() => {
 
 async function getAccount(data: AllShip[]): Promise<BlueprintAllShip[] | undefined> {
   // prettier-ignore
-  const { success, error, content, lastSaved: bpLastSaved } = 
+  const { success, error, content, lastSaved: bpLastSaved } =
   await $fetch("/api/getBlueprints", { method: "POST", body: { uid: route.query.u ?? userStore.user?.uid, accountIndex: accountIndex.value } });
 
   if (!success && error) {
     console.error(error);
     if (route.query.a !== "0") {
-      await router.replace({ query: { ...route.query, a: 0 } });
+      await changeRouteQuery({ a: 0 });
       userStore.hasUnsavedChanges = false;
       window.location.reload();
       return;
@@ -177,7 +176,6 @@ async function getAccount(data: AllShip[]): Promise<BlueprintAllShip[] | undefin
 function createAccount(data: AllShip[]): BlueprintAllShip[] {
   if (userStore.user && !userStore.user.blueprints.some((account) => getObjectKey(account) === "Unnamed" && getObjectValue(account).length === 0)) userStore.user.blueprints.push({ Unnamed: [] });
 
-  lastSaved.value = new Date().toISOString().slice(0, 10);
   userStore.createNewAccount = false;
   userStore.isUnsavedAccount = true;
   return data.map((ship) => {

pages/modules/module-library.vue

@@ -51,7 +51,7 @@ const currentShip = ref<SuperCapitalShip>();
 watch(currentShip, () => router.push({ query: { s: currentShip.value?.name } }));
 
 const currentModule = ref<AllModule>();
-watch(currentModule, () => router.push({ query: { ...route.query, m: currentModule.value?.system } }));
+watch(currentModule, () => changeRouteQuery({ m: currentModule.value?.system }, "push"));
 
 useSeoMeta({
   title: () => `${currentModule.value?.system ? `${currentModule.value?.system} / ` : ""}${currentShip.value?.name ?? "Constantine the Great"} - Module Library | Gravity Assist`,
@@ -95,7 +95,7 @@ function handleQueries() {
 watch(() => route.query, handleQueries);
 
 onMounted(async () => {
-  if (!route.query.s) await router.replace({ query: { ...route.query, s: "Constantine the Great" } });
+  if (!route.query.s) await changeRouteQuery({ s: "Constantine the Great" });
   handleQueries();
   loaded.value = true;
 });

pages/modules/research-agreement-helper.vue

@@ -45,7 +45,6 @@ const selectedScope = ref(0);
 const selectedScopeValue = computed(() => scopes[selectedScope.value]);
 
 const route = useRoute();
-const router = useRouter();
 const config = useRuntimeConfig();
 
 useSeoMeta({
@@ -120,9 +119,10 @@ function selectShip(ship: AllShip | undefined, setPath = false, manualData?: All
 
   localStorage.setItem("rahelper", JSON.stringify([selectedManufacturer.value, selectedDirection.value, selectedScope.value, selectedShip.value?.name, selectedShip.value?.variant]));
 
-  if (isReplacing)
-    return void router.replace({ query: { m: selectedManufacturer.value, d: selectedDirection.value, s: selectedScope.value, shn: selectedShip.value?.name, shv: selectedShip.value?.variant } });
-  void router.push({ query: { m: selectedManufacturer.value, d: selectedDirection.value, s: selectedScope.value, shn: selectedShip.value?.name, shv: selectedShip.value?.variant } });
+  return void changeRouteQuery(
+    { m: selectedManufacturer.value, d: selectedDirection.value, s: selectedScope.value, shn: selectedShip.value?.name, shv: selectedShip.value?.variant },
+    isReplacing ? "replace" : "push"
+  );
 }
 
 function handleQueries() {
@@ -175,7 +175,7 @@ function handleOptionChange(type: "manufacturer" | "direction" | "scope", next:
   };
   options[type].value = next;
   localStorage.setItem("rahelper", JSON.stringify([selectedManufacturer.value, selectedDirection.value, selectedScope.value, selectedShip.value?.name, selectedShip.value?.variant]));
-  void router.push({ query: { m: selectedManufacturer.value, d: selectedDirection.value, s: selectedScope.value, shn: selectedShip.value?.name, shv: selectedShip.value?.variant } });
+  void changeRouteQuery({ m: selectedManufacturer.value, d: selectedDirection.value, s: selectedScope.value, shn: selectedShip.value?.name, shv: selectedShip.value?.variant }, "push");
 }
 </script>
 

utils/changelog.ts

@@ -397,5 +397,16 @@ export const changelog: readonly Changelog[] = [
       "Improved icons in Module Library",
       "Added more information to Module Library"
     ]
+  },
+  {
+    type: "bugfix",
+    version: "2.0.0.1",
+    release: "2025-02-02",
+    notes: [
+      "Fixed a bug where creating a new BP Tracker account before saving would cause problems",
+      "Fixed a bug where accessing nonexistent BP Tracker accounts in the route query would cause problems",
+      "Fixed a bug where not passing a BP Tracker account in the route query would not update the cards",
+      "Fixed a bug where changing BP Tracker account names and deleting accounts would delete the current selected account"
+    ]
   }
 ];

utils/functions.ts

@@ -26,9 +26,9 @@ export function getRandomItem<T>(array: T[] | string) {
  *
  * @param condition - Function that returns a boolean indicating whether the condition is fulfilled.
  * @param callback - Function to execute once the condition is fulfilled.
- * @param defaultValue - Default value to return if the condition is not fulfilled within the specified timeout. Defaults to undefined.
- * @param timeout - Maximum time, in milliseconds, to wait for the condition to be fulfilled. Defaults to 1000ms.
- * @param interval - Time, in milliseconds, between checks of the condition. Defaults to 100ms.
+ * @param defaultValue - Default value to return if the condition is not fulfilled within the specified timeout. Defaults to `undefined`.
+ * @param timeout - Maximum time, in milliseconds, to wait for the condition to be fulfilled. Defaults to `1000ms`.
+ * @param interval - Time, in milliseconds, between checks of the condition. Defaults to `100ms`.
  * @returns The result of the callback function.
  */
 export async function waitUntil<T>(condition: () => boolean, callback: () => T, defaultValue: T, timeout?: number, interval?: number): Promise<T>;
@@ -37,8 +37,8 @@ export async function waitUntil<T>(condition: () => boolean, callback: () => T,
  *
  * @param condition - Function that returns a boolean indicating whether the condition is fulfilled.
  * @param callback - Function to execute once the condition is fulfilled.
- * @param timeout - Maximum time, in milliseconds, to wait for the condition to be fulfilled. Defaults to 1000ms.
- * @param interval - Time, in milliseconds, between checks of the condition. Defaults to 100ms.
+ * @param timeout - Maximum time, in milliseconds, to wait for the condition to be fulfilled. Defaults to `1000ms`.
+ * @param interval - Time, in milliseconds, between checks of the condition. Defaults to `100ms`.
  * @returns The result of the callback function.
  */
 export async function waitUntil<T>(condition: () => boolean, callback: () => T, timeout?: number, interval?: number): Promise<T | undefined>;
@@ -60,6 +60,20 @@ export async function waitUntil<T>(condition: () => boolean, callback: () => T,
   });
 }
 
+/**
+ * Modifies the current route's query parameters.
+ *
+ * @param query - An object representing the query parameters to add or update.
+ * @param replace - Whether to use `router.push` or `router.replace` to change the route. Defaults to `replace`.
+ */
+export async function changeRouteQuery(query: Record<string, string | number | undefined>, method: "replace" | "push" = "replace"): Promise<void> {
+  const route = useRoute();
+  const router = useRouter();
+
+  if (method === "replace") return void (await router.replace({ query: { ...route.query, ...query } }));
+  await router.push({ query: { ...route.query, ...query } });
+}
+
 const dateOptions: Readonly<Record<string, Record<string, string>>> = {
   full: { dateStyle: "long", timeZone: "UTC" },
   numeric: { dateStyle: "short", timeZone: "UTC" }