From d3579b5d8625222ccdfd1c39c4df5688f4de0d0d Mon Sep 17 00:00:00 2001
From: Kevin Beier <beierkevin2002@outlook.com>
Date: Sun, 28 May 2023 16:44:37 +0200
Subject: [PATCH 1/2] cleaner overall composable conventions

---
 src/components/LogOutput/LogOutput.vue        | 14 +++---
 .../MainVideoStream/MainVideoStream.vue       |  7 ++-
 src/components/Navigation/Navigation.vue      | 26 +++--------
 .../useForceRerender/useForceRerender.test.ts |  9 ++--
 .../useForceRerender/useForceRerender.ts      | 27 +++++++-----
 src/composables/useRunning/useRunning.ts      | 18 +++++---
 src/views/CapturePage.vue                     | 43 +++++-------------
 src/views/RegexView.vue                       | 44 ++++++-------------
 8 files changed, 77 insertions(+), 111 deletions(-)

diff --git a/src/components/LogOutput/LogOutput.vue b/src/components/LogOutput/LogOutput.vue
index 34c1a81..4294dad 100644
--- a/src/components/LogOutput/LogOutput.vue
+++ b/src/components/LogOutput/LogOutput.vue
@@ -9,15 +9,11 @@
             <v-list v-else lines="three" disabled class="reverse">
                 <v-list-item v-for="(item, i) in matchedElements" :key="i">
                     <template v-slot:prepend>
-                        <v-icon
-                            :color="item.rating > 0 ? 'success' : 'error'"
-                            icon="mdi-information"
-                        ></v-icon>
+                        <v-icon :color="item.rating > 0 ? 'success' : 'error'" icon="mdi-information"></v-icon>
                     </template>
 
                     <v-list-item-title expand-icon="mdi-menu-down">
-                        {{ item.timestamp }}</v-list-item-title
-                    >
+                        {{ item.timestamp }}</v-list-item-title>
                     <div>Element: {{ item.match.element }}</div>
                     <div>Rating: {{ item.rating }}</div>
                 </v-list-item>
@@ -29,12 +25,15 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { Vigad } from '@/proc/Vigad';
-import { isRunning } from '@/composables/useRunning/useRunning';
+import useRunning from '@/composables/useRunning/useRunning';
 
 const props = defineProps<{
     captureAreaId: number;
 }>();
 
+// Use the useRunning composable to get the isRunning state and the start/stop functions
+const { isRunning } = useRunning();
+
 /**
  * Get singelton instance reference to vigad
  */
