Skip to content

Commit 977ae8d

Browse files
kennethingkennething
authored
Abstract router.push and router.replace (#32)
1 parent f2dc679 commit 977ae8d

File tree

14 files changed

+67
-63
lines changed

14 files changed

+67
-63
lines changed

‎app.vue‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@ useSeoMeta({
4949
});
5050
5151
const route = useRoute();
52-
const router = useRouter();
5352
5453
const userStore = useUserStore();
5554
const { isDarkMode } = storeToRefs(userStore);
@@ -98,18 +97,18 @@ onBeforeMount(() => {
9897
// layout
9998
const showContributors = ref(false);
10099
watch(showContributors, (value) => {
101-
if (!value) return void router.replace({ query: { ...route.query, ct: undefined } });
102-
if (!route.query.ct) void router.replace({ query: { ...route.query, ct: "true" } });
100+
if (!value) return void changeRouteQuery({ ct: undefined });
101+
if (!route.query.ct) void changeRouteQuery({ ct: "true" });
103102
});
104103
const showChangelog = ref(false);
105104
watch(showChangelog, (value) => {
106-
if (!value) return void router.replace({ query: { ...route.query, v: undefined } });
107-
if (!route.query.v) void router.replace({ query: { ...route.query, v: changelog[changelog.length - 1].version } });
105+
if (!value) return void changeRouteQuery({ v: undefined });
106+
if (!route.query.v) void changeRouteQuery({ v: changelog[changelog.length - 1].version });
108107
});
109108
const showContact = ref(false);
110109
watch(showContact, (value) => {
111-
if (!value) return void router.replace({ query: { ...route.query, c: undefined } });
112-
if (!route.query.c) void router.replace({ query: { ...route.query, c: "true" } });
110+
if (!value) return void changeRouteQuery({ c: undefined });
111+
if (!route.query.c) void changeRouteQuery({ c: "true" });
113112
});
114113
115114
function handleQueries(query: LocationQuery) {

‎components/Blueprints/Toolbar.vue‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,6 @@ watch(
129129
);
130130
131131
const route = useRoute();
132-
const router = useRouter();
133132
const userStore = useUserStore();
134133
135134
const toolbar = useTemplateRef("toolbar");
@@ -177,7 +176,7 @@ function createNewAccount() {
177176
if (!userStore.user) return;
178177
179178
userStore.createNewAccount = true;
180-
void router.push({ query: { ...route.query, a: userStore.user.blueprints.length } });
179+
void changeRouteQuery({ a: userStore.user.blueprints.length }, "push");
181180
}
182181
183182
async function saveBlueprints() {
@@ -257,7 +256,7 @@ async function deleteAccount() {
257256
if (!fetchSuccess && error) return console.error(error);
258257
259258
deleteSuccess.value = true;
260-
void router.replace({ query: { ...route.query, a: userStore.user.blueprints.length - 2 } });
259+
void changeRouteQuery({ a: userStore.user.blueprints.length - 2 });
261260
262261
setTimeout(() => {
263262
deleteModal.value = undefined;

‎components/Home/Contributors.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@
55
<div class="flex h-96 w-full flex-col gap-2 overflow-y-scroll p-4">
66
<HomeContributorsItem v-for="(contributor, index) in credits" :key="contributor.name" :contributor="contributor" :index="index" />
77
</div>
8-
<p>Got something to share? <button class="font-medium hover:underline" type="button" @click="router.push({ query: { c: 'true' } })">Reach out!</button></p>
8+
<p>Got something to share? <button class="font-medium hover:underline" type="button" @click="changeRouteQuery({ c: 'true' })">Reach out!</button></p>
99
</div>
1010
</template>
1111

12-
<script setup lang="ts">
13-
const router = useRouter();
14-
</script>
12+
<script setup lang="ts"></script>
1513

1614
<style scoped></style>

‎components/Home/Footer.vue‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88
<aside class="flex w-4/6 items-center justify-center sm:w-1/2 md:w-1/3 lg:w-1/2">
99
<p class="text-center transition duration-500">
1010
Gravity Assist
11-
<button type="button" class="text-lg font-semibold no-underline transition duration-500 hover:underline hover:duration-150 dark:hover:text-white" @click="footerOpenChangelog">
11+
<button
12+
type="button"
13+
class="text-lg font-semibold no-underline transition duration-500 hover:underline hover:duration-150 dark:hover:text-white"
14+
@click="changeRouteQuery({ v: changelog[changelog.length - 1].version })"
15+
>
1216
v{{ changelog[changelog.length - 1].version }}
1317
</button>
1418
by DubNubz
@@ -26,14 +30,7 @@
2630
</footer>
2731
</template>
2832

29-
<script setup lang="ts">
30-
const route = useRoute();
31-
const router = useRouter();
32-
33-
function footerOpenChangelog() {
34-
void router.replace({ query: { ...route.query, v: changelog[changelog.length - 1].version } });
35-
}
36-
</script>
33+
<script setup lang="ts"></script>
3734

3835
<style scoped>
3936
footer {

‎components/Library/Showcase/SourceBanner.vue‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</h5>
99
<span class="inline-flex flex-col items-center justify-center text-sm xl:flex-row xl:gap-1">
1010
Want to contribute? Check out
11-
<button class="flex items-center justify-center gap-1 font-medium hover:underline" type="button" @click="router.push({ query: { ...route.query, c: 'true' } })">
11+
<button class="flex items-center justify-center gap-1 font-medium hover:underline" type="button" @click="changeRouteQuery({ c: 'true' }, 'push')">
1212
how to contribute
1313
<span class="du-tooltip" data-tip="Contact">
1414
<span class="fo-btn fo-btn-circle fo-btn-text size-6 min-h-6">
@@ -24,11 +24,7 @@
2424
<script setup lang="ts">
2525
const props = defineProps<{ currentModule: AllModule | undefined }>();
2626
27-
const route = useRoute();
28-
const router = useRouter();
29-
3027
const mod = ref<AllModule>();
31-
3228
let lastModule: symbol | undefined;
3329
watch(
3430
() => props.currentModule,

‎components/Library/Showcase/UnknownHero.vue‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,13 @@
33
<p class="transition duration-500">Have this module unlocked? Contact me!</p>
44

55
<div class="du-tooltip mt-4" data-tip="Contact">
6-
<button type="button" class="fo-btn fo-btn-circle fo-btn-text" @click="router.push({ query: { ...route.query, c: 'true' } })">
6+
<button type="button" class="fo-btn fo-btn-circle fo-btn-text" @click="changeRouteQuery({ c: 'true' }, 'push')">
77
<img class="size-6 transition duration-500 dark:invert" src="/ui/contact.svg" alt="Contact me" />
88
</button>
99
</div>
1010
</div>
1111
</template>
1212

13-
<script setup lang="ts">
14-
const route = useRoute();
15-
const router = useRouter();
16-
</script>
13+
<script setup lang="ts"></script>
1714

1815
<style scoped></style>

‎components/Mail/Buttons/Save.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,6 @@
7474
import type { Op } from "quill";
7575
7676
const route = useRoute();
77-
const router = useRouter();
7877
7978
const userStore = useUserStore();
8079
const userQuery = route.query.u;
@@ -143,11 +142,13 @@ async function saveText() {
143142
success.value = true;
144143
(template as SaveTemplate) = content;
145144
userStore.user.savedMails = outcomeMails;
145+
146146
setTimeout(() => {
147147
success.value = false;
148148
emit("toggleDialog", false);
149149
}, 1000);
150-
void router.push({ query: { u: userStore.user.uid, id: content.id } });
150+
151+
void changeRouteQuery({ u: userStore.user.uid, id: content.id });
151152
emit("newQuery", userStore.user.uid, content.id);
152153
}
153154
}

‎pages/home.vue‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<p class="text-xl transition duration-500">
99
By
10-
<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>
10+
<button class="fo-link font-semibold no-underline transition duration-500 hover:underline" type="button" @click="changeRouteQuery({ c: 'true' })">DubNubz</button>
1111
</p>
1212

1313
<div class="mt-8 flex flex-col items-center justify-center gap-2">
@@ -22,11 +22,11 @@
2222
<div class="min-w-[20rem] rounded-2xl bg-neutral-100/50 p-4 transition duration-500 dark:bg-neutral-900">
2323
<div class="w-full p-4">
2424
<ol class="relative border-s border-neutral-200 transition duration-500 dark:border-neutral-700">
25-
<HomeChangelogItem class="ms-6" :change="latestChange" />
25+
<HomeChangelogItem class="ms-6" :change="changelog[changelog.length - 1]" />
2626
</ol>
2727
</div>
2828
</div>
29-
<button type="button" class="flex w-full items-center justify-end gap-2" @click="router.push({ query: { v: 'latest' } })">
29+
<button type="button" class="flex w-full items-center justify-end gap-2" @click="changeRouteQuery({ v: 'latest' }, 'push')">
3030
<p class="transition duration-500 hover:underline">View full changelog</p>
3131
<div class="du-tooltip" data-tip="View">
3232
<div class="fo-btn fo-btn-circle fo-btn-text">
@@ -43,7 +43,7 @@
4343
</div>
4444
<div class="flex w-[80vw] flex-col gap-2 md:w-[25rem] lg:w-[35rem] xl:w-[40rem]">
4545
<HomeContributorsItem v-for="(contributor, index) in credits.slice(0, 5)" :key="contributor.name" :contributor="contributor" :index="index" />
46-
<button type="button" class="flex w-full items-center justify-end gap-2" @click="router.push({ query: { ct: 'true' } })">
46+
<button type="button" class="flex w-full items-center justify-end gap-2" @click="changeRouteQuery({ ct: 'true' }, 'push')">
4747
<p class="transition duration-500 hover:underline">View all contributors</p>
4848
<div class="du-tooltip" data-tip="View">
4949
<div class="fo-btn fo-btn-circle fo-btn-text">
@@ -84,11 +84,6 @@ useSeoMeta({
8484
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.",
8585
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."
8686
});
87-
88-
const route = useRoute();
89-
const router = useRouter();
90-
91-
const latestChange = changelog[changelog.length - 1];
9287
</script>
9388

9489
<style scoped></style>

‎pages/index.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44

55
<script setup lang="ts">
66
const router = useRouter();
7-
87
onMounted(() => router.replace("/home"));
98
</script>
109

‎pages/modules/blueprint-tracker.vue‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ const lastSaved = ref("");
5555
const data = ref<BlueprintAllShip[]>();
5656
5757
const route = useRoute();
58-
const router = useRouter();
5958
const userStore = useUserStore();
6059
6160
const accountIndex = ref(0);
@@ -78,11 +77,11 @@ onMounted(() => (data.value = userStore.blueprintsAutosave));
7877
const isOwner = computed(() => {
7978
if (!userStore.shipData) return;
8079
if (!route.query.u && userStore.user) {
81-
void router.replace({ query: { ...route.query, u: userStore.user.uid } });
80+
void changeRouteQuery({ u: userStore.user.uid });
8281
return true;
8382
}
8483
if (!route.query.a) {
85-
void router.replace({ query: { ...route.query, a: 0 } });
84+
void changeRouteQuery({ a: 0 });
8685
return true;
8786
}
8887
@@ -142,13 +141,13 @@ onMounted(() => {
142141
143142
async function getAccount(data: AllShip[]): Promise<BlueprintAllShip[] | undefined> {
144143
// prettier-ignore
145-
const { success, error, content, lastSaved: bpLastSaved } =
144+
const { success, error, content, lastSaved: bpLastSaved } =
146145
await $fetch("/api/getBlueprints", { method: "POST", body: { uid: route.query.u ?? userStore.user?.uid, accountIndex: accountIndex.value } });
147146
148147
if (!success && error) {
149148
console.error(error);
150149
if (route.query.a !== "0") {
151-
await router.replace({ query: { ...route.query, a: 0 } });
150+
await changeRouteQuery({ a: 0 });
152151
userStore.hasUnsavedChanges = false;
153152
window.location.reload();
154153
return;
@@ -177,7 +176,6 @@ async function getAccount(data: AllShip[]): Promise<BlueprintAllShip[] | undefin
177176
function createAccount(data: AllShip[]): BlueprintAllShip[] {
178177
if (userStore.user && !userStore.user.blueprints.some((account) => getObjectKey(account) === "Unnamed" && getObjectValue(account).length === 0)) userStore.user.blueprints.push({ Unnamed: [] });
179178
180-
lastSaved.value = new Date().toISOString().slice(0, 10);
181179
userStore.createNewAccount = false;
182180
userStore.isUnsavedAccount = true;
183181
return data.map((ship) => {

0 commit comments

Comments
 (0)