Client - use <script setup> in components

fittrackee_client/src/views/AdminView.vue

@@ -12,51 +12,30 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { computed, ComputedRef, defineComponent, onBeforeMount } from 'vue'
+<script setup lang="ts">
+  import { computed, ComputedRef, onBeforeMount } from 'vue'
 
   import NotFound from '@/components/Common/NotFound.vue'
   import { AUTH_USER_STORE, ROOT_STORE } from '@/store/constants'
   import { TAppConfig, IAppStatistics } from '@/types/application'
   import { useStore } from '@/use/useStore'
 
-  export default defineComponent({
-    name: 'Admin',
-    components: {
-      NotFound,
-    },
-    setup() {
-      const store = useStore()
+  const store = useStore()
 
-      onBeforeMount(() =>
-        store.dispatch(ROOT_STORE.ACTIONS.GET_APPLICATION_STATS)
-      )
+  const appConfig: ComputedRef<TAppConfig> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
+  )
+  const appStatistics: ComputedRef<IAppStatistics> = computed(
+    () => store.getters[ROOT_STORE.GETTERS.APP_STATS]
+  )
+  const isAuthUserAmin: ComputedRef<boolean> = computed(
+    () => store.getters[AUTH_USER_STORE.GETTERS.IS_ADMIN]
+  )
+  const userLoading: ComputedRef<boolean> = computed(
+    () => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
+  )
 
-      const appLoading: ComputedRef<boolean> = computed(
-        () => store.getters[ROOT_STORE.GETTERS.APP_LOADING]
-      )
-      const appConfig: ComputedRef<TAppConfig> = computed(
-        () => store.getters[ROOT_STORE.GETTERS.APP_CONFIG]
-      )
-      const appStatistics: ComputedRef<IAppStatistics> = computed(
-        () => store.getters[ROOT_STORE.GETTERS.APP_STATS]
-      )
-      const isAuthUserAmin: ComputedRef<boolean> = computed(
-        () => store.getters[AUTH_USER_STORE.GETTERS.IS_ADMIN]
-      )
-      const userLoading: ComputedRef<boolean> = computed(
-        () => store.getters[AUTH_USER_STORE.GETTERS.USER_LOADING]
-      )
-
-      return {
-        appConfig,
-        appLoading,
-        appStatistics,
-        isAuthUserAmin,
-        userLoading,
-      }
-    },
-  })
+  onBeforeMount(() => store.dispatch(ROOT_STORE.ACTIONS.GET_APPLICATION_STATS))
 </script>
 
 <style lang="scss" scoped>

fittrackee_client/src/views/Dashboard.vue

@@ -72,8 +72,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { ComputedRef, Ref, computed, defineComponent, ref } from 'vue'
+<script setup lang="ts">
+  import { ComputedRef, Ref, computed, ref } from 'vue'
 
   import Timeline from '@/components/Dashboard/Timeline.vue'
   import UserCalendar from '@/components/Dashboard/UserCalendar/index.vue'
@@ -85,32 +85,19 @@
   import { IUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
 
-  export default defineComponent({
-    name: 'Dashboard',
-    components: {
-      Timeline,
-      UserCalendar,
-      UserMonthStats,
-      UserRecords,
-      UserStatsCards,
-    },
-    setup() {
-      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 isSelected: Ref<string> = ref('chart')
+  const store = useStore()
 
-      function updateDisplayColumn(target: string) {
-        isSelected.value = target
-      }
+  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 isSelected: Ref<string> = ref('chart')
 
-      return { authUser, sports, isSelected, updateDisplayColumn }
-    },
-  })
+  function updateDisplayColumn(target: string) {
+    isSelected.value = target
+  }
 </script>
 
 <style lang="scss" scoped>

fittrackee_client/src/views/NotFoundView.vue

@@ -4,15 +4,6 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue'
-
+<script setup lang="ts">
   import NotFound from '@/components/Common/NotFound.vue'
-
-  export default defineComponent({
-    name: 'NotFoundView',
-    components: {
-      NotFound,
-    },
-  })
 </script>

fittrackee_client/src/views/StatisticsView.vue

@@ -16,8 +16,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { ComputedRef, computed, defineComponent } from 'vue'
+<script setup lang="ts">
+  import { ComputedRef, computed } from 'vue'
 
   import Statistics from '@/components/Statistics/index.vue'
   import NoWorkouts from '@/components/Workouts/NoWorkouts.vue'
@@ -26,25 +26,16 @@
   import { IUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
 
-  export default defineComponent({
-    name: 'StatisticsView',
-    components: {
-      NoWorkouts,
-      Statistics,
-    },
-    setup() {
-      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].filter((sport) =>
-          authUser.value.sports_list.includes(sport.id)
-        )
-      )
-      return { authUser, sports }
-    },
-  })
+  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].filter((sport) =>
+      authUser.value.sports_list.includes(sport.id)
+    )
+  )
 </script>
 
 <style lang="scss" scoped>

