Client - use <script setup> in components

fittrackee_client/src/components/Common/AlertMessage.vue

@@ -4,15 +4,12 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue'
-
-  export default defineComponent({
-    name: 'AlertMessage',
-    props: {
-      message: String,
-    },
-  })
+<script setup lang="ts">
+  import { toRefs } from 'vue'
+  const props = defineProps<{
+    message: string
+  }>()
+  const { message } = toRefs(props)
 </script>
 
 <style scoped lang="scss">

fittrackee_client/src/components/Common/Card.vue

@@ -9,13 +9,6 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue'
-  export default defineComponent({
-    name: 'Card',
-  })
-</script>
-
 <style lang="scss">
   @import '~@/scss/base';
 

fittrackee_client/src/components/Common/CustomTextArea.vue

@@ -14,47 +14,35 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref, watch } from 'vue'
+<script setup lang="ts">
+  import { ref, watch, withDefaults } from 'vue'
 
-  export default defineComponent({
-    name: 'CustomTextArea',
-    props: {
-      charLimit: {
-        type: Number,
-        default: 500,
-      },
-      disabled: {
-        type: Boolean,
-        default: false,
-      },
-      input: {
-        type: String,
-        default: '',
-      },
-      name: {
-        type: String,
-        required: true,
-      },
-    },
-    emits: ['updateValue'],
-    setup(props, { emit }) {
-      let text = ref('')
-
-      function updateText(event: Event & { target: HTMLInputElement }) {
-        emit('updateValue', event.target.value)
-      }
-
-      watch(
-        () => props.input,
-        (value) => {
-          text.value = value
-        }
-      )
-
-      return { text, updateText }
-    },
+  interface Props {
+    name: string
+    charLimit?: number
+    disabled?: boolean
+    input?: string
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    charLimit: 500,
+    disabled: false,
+    input: '',
   })
+
+  const emit = defineEmits(['updateValue'])
+
+  let text = ref('')
+
+  function updateText(event: Event & { target: HTMLInputElement }) {
+    emit('updateValue', event.target.value)
+  }
+
+  watch(
+    () => props.input,
+    (value) => {
+      text.value = value
+    }
+  )
 </script>
 
 <style lang="scss" scoped>

fittrackee_client/src/components/Common/Dropdown.vue

@@ -17,53 +17,37 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { PropType, defineComponent, ref, watch } from 'vue'
+<script setup lang="ts">
+  import { ref, watch } from 'vue'
   import { useRoute } from 'vue-router'
 
   import { IDropdownOption, TDropdownOptions } from '@/types/forms'
+  interface Props {
+    options: TDropdownOptions
+    selected: string
+  }
+  const props = defineProps<Props>()
 
-  export default defineComponent({
-    name: 'Dropdown',
-    props: {
-      options: {
-        type: Object as PropType<TDropdownOptions>,
-        required: true,
-      },
-      selected: {
-        type: String,
-        required: true,
-      },
-    },
-    emits: {
-      selected: (option: IDropdownOption) => option,
-    },
-    setup(props, { emit }) {
-      const route = useRoute()
-      let isOpen = ref(false)
-      let dropdownOptions = props.options.map((option) => option)
-
-      function toggleDropdown() {
-        isOpen.value = !isOpen.value
-      }
-      function updateSelected(option: IDropdownOption) {
-        emit('selected', option)
-        isOpen.value = false
-      }
-
-      watch(
-        () => route.path,
-        () => (isOpen.value = false)
-      )
-
-      return {
-        dropdownOptions,
-        isOpen,
-        toggleDropdown,
-        updateSelected,
-      }
-    },
+  const emit = defineEmits({
+    selected: (option: IDropdownOption) => option,
   })
+
+  const route = useRoute()
+  let isOpen = ref(false)
+  let dropdownOptions = props.options.map((option) => option)
+
+  function toggleDropdown() {
+    isOpen.value = !isOpen.value
+  }
+  function updateSelected(option: IDropdownOption) {
+    emit('selected', option)
+    isOpen.value = false
+  }
+
+  watch(
+    () => route.path,
+    () => (isOpen.value = false)
+  )
 </script>
 
 <style scoped lang="scss">

fittrackee_client/src/components/Common/Error.vue

@@ -10,28 +10,19 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue'
+<script setup lang="ts">
+  import { toRefs, withDefaults } from 'vue'
 
-  export default defineComponent({
-    name: 'Error',
-    props: {
-      title: {
-        type: String,
-        required: true,
-      },
-      message: {
-        type: String,
-      },
-      buttonText: {
-        type: String,
-      },
-      path: {
-        type: String,
-        default: '/',
-      },
-    },
+  interface Props {
+    title: string
+    message: string
+    buttonText: string
+    path?: string
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    path: '/',
   })
+  const { buttonText, title, message, path } = toRefs(props)
 </script>
 
 <style scoped lang="scss">

fittrackee_client/src/components/Common/ErrorMessage.vue

@@ -9,15 +9,14 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue'
+<script setup lang="ts">
+  import { toRefs } from 'vue'
 
-  export default defineComponent({
-    name: 'ErrorMessage',
-    props: {
-      message: [String, Array],
-    },
-  })
+  interface Props {
+    message: string | string[]
+  }
+  const props = defineProps<Props>()
+  const { message } = toRefs(props)
 </script>
 
 <style scoped lang="scss">

fittrackee_client/src/components/Common/FilterSelects.vue

@@ -34,7 +34,7 @@
         :value="query.per_page"
         @change="onSelectUpdate"
       >
-        <option v-for="nb in per_page" :value="nb" :key="nb">
+        <option v-for="nb in perPage" :value="nb" :key="nb">
           {{ nb }}
         </option>
       </select>
@@ -42,43 +42,27 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { PropType, defineComponent } from 'vue'
+<script setup lang="ts">
+  import { toRefs } from 'vue'
 
   import { TPaginationPayload } from '@/types/api'
 
-  export default defineComponent({
-    name: 'FilterSelects',
-    props: {
-      order_by: {
-        type: Object as PropType<string[]>,
-        required: true,
-      },
-      query: {
-        type: Object as PropType<TPaginationPayload>,
-        required: true,
-      },
-      sort: {
-        type: Object as PropType<string[]>,
-        required: true,
-      },
-      message: {
-        type: String,
-        required: true,
-      },
-    },
-    emits: ['updateSelect'],
-    setup(props, { emit }) {
-      function onSelectUpdate(event: Event & { target: HTMLInputElement }) {
-        emit('updateSelect', event.target.id, event.target.value)
-      }
+  interface Props {
+    order_by: string[]
+    query: TPaginationPayload
+    sort: string[]
+    message: string
+  }
+  const props = defineProps<Props>()
 
-      return {
-        per_page: [10, 25, 50, 100],
-        onSelectUpdate,
-      }
-    },
-  })
+  const emit = defineEmits(['updateSelect'])
+
+  const { order_by, query, sort, message } = toRefs(props)
+  const perPage = [10, 25, 50, 100]
+
+  function onSelectUpdate(event: Event & { target: HTMLInputElement }) {
+    emit('updateSelect', event.target.id, event.target.value)
+  }
 </script>
 
 <style lang="scss" scoped>

fittrackee_client/src/components/Common/Images/SportImage/index.vue

@@ -20,8 +20,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, inject } from 'vue'
+<script setup lang="ts">
+  import { inject, toRefs, withDefaults } from 'vue'
 
   import CyclingSport from '@/components/Common/Images/SportImage/CyclingSport.vue'
   import CyclingTransport from '@/components/Common/Images/SportImage/CyclingTransport.vue'
@@ -35,33 +35,14 @@
   import Trail from '@/components/Common/Images/SportImage/Trail.vue'
   import Walking from '@/components/Common/Images/SportImage/Walking.vue'
 
-  export default defineComponent({
-    name: 'SportImage',
-    components: {
-      CyclingSport,
-      CyclingTransport,
-      Hiking,
-      MountainBiking,
-      MountainBikingElectric,
-      Rowing,
-      Running,
-      SkiingAlpine,
-      SkiingCrossCountry,
-      Trail,
-      Walking,
-    },
-    props: {
-      sportLabel: {
-        type: String,
-        required: true,
-      },
-      title: {
-        type: String,
-        required: false,
-      },
-    },
-    setup() {
-      return { sportColors: inject('sportColors') }
-    },
+  interface Props {
+    sportLabel: string
+    title?: string
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    title: '',
   })
+
+  const { sportLabel, title } = toRefs(props)
+  const sportColors = inject('sportColors')
 </script>

fittrackee_client/src/components/Common/Loader.vue

@@ -2,13 +2,6 @@
   <div class="loader" />
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue'
-  export default defineComponent({
-    name: 'Loader',
-  })
-</script>
-
 <style scoped lang="scss">
   @import '~@/scss/base';
   .loader {

fittrackee_client/src/components/Common/Modal.vue

@@ -31,38 +31,30 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { ComputedRef, computed, defineComponent, onUnmounted } from 'vue'
+<script setup lang="ts">
+  import { ComputedRef, computed, toRefs, withDefaults, onUnmounted } from 'vue'
 
   import { ROOT_STORE } from '@/store/constants'
   import { useStore } from '@/use/useStore'
 
-  export default defineComponent({
-    name: 'Modal',
-    props: {
-      title: {
-        type: String,
-        required: true,
-      },
-      message: {
-        type: String,
-        required: true,
-      },
-      strongMessage: {
-        type: String || null,
-        default: null,
-      },
-    },
-    emits: ['cancelAction', 'confirmAction'],
-    setup(props, { emit }) {
-      const store = useStore()
-      const errorMessages: ComputedRef<string | string[] | null> = computed(
-        () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
-      )
-      onUnmounted(() => store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES))
-      return { errorMessages, emit }
-    },
+  interface Props {
+    title: string
+    message: string
+    strongMessage?: string | null
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    strongMessage: () => null,
   })
+
+  const emit = defineEmits(['cancelAction', 'confirmAction'])
+
+  const store = useStore()
+
+  const { title, message, strongMessage } = toRefs(props)
+  const errorMessages: ComputedRef<string | string[] | null> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.ERROR_MESSAGES]
+  )
+  onUnmounted(() => store.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES))
 </script>
 
 <style lang="scss" scoped>

fittrackee_client/src/components/Common/NotFound.vue

@@ -6,21 +6,15 @@
   />
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue'
+<script setup lang="ts">
+  import { toRefs, withDefaults } from 'vue'
 
   import Error from '@/components/Common/Error.vue'
-
-  export default defineComponent({
-    name: 'NotFound',
-    components: {
-      Error,
-    },
-    props: {
-      target: {
-        type: String,
-        default: 'PAGE',
-      },
-    },
+  interface Props {
+    target?: string
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    target: 'PAGE',
   })
+  const { target } = toRefs(props)
 </script>

fittrackee_client/src/components/Common/Pagination.vue

@@ -42,37 +42,27 @@
   </nav>
 </template>
 
-<script lang="ts">
-  import { PropType, defineComponent } from 'vue'
+<script setup lang="ts">
+  import { toRefs } from 'vue'
 
-  import { IPagination, TPaginationPayload } from '@/types/api'
+  import { IPagination } from '@/types/api'
+  import { TWorkoutsPayload } from '@/types/workouts'
   import { rangePagination } from '@/utils/api'
 
-  export default defineComponent({
-    name: 'Pagination',
-    props: {
-      pagination: {
-        type: Object as PropType<IPagination>,
-        required: true,
-      },
-      path: {
-        type: String,
-        required: true,
-      },
-      query: {
-        type: Object as PropType<TPaginationPayload>,
-        required: true,
-      },
-    },
-    setup(props) {
-      function getQuery(page: number, cursor?: number): TPaginationPayload {
-        const newQuery = Object.assign({}, props.query)
-        newQuery.page = cursor ? page + cursor : page
-        return newQuery
-      }
-      return { rangePagination, getQuery }
-    },
-  })
+  interface Props {
+    pagination: IPagination
+    path: string
+    query: TWorkoutsPayload
+  }
+  const props = defineProps<Props>()
+
+  const { pagination, path, query } = toRefs(props)
+
+  function getQuery(page: number, cursor?: number): TWorkoutsPayload {
+    const newQuery = Object.assign({}, query.value)
+    newQuery.page = cursor ? page + cursor : page
+    return newQuery
+  }
 </script>
 
 <style lang="scss" scoped>

fittrackee_client/src/components/Common/StatCard.vue

@@ -12,26 +12,16 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue'
+<script setup lang="ts">
+  import { toRefs } from 'vue'
 
-  export default defineComponent({
-    name: 'StatCard',
-    props: {
-      icon: {
-        type: String,
-        required: true,
-      },
-      value: {
-        type: [String, Number],
-        required: true,
-      },
-      text: {
-        type: String,
-        required: true,
-      },
-    },
-  })
+  interface Props {
+    icon: string
+    text: string
+    value: string | number
+  }
+  const props = defineProps<Props>()
+  const { icon, text, value } = toRefs(props)
 </script>
 
 <style lang="scss">

fittrackee_client/src/components/Common/StaticMap.vue

@@ -22,29 +22,21 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, PropType } from 'vue'
+<script setup lang="ts">
+  import { toRefs, withDefaults } from 'vue'
 
   import { IWorkout } from '@/types/workouts'
   import { getApiUrl } from '@/utils'
 
-  export default defineComponent({
-    name: 'StaticMap',
-    props: {
-      workout: {
-        type: Object as PropType<IWorkout>,
-        required: true,
-      },
-      displayHover: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    setup(props) {
-      const imageUrl = `${getApiUrl()}workouts/map/${props.workout.map}`
-      return { imageUrl }
-    },
+  interface Props {
+    workout: IWorkout
+    displayHover?: boolean
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    displayHover: false,
   })
+  const { displayHover } = toRefs(props)
+  const imageUrl = `${getApiUrl()}workouts/map/${props.workout.map}`
 </script>
 
 <style lang="scss">