Client - use <script setup> in components

fittrackee_client/src/components/Dashboard/UserStatsCards/index.vue

@@ -12,8 +12,8 @@
     />
     <StatCard
       icon="clock-o"
-      :value="total_duration.days"
-      :text="total_duration.duration"
+      :value="totalDuration.days"
+      :text="totalDuration.duration"
     />
     <StatCard
       icon="tags"
@@ -23,49 +23,40 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { ComputedRef, PropType, defineComponent, computed } from 'vue'
+<script setup lang="ts">
+  import { ComputedRef, computed, toRefs } from 'vue'
   import { useI18n } from 'vue-i18n'
 
   import StatCard from '@/components/Common/StatCard.vue'
   import { IUserProfile } from '@/types/user'
+  interface Props {
+    user: IUserProfile
+  }
+  const props = defineProps<Props>()
 
-  export default defineComponent({
-    name: 'UserStatsCards',
-    components: {
-      StatCard,
-    },
-    props: {
-      user: {
-        type: Object as PropType<IUserProfile>,
-        required: true,
-      },
-    },
-    setup(props) {
-      const { t } = useI18n()
-      const total_duration: ComputedRef<string> = computed(
-        () => props.user.total_duration
-      )
+  const { t } = useI18n()
 
-      function get_duration(total_duration: ComputedRef<string>) {
-        const duration = total_duration.value.match(/day/g)
-          ? total_duration.value.split(', ')[1]
-          : total_duration.value
-        return {
-          days: total_duration.value.match(/day/g)
-            ? `${total_duration.value.split(' ')[0]} ${
-                total_duration.value.match(/days/g)
-                  ? t('common.DAY', 2)
-                  : t('common.DAY', 1)
-              }`
-            : `0 ${t('common.DAY', 2)},`,
-          duration: `${duration.split(':')[0]}h ${duration.split(':')[1]}min`,
-        }
-      }
+  const { user } = toRefs(props)
+  const userTotalDuration: ComputedRef<string> = computed(
+    () => props.user.total_duration
+  )
+  const totalDuration = computed(() => get_duration(userTotalDuration))
 
-      return { total_duration: computed(() => get_duration(total_duration)) }
-    },
-  })
+  function get_duration(total_duration: ComputedRef<string>) {
+    const duration = total_duration.value.match(/day/g)
+      ? total_duration.value.split(', ')[1]
+      : total_duration.value
+    return {
+      days: total_duration.value.match(/day/g)
+        ? `${total_duration.value.split(' ')[0]} ${
+            total_duration.value.match(/days/g)
+              ? t('common.DAY', 2)
+              : t('common.DAY', 1)
+          }`
+        : `0 ${t('common.DAY', 2)},`,
+      duration: `${duration.split(':')[0]}h ${duration.split(':')[1]}min`,
+    }
+  }
 </script>
 
 <style lang="scss">