Client - use <script setup> in components

fittrackee_client/src/components/Statistics/StatsMenu.vue

@@ -37,29 +37,18 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref } from 'vue'
+<script setup lang="ts">
+  import { ref } from 'vue'
 
-  export default defineComponent({
-    name: 'StatsMenu',
-    emits: ['arrowClick', 'timeFrameUpdate'],
-    setup(props, { emit }) {
-      let selectedTimeFrame = ref('month')
-      const timeFrames = ['week', 'month', 'year']
+  const emit = defineEmits(['arrowClick', 'timeFrameUpdate'])
 
-      function onUpdateTimeFrame(timeFrame: string) {
-        selectedTimeFrame.value = timeFrame
-        emit('timeFrameUpdate', timeFrame)
-      }
+  let selectedTimeFrame = ref('month')
+  const timeFrames = ['week', 'month', 'year']
 
-      return {
-        selectedTimeFrame,
-        timeFrames,
-        onUpdateTimeFrame,
-        emit,
-      }
-    },
-  })
+  function onUpdateTimeFrame(timeFrame: string) {
+    selectedTimeFrame.value = timeFrame
+    emit('timeFrameUpdate', timeFrame)
+  }
 </script>
 
 <style lang="scss" scoped>

fittrackee_client/src/components/Statistics/StatsSportsMenu.vue

@@ -19,43 +19,34 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { ComputedRef, PropType, computed, defineComponent, inject } from 'vue'
+<script setup lang="ts">
+  import { ComputedRef, computed, inject, withDefaults, toRefs } from 'vue'
   import { useI18n } from 'vue-i18n'
 
   import { ISport, ITranslatedSport } from '@/types/sports'
   import { translateSports } from '@/utils/sports'
 
