From 2dd1bba32eed67c473531be2d8e839abe84cc608 Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Tue, 5 Nov 2024 09:11:05 -0500
Subject: [PATCH] switch ft-instance-selector to composition api

---
 .../FtInstanceSelector.vue}                   | 65 ++++++++++++++++---
 .../ft-instance-selector.js                   | 51 ---------------
 .../general-settings/general-settings.js      |  4 +-
 .../general-settings/general-settings.vue     |  6 +-
 4 files changed, 60 insertions(+), 66 deletions(-)
 rename src/renderer/components/{ft-instance-selector/ft-instance-selector.vue => FtInstanceSelector/FtInstanceSelector.vue} (61%)
 delete mode 100644 src/renderer/components/ft-instance-selector/ft-instance-selector.js

diff --git a/src/renderer/components/ft-instance-selector/ft-instance-selector.vue b/src/renderer/components/FtInstanceSelector/FtInstanceSelector.vue
similarity index 61%
rename from src/renderer/components/ft-instance-selector/ft-instance-selector.vue
rename to src/renderer/components/FtInstanceSelector/FtInstanceSelector.vue
index 1f4ababf4776..d1337ab1eb29 100644
--- a/src/renderer/components/ft-instance-selector/ft-instance-selector.vue
+++ b/src/renderer/components/FtInstanceSelector/FtInstanceSelector.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <ft-flex-box
+    <FtFlexBox
       class="settingsFlexStart460px"
     >
-      <ft-input
+      <FtInput
         :placeholder="placeholder"
         :show-action-button="false"
         :show-label="true"
@@ -12,8 +12,8 @@
         :tooltip="tooltip"
         @input="handleInstanceInput"
       />
-    </ft-flex-box>
-    <ft-flex-box>
+    </FtFlexBox>
+    <FtFlexBox>
       <div v-if="backendType === 'piped'">
         <a href="https://github.com/TeamPiped/Piped/wiki/Instances">
           {{ $t('Settings.General Settings.View all Piped instance information') }}
@@ -28,7 +28,7 @@
           {{ $t('Settings.General Settings.View all Invidious instance information') }}
         </a>
       </div>
-    </ft-flex-box>
+    </FtFlexBox>
     <p
       v-if="defaultInstance !== ''"
       class="center"
@@ -49,17 +49,62 @@
         {{ $t('Settings.General Settings.Current instance will be randomized on startup') }}
       </p>
     </template>
-    <ft-flex-box>
-      <ft-button
+    <FtFlexBox>
+      <FtButton
         :label="$t('Settings.General Settings.Set Current Instance as Default')"
         @click="setDefaultInstance"
       />
-      <ft-button
+      <FtButton
         :label="$t('Settings.General Settings.Clear Default Instance')"
         @click="clearDefaultInstance"
       />
-    </ft-flex-box>
+    </FtFlexBox>
   </div>
 </template>
 
