From 8b685db4783db421997faa0212691c2a0442d3b4 Mon Sep 17 00:00:00 2001
From: Assoft <macsonfor@gmail.com>
Date: Sun, 26 Feb 2023 06:45:19 +0300
Subject: [PATCH] fix recursive requests

---
 app.vue                     | 23 +++--------
 components/ListAfad.vue     | 68 --------------------------------
 components/ListKandilli.vue | 77 -------------------------------------
 nuxt.config.ts              |  2 +-
 package.json                |  2 +
 pages/index.vue             | 62 +++++++++++++++++++++++++++++
 pages/kandilli.vue          | 72 ++++++++++++++++++++++++++++++++++
 yarn.lock                   | 43 +++++++++++++++++++++
 8 files changed, 186 insertions(+), 163 deletions(-)
 delete mode 100644 components/ListAfad.vue
 delete mode 100644 components/ListKandilli.vue
 create mode 100644 pages/index.vue
 create mode 100644 pages/kandilli.vue
diff --git a/app.vue b/app.vue
index 3c631ca..b1013b2 100644
--- a/app.vue
+++ b/app.vue
@@ -2,22 +2,15 @@
   <Body class="dark font-sans relative">
     <div style="padding: 4px; height: calc(100vh - 12px);" data-tauri-drag-region class="select-none">
       <div class="pb-16">
-        <ListAfad v-if="source === 'afad'" />
-        <ListKandilli v-else />
+        <NuxtPage />
       </div>
 
       <div class="fixed bottom-0 inset-x-0 select-none">
         <div class="flex items-center justify-between bg-dark-3 p-2 dark:text-white select-none">
-          <div class="flex items-center justify-center gap-4">
-            <div class="inline-flex items-center gap-1">
-              <input class="w-6 h-6 text-red" type="radio" id="afad" name="source" v-model="source" value="afad"
-                     checked>
-              <label class="text-sm" for="afad">Afad</label>
-            </div>
-            <div class="inline-flex items-center gap-1">
-              <input class="w-6 h-6 text-amber" type="radio" id="kandilli" name="source" v-model="source" value="kandilli">
-              <label class="text-sm" for="kandilli">Kandilli</label>
-            </div>
+
+          <div class="flex items-center justify-center gap-2">
+            <NuxtLink class="decoration-none text-white px-1.5 py-1 rounded" exact-active-class="bg-white/20" to="/">Afad</NuxtLink>
+            <NuxtLink class="decoration-none text-white px-1.5 py-1 rounded" exact-active-class="bg-white/20" to="/kandilli">Kandilli</NuxtLink>
           </div>
 
           <div class="inline-flex items-center gap-1">
@@ -51,7 +44,7 @@
 <script setup lang="ts">
 import { invoke } from '@tauri-apps/api';
 
-const source = useState<string>('activeSource', () => 'afad');
+// const source = useState<string>('activeSource', () => 'afad');
 const refreshFrequency = useState<number>('refreshFrequency', () => 60);
 const notifyQuakeSize = useState<number>('notifyQuakeSize', () => 3);
 const frequencies = ref<number[]>([10, 30, 60, 120, 300, 600])
@@ -60,10 +53,6 @@ const frequencies = ref<number[]>([10, 30, 60, 120, 300, 600])
 const setRefreshFrequency = (event: Event) => refreshFrequency.value = event.target.value
 // @ts-ignore
 const setNotifyQuakeSize = (event: Event) => notifyQuakeSize.value = event.target.value
-
-const disableScroll = (event: any) => {
-  // console.log({ event })
-}
 </script>
 
 <style>