-  export default defineComponent({
-    name: 'SportsMenu',
-    props: {
-      selectedSportIds: {
-        type: Array as PropType<number[]>,
-        default: () => [],
-      },
-      userSports: {
-        type: Object as PropType<ISport[]>,
-        required: true,
-      },
-    },
-    emits: ['selectedSportIdsUpdate'],
-    setup(props, { emit }) {
-      const { t } = useI18n()
-      const translatedSports: ComputedRef<ITranslatedSport[]> = computed(() =>
-        translateSports(props.userSports, t)
-      )
-
-      function updateSelectedSportIds(sportId: number) {
-        emit('selectedSportIdsUpdate', sportId)
-      }
-
-      return {
-        sportColors: inject('sportColors'),
-        translatedSports,
-        updateSelectedSportIds,
-      }
-    },
+  interface Props {
+    userSports: ISport[]
+    selectedSportIds?: number[]
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    selectedSportIds: () => [],
   })
+
+  const emit = defineEmits(['selectedSportIdsUpdate'])
+
+  const { t } = useI18n()
+
+  const sportColors = inject('sportColors')
+  const { selectedSportIds } = toRefs(props)
+  const translatedSports: ComputedRef<ITranslatedSport[]> = computed(() =>
+    translateSports(props.userSports, t)
+  )
+
+  function updateSelectedSportIds(sportId: number) {
+    emit('selectedSportIdsUpdate', sportId)
+  }
 </script>
 
 <style lang="scss">

fittrackee_client/src/components/Statistics/index.vue

@@ -19,16 +19,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import {
-    ComputedRef,
-    PropType,
-    Ref,
-    computed,
-    defineComponent,
-    ref,
-    watch,
-  } from 'vue'
+<script setup lang="ts">
+  import { ComputedRef, Ref, computed, ref, toRefs, watch } from 'vue'
   import { useI18n } from 'vue-i18n'
 
   import StatChart from '@/components/Common/StatsChart/index.vue'
@@ -40,81 +32,57 @@
   import { translateSports } from '@/utils/sports'
   import { getStatsDateParams, updateChartParams } from '@/utils/statistics'
 
-  export default defineComponent({
-    name: 'Statistics',
-    components: {
-      SportsMenu,
-      StatChart,
-      StatsMenu,
-    },
-    props: {
-      sports: {
-        type: Object as PropType<ISport[]>,
-        required: true,
-      },
-      user: {
-        type: Object as PropType<IUserProfile>,
-        required: true,
-      },
-    },
-    setup(props) {
-      const { t } = useI18n()
-      let selectedTimeFrame = ref('month')
-      const timeFrames = ['week', 'month', 'year']
-      const chartParams: Ref<IStatisticsDateParams> = ref(
-        getChartParams(selectedTimeFrame.value)
-      )
-      const translatedSports: ComputedRef<ITranslatedSport[]> = computed(() =>
-        translateSports(props.sports, t)
-      )
-      const selectedSportIds: Ref<number[]> = ref(getSports(props.sports))
+  interface Props {
+    sports: ISport[]
+    user: IUserProfile
+  }
+  const props = defineProps<Props>()
 
-      function updateTimeFrame(timeFrame: string) {
-        selectedTimeFrame.value = timeFrame
-        chartParams.value = getChartParams(selectedTimeFrame.value)
-      }
-      function getChartParams(timeFrame: string): IStatisticsDateParams {
-        return getStatsDateParams(new Date(), timeFrame, props.user.weekm)
-      }
-      function handleOnClickArrows(backward: boolean) {
-        chartParams.value = updateChartParams(
-          chartParams.value,
-          backward,
-          props.user.weekm
-        )
-      }
-      function getSports(sports: ISport[]) {
-        return sports.map((sport) => sport.id)
-      }
-      function updateSelectedSportIds(sportId: number) {
-        if (selectedSportIds.value.includes(sportId)) {
-          selectedSportIds.value = selectedSportIds.value.filter(
-            (id) => id !== sportId
-          )
-        } else {
-          selectedSportIds.value.push(sportId)
-        }
-      }
+  const { t } = useI18n()
 
-      watch(
-        () => props.sports,
-        (newSports) => {
-          selectedSportIds.value = getSports(newSports)
-        }
+  const { sports, user } = toRefs(props)
+  let selectedTimeFrame = ref('month')
+  const chartParams: Ref<IStatisticsDateParams> = ref(
+    getChartParams(selectedTimeFrame.value)
+  )
+  const translatedSports: ComputedRef<ITranslatedSport[]> = computed(() =>
+    translateSports(props.sports, t)
+  )
+  const selectedSportIds: Ref<number[]> = ref(getSports(props.sports))
+
+  function updateTimeFrame(timeFrame: string) {
+    selectedTimeFrame.value = timeFrame
+    chartParams.value = getChartParams(selectedTimeFrame.value)
+  }
+  function getChartParams(timeFrame: string): IStatisticsDateParams {
+    return getStatsDateParams(new Date(), timeFrame, props.user.weekm)
+  }
+  function handleOnClickArrows(backward: boolean) {
+    chartParams.value = updateChartParams(
+      chartParams.value,
+      backward,
+      props.user.weekm
+    )
+  }
+  function getSports(sports: ISport[]) {
+    return sports.map((sport) => sport.id)
+  }
+  function updateSelectedSportIds(sportId: number) {
+    if (selectedSportIds.value.includes(sportId)) {
+      selectedSportIds.value = selectedSportIds.value.filter(
+        (id) => id !== sportId
       )
+    } else {
+      selectedSportIds.value.push(sportId)
+    }
+  }
 
-      return {
-        chartParams,
-        selectedTimeFrame,
-        timeFrames,
-        translatedSports,
-        selectedSportIds,
-        handleOnClickArrows,
-        updateSelectedSportIds,
-        updateTimeFrame,
-      }
-    },
-  })
+  watch(
+    () => props.sports,
+    (newSports) => {
+      selectedSportIds.value = getSports(newSports)
+    }
+  )
 </script>
 
 <style lang="scss" scoped>