-<script src="./ft-instance-selector"></script>
+<script setup>
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtInput from '../ft-input/ft-input.vue'
+import FtButton from '../ft-button/ft-button.vue'
+
+defineProps({
+  placeholder: {
+    type: String,
+    required: true
+  },
+  tooltip: {
+    type: String,
+    required: true
+  },
+  backendType: {
+    type: String,
+    required: true
+  },
+  currentInstance: {
+    type: String,
+    required: true
+  },
+  instanceList: {
+    type: Array,
+    required: true
+  },
+  defaultInstance: {
+    type: String,
+    required: true
+  }
+})
+
+const emit = defineEmits(['clearDefaultInstance', 'input', 'setDefaultInstance'])
+
+function handleInstanceInput(inputData) {
+  emit('input', inputData)
+}
+
+function setDefaultInstance() {
+  emit('setDefaultInstance')
+}
+function clearDefaultInstance() {
+  emit('clearDefaultInstance')
+}
+
+</script>
diff --git a/src/renderer/components/ft-instance-selector/ft-instance-selector.js b/src/renderer/components/ft-instance-selector/ft-instance-selector.js
deleted file mode 100644
index 06efc83d549b..000000000000
--- a/src/renderer/components/ft-instance-selector/ft-instance-selector.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import { defineComponent } from 'vue'
-import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
-import FtInput from '../ft-input/ft-input.vue'
-import FtButton from '../ft-button/ft-button.vue'
-
-export default defineComponent({
-  name: 'FtInstanceSelector',
-  components: {
-    'ft-button': FtButton,
-    'ft-flex-box': FtFlexBox,
-    'ft-input': FtInput
-  },
-  props: {
-    placeholder: {
-      type: String,
-      required: true
-    },
-    tooltip: {
-      type: String,
-      required: true
-    },
-    backendType: {
-      type: String,
-      required: true
-    },
-    currentInstance: {
-      type: String,
-      required: true
-    },
-    instanceList: {
-      type: Array,
-      required: true
-    },
-    defaultInstance: {
-      type: String,
-      required: true
-    }
-  },
-  emits: ['clearDefaultInstance', 'input', 'setDefaultInstance'],
-  methods: {
-    handleInstanceInput: function (inputData) {
-      this.$emit('input', inputData)
-    },
-    setDefaultInstance: function () {
-      this.$emit('setDefaultInstance')
-    },
-    clearDefaultInstance: function () {
-      this.$emit('clearDefaultInstance')
-    }
-  }
-})
diff --git a/src/renderer/components/general-settings/general-settings.js b/src/renderer/components/general-settings/general-settings.js
index 09615115aefe..ff5b216bb00e 100644
--- a/src/renderer/components/general-settings/general-settings.js
+++ b/src/renderer/components/general-settings/general-settings.js
@@ -3,7 +3,7 @@ import { mapActions, mapMutations } from 'vuex'
 import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
-import FtInstanceSelector from '../ft-instance-selector/ft-instance-selector.vue'
+import FtInstanceSelector from '../FtInstanceSelector/FtInstanceSelector.vue'
 
 import debounce from 'lodash.debounce'
 import allLocales from '../../../../static/locales/activeLocales.json'
@@ -16,7 +16,7 @@ export default defineComponent({
     'ft-settings-section': FtSettingsSection,
     'ft-select': FtSelect,
     'ft-toggle-switch': FtToggleSwitch,
-    'ft-instance-selector': FtInstanceSelector
+    FtInstanceSelector
   },
   data: function () {
     return {
diff --git a/src/renderer/components/general-settings/general-settings.vue b/src/renderer/components/general-settings/general-settings.vue
index 78a14339543a..858839ec21c3 100644
--- a/src/renderer/components/general-settings/general-settings.vue
+++ b/src/renderer/components/general-settings/general-settings.vue
@@ -117,7 +117,7 @@
     <template
       v-if="backendPreference === 'piped'"
     >
-      <ft-instance-selector
+      <FtInstanceSelector
         :backend-type="'piped'"
         :placeholder="$t('Settings.General Settings.Current Piped Instance')"
         :tooltip="$t('Tooltips.General Settings.Piped Instance')"
@@ -135,7 +135,7 @@
     <template
       v-if="(backendFallback && fallbackPreference === 'invidious') || backendPreference == 'invidious'"
     >
-      <ft-instance-selector
+      <FtInstanceSelector
         :backend-type="'invidious'"
         :placeholder="$t('Settings.General Settings.Current Invidious Instance')"
         :tooltip="$t('Tooltips.General Settings.Invidious Instance')"
@@ -153,7 +153,7 @@
     <template
       v-if="backendFallback && fallbackPreference === 'piped'"
     >
-      <ft-instance-selector
+      <FtInstanceSelector
         :backend-type="'piped'"
         :placeholder="$t('Settings.General Settings.Current Piped Instance')"
         :tooltip="$t('Tooltips.General Settings.Piped Instance')"