Client - use <script setup> in components

fittrackee_client/src/views/workouts/AddWorkout.vue

@@ -11,8 +11,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { computed, defineComponent, ComputedRef } from 'vue'
+<script setup lang="ts">
+  import { ComputedRef, computed } from 'vue'
 
   import WorkoutEdition from '@/components/Workout/WorkoutEdition.vue'
   import {
@@ -25,23 +25,15 @@
   import { IWorkoutData } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
 
-  export default defineComponent({
-    name: 'AddWorkout',
-    components: {
-      WorkoutEdition,
-    },
-    setup() {
-      const store = useStore()
-      const sports: ComputedRef<ISport[]> = computed(
-        () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
-      )
-      const authUser: ComputedRef<IUserProfile> = computed(
-        () => store.getters[AUTH_USER_STORE.GETTERS.AUTH_USER_PROFILE]
-      )
-      const workoutData: ComputedRef<IWorkoutData> = computed(
-        () => store.getters[WORKOUTS_STORE.GETTERS.WORKOUT_DATA]
-      )
-      return { authUser, sports, workoutData }
-    },
-  })
+  const store = useStore()
+
+  const sports: ComputedRef<ISport[]> = computed(
+    () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
+  )
+  const authUser: ComputedRef<IUserProfile> = computed(
+    () => store.getters[AUTH_USER_STORE.GETTERS.AUTH_USER_PROFILE]
+  )
+  const workoutData: ComputedRef<IWorkoutData> = computed(
+    () => store.getters[WORKOUTS_STORE.GETTERS.WORKOUT_DATA]
+  )
 </script>

fittrackee_client/src/views/workouts/EditWorkout.vue

@@ -11,14 +11,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import {
-    computed,
-    defineComponent,
-    watch,
-    onBeforeMount,
-    ComputedRef,
-  } from 'vue'
+<script setup lang="ts">
+  import { computed, watch, onBeforeMount, ComputedRef } from 'vue'
   import { useRoute } from 'vue-router'
 
   import WorkoutEdition from '@/components/Workout/WorkoutEdition.vue'
@@ -32,41 +26,31 @@
   import { IWorkoutData } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
 
-  export default defineComponent({
-    name: 'EditWorkout',
-    components: {
-      WorkoutEdition,
-    },
-    setup() {
-      const route = useRoute()
-      const store = useStore()
+  const route = useRoute()
+  const store = useStore()
 
-      onBeforeMount(() => {
-        store.dispatch(WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA, {
-          workoutId: route.params.workoutId,
-        })
-      })
+  const authUser: ComputedRef<IUserProfile> = computed(
+    () => store.getters[AUTH_USER_STORE.GETTERS.AUTH_USER_PROFILE]
+  )
+  const sports: ComputedRef<ISport[]> = computed(
+    () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
+  )
+  const workoutData: ComputedRef<IWorkoutData> = computed(
+    () => store.getters[WORKOUTS_STORE.GETTERS.WORKOUT_DATA]
+  )
 
-      const authUser: ComputedRef<IUserProfile> = computed(
-        () => store.getters[AUTH_USER_STORE.GETTERS.AUTH_USER_PROFILE]
-      )
-      const sports: ComputedRef<ISport[]> = computed(
-        () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
-      )
-      const workoutData: ComputedRef<IWorkoutData> = computed(
-        () => store.getters[WORKOUTS_STORE.GETTERS.WORKOUT_DATA]
-      )
-
-      watch(
-        () => route.params.workoutId,
-        async (newWorkoutId) => {
-          if (!newWorkoutId) {
-            store.commit(WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUT)
-          }
-        }
-      )
-
-      return { authUser, sports, workoutData }
-    },
+  onBeforeMount(() => {
+    store.dispatch(WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA, {
+      workoutId: route.params.workoutId,
+    })
   })
+
+  watch(
+    () => route.params.workoutId,
+    async (newWorkoutId) => {
+      if (!newWorkoutId) {
+        store.commit(WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUT)
+      }
+    }
+  )
 </script>

fittrackee_client/src/views/workouts/Workout.vue

@@ -37,13 +37,13 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import {
     ComputedRef,
     Ref,
     computed,
-    defineComponent,
     ref,
+    toRefs,
     watch,
     onBeforeMount,
     onUnmounted,
@@ -65,92 +65,72 @@
   import { IWorkoutData, IWorkoutPayload, TCoordinates } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
 
-  export default defineComponent({
-    name: 'Workout',
-    components: {
-      NotFound,
-      WorkoutChart,
-      WorkoutDetail,
-      WorkoutNotes,
-      WorkoutSegments,
-    },
-    props: {
-      displaySegment: {
-        type: Boolean,
-        required: true,
-      },
-    },
-    setup(props) {
-      const route = useRoute()
-      const store = useStore()
+  interface Props {
+    displaySegment: boolean
+  }
+  const props = defineProps<Props>()
 
-      onBeforeMount(() => {
-        const payload: IWorkoutPayload = { workoutId: route.params.workoutId }
-        if (props.displaySegment) {
-          payload.segmentId = route.params.segmentId
+  const route = useRoute()
+  const store = useStore()
+
+  const { displaySegment } = toRefs(props)
+  const workoutData: ComputedRef<IWorkoutData> = computed(
+    () => store.getters[WORKOUTS_STORE.GETTERS.WORKOUT_DATA]
+  )
+  const authUser: ComputedRef<IUserProfile> = computed(
+    () => store.getters[AUTH_USER_STORE.GETTERS.AUTH_USER_PROFILE]
+  )
+  const sports: ComputedRef<ISport[]> = computed(
+    () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
+  )
+  let markerCoordinates: Ref<TCoordinates> = ref({
+    latitude: null,
+    longitude: null,
+  })
+
+  onBeforeMount(() => {
+    const payload: IWorkoutPayload = { workoutId: route.params.workoutId }
+    if (props.displaySegment) {
+      payload.segmentId = route.params.segmentId
+    }
+    store.dispatch(WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA, payload)
+  })
+
+  onUnmounted(() => {
+    store.commit(WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUT)
+  })
+
+  function updateCoordinates(coordinates: TCoordinates) {
+    markerCoordinates.value = {
+      latitude: coordinates.latitude,
+      longitude: coordinates.longitude,
+    }
+  }
+
+  watch(
+    () => route.params.workoutId,
+    async (newWorkoutId) => {
+      if (newWorkoutId) {
+        store.dispatch(WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA, {
+          workoutId: newWorkoutId,
+        })
+      }
+    }
+  )
+  watch(
+    () => route.params.segmentId,
+    async (newSegmentId) => {
+      if (route.params.workoutId) {
+        const payload: IWorkoutPayload = {
+          workoutId: route.params.workoutId,
+        }
+        if (newSegmentId) {
+          payload.segmentId = newSegmentId
         }
         store.dispatch(WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA, payload)
-      })
-
-      const workoutData: ComputedRef<IWorkoutData> = computed(
-        () => store.getters[WORKOUTS_STORE.GETTERS.WORKOUT_DATA]
-      )
-      const authUser: ComputedRef<IUserProfile> = computed(
-        () => store.getters[AUTH_USER_STORE.GETTERS.AUTH_USER_PROFILE]
-      )
-      const sports: ComputedRef<ISport[]> = computed(
-        () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
-      )
-      let markerCoordinates: Ref<TCoordinates> = ref({
-        latitude: null,
-        longitude: null,
-      })
-
-      function updateCoordinates(coordinates: TCoordinates) {
-        markerCoordinates.value = {
-          latitude: coordinates.latitude,
-          longitude: coordinates.longitude,
-        }
       }
-
-      watch(
-        () => route.params.workoutId,
-        async (newWorkoutId) => {
-          if (newWorkoutId) {
-            store.dispatch(WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA, {
-              workoutId: newWorkoutId,
-            })
-          }
-        }
-      )
-      watch(
-        () => route.params.segmentId,
-        async (newSegmentId) => {
-          if (route.params.workoutId) {
-            const payload: IWorkoutPayload = {
-              workoutId: route.params.workoutId,
-            }
-            if (newSegmentId) {
-              payload.segmentId = newSegmentId
-            }
-            store.dispatch(WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA, payload)
-          }
-        }
-      )
-
-      onUnmounted(() => {
-        store.commit(WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUT)
-      })
-
-      return {
-        authUser,
-        markerCoordinates,
-        sports,
-        workoutData,
-        updateCoordinates,
-      }
-    },
-  })
+    }
+  )
 </script>
 
 <style lang="scss" scoped>

fittrackee_client/src/views/workouts/WorkoutsView.vue

@@ -26,8 +26,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { ComputedRef, computed, defineComponent, ref } from 'vue'
+<script setup lang="ts">
+  import { ComputedRef, computed, ref } from 'vue'
   import { useI18n } from 'vue-i18n'
 
   import WorkoutsFilters from '@/components/Workouts/WorkoutsFilters.vue'
@@ -38,38 +38,23 @@
   import { useStore } from '@/use/useStore'
   import { translateSports } from '@/utils/sports'
 
-  export default defineComponent({
-    name: 'WorkoutsView',
-    components: {
-      WorkoutsFilters,
-      WorkoutsList,
-    },
-    setup() {
-      const { t } = useI18n()
-      const store = useStore()
-      const authUser: ComputedRef<IUserProfile> = computed(
-        () => store.getters[AUTH_USER_STORE.GETTERS.AUTH_USER_PROFILE]
-      )
-      const sports: ComputedRef<ISport[]> = computed(
-        () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
-      )
-      const translatedSports: ComputedRef<ITranslatedSport[]> = computed(() =>
-        translateSports(sports.value, t)
-      )
-      const hiddenFilters = ref(true)
+  const { t } = useI18n()
+  const store = useStore()
 
-      function toggleFilters() {
-        hiddenFilters.value = !hiddenFilters.value
-      }
+  const authUser: ComputedRef<IUserProfile> = computed(
+    () => store.getters[AUTH_USER_STORE.GETTERS.AUTH_USER_PROFILE]
+  )
+  const sports: ComputedRef<ISport[]> = computed(
+    () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
+  )
+  const translatedSports: ComputedRef<ITranslatedSport[]> = computed(() =>
+    translateSports(sports.value, t)
+  )
+  const hiddenFilters = ref(true)
 
-      return {
-        authUser,
-        hiddenFilters,
-        translatedSports,
-        toggleFilters,
-      }
-    },
-  })
+  function toggleFilters() {
+    hiddenFilters.value = !hiddenFilters.value
+  }
 </script>
 
 <style lang="scss" scoped>