diff --git a/components/ListAfad.vue b/components/ListAfad.vue
deleted file mode 100644
index ba6006a..0000000
--- a/components/ListAfad.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-    <div v-if="quakes?.length > 0" class="grid">
-        <QuakeItem :has-time-zone="true" v-for="quake in sortedQuakes" :key="quake.id" :quake="quake" />
-        <Loading v-if="loading" />
-    </div>
-</template>
-  
-<script setup lang="ts">
-import { invoke } from "@tauri-apps/api"
-import type { IQuake } from "@/types"
-
-const quakes = ref<IQuake[]>([])
-const intervalID = ref<number | undefined>()
-
-const loading = ref<boolean>(false);
-
-const refreshFrequency = useState<number>('refreshFrequency')
-const notifyQuakeSize = useState<number>('notifyQuakeSize')
-const activeSource = useState<string>('activeSource');
-
-// @ts-ignore
-const sortedQuakes = computed(() => quakes.value.sort((a: IQuake, b: IQuake) => a.eventDate < b.eventDate))
-
-const fetchLatestQuakes = async () => {
-    if (activeSource.value !== 'afad') {
-        return
-    }
-
-    loading.value = true;
-
-    const result = await invoke<string>("get_last_five_events")
-    const parsed: IQuake[] = JSON.parse(result) as IQuake[]
-
-    if (quakes.value.length >= 100) {
-        quakes.value = [];
-    }
-    if (quakes.value.length > 0) {
-        parsed.map(async (quake) => {
-            const filtered = quakes.value.find(x => x.id === quake.id)
-            if (!filtered) {
-                if (quake.magnitude >= notifyQuakeSize.value) {
-                    await pushMessage({ title: `Afad Deprem Merkezi`, body: `${quake.location}: ${quake.magnitude} [${quake.depth}km]` });
-                }
-                quakes.value.push(quake)
-            }
-        })
-    } else {
-        quakes.value = parsed;
-    }
-    setTimeout(() => loading.value = false, 1800)
-}
-
-onMounted(async () => {
-    if (activeSource.value === 'afad') {
-        const initalData = await fecthLatestFiftyEvents();
-        quakes.value = initalData;
-        intervalID.value = setInterval(fetchLatestQuakes, refreshFrequency.value * 1000)
-    }
-})
-
-watchEffect(() => {
-    if (activeSource.value === 'afad') {
-        intervalID.value = setInterval(fetchLatestQuakes, refreshFrequency.value * 1000)
-    }
-})
-
-onUnmounted(() => clearInterval(intervalID.value))
-</script>
\ No newline at end of file
diff --git a/components/ListKandilli.vue b/components/ListKandilli.vue
deleted file mode 100644
index 1e9819c..0000000
--- a/components/ListKandilli.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-    <div v-if="quakes?.length > 0" class="grid">
-        <QuakeItem :has-time-zone="false" v-for="quake in sortedQuakes" :key="quake.id" :quake="quake" />
-        <Loading v-if="loading" />
-    </div>
-</template>
-  
-<script setup lang="ts">
-import { invoke } from "@tauri-apps/api"
-import type { PIQuake } from "@/types"
-
-const quakes = ref<PIQuake[]>([])
-const intervalID = ref<number | undefined>()
-
-const loading = ref<boolean>(false);
-
-const refreshFrequency = useState<number>('refreshFrequency')
-const notifyQuakeSize = useState<number>('notifyQuakeSize')
-const activeSource = useState<string>('activeSource')
-
-// @ts-ignore
-const sortedQuakes = computed(() => quakes.value.sort((a: PIQuake, b: PIQuake) => a.eventDate < b.eventDate))
-
-const fetchLatestQuakes = async () => {
-    if (activeSource.value !== 'kandilli') {
-        return
-    }
-
-    loading.value = true;
-
-    const result = await invoke<string>("fetch_quakes")
-    const parsed: PIQuake[] = JSON.parse(result) as PIQuake[]
-
-    const mapped: PIQuake[] = parsed.map((quake: PIQuake) => {
-        return {
-            id: quake.id,
-            eventDate: quake.eventDate,
-            magnitude: parseFloat(String(quake.magnitude)),
-            location: quake.location,
-            depth: parseInt(String(quake.depth))
-        }
-    })
-
-    if (quakes.value.length > 0) {
-        mapped.map(async (quake) => {
-            const filtered = quakes.value.find((x: PIQuake) => x.id === quake.id)
-            if (!filtered) {
-                if (quake.magnitude >= notifyQuakeSize.value) {
-                    await pushMessage({ title: `Kandilli Rasathanesi`, body: `${quake.location}: ${quake.magnitude} [${quake.depth}km]` });
-                }
-                quakes.value.push(quake)
-            }
-        })
-    } else {
-        quakes.value = mapped;
-    }
-    setTimeout(() => loading.value = false, 1700)
-}
-
-onMounted(async () => {
-    if (activeSource.value === 'kandilli') {
-        loading.value = true;
-        await fetchLatestQuakes();
-        loading.value = false;
-
-        intervalID.value = setInterval(fetchLatestQuakes, refreshFrequency.value * 1000)
-    }
-})
-
-watchEffect(() => {
-    if (activeSource.value === 'kandilli') {
-        intervalID.value = setInterval(fetchLatestQuakes, refreshFrequency.value * 1000)
-    }
-})
-
-onUnmounted(() => clearInterval(intervalID.value))
-</script>
\ No newline at end of file
diff --git a/nuxt.config.ts b/nuxt.config.ts
index fc4528e..fc7842f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,5 +1,5 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   ssr: false,
-  modules: ['@unocss/nuxt'],
+  modules: ['@unocss/nuxt', '@vueuse/nuxt'],
 })
diff --git a/package.json b/package.json
index aeae74a..6a624f1 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,8 @@
   },
   "dependencies": {
     "@tauri-apps/api": "^1.2.0",
+    "@vueuse/core": "^9.13.0",
+    "@vueuse/nuxt": "^9.13.0",
     "luxon": "^3.2.1"
   },
   "pnpm": {
diff --git a/pages/index.vue b/pages/index.vue
new file mode 100644
index 0000000..fc81f9c
--- /dev/null
+++ b/pages/index.vue
@@ -0,0 +1,62 @@
+<template>
+    <div v-if="quakes?.length > 0" class="grid">
+        <QuakeItem :has-time-zone="true" v-for="quake in sortedQuakes" :key="quake.id" :quake="quake" />
+        <Loading v-if="loading" />
+    </div>
+</template>
+  
+<script setup lang="ts">
+import { invoke } from "@tauri-apps/api"
+import type { IQuake } from "@/types"
+
+const router = useRouter();
+
+const quakes = ref<IQuake[]>([])
+
+const loading = ref<boolean>(false);
+
+const refreshFrequency = useState<number>('refreshFrequency')
+const notifyQuakeSize = useState<number>('notifyQuakeSize')
+
+// @ts-ignore
+const sortedQuakes = computed(() => quakes.value.sort((a: IQuake, b: IQuake) => a.eventDate < b.eventDate))
+
+const fetchLatestQuakesFromAfad = async () => {
+    if (router.currentRoute.value.name === 'index') {
+        loading.value = true;
+
+        const result = await invoke<string>("get_last_five_events")
+        const parsed: IQuake[] = JSON.parse(result) as IQuake[]
+
+        if (quakes.value.length >= 100) {
+            quakes.value = [];
+        }
+        if (quakes.value.length > 0) {
+            parsed.map(async (quake) => {
+                const filtered = quakes.value.find(x => x.id === quake.id)
+                if (!filtered) {
+                    if (quake.magnitude >= notifyQuakeSize.value) {
+                        await pushMessage({ title: `Afad Deprem Merkezi`, body: `${quake.location}: ${quake.magnitude} [${quake.depth}km]` });
+                    }
+                    quakes.value.push(quake)
+                }
+            })
+        } else {
+            quakes.value = parsed;
+        }
+        setTimeout(() => loading.value = false, 1800)
+    }
+}
+
+const { resume, pause } = useIntervalFn(() => {
+    fetchLatestQuakesFromAfad()
+}, () => refreshFrequency.value * 1000)
+
+onMounted(async () => {
+    quakes.value = await fecthLatestFiftyEvents();
+    resume();
+})
+
+watchEffect(() => resume())
+onUnmounted(() => pause())
+</script>
\ No newline at end of file
diff --git a/pages/kandilli.vue b/pages/kandilli.vue
new file mode 100644
index 0000000..ed412f4
--- /dev/null
+++ b/pages/kandilli.vue
@@ -0,0 +1,72 @@
+<template>
+    <div class="grid">
+        <template v-if="quakes?.length > 0">
+            <QuakeItem :has-time-zone="false" v-for="quake in sortedQuakes" :key="quake.id" :quake="quake" />
+        </template>
+        <Loading v-if="loading" />
+    </div>
+</template>
+  
+<script setup lang="ts">
+import { invoke } from "@tauri-apps/api"
+import { useIntervalFn } from '@vueuse/core'
+
+import type { PIQuake } from "@/types"
+
+const quakes = ref<PIQuake[]>([])
+
+const loading = ref<boolean>(false);
+
+const refreshFrequency = useState<number>('refreshFrequency')
+const notifyQuakeSize = useState<number>('notifyQuakeSize')
+const router = useRouter();
+
+// @ts-ignore
+const sortedQuakes = computed(() => quakes.value.sort((a: PIQuake, b: PIQuake) => a.eventDate < b.eventDate))
+
+const fetchLatestQuakesFromKandilli = async () => {
+    if (router.currentRoute.value.name === 'kandilli') {
+        loading.value = true;
+
+        const result = await invoke<string>("fetch_quakes")
+        const parsed: PIQuake[] = JSON.parse(result) as PIQuake[]
+
+        const mapped: PIQuake[] = parsed.map((quake: PIQuake) => {
+            return {
+                id: quake.id,
+                eventDate: quake.eventDate,
+                magnitude: parseFloat(String(quake.magnitude)),
+                location: quake.location,
+                depth: parseInt(String(quake.depth))
+            }
+        })
+
+        if (quakes.value.length > 0) {
+            mapped.map(async (quake) => {
+                const filtered = quakes.value.find((x: PIQuake) => x.id === quake.id)
+                if (!filtered) {
+                    if (quake.magnitude >= notifyQuakeSize.value) {
+                        await pushMessage({ title: `Kandilli Rasathanesi`, body: `${quake.location}: ${quake.magnitude} [${quake.depth}km]` });
+                    }
+                    quakes.value.push(quake)
+                }
+            })
+        } else {
+            quakes.value = mapped;
+        }
+        setTimeout(() => loading.value = false, 1700)
+    }
+
+}
+
+const { resume, pause } = useIntervalFn(() => {
+    fetchLatestQuakesFromKandilli()
+}, () => refreshFrequency.value * 1000)
+
+onMounted(() => {
+    fetchLatestQuakesFromKandilli()
+    resume()
+})
+
+onUnmounted(() => pause())
+</script>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 9a51873..4649a57 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -936,6 +936,11 @@
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.2.tgz#97d26e00cd4a0423b4af620abecf3e6f442b7975"
   integrity sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==
 
+"@types/web-bluetooth@^0.0.16":
+  version "0.0.16"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
+  integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
+
 "@unhead/dom@1.1.0", "@unhead/dom@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@unhead/dom/-/dom-1.1.0.tgz#026835c76b0ba01edc7d281994ec792730a4163f"
@@ -1324,6 +1329,16 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.47.tgz#e597ef75086c6e896ff5478a6bfc0a7aa4bbd14c"
   integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
 
+"@vueuse/core@9.13.0", "@vueuse/core@^9.13.0":
+  version "9.13.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-9.13.0.tgz#2f69e66d1905c1e4eebc249a01759cf88ea00cf4"
+  integrity sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.16"
+    "@vueuse/metadata" "9.13.0"
+    "@vueuse/shared" "9.13.0"
+    vue-demi "*"
+
 "@vueuse/head@^1.0.26":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@vueuse/head/-/head-1.1.0.tgz#16380ffef196cf25e5624d9d352fc68569a61991"
@@ -1334,6 +1349,29 @@
     "@unhead/ssr" "^1.1.0"
     "@unhead/vue" "^1.1.0"
 
+"@vueuse/metadata@9.13.0":
+  version "9.13.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-9.13.0.tgz#bc25a6cdad1b1a93c36ce30191124da6520539ff"
+  integrity sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==
+
+"@vueuse/nuxt@^9.13.0":
+  version "9.13.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/nuxt/-/nuxt-9.13.0.tgz#32bc95df0fb0e54aa60379ef009c6985e8f50be1"
+  integrity sha512-JunH/w6nFIwCyaZ0s+pfrYFMfBzGfhkwmFPz7ogHFmb71Ty/5HINrYOAOZCXpN44X6QH6FiJq/wuLLdvYzqFUw==
+  dependencies:
+    "@nuxt/kit" "^3.2.0"
+    "@vueuse/core" "9.13.0"
+    "@vueuse/metadata" "9.13.0"
+    local-pkg "^0.4.3"
+    vue-demi "*"
+
+"@vueuse/shared@9.13.0":
+  version "9.13.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-9.13.0.tgz#089ff4cc4e2e7a4015e57a8f32e4b39d096353b9"
+  integrity sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==
+  dependencies:
+    vue-demi "*"
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -4640,6 +4678,11 @@ vue-bundle-renderer@^1.0.2:
   dependencies:
     ufo "^1.1.0"
 
+vue-demi@*:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
+  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
+
 vue-devtools-stub@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz#a65b9485edecd4273cedcb8102c739b83add2c81"
