Extract api request logic into component

showbits-thermal-printer-ui/eslint.config.ts

@@ -37,7 +37,6 @@ export default tseslint.config(
       eqeqeq: "error",
 
       // https://typescript-eslint.io/rules/
-      "@typescript-eslint/explicit-function-return-type": "warn",
       "@typescript-eslint/naming-convention": [
         "warn",
         // Default settings

showbits-thermal-printer-ui/src/apiRequest.ts

@@ -0,0 +1,35 @@
+import { ref } from "vue";
+
+async function waitAtLeast(duration: number, since: number): Promise<void> {
+  const now = Date.now();
+  const wait = duration - (now - since);
+  if (wait > 0) {
+    await new Promise((resolve) => setTimeout(resolve, wait));
+  }
+}
+
+export function useApiRequest() {
+  const disabled = ref(false);
+  const error = ref<string>();
+
+  async function makeRequest(url: string, data: URLSearchParams | FormData) {
+    const start = Date.now();
+    disabled.value = true;
+
+    try {
+      const response = await fetch(url, { method: "POST", body: data });
+      if (!response.ok) {
+        const status = `${response.status.toFixed()} ${response.statusText}`;
+        const text = await response.text();
+        error.value = text.length > 0 ? `${status}: ${text}` : status;
+      }
+    } catch (err) {
+      error.value = String(err);
+    }
+
+    await waitAtLeast(500, start);
+    disabled.value = false;
+  }
+
+  return { disabled, error, makeRequest };
+}

showbits-thermal-printer-ui/src/components/CSegmentCalendar.vue

@@ -1,48 +1,22 @@
 <script setup lang="ts">
+import { useApiRequest } from "@/apiRequest";
 import { ref, useTemplateRef } from "vue";
 import CSegmentError from "./CSegmentError.vue";
 
+const { disabled, error, makeRequest } = useApiRequest();
 const form = useTemplateRef<HTMLFormElement>("form");
-const disabled = ref(false);
-const error = ref<string>();
 
 const today = new Date();
 const year = ref(today.getFullYear());
 const month = ref(today.getMonth() + 1);
 const feed = ref(true);
 
-async function waitAtLeast(duration: number, since: number): Promise<void> {
+function submit() {
-  const now = Date.now();
-  const wait = duration - (now - since);
-  if (wait > 0) {
-    await new Promise((resolve) => setTimeout(resolve, wait));
-  }
-}
-
-async function submit(): Promise<void> {
-  const start = Date.now();
-  disabled.value = true;
-
-  try {
   const data = new URLSearchParams();
   data.append("year", String(year.value));
   data.append("month", String(month.value));
   data.append("feed", String(feed.value));
-    const response = await fetch("/api/calendar", {
+  void makeRequest("/api/calendar", data);
-      method: "POST",
-      body: data,
-    });
-    if (!response.ok) {
-      const status = `${response.status.toFixed()} ${response.statusText}`;
-      const text = await response.text();
-      error.value = text.length > 0 ? `${status}: ${text}` : status;
-    }
-  } catch (err) {
-    error.value = String(err);
-  }
-
-  await waitAtLeast(500, start);
-  disabled.value = false;
 }
 </script>
 

showbits-thermal-printer-ui/src/components/CSegmentText.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
+import { useApiRequest } from "@/apiRequest";
 import { computed, ref, type StyleValue, useTemplateRef } from "vue";
 import CSegmentError from "./CSegmentError.vue";
 
+const { disabled, error, makeRequest } = useApiRequest();
 const form = useTemplateRef<HTMLFormElement>("form");
-const disabled = ref(false);
-const error = ref<string>();
 
 const text = ref("");
 const forceWrap = ref(false);
@@ -22,35 +22,12 @@ function textareaKeypress(ev: KeyboardEvent): void {
   }
 }
 
-async function waitAtLeast(duration: number, since: number): Promise<void> {
+function submit() {
-  const now = Date.now();
-  const wait = duration - (now - since);
-  if (wait > 0) {
-    await new Promise((resolve) => setTimeout(resolve, wait));
-  }
-}
-
-async function submit(): Promise<void> {
-  const start = Date.now();
-  disabled.value = true;
-
-  try {
   const data = new URLSearchParams();
   data.append("text", text.value);
   data.append("force_wrap", String(forceWrap.value));
   data.append("feed", String(feed.value));
-    const response = await fetch("/api/text", { method: "POST", body: data });
+  void makeRequest("/api/text", data);
-    if (!response.ok) {
-      const status = `${response.status.toFixed()} ${response.statusText}`;
-      const text = await response.text();
-      error.value = text.length > 0 ? `${status}: ${text}` : status;
-    }
-  } catch (err) {
-    error.value = String(err);
-  }
-
-  await waitAtLeast(500, start);
-  disabled.value = false;
 }
 </script>