@@ -90,6 +89,7 @@ watch(isRunning, (newValue) => {
     max-height: 400px;
     overflow-y: auto;
 }
+
 .reverse {
     display: flex;
     flex-direction: column-reverse;
diff --git a/src/components/MainVideoStream/MainVideoStream.vue b/src/components/MainVideoStream/MainVideoStream.vue
index 9926c8b..c41c70b 100644
--- a/src/components/MainVideoStream/MainVideoStream.vue
+++ b/src/components/MainVideoStream/MainVideoStream.vue
@@ -42,9 +42,14 @@ import { useElementSize } from '@vueuse/core';
 import { Vigad } from '@/proc/Vigad';
 // @ts-ignore
 import VueDragResize from 'vue3-drag-resize';
-import { isRerendering } from '@/composables/useForceRerender/useForceRerender';
+import useForceRerender from '@/composables/useForceRerender/useForceRerender';
 import { Rectangle } from './Rectangle';
 
+/**
+ * Use the useForceRerender composable to get the isRerendering state and the forceRerender functions
+ */
+const { isRerendering } = useForceRerender();
+
 /**
  * Get singelton instance reference to vigad
  */
diff --git a/src/components/Navigation/Navigation.vue b/src/components/Navigation/Navigation.vue
index a3afcbf..ead5f0b 100644
--- a/src/components/Navigation/Navigation.vue
+++ b/src/components/Navigation/Navigation.vue
@@ -1,29 +1,14 @@
 <template>
     <v-bottom-navigation :elevation="24" bg-color="surface" grow>
-        <v-btn
-            :disabled="isRunning"
-            to="/capture"
-            prepend-icon="mdi-play"
-            value="run"
-        >
+        <v-btn :disabled="isRunning" to="/capture" prepend-icon="mdi-play" value="run">
             Capturing
         </v-btn>
 
-        <v-btn
-            :disabled="isRunning"
-            to="/"
-            prepend-icon="mdi-monitor"
-            value="source"
-        >
+        <v-btn :disabled="isRunning" to="/" prepend-icon="mdi-monitor" value="source">
             Source
         </v-btn>
 
-        <v-btn
-            :disabled="isRunning"
-            to="/regex"
-            prepend-icon="mdi-regex"
-            value="regex"
-        >
+        <v-btn :disabled="isRunning" to="/regex" prepend-icon="mdi-regex" value="regex">
             Regex
         </v-btn>
 
@@ -32,8 +17,11 @@
 </template>
 
 <script setup lang="ts">
-import { isRunning } from '@/composables/useRunning/useRunning';
+import useRunning from '@/composables/useRunning/useRunning';
 import SettingsPrompt from '@/components/SettingsPrompt/SettingsPrompt.vue';
+
+// Use the useRunning composable to get the isRunning state
+const { isRunning } = useRunning();
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/composables/useForceRerender/useForceRerender.test.ts b/src/composables/useForceRerender/useForceRerender.test.ts
index 989682e..a7450bc 100644
--- a/src/composables/useForceRerender/useForceRerender.test.ts
+++ b/src/composables/useForceRerender/useForceRerender.test.ts
@@ -1,12 +1,11 @@
 import { describe, it, expect } from 'vitest';
 import { mount } from '@vue/test-utils';
-import {
-    useForceRerender,
-    isRerendering,
-} from '@/composables/useForceRerender/useForceRerender';
+import useForceRerender from '@/composables/useForceRerender/useForceRerender';
 
 describe('useForceRerender Composable', () => {
     it('should trigger a rerender when called', async () => {
+        const { isRerendering, forceRerender } = useForceRerender();
+
         const text = 'Component to rerender';
 
         const wrapper = mount({
@@ -23,7 +22,7 @@ describe('useForceRerender Composable', () => {
         });
 
         // Call the useForceRerender composable
-        await useForceRerender();
+        await forceRerender();
 
         // Check that the component has rerendered
         expect(wrapper.text()).toBe(text);
diff --git a/src/composables/useForceRerender/useForceRerender.ts b/src/composables/useForceRerender/useForceRerender.ts
index 7ede455..4de4fe3 100644
--- a/src/composables/useForceRerender/useForceRerender.ts
+++ b/src/composables/useForceRerender/useForceRerender.ts
@@ -3,20 +3,27 @@ import { nextTick, ref } from 'vue';
 /**
  * Reactive boolean that can be used to force a component to rerender.
  */
-export const isRerendering = ref(true);
+const isRerendering = ref(true);
 
 /**
  * Tries to rerender the component by removing it from the DOM and adding it back in.
  *
- * Only works if the compnent has a v-if="rerender" directive. active
+ * Only works if the component has a v-if="rerender" directive.
  */
-export const useForceRerender = async () => {
-    // Remove component from the DOM
-    isRerendering.value = false;
+export default function useForceRerender() {
+    const forceRerender = async () => {
+        // Remove component from the DOM
+        isRerendering.value = false;
 
-    // Wait for the change to get flushed to the DOM
-    await nextTick();
+        // Wait for the change to get flushed to the DOM
+        await nextTick();
 
-    // Add the component back in
-    isRerendering.value = true;
-};
+        // Add the component back in
+        isRerendering.value = true;
+    };
+
+    return {
+        forceRerender,
+        isRerendering,
+    };
+}
diff --git a/src/composables/useRunning/useRunning.ts b/src/composables/useRunning/useRunning.ts
index c14baf8..ba4f831 100644
--- a/src/composables/useRunning/useRunning.ts
+++ b/src/composables/useRunning/useRunning.ts
@@ -5,15 +5,18 @@ import useNotificationSystem from '@/composables/useNotificationSystem/useNotifi
 /**
  * Reactive boolean that can be used to check the capture status.
  */
-export const isRunning = ref(false);
+const isRunning = ref(false);
 
 /**
  * Function that can be used to start and stop the capturing.
  */
-export const useRunning = () => {
+export default function useRunning() {
     const vigad = Vigad.getInstance();
 
-    const start = () => {
+    /**
+     * Start capturing.
+     */
+    const start = (): void => {
         isRunning.value = true;
         vigad.startTesseract();
         useNotificationSystem().createNotification({
@@ -22,13 +25,16 @@ export const useRunning = () => {
         });
     };
 
-    const stop = () => {
+    /**
+     * Stop capturing.
+     */
+    const stop = (): void => {
         isRunning.value = false;
         vigad.stopTesseract();
         useNotificationSystem().createWarningNotification({
             title: 'Stopped Capturing',
             message: 'Capturing was stopped'
-        })
+        });
     };
 
     return {
@@ -36,4 +42,4 @@ export const useRunning = () => {
         start,
         stop,
     };
-};
+}
diff --git a/src/views/CapturePage.vue b/src/views/CapturePage.vue
index 18bc024..83cf23c 100644
--- a/src/views/CapturePage.vue
+++ b/src/views/CapturePage.vue
@@ -1,39 +1,16 @@
 <template>
     <ViewComponent title="Capturing" :loading="isRunning">
         <template v-slot:actions>
-            <v-btn
-                v-if="!isRunning"
-                class="rounded-pill"
-                prepend-icon="mdi-play"
-                variant="tonal"
-                :disabled="captureAreas.length === 0"
-                @click="useRunning().start()"
-                >Start</v-btn
-            >
-            <v-btn
-                v-else
-                class="rounded-pill"
-                prepend-icon="mdi-stop"
-                variant="tonal"
-                @click="useRunning().stop()"
-                >Stop</v-btn
-            >
+            <v-btn v-if="!isRunning" class="rounded-pill" prepend-icon="mdi-play" variant="tonal"
+                :disabled="captureAreas.length === 0" @click="start()">Start</v-btn>
+            <v-btn v-else class="rounded-pill" prepend-icon="mdi-stop" variant="tonal" @click="stop()">Stop</v-btn>
         </template>
         <template v-slot:default>
             <v-expansion-panels v-model="defaultOpenPanel" multiple>
-                <LogOutput
-                    v-if="captureAreas.length !== 0"
-                    v-for="captureArea in captureAreas"
-                    :key="captureArea.getId()"
-                    :captureAreaId="captureArea.getId()"
-                />
-                <v-alert
-                    v-else
-                    type="info"
-                    variant="tonal"
-                    prominent
-                    text="To commence capturing, you must first define at least one capture area."
-                ></v-alert>
+                <LogOutput v-if="captureAreas.length !== 0" v-for="captureArea in captureAreas" :key="captureArea.getId()"
+                    :captureAreaId="captureArea.getId()" />
+                <v-alert v-else type="info" variant="tonal" prominent
+                    text="To commence capturing, you must first define at least one capture area."></v-alert>
             </v-expansion-panels>
         </template>
     </ViewComponent>
@@ -41,11 +18,13 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useRunning, isRunning } from '@/composables/useRunning/useRunning';
 import { Vigad } from '@/proc/Vigad';
-
 import ViewComponent from '@/components/ViewComponent/ViewComponent.vue';
 import LogOutput from '@/components/LogOutput/LogOutput.vue';
+import useRunning from '@/composables/useRunning/useRunning';
+
+// Use the useRunning composable to get the isRunning state and the start/stop functions
+const { isRunning, start, stop } = useRunning();
 
 /**
  * Get singelton instance reference to vigad
diff --git a/src/views/RegexView.vue b/src/views/RegexView.vue
index bd26ce1..3c9c029 100644
--- a/src/views/RegexView.vue
+++ b/src/views/RegexView.vue
@@ -1,42 +1,23 @@
 <template>
     <ViewComponent title="Regex" :loading="false">
         <template v-slot:actions>
-            <v-btn
-                class="rounded-pill"
-                prepend-icon="mdi-plus"
-                variant="tonal"
-                @click="addCaptureArea()"
-                >Add Capture Area</v-btn
-            >
+            <v-btn class="rounded-pill" prepend-icon="mdi-plus" variant="tonal" @click="addCaptureArea()">Add Capture
+                Area</v-btn>
         </template>
         <template v-slot:default>
             <v-expansion-panels v-if="captureAreas.length !== 0" multiple>
-                <v-expansion-panel
-                    v-if="isRerendering"
-                    v-for="captureArea in captureAreas"
-                    :key="captureArea.getId()"
-                >
-                    <v-expansion-panel-title
-                        class="pa-4"
-                        expand-icon="mdi-menu-down"
-                    >
+                <v-expansion-panel v-if="isRerendering" v-for="captureArea in captureAreas" :key="captureArea.getId()">
+                    <v-expansion-panel-title class="pa-4" expand-icon="mdi-menu-down">
                         Capture area
                         {{ captureArea.getId() }}
                     </v-expansion-panel-title>
                     <v-expansion-panel-text>
-                        <CaptureAreaSearchValue
-                            :capture-area-id="captureArea.getId()"
-                        />
+                        <CaptureAreaSearchValue :capture-area-id="captureArea.getId()" />
                     </v-expansion-panel-text>
                 </v-expansion-panel>
             </v-expansion-panels>
-            <v-alert
-                v-else
-                type="info"
-                variant="tonal"
-                prominent
-                text="In order to locate a value within the stream, you must create a capture area."
-            ></v-alert>
+            <v-alert v-else type="info" variant="tonal" prominent
+                text="In order to locate a value within the stream, you must create a capture area."></v-alert>
         </template>
     </ViewComponent>
 </template>
@@ -46,12 +27,13 @@ import { ref } from 'vue';
 import ViewComponent from '@/components/ViewComponent/ViewComponent.vue';
 import CaptureAreaSearchValue from '@/components/capture-area/CaptureAreaSearchValue/CaptureAreaSearchValue.vue';
 import { Vigad } from '@/proc/Vigad';
-import {
-    isRerendering,
-    useForceRerender,
-} from '@/composables/useForceRerender/useForceRerender';
+import useForceRerender from '@/composables/useForceRerender/useForceRerender';
 import useNotificationSystem from '@/composables/useNotificationSystem/useNotificationSystem';
 
+/**
+ * Use the useForceRerender composable to get the isRerendering state and the forceRerender functions
+ */
+const { isRerendering, forceRerender } = useForceRerender();
 
 /**
  * Get singelton instance reference to vigad
@@ -68,7 +50,7 @@ const captureAreas = ref(vigad.value.getAllCaptureAreas());
  */
 async function addCaptureArea() {
     vigad.value.addCaptureArea(100, 100, 0, 0);
-    await useForceRerender();
+    await forceRerender();
     useNotificationSystem().createNotification({
         title: 'New Capture Area added'
     });

From 6f6388c289d9716c899eb6c131881da3039e1665 Mon Sep 17 00:00:00 2001
From: Kevin Beier <beierkevin2002@outlook.com>
Date: Sun, 28 May 2023 19:37:11 +0200
Subject: [PATCH 2/2] undo some formating

---
 src/components/LogOutput/LogOutput.vue   |  8 +++--
 src/components/Navigation/Navigation.vue | 21 ++++++++++++--
 src/composables/useRunning/useRunning.ts |  4 +--
 src/views/CapturePage.vue                | 37 +++++++++++++++++++-----
 src/views/RegexView.vue                  | 35 +++++++++++++++++-----
 5 files changed, 83 insertions(+), 22 deletions(-)

diff --git a/src/components/LogOutput/LogOutput.vue b/src/components/LogOutput/LogOutput.vue
index 4294dad..b3d346d 100644
--- a/src/components/LogOutput/LogOutput.vue
+++ b/src/components/LogOutput/LogOutput.vue
@@ -9,11 +9,15 @@
             <v-list v-else lines="three" disabled class="reverse">
                 <v-list-item v-for="(item, i) in matchedElements" :key="i">
                     <template v-slot:prepend>
-                        <v-icon :color="item.rating > 0 ? 'success' : 'error'" icon="mdi-information"></v-icon>
+                        <v-icon
+                            :color="item.rating > 0 ? 'success' : 'error'"
+                            icon="mdi-information"
+                        ></v-icon>
                     </template>
 
                     <v-list-item-title expand-icon="mdi-menu-down">
-                        {{ item.timestamp }}</v-list-item-title>
+                        {{ item.timestamp }}</v-list-item-title
+                    >
                     <div>Element: {{ item.match.element }}</div>
                     <div>Rating: {{ item.rating }}</div>
                 </v-list-item>
diff --git a/src/components/Navigation/Navigation.vue b/src/components/Navigation/Navigation.vue
index ead5f0b..48ba472 100644
--- a/src/components/Navigation/Navigation.vue
+++ b/src/components/Navigation/Navigation.vue
@@ -1,14 +1,29 @@
 <template>
     <v-bottom-navigation :elevation="24" bg-color="surface" grow>
-        <v-btn :disabled="isRunning" to="/capture" prepend-icon="mdi-play" value="run">
+        <v-btn
+            :disabled="isRunning"
+            to="/capture"
+            prepend-icon="mdi-play"
+            value="run"
+        >
             Capturing
         </v-btn>
 
-        <v-btn :disabled="isRunning" to="/" prepend-icon="mdi-monitor" value="source">
+        <v-btn
+            :disabled="isRunning"
+            to="/"
+            prepend-icon="mdi-monitor"
+            value="source"
+        >
             Source
         </v-btn>
 
-        <v-btn :disabled="isRunning" to="/regex" prepend-icon="mdi-regex" value="regex">
+        <v-btn
+            :disabled="isRunning"
+            to="/regex"
+            prepend-icon="mdi-regex"
+            value="regex"
+        >
             Regex
         </v-btn>
 
diff --git a/src/composables/useRunning/useRunning.ts b/src/composables/useRunning/useRunning.ts
index ba4f831..6cfd344 100644
--- a/src/composables/useRunning/useRunning.ts
+++ b/src/composables/useRunning/useRunning.ts
@@ -21,7 +21,7 @@ export default function useRunning() {
         vigad.startTesseract();
         useNotificationSystem().createNotification({
             title: 'Started Capturing',
-            message: 'Capturing is now running'
+            message: 'Capturing is now running',
         });
     };
 
@@ -33,7 +33,7 @@ export default function useRunning() {
         vigad.stopTesseract();
         useNotificationSystem().createWarningNotification({
             title: 'Stopped Capturing',
-            message: 'Capturing was stopped'
+            message: 'Capturing was stopped',
         });
     };
 
diff --git a/src/views/CapturePage.vue b/src/views/CapturePage.vue
index 83cf23c..1ec62b8 100644
--- a/src/views/CapturePage.vue
+++ b/src/views/CapturePage.vue
@@ -1,16 +1,39 @@
 <template>
     <ViewComponent title="Capturing" :loading="isRunning">
         <template v-slot:actions>
-            <v-btn v-if="!isRunning" class="rounded-pill" prepend-icon="mdi-play" variant="tonal"
-                :disabled="captureAreas.length === 0" @click="start()">Start</v-btn>
-            <v-btn v-else class="rounded-pill" prepend-icon="mdi-stop" variant="tonal" @click="stop()">Stop</v-btn>
+            <v-btn
+                v-if="!isRunning"
+                class="rounded-pill"
+                prepend-icon="mdi-play"
+                variant="tonal"
+                :disabled="captureAreas.length === 0"
+                @click="start()"
+                >Start</v-btn
+            >
+            <v-btn
+                v-else
+                class="rounded-pill"
+                prepend-icon="mdi-stop"
+                variant="tonal"
+                @click="stop()"
+                >Stop</v-btn
+            >
         </template>
         <template v-slot:default>
             <v-expansion-panels v-model="defaultOpenPanel" multiple>
-                <LogOutput v-if="captureAreas.length !== 0" v-for="captureArea in captureAreas" :key="captureArea.getId()"
-                    :captureAreaId="captureArea.getId()" />
-                <v-alert v-else type="info" variant="tonal" prominent
-                    text="To commence capturing, you must first define at least one capture area."></v-alert>
+                <LogOutput
+                    v-if="captureAreas.length !== 0"
+                    v-for="captureArea in captureAreas"
+                    :key="captureArea.getId()"
+                    :captureAreaId="captureArea.getId()"
+                />
+                <v-alert
+                    v-else
+                    type="info"
+                    variant="tonal"
+                    prominent
+                    text="To commence capturing, you must first define at least one capture area."
+                ></v-alert>
             </v-expansion-panels>
         </template>
     </ViewComponent>
diff --git a/src/views/RegexView.vue b/src/views/RegexView.vue
index 3c9c029..d524fba 100644
--- a/src/views/RegexView.vue
+++ b/src/views/RegexView.vue
@@ -1,23 +1,42 @@
 <template>
     <ViewComponent title="Regex" :loading="false">
         <template v-slot:actions>
-            <v-btn class="rounded-pill" prepend-icon="mdi-plus" variant="tonal" @click="addCaptureArea()">Add Capture
-                Area</v-btn>
+            <v-btn
+                class="rounded-pill"
+                prepend-icon="mdi-plus"
+                variant="tonal"
+                @click="addCaptureArea()"
+                >Add Capture Area</v-btn
+            >
         </template>
         <template v-slot:default>
             <v-expansion-panels v-if="captureAreas.length !== 0" multiple>
-                <v-expansion-panel v-if="isRerendering" v-for="captureArea in captureAreas" :key="captureArea.getId()">
-                    <v-expansion-panel-title class="pa-4" expand-icon="mdi-menu-down">
+                <v-expansion-panel
+                    v-if="isRerendering"
+                    v-for="captureArea in captureAreas"
+                    :key="captureArea.getId()"
+                >
+                    <v-expansion-panel-title
+                        class="pa-4"
+                        expand-icon="mdi-menu-down"
+                    >
                         Capture area
                         {{ captureArea.getId() }}
                     </v-expansion-panel-title>
                     <v-expansion-panel-text>
-                        <CaptureAreaSearchValue :capture-area-id="captureArea.getId()" />
+                        <CaptureAreaSearchValue
+                            :capture-area-id="captureArea.getId()"
+                        />
                     </v-expansion-panel-text>
                 </v-expansion-panel>
             </v-expansion-panels>
-            <v-alert v-else type="info" variant="tonal" prominent
-                text="In order to locate a value within the stream, you must create a capture area."></v-alert>
+            <v-alert
+                v-else
+                type="info"
+                variant="tonal"
+                prominent
+                text="In order to locate a value within the stream, you must create a capture area."
+            ></v-alert>
         </template>
     </ViewComponent>
 </template>
@@ -52,7 +71,7 @@ async function addCaptureArea() {
     vigad.value.addCaptureArea(100, 100, 0, 0);
     await forceRerender();
     useNotificationSystem().createNotification({
-        title: 'New Capture Area added'
+        title: 'New Capture Area added',
     });
 }
 </script>