Feature/refactor small components (#42)

* refactor: Refactor 404 * refactor: Refactor SearchBar * refactor: Refactor RouterLink * refactor: Refactor DitherDialog * refactor: Refactor ExternalLink * refactor: Refactor ProgressBar * fix: Default ditherProcesses value
flipperdevices · Oct 31, 2023 · a3d3fa1 · a3d3fa1
1 parent 76ffaa0
commit a3d3fa1
Show file tree

Hide file tree

Showing 6 changed files with 150 additions and 187 deletions.
diff --git a/frontend/src/components/DitherDialog.vue b/frontend/src/components/DitherDialog.vue
@@ -35,77 +35,65 @@
   </q-card>
 </template>
 
-<script>
-import { defineComponent, ref } from 'vue'
+<script setup>
+import { ref, defineProps, defineEmits, onMounted } from 'vue'
 import { dither, emitter } from '../util/ditherpunk/monochrome'
 
-export default defineComponent({
-  name: 'DitherDialog',
-
-  props: {
-    img: Object
-  },
-
-  setup () {
-    return {
-      flags: ref({
-      }),
-      sourceImageData: ref(null),
-      ditherProcesses: ref([])
-    }
-  },
-
-  methods: {
-    drawSourceImg () {
-      const sourceCtx = this.$refs.sourceCanvasRef.getContext('2d')
-      sourceCtx.fillStyle = 'white'
-      sourceCtx.fillRect(0, 0, 128, 64)
-      sourceCtx.drawImage(this.img, 0, 0, 128, 64)
-      this.sourceImageData = sourceCtx.getImageData(0, 0, 128, 64)
-
-      this.dither()
-    },
-
-    dither () {
-      this.unbindDitherStart = emitter.on('dither/start', this.onDitherStart)
-      this.unbindDitherResult = emitter.on('dither/result', this.onDitherResult)
-      dither(this.sourceImageData)
-    },
-
-    onDitherStart ({ id, title }) {
-      if (this.ditherProcesses.find(e => e.id === id)) {
-        return
-      }
-      this.ditherProcesses.push({ id, title })
-    },
-
-    onDitherResult ({ id, imageData }) {
-      const p = this.ditherProcesses.find(e => e.id === id)
-      if (!p) {
-        return
-      }
-      p.imageData = imageData
-      setTimeout(() => {
-        const ditherCanvas = document.querySelector(`canvas.${p.id}`)
-        if (ditherCanvas) {
-          ditherCanvas.getContext('2d').putImageData(imageData, 0, 0)
-        }
-      }, 150)
-    },
-
-    cancel () {
-      this.ditherProcesses = []
-      this.$emit('cancel')
-    },
-
-    select (imageData) {
-      this.$emit('select', imageData)
-    }
-  },
+const props = defineProps({
+  img: Object
+})
 
-  mounted () {
-    this.drawSourceImg()
+const emit = defineEmits(['cancel', 'select'])
+
+const sourceImageData = ref(null)
+const ditherProcesses = ref([])
+const sourceCanvasRef = ref(null)
+const unbindDitherStart = ref(null)
+const unbindDitherResult = ref(null)
+
+const drawSourceImg = () => {
+  const sourceCtx = sourceCanvasRef.value.getContext('2d')
+  sourceCtx.fillStyle = 'white'
+  sourceCtx.fillRect(0, 0, 128, 64)
+  sourceCtx.drawImage(props.img, 0, 0, 128, 64)
+  sourceImageData.value = sourceCtx.getImageData(0, 0, 128, 64)
+
+  startDither()
+}
+const startDither = () => {
+  unbindDitherStart.value = emitter.on('dither/start', onDitherStart)
+  unbindDitherResult.value = emitter.on('dither/result', onDitherResult)
+  dither(sourceImageData.value)
+}
+const onDitherStart = ({ id, title }) => {
+  if (ditherProcesses.value.find(e => e.id === id)) {
+    return
+  }
+  ditherProcesses.value.push({ id, title })
+}
+const onDitherResult = ({ id, imageData }) => {
+  const p = ditherProcesses.value.find(e => e.id === id)
+  if (!p) {
+    return
   }
+  p.imageData = imageData
+  setTimeout(() => {
+    const ditherCanvas = document.querySelector(`canvas.${p.id}`)
+    if (ditherCanvas) {
+      ditherCanvas.getContext('2d').putImageData(imageData, 0, 0)
+    }
+  }, 150)
+}
+const cancel = () => {
+  ditherProcesses.value = []
+  emit('cancel')
+}
+const select = (imageData) => {
+  emit('select', imageData)
+}
+
+onMounted(() => {
+  drawSourceImg()
 })
 </script>
 

diff --git a/frontend/src/components/ExternalLink.vue b/frontend/src/components/ExternalLink.vue
@@ -17,24 +17,21 @@
   </q-item>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
+<script setup>
+import { defineProps } from 'vue'
 
-export default defineComponent({
-  name: 'ExternalLink',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    link: {
-      type: String,
-      default: '#'
-    },
-    icon: {
-      type: String,
-      default: ''
-    }
+defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  link: {
+    type: String,
+    default: '#'
+  },
+  icon: {
+    type: String,
+    default: ''
   }
 })
 </script>
diff --git a/frontend/src/components/ProgressBar.vue b/frontend/src/components/ProgressBar.vue
@@ -18,24 +18,21 @@
   </q-linear-progress>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
+<script setup>
+import { defineProps } from 'vue'
 
-export default defineComponent({
-  name: 'ProgressBar',
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    progress: {
-      type: Number,
-      required: true
-    },
-    interpolated: {
-      type: Boolean,
-      default: false
-    }
+defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  progress: {
+    type: Number,
+    required: true
+  },
+  interpolated: {
+    type: Boolean,
+    default: false
   }
 })
 </script>
diff --git a/frontend/src/components/RouterLink.vue b/frontend/src/components/RouterLink.vue
@@ -19,34 +19,31 @@
   </q-item>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
+<script setup>
+import { defineProps, computed } from 'vue'
+import { useRoute } from 'vue-router'
 
-export default defineComponent({
-  name: 'RouterLink',
-
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    link: {
-      type: String,
-      default: '#'
-    },
-    icon: {
-      type: String,
-      default: ''
-    }
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  link: {
+    type: String,
+    default: '#'
   },
+  icon: {
+    type: String,
+    default: ''
+  }
+})
+
+const route = useRoute()
 
-  computed: {
-    isActive () {
-      if (this.link.startsWith('/apps') && this.$route.path.startsWith('/apps')) {
-        return true
-      }
-      return this.link === this.$route.path
-    }
+const isActive = computed(() => {
+  if (props.link.startsWith('/apps') && route.path.startsWith('/apps')) {
+    return true
   }
+  return props.link === route.path
 })
 </script>
diff --git a/frontend/src/components/SearchBar.vue b/frontend/src/components/SearchBar.vue
@@ -45,69 +45,61 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, ref } from 'vue'
+<script setup>
+import { ref, defineProps, defineEmits, watch } from 'vue'
 import { fetchAppsShort } from '../util/util'
 
-export default defineComponent({
-  name: 'SearchBar',
-  props: {
-    sdk: Object
-  },
+const props = defineProps({
+  sdk: Object
+})
 
-  setup () {
-    return {
-      flags: ref({
-        loading: false
-      }),
-      text: ref(''),
-      found: ref([])
-    }
-  },
+const emit = defineEmits(['openApp'])
 
-  watch: {
-    async text (newValue) {
-      if (newValue.length >= 2) {
-        const params = {
-          limit: 8,
-          offset: 0,
-          sort_by: 'updated_at',
-          sort_order: -1,
-          is_latest_release_version: true,
-          query: newValue
-        }
+const flags = ref({
+  loading: false
+})
+const text = ref('')
+const found = ref([])
 
-        if (this.sdk.target || this.sdk.api) {
-          delete params.is_latest_release_version
-          if (this.sdk.target) {
-            params.target = this.sdk.target
-          }
-          if (this.sdk.api) {
-            params.api = this.sdk.api
-          }
-        }
+watch(text, async (newValue) => {
+  if (newValue.length < 3) {
+    return
+  }
+  const params = {
+    limit: 8,
+    offset: 0,
+    sort_by: 'updated_at',
+    sort_order: -1,
+    is_latest_release_version: true,
+    query: newValue
+  }
 
-        this.flags.loading = true
-        await fetchAppsShort(params)
-          .then(apps => {
-            this.found = apps
-          })
-          .catch(error => {
-            console.error(error)
-            this.found = []
-          })
-        this.flags.loading = false
-      }
+  if (props.sdk.target || props.sdk.api) {
+    delete params.is_latest_release_version
+    if (props.sdk.target) {
+      params.target = props.sdk.target
     }
-  },
-
-  methods: {
-    itemClicked (app) {
-      this.$emit('openApp', app)
-      this.text = ''
+    if (props.sdk.api) {
+      params.api = props.sdk.api
     }
   }
+
+  flags.value.loading = true
+  await fetchAppsShort(params)
+    .then(apps => {
+      found.value = apps
+    })
+    .catch(error => {
+      console.error(error)
+      found.value = []
+    })
+  flags.value.loading = false
 })
+
+const itemClicked = (app) => {
+  emit('openApp', app)
+  text.value = ''
+}
 </script>
 
 <style lang="sass" scoped>

diff --git a/frontend/src/pages/Error404.vue b/frontend/src/pages/Error404.vue
@@ -21,11 +21,3 @@
     </div>
   </div>
 </template>
-
-<script>
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'Error404'
-})
-</script>