Simplify fetch-code

Signed-off-by: Knut Ahlers <knut@ahlers.me>

src/components/botauth.vue

@@ -81,25 +81,22 @@ export default defineComponent({
         })
     },
 
-    fetchAuthURLs(): Promise<void> {
+    fetchAuthURLs(): Promise<void> | undefined {
-      return fetch('config-editor/auth-urls', this.$root?.fetchOpts)
+      return this.$root?.fetchJSON('config-editor/auth-urls')
-        .then((resp: Response) => this.$root?.parseResponseFromJSON(resp))
         .then((data: any) => {
           this.authURLs = data
         })
     },
 
-    fetchBotProfile(user: string): Promise<void> {
+    fetchBotProfile(user: string): Promise<void> | undefined {
-      return fetch(`config-editor/user?user=${user}`, this.$root?.fetchOpts)
+      return this.$root?.fetchJSON(`config-editor/user?user=${user}`)
-        .then((resp: Response) => this.$root?.parseResponseFromJSON(resp))
         .then((data: any) => {
           this.botProfile = data
         })
     },
 
-    fetchGeneralConfig(): Promise<void> {
+    fetchGeneralConfig(): Promise<void> | undefined {
-      return fetch('config-editor/general', this.$root?.fetchOpts)
+      return this.$root?.fetchJSON('config-editor/general')
-        .then((resp: Response) => this.$root?.parseResponseFromJSON(resp))
         .then((data: any) => {
           this.generalConfig = data
         })
@@ -109,7 +106,7 @@ export default defineComponent({
   mounted() {
     this.fetchAuthURLs()
     this.fetchGeneralConfig()
-      .then(() => this.fetchBotProfile(this.generalConfig.bot_name))
+      ?.then(() => this.fetchBotProfile(this.generalConfig.bot_name))
   },
 
   name: 'TwitchBotEditorBotAuth',

src/components/dashboard/activeRaffles.vue

@@ -31,8 +31,7 @@ export default defineComponent({
 
   methods: {
     fetchRaffleCount(): void {
-      fetch('raffle/', this.$root?.fetchOpts)
+      this.$root?.fetchJSON('raffle/')
-        .then((resp: Response) => this.$root?.parseResponseFromJSON(resp))
         .then((data: any) => {
           this.activeRaffles = data.filter((raffle: any) => raffle.status === 'active').length
           this.loading = false

src/components/dashboard/healthcheck.vue

@@ -41,8 +41,7 @@ export default defineComponent({
 
   methods: {
     fetchStatus(): void {
-      fetch('status/status.json?fail-status=200')
+      this.$root?.fetchJSON('status/status.json?fail-status=200')
-        .then((resp: Response) => resp.json())
         .then((data: any) => {
           this.status = data
         })

src/components/dashboard/scopes.vue

@@ -42,8 +42,7 @@ export default defineComponent({
 
   methods: {
     fetchGeneralConfig(): void {
-      fetch('config-editor/general', this.$root?.fetchOpts)
+      this.$root?.fetchJSON('config-editor/general')
-        .then((resp: Response) => this.$root?.parseResponseFromJSON(resp))
         .then((data: any) => {
           this.botScopes = data.channel_scopes[data.bot_name] || []
           this.loading = false

src/global.d.ts

@@ -14,6 +14,7 @@ type EditorVars = {
   Version: string
 }
 
+type FetchJSONFunction = (path: string, opts: Object = {}) => Promise<any>
 type ParseResponseFunction = (resp: Response) => Promise<any>
 type TickerRegisterFunction = (id: string, func: TimerHandler, intervalMs: number) => void
 type TickerUnregisterFunction = (id: string) => void
@@ -31,6 +32,7 @@ declare module '@vue/runtime-core' {
 
     // On the $root
     check403: CheckAccessFunction
+    fetchJSON: FetchJSONFunction
     fetchOpts: RequestInit
     parseResponseFromJSON: ParseResponseFunction
     registerTicker: TickerRegisterFunction

src/main.ts

@@ -74,6 +74,14 @@ const app = createApp({
       return resp
     },
 
+    fetchJSON(path: string, opts: Object = {}): Promise<any> {
+      return fetch(path, {
+        ...this.fetchOpts,
+        ...opts,
+      })
+        .then((resp: Response) => this.parseResponseFromJSON(resp))
+    },
+
     loadVars(): Promise<void | Response> {
       return fetch('editor/vars.json')
         .then((resp: Response) => resp.json())