✨ (convert): Add browser back button support to the interactive conve…

…rter

src/components/InteractiveConverter.vue

@@ -70,7 +70,12 @@ const emit = defineEmits(["query"]);
 
 const rules = useQueryRules(/[^0-9]/);
 
-const { query, pairs, result, valid, loading } = useQueryConverter("number", props, emit, true);
+const { query, pairs, result, valid, loading, updateUrl } = useQueryConverter(
+  "number",
+  props,
+  emit,
+  true
+);
 
 const phrase = computed(() => {
   return pairs.value.map((e) => e.word).join(" ");
@@ -92,8 +97,7 @@ const keyEvent = async (event) => {
     const addedLength = pairs.value[pairs.value.length - 1].number.length;
     const prevSelectionStart = target.selectionStart;
     const prevSelectionEnd = target.selectionEnd;
-    goBack();
-    await nextTick();
+    await goBack();
     target.selectionStart = prevSelectionStart + addedLength;
     target.selectionEnd = prevSelectionEnd + addedLength;
   } else if (target.selectionStart === 1) {
@@ -114,32 +118,35 @@ const selectEvent = async (event) => {
     moved = false;
     return;
   }
-  goBackTo(0);
-  await nextTick();
+  await goBackTo(0);
   target.selectionStart = 0;
   target.selectionEnd = query.value.length;
 };
 
-const clear = () => {
+const clear = async () => {
   query.value = "";
   pairs.value = [];
+  await updateUrl(true);
 };
 
-const select = (pair) => {
+const select = async (pair) => {
   pairs.value.push(pair);
   query.value = query.value.slice(pair.number.length);
+  await updateUrl(true);
 };
 
-const goBack = (n = 1) => {
+const goBack = async (n = 1) => {
   for (let i = 0; i < n; i += 1) {
     query.value = pairs.value.pop().number + query.value;
   }
+  await updateUrl(true);
 };
 
-const goBackTo = (key) => {
+const goBackTo = async (key) => {
   if (pairs.value.length) {
-    goBack(pairs.value.length - key);
+    await goBack(pairs.value.length - key);
   }
+  await updateUrl(true);
 };
 </script>
 

src/components/InteractiveToolbar.vue

@@ -36,10 +36,12 @@ const emit = defineEmits(["go-back", "go-back-to"]);
 
 const showBackTooltip = ref(false);
 
+const router = useRouter();
+
 const goBack = () => {
   if (props.pairs.length === 1) {
     showBackTooltip.value = false;
   }
-  emit("go-back");
+  router.go(-1);
 };
 </script>

src/composables/query_converter.js

@@ -3,6 +3,7 @@ import { useRoute } from "vue-router";
 import { useConversionApi, wordlistReady } from "./conversion_api";
 import debounce from "lodash/debounce";
 import router from "../plugins/router";
+import { castArray } from "../util/helpers";
 
 export const castPair = (val) =>
   val.map((p) => {
@@ -24,11 +25,11 @@ export const useQueryConverter = (type, props, emit, usePairs = false) => {
     () => route.query,
     (val) => {
       if (props.isActive && val) {
-        if (val.q) {
-          query.value = val.q;
+        if (val.q || val.pair) {
+          query.value = val.q || "";
         }
         if (usePairs && val.pair) {
-          pairs.value = castPair(val.pair);
+          pairs.value = castPair(castArray(val.pair));
         } else {
           pairs.value = [];
         }
@@ -48,10 +49,14 @@ export const useQueryConverter = (type, props, emit, usePairs = false) => {
     return result;
   };
 
-  const updateUrl = async () => {
+  const updateUrl = async (push = false) => {
     const query = buildQueryParams();
     if (!isEqual(query, route.query)) {
-      await router.replace({ ...route, query });
+      if (push) {
+        await router.push({ ...route, query });
+      } else {
+        await router.replace({ ...route, query });
+      }
     }
     emit("query", query);
   };
@@ -83,5 +88,5 @@ export const useQueryConverter = (type, props, emit, usePairs = false) => {
     }
   });
 
-  return { query, pairs, result, valid, loading };
+  return { query, pairs, result, valid, loading, updateUrl };
 };