Client - minor refactoring

fittrackee_client/src/components/Workout/WorkoutChart/index.vue

@@ -46,7 +46,7 @@
   import { IAuthUserProfile } from '@/types/user'
   import {
     IWorkoutChartData,
-    IWorkoutState,
+    IWorkoutData,
     TCoordinates,
   } from '@/types/workouts'
   import { getDatasets } from '@/utils/workouts'
@@ -62,8 +62,8 @@
         type: Object as PropType<IAuthUserProfile>,
         required: true,
       },
-      workout: {
+      workoutData: {
-        type: Object as PropType<IWorkoutState>,
+        type: Object as PropType<IWorkoutData>,
         required: true,
       },
     },
@@ -72,7 +72,7 @@
       const { t } = useI18n()
       let displayDistance = ref(true)
       const datasets: ComputedRef<IWorkoutChartData> = computed(() =>
-        getDatasets(props.workout.chartData, t)
+        getDatasets(props.workoutData.chartData, t)
       )
       let chartData: ComputedRef<ChartData<'line'>> = computed(() => ({
         labels: displayDistance.value

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue

@@ -35,7 +35,7 @@
 
   import { ROOT_STORE } from '@/store/constants'
   import { GeoJSONData } from '@/types/geojson'
-  import { IWorkoutState, TCoordinates } from '@/types/workouts'
+  import { IWorkoutData, TCoordinates } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
   import { getApiUrl } from '@/utils'
 
@@ -48,8 +48,8 @@
       LTileLayer,
     },
     props: {
-      workout: {
+      workoutData: {
-        type: Object as PropType<IWorkoutState>,
+        type: Object as PropType<IWorkoutData>,
       },
       markerCoordinates: {
         type: Object as PropType<TCoordinates>,
@@ -89,15 +89,15 @@
       }
 
       const bounds = computed(() =>
-        props.workout
+        props.workoutData
           ? [
               [
-                props.workout.workout.bounds[0],
+                props.workoutData.workout.bounds[0],
-                props.workout.workout.bounds[1],
+                props.workoutData.workout.bounds[1],
               ],
               [
-                props.workout.workout.bounds[2],
+                props.workoutData.workout.bounds[2],
-                props.workout.workout.bounds[3],
+                props.workoutData.workout.bounds[3],
               ],
             ]
           : []
@@ -111,8 +111,8 @@
         bounds: bounds,
         center: computed(() => getCenter(bounds)),
         geoJson: computed(() =>
-          props.workout && props.workout.gpx
+          props.workoutData && props.workoutData.gpx
-            ? getGeoJson(props.workout.gpx)
+            ? getGeoJson(props.workoutData.gpx)
             : {}
         ),
         options: { zoom: 13 },

fittrackee_client/src/components/Workout/WorkoutDetail/index.vue

@@ -4,17 +4,17 @@
       <template #title>
         <div
           class="workout-previous workout-arrow"
-          :class="{ inactive: !workout.workout.previous_workout }"
+          :class="{ inactive: !workoutData.workout.previous_workout }"
           :title="
-            workout.workout.previous_workout
+            workoutData.workout.previous_workout
               ? t('workouts.PREVIOUS_WORKOUT')
               : t('workouts.NO_PREVIOUS_WORKOUT')
           "
           @click="
-            workout.workout.previous_workout
+            workoutData.workout.previous_workout
               ? $router.push({
                   name: 'Workout',
-                  params: { workoutId: workout.workout.previous_workout },
+                  params: { workoutId: workoutData.workout.previous_workout },
                 })
               : null
           "
@@ -26,7 +26,7 @@
             <img alt="workout sport logo" :src="sport.img" />
           </div>
           <div class="workout-title-date">
-            <div class="workout-title">{{ workout.workout.title }}</div>
+            <div class="workout-title">{{ workoutData.workout.title }}</div>
             <div class="workout-date">
               {{ workoutDate.workout_date }} - {{ workoutDate.workout_time }}
             </div>
@@ -34,17 +34,17 @@
         </div>
         <div
           class="workout-next workout-arrow"
-          :class="{ inactive: !workout.workout.next_workout }"
+          :class="{ inactive: !workoutData.workout.next_workout }"
           :title="
-            workout.workout.next_workout
+            workoutData.workout.next_workout
               ? t('workouts.NEXT_WORKOUT')
               : t('workouts.NO_NEXT_WORKOUT')
           "
           @click="
-            workout.workout.next_workout
+            workoutData.workout.next_workout
               ? $router.push({
                   name: 'Workout',
-                  params: { workoutId: workout.workout.next_workout },
+                  params: { workoutId: workoutData.workout.next_workout },
                 })
               : null
           "
@@ -53,8 +53,11 @@
         </div>
       </template>
       <template #content>
-        <WorkoutMap :workout="workout" :markerCoordinates="markerCoordinates" />
+        <WorkoutMap
-        <WorkoutData :workout="workout.workout" />
+          :workoutData="workoutData"
+          :markerCoordinates="markerCoordinates"
+        />
+        <WorkoutData :workout="workoutData.workout" />
       </template>
     </Card>
   </div>
@@ -71,7 +74,7 @@
   import { WORKOUTS_STORE } from '@/store/constants'
   import { ISport } from '@/types/sports'
   import { IAuthUserProfile } from '@/types/user'
-  import { IWorkoutState, TCoordinates } from '@/types/workouts'
+  import { IWorkoutData, TCoordinates } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
   import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
 
@@ -94,8 +97,8 @@
       sports: {
         type: Object as PropType<ISport[]>,
       },
-      workout: {
+      workoutData: {
-        type: Object as PropType<IWorkoutState>,
+        type: Object as PropType<IWorkoutData>,
         required: true,
       },
     },
@@ -106,21 +109,21 @@
       watch(
         () => route.params.workoutId,
         async (newWorkoutId) => {
-          store.dispatch(WORKOUTS_STORE.ACTIONS.GET_WORKOUT, newWorkoutId)
+          store.dispatch(WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA, newWorkoutId)
         }
       )
       return {
         sport: computed(() =>
           props.sports
             ? props.sports.find(
-                (sport) => sport.id === props.workout.workout.sport_id
+                (sport) => sport.id === props.workoutData.workout.sport_id
               )
             : {}
         ),
         workoutDate: computed(() =>
           formatWorkoutDate(
             getDateWithTZ(
-              props.workout.workout.workout_date,
+              props.workoutData.workout.workout_date,
               props.authUser.timezone
             )
           )

fittrackee_client/src/store/modules/workouts/actions.ts

@@ -49,7 +49,7 @@ export const actions: ActionTree<IWorkoutsState, IRootState> &
   ): void {
     getWorkouts(context, payload, 'USER_WORKOUTS')
   },
-  [WORKOUTS_STORE.ACTIONS.GET_WORKOUT](
+  [WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA](
     context: ActionContext<IWorkoutsState, IRootState>,
     workoutId: string
   ): void {

fittrackee_client/src/store/modules/workouts/enums.ts

@@ -1,13 +1,13 @@
 export enum WorkoutsActions {
   GET_CALENDAR_WORKOUTS = 'GET_CALENDAR_WORKOUTS',
   GET_USER_WORKOUTS = 'GET_USER_WORKOUTS',
-  GET_WORKOUT = 'GET_WORKOUT',
+  GET_WORKOUT_DATA = 'GET_WORKOUT_DATA',
 }
 
 export enum WorkoutsGetters {
   CALENDAR_WORKOUTS = 'CALENDAR_WORKOUTS',
   USER_WORKOUTS = 'USER_WORKOUTS',
-  WORKOUT = 'WORKOUT',
+  WORKOUT_DATA = 'WORKOUT_DATA',
 }
 
 export enum WorkoutsMutations {

fittrackee_client/src/store/modules/workouts/getters.ts

@@ -15,7 +15,7 @@ export const getters: GetterTree<IWorkoutsState, IRootState> &
   [WORKOUTS_STORE.GETTERS.USER_WORKOUTS]: (state: IWorkoutsState) => {
     return state.user_workouts
   },
-  [WORKOUTS_STORE.GETTERS.WORKOUT]: (state: IWorkoutsState) => {
+  [WORKOUTS_STORE.GETTERS.WORKOUT_DATA]: (state: IWorkoutsState) => {
-    return state.workout
+    return state.workoutData
   },
 }

fittrackee_client/src/store/modules/workouts/mutations.ts

@@ -25,31 +25,31 @@ export const mutations: MutationTree<IWorkoutsState> & TWorkoutsMutations = {
     state: IWorkoutsState,
     workout: IWorkout
   ) {
-    state.workout.workout = workout
+    state.workoutData.workout = workout
   },
   [WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_CHART_DATA](
     state: IWorkoutsState,
     chartData: IWorkoutApiChartData[]
   ) {
-    state.workout.chartData = chartData
+    state.workoutData.chartData = chartData
   },
   [WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_GPX](
     state: IWorkoutsState,
     gpx: string
   ) {
-    state.workout.gpx = gpx
+    state.workoutData.gpx = gpx
   },
   [WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_LOADING](
     state: IWorkoutsState,
     loading: boolean
   ) {
-    state.workout.loading = loading
+    state.workoutData.loading = loading
   },
   [WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUTS](state: IWorkoutsState) {
     state.calendar_workouts = []
     state.user_workouts = []
   },
   [WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUT](state: IWorkoutsState) {
-    state.workout = initialWorkoutValue
+    state.workoutData = initialWorkoutValue
   },
 }

fittrackee_client/src/store/modules/workouts/state.ts

@@ -11,5 +11,5 @@ export const initialWorkoutValue = {
 export const workoutsState: IWorkoutsState = {
   calendar_workouts: [],
   user_workouts: [],
-  workout: initialWorkoutValue,
+  workoutData: initialWorkoutValue,
 }

fittrackee_client/src/store/modules/workouts/types.ts

@@ -11,13 +11,13 @@ import {
   IWorkout,
   IWorkoutApiChartData,
   IWorkoutsPayload,
-  IWorkoutState,
+  IWorkoutData,
 } from '@/types/workouts'
 
 export interface IWorkoutsState {
   user_workouts: IWorkout[]
   calendar_workouts: IWorkout[]
-  workout: IWorkoutState
+  workoutData: IWorkoutData
 }
 
 export interface IWorkoutsActions {
@@ -29,7 +29,7 @@ export interface IWorkoutsActions {
     context: ActionContext<IWorkoutsState, IRootState>,
     payload: IWorkoutsPayload
   ): void
-  [WORKOUTS_STORE.ACTIONS.GET_WORKOUT](
+  [WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA](
     context: ActionContext<IWorkoutsState, IRootState>,
     workoutId: string | string[]
   ): void
@@ -38,7 +38,7 @@ export interface IWorkoutsActions {
 export interface IWorkoutsGetters {
   [WORKOUTS_STORE.GETTERS.CALENDAR_WORKOUTS](state: IWorkoutsState): IWorkout[]
   [WORKOUTS_STORE.GETTERS.USER_WORKOUTS](state: IWorkoutsState): IWorkout[]
-  [WORKOUTS_STORE.GETTERS.WORKOUT](state: IWorkoutsState): IWorkoutState
+  [WORKOUTS_STORE.GETTERS.WORKOUT_DATA](state: IWorkoutsState): IWorkoutData
 }
 
 export type TWorkoutsMutations<S = IWorkoutsState> = {

fittrackee_client/src/types/workouts.ts

@@ -91,7 +91,7 @@ export interface IWorkoutApiChartData {
   time: string
 }
 
-export interface IWorkoutState {
+export interface IWorkoutData {
   gpx: string
   loading: boolean
   workout: IWorkout

fittrackee_client/src/views/Workout.vue

@@ -1,27 +1,27 @@
 <template>
   <div id="workout">
     <div class="container">
-      <div class="workout-loading" v-if="workout.loading">
+      <div class="workout-loading" v-if="workoutData.loading">
         <div class="loading">
           <Loader />
         </div>
       </div>
       <div v-else class="workout-container">
-        <div v-if="workout.workout.id">
+        <div v-if="workoutData.workout.id">
           <WorkoutDetail
             v-if="sports.length > 0"
-            :workout="workout"
+            :workoutData="workoutData"
             :sports="sports"
             :authUser="authUser"
             :markerCoordinates="markerCoordinates"
           />
           <WorkoutChart
-            v-if="workout.chartData.length > 0"
+            v-if="workoutData.chartData.length > 0"
-            :workout="workout"
+            :workoutData="workoutData"
             :authUser="authUser"
             @getCoordinates="updateCoordinates"
           />
-          <WorkoutNotes :notes="workout.workout.notes" />
+          <WorkoutNotes :notes="workoutData.workout.notes" />
         </div>
         <div v-else>
           <NotFound target="WORKOUT" />
@@ -50,7 +50,7 @@
   import WorkoutNotes from '@/components/Workout/WorkoutNotes.vue'
   import { SPORTS_STORE, USER_STORE, WORKOUTS_STORE } from '@/store/constants'
   import { IAuthUserProfile } from '@/types/user'
-  import { IWorkoutState, TCoordinates } from '@/types/workouts'
+  import { IWorkoutData, TCoordinates } from '@/types/workouts'
   import { useStore } from '@/use/useStore'
 
   export default defineComponent({
@@ -67,13 +67,13 @@
       const store = useStore()
       onBeforeMount(() =>
         store.dispatch(
-          WORKOUTS_STORE.ACTIONS.GET_WORKOUT,
+          WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA,
           route.params.workoutId
         )
       )
 
-      const workout: ComputedRef<IWorkoutState> = computed(
+      const workoutData: ComputedRef<IWorkoutData> = computed(
-        () => store.getters[WORKOUTS_STORE.GETTERS.WORKOUT]
+        () => store.getters[WORKOUTS_STORE.GETTERS.WORKOUT_DATA]
       )
       const authUser: ComputedRef<IAuthUserProfile> = computed(
         () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
@@ -94,7 +94,13 @@
       onUnmounted(() => {
         store.commit(WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUT)
       })
-      return { authUser, markerCoordinates, sports, workout, updateCoordinates }
+      return {
+        authUser,
+        markerCoordinates,
+        sports,
+        workoutData,
+        updateCoordinates,
+      }
     },
   })
 </script>