fittrackee_client/src/views/user/LoginOrRegister.vue

@@ -11,25 +11,18 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue'
+<script setup lang="ts">
+  import { toRefs } from 'vue'
 
   import BikePic from '@/components/BikePic.vue'
   import LoginOrRegisterForm from '@/components/User/UserAuthForm.vue'
 
-  export default defineComponent({
-    name: 'NavBar',
-    components: {
-      BikePic,
-      LoginOrRegisterForm,
-    },
-    props: {
-      action: {
-        type: String,
-        required: true,
-      },
-    },
-  })
+  interface Props {
+    action: string
+  }
+  const props = defineProps<Props>()
+
+  const { action } = toRefs(props)
 </script>
 
 <style lang="scss">

fittrackee_client/src/views/user/PasswordResetView.vue

@@ -11,37 +11,28 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { computed, defineComponent, onBeforeMount } from 'vue'
+<script setup lang="ts">
+  import { computed, toRefs, onBeforeMount } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
 
   import PasswordEmailSent from '@/components/User/PasswordReset/PasswordActionDone.vue'
   import PasswordResetRequest from '@/components/User/PasswordReset/PasswordResetForm.vue'
-  export default defineComponent({
-    name: 'PasswordResetView',
-    components: {
-      PasswordEmailSent,
-      PasswordResetRequest,
-    },
-    props: {
-      action: {
-        type: String,
-        required: true,
-      },
-    },
-    setup(props) {
-      const route = useRoute()
-      const router = useRouter()
-      const token = computed(() => route.query.token)
 
-      onBeforeMount(() => {
-        if (props.action === 'reset' && !token.value) {
-          router.push('/')
-        }
-      })
+  interface Props {
+    action: string
+  }
+  const props = defineProps<Props>()
 
-      return { token }
-    },
+  const route = useRoute()
+  const router = useRouter()
+
+  const { action } = toRefs(props)
+  const token = computed(() => route.query.token)
+
+  onBeforeMount(() => {
+    if (props.action === 'reset' && !token.value) {
+      router.push('/')
+    }
   })
 </script>
 

fittrackee_client/src/views/user/ProfileView.vue

@@ -4,23 +4,18 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { computed, ComputedRef, defineComponent } from 'vue'
+<script setup lang="ts">
+  import { ComputedRef, computed } from 'vue'
 
   import { AUTH_USER_STORE } from '@/store/constants'
   import { IUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
 
-  export default defineComponent({
-    name: 'ProfileView',
-    setup() {
-      const store = useStore()
-      const authUser: ComputedRef<IUserProfile> = computed(
-        () => store.getters[AUTH_USER_STORE.GETTERS.AUTH_USER_PROFILE]
-      )
-      return { authUser }
-    },
-  })
+  const store = useStore()
+
+  const authUser: ComputedRef<IUserProfile> = computed(
+    () => store.getters[AUTH_USER_STORE.GETTERS.AUTH_USER_PROFILE]
+  )
 </script>
 
 <style lang="scss" scoped>

fittrackee_client/src/views/user/UserView.vue

@@ -7,14 +7,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import {
-    ComputedRef,
-    computed,
-    defineComponent,
-    onBeforeMount,
-    onBeforeUnmount,
-  } from 'vue'
+<script setup lang="ts">
+  import { ComputedRef, computed, onBeforeMount, onBeforeUnmount } from 'vue'
   import { useRoute } from 'vue-router'
 
   import UserHeader from '@/components/User/ProfileDisplay/UserHeader.vue'
@@ -23,35 +17,21 @@
   import { IUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
 
-  export default defineComponent({
-    name: 'UserView',
-    components: {
-      UserHeader,
-      UserInfos,
-    },
-    setup() {
-      const route = useRoute()
-      const store = useStore()
+  const route = useRoute()
+  const store = useStore()
 
-      const user: ComputedRef<IUserProfile> = computed(
-        () => store.getters[USERS_STORE.GETTERS.USER]
-      )
+  const user: ComputedRef<IUserProfile> = computed(
+    () => store.getters[USERS_STORE.GETTERS.USER]
+  )
 
-      onBeforeMount(() => {
-        if (
-          route.params.username &&
-          typeof route.params.username === 'string'
-        ) {
-          store.dispatch(USERS_STORE.ACTIONS.GET_USER, route.params.username)
-        }
-      })
+  onBeforeMount(() => {
+    if (route.params.username && typeof route.params.username === 'string') {
+      store.dispatch(USERS_STORE.ACTIONS.GET_USER, route.params.username)
+    }
+  })
 
-      onBeforeUnmount(() => {
-        store.dispatch(USERS_STORE.ACTIONS.EMPTY_USER)
-      })
-
-      return { user }
-    },
+  onBeforeUnmount(() => {
+    store.dispatch(USERS_STORE.ACTIONS.EMPTY_USER)
   })
 </script>
 

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>