Client - dashboard refactoring

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

@@ -25,7 +25,7 @@
   import { useI18n } from 'vue-i18n'
 
   import WorkoutCard from '@/components/Dashboard/Timeline/WorkoutCard.vue'
-  import { SPORTS_STORE, WORKOUTS_STORE } from '@/store/constants'
+  import { WORKOUTS_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
   import { IAuthUserProfile } from '@/types/user'
   import { IWorkout } from '@/types/workouts'
@@ -37,6 +37,10 @@
       WorkoutCard,
     },
     props: {
+      sports: {
+        type: Object as PropType<ISport[]>,
+        required: true,
+      },
       user: {
         type: Object as PropType<IAuthUserProfile>,
         required: true,
@@ -45,6 +49,7 @@
     setup() {
       const store = useStore()
       const { t } = useI18n()
+
       onBeforeMount(() =>
         store.dispatch(WORKOUTS_STORE.ACTIONS.GET_USER_WORKOUTS, { page: 1 })
       )
@@ -53,11 +58,7 @@
         () => store.getters[WORKOUTS_STORE.GETTERS.USER_WORKOUTS]
       )
 
-      const sports: ComputedRef<ISport[]> = computed(
-        () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
-      )
-
-      return { workouts, sports, t }
+      return { workouts, t }
     },
   })
 </script>

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

@@ -4,7 +4,7 @@
       <template #content>
         <CalendarHeader :day="day" locale-options="enGB" />
         <CalendarDays :start-date="calendarDates.start" locale-options="enGB" />
-        <CalendaCells
+        <CalendarCells
           :currentDay="day"
           :end-date="calendarDates.end"
           :sports="sports"
@@ -21,18 +21,19 @@
 <script lang="ts">
   import { format } from 'date-fns'
   import {
+    ComputedRef,
     PropType,
+    computed,
     defineComponent,
     onBeforeMount,
-    ComputedRef,
-    computed,
   } from 'vue'
 
   import Card from '@/components/Common/Card.vue'
-  import CalendaCells from '@/components/Dashboard/UserCalendar/CalendarCells.vue'
+  import CalendarCells from '@/components/Dashboard/UserCalendar/CalendarCells.vue'
   import CalendarDays from '@/components/Dashboard/UserCalendar/CalendarDays.vue'
   import CalendarHeader from '@/components/Dashboard/UserCalendar/CalendarHeader.vue'
-  import { SPORTS_STORE, WORKOUTS_STORE } from '@/store/constants'
+  import { WORKOUTS_STORE } from '@/store/constants'
+  import { ISport } from '@/types/sports'
   import { IAuthUserProfile } from '@/types/user'
   import { IWorkout, IWorkoutsPayload } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
@@ -41,12 +42,16 @@
   export default defineComponent({
     name: 'UserCalendar',
     components: {
-      CalendaCells,
+      CalendarCells,
       CalendarDays,
       CalendarHeader,
       Card,
     },
     props: {
+      sports: {
+        type: Object as PropType<ISport[]>,
+        required: true,
+      },
       user: {
         type: Object as PropType<IAuthUserProfile>,
         required: true,
@@ -54,6 +59,11 @@
     },
     setup(props) {
       const store = useStore()
+
+      onBeforeMount(() =>
+        store.dispatch(WORKOUTS_STORE.ACTIONS.GET_CALENDAR_WORKOUTS, apiParams)
+      )
+
       const dateFormat = 'yyyy-MM-dd'
       const day = new Date()
       const calendarDates = getCalendarStartAndEnd(day, props.user.weekm)
@@ -66,13 +76,8 @@
       const calendarWorkouts: ComputedRef<IWorkout[]> = computed(
         () => store.getters[WORKOUTS_STORE.GETTERS.CALENDAR_WORKOUTS]
       )
-      const sports = computed(() => store.getters[SPORTS_STORE.GETTERS.SPORTS])
 
-      onBeforeMount(() =>
-        store.dispatch(WORKOUTS_STORE.ACTIONS.GET_CALENDAR_WORKOUTS, apiParams)
-      )
-
-      return { day, calendarDates, calendarWorkouts, sports }
+      return { day, calendarDates, calendarWorkouts }
     },
   })
 </script>

fittrackee_client/src/components/Dashboard/UserMonthStats.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script lang="ts">
-  import { startOfMonth, endOfMonth, format } from 'date-fns'
+  import { endOfMonth, format, startOfMonth } from 'date-fns'
   import {
     ComputedRef,
     PropType,
@@ -64,7 +64,7 @@
 
   import Card from '@/components/Common/Card.vue'
   import Chart from '@/components/Common/StatsChart/index.vue'
-  import { STATS_STORE, SPORTS_STORE, USER_STORE } from '@/store/constants'
+  import { STATS_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
   import { IStatisticsDateParams, TStatisticsFromApi } from '@/types/statistics'
   import { IAuthUserProfile } from '@/types/user'
@@ -77,6 +77,10 @@
       Chart,
     },
     props: {
+      sports: {
+        type: Object as PropType<ISport[]>,
+        required: true,
+      },
       user: {
         type: Object as PropType<IAuthUserProfile>,
         required: true,
@@ -84,9 +88,13 @@
     },
     setup(props) {
       const store = useStore()
-      const date = new Date()
       const { t } = useI18n()
+
+      onBeforeMount(() => getStatistics())
+
+      const date = new Date()
       const dateFormat = 'yyyy-MM-dd'
+      let displayedData = ref('total_distance')
       const chartParams: IStatisticsDateParams = {
         duration: 'week',
         start: startOfMonth(date),
@@ -100,18 +108,10 @@
       const statistics: ComputedRef<TStatisticsFromApi> = computed(
         () => store.getters[STATS_STORE.GETTERS.USER_STATS]
       )
-      const sports: ComputedRef<ISport[]> = computed(
-        () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
-      )
-      const authUser: ComputedRef<IAuthUserProfile> = computed(
-        () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
-      )
-      let displayedData = ref('total_distance')
 
       function updateDisplayData(event: Event & { target: HTMLInputElement }) {
         displayedData.value = event.target.name
       }
-
       function getStatistics() {
         store.dispatch(STATS_STORE.ACTIONS.GET_USER_STATS, {
           username: props.user.username,
@@ -120,16 +120,13 @@
         })
       }
 
-      onBeforeMount(() => getStatistics())
-
       return {
+        weekStartingMonday: computed<boolean>(() => props.user.weekm),
         chartParams,
         displayedData,
-        sports,
         statistics,
         t,
         updateDisplayData,
-        weekStartingMonday: computed<boolean>(() => authUser.value.weekm),
       }
     },
   })

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

@@ -23,9 +23,8 @@
   import { useI18n } from 'vue-i18n'
 
   import RecordsCard from '@/components/Dashboard/UserRecords/RecordsCard.vue'
-  import { SPORTS_STORE } from '@/store/constants'
+  import { ISport } from '@/types/sports'
   import { IAuthUserProfile } from '@/types/user'
-  import { useStore } from '@/use/useStore'
   import { getRecordsBySports } from '@/utils/records'
   import { translateSports } from '@/utils/sports'
 
@@ -35,18 +34,21 @@
       RecordsCard,
     },
     props: {
+      sports: {
+        type: Object as PropType<ISport[]>,
+        required: true,
+      },
       user: {
         type: Object as PropType<IAuthUserProfile>,
         required: true,
       },
     },
     setup(props) {
-      const store = useStore()
       const { t } = useI18n()
       const recordsBySport = computed(() =>
         getRecordsBySports(
           props.user.records,
-          translateSports(store.getters[SPORTS_STORE.GETTERS.SPORTS], t),
+          translateSports(props.sports, t),
           props.user.timezone
         )
       )

fittrackee_client/src/views/DashBoard.vue

@@ -1,16 +1,16 @@
 <template>
-  <div id="dashboard" v-if="authUser.username">
+  <div id="dashboard" v-if="authUser.username && sports.length > 0">
     <div class="container">
       <UserStatsCards :user="authUser" />
     </div>
     <div class="container dashboard-container">
       <div class="left-container dashboard-sub-container">
-        <UserMonthStats :user="authUser" />
-        <UserRecords :user="authUser" />
+        <UserMonthStats :sports="sports" :user="authUser" />
+        <UserRecords :sports="sports" :user="authUser" />
       </div>
       <div class="right-container dashboard-sub-container">
-        <UserCalendar :user="authUser" />
-        <Timeline :user="authUser" />
+        <UserCalendar :sports="sports" :user="authUser" />
+        <Timeline :sports="sports" :user="authUser" />
       </div>
     </div>
   </div>
@@ -24,7 +24,8 @@
   import UserMonthStats from '@/components/Dashboard/UserMonthStats.vue'
   import UserRecords from '@/components/Dashboard/UserRecords/index.vue'
   import UserStatsCards from '@/components/Dashboard/UserStatsCards/index.vue'
-  import { USER_STORE } from '@/store/constants'
+  import { SPORTS_STORE, USER_STORE } from '@/store/constants'
+  import { ISport } from '@/types/sports'
   import { IAuthUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
 
@@ -42,7 +43,10 @@
       const authUser: ComputedRef<IAuthUserProfile> = computed(
         () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
       )
-      return { authUser }
+      const sports: ComputedRef<ISport[]> = computed(
+        () => store.getters[SPORTS_STORE.GETTERS.SPORTS]
+      )
+      return { authUser, sports }
     },
   })
 </script>