Client - refactoring workouts (WIP)

separate user workouts from timeline workouts

fittrackee_client/src/components/Dashboard/Timeline.vue

@@ -75,7 +75,7 @@
       onBeforeMount(() => loadWorkouts())
 
       const workouts: ComputedRef<IWorkout[]> = computed(
-        () => store.getters[WORKOUTS_STORE.GETTERS.USER_WORKOUTS]
+        () => store.getters[WORKOUTS_STORE.GETTERS.TIMELINE_WORKOUTS]
       )
       const moreWorkoutsExist: ComputedRef<boolean> = computed(() =>
         workouts.value.length > 0
@@ -84,7 +84,7 @@
       )
 
       function loadWorkouts() {
-        store.dispatch(WORKOUTS_STORE.ACTIONS.GET_USER_WORKOUTS, {
+        store.dispatch(WORKOUTS_STORE.ACTIONS.GET_TIMELINE_WORKOUTS, {
           page: page.value,
           per_page,
           ...defaultOrder,
@@ -92,7 +92,7 @@
       }
       function loadMoreWorkouts() {
         page.value += 1
-        store.dispatch(WORKOUTS_STORE.ACTIONS.GET_MORE_USER_WORKOUTS, {
+        store.dispatch(WORKOUTS_STORE.ACTIONS.GET_MORE_TIMELINE_WORKOUTS, {
           page: page.value,
           per_page,
           ...defaultOrder,

fittrackee_client/src/components/Workouts/WorkoutsList.vue

@@ -92,11 +92,6 @@
       </div>
     </div>
     <NoWorkouts v-if="workouts.length === 0" />
-    <div v-if="moreWorkoutsExist" class="more-workouts">
-      <button @click="loadMoreWorkouts">
-        {{ $t('workouts.LOAD_MORE_WORKOUT') }}
-      </button>
-    </div>
     <div id="bottom" />
   </div>
 </template>
@@ -150,11 +145,6 @@
       )
       const per_page = 10
       const page = ref(1)
-      const moreWorkoutsExist: ComputedRef<boolean> = computed(() =>
-        workouts.value.length > 0
-          ? workouts.value[workouts.value.length - 1].previous_workout !== null
-          : false
-      )
 
       onBeforeMount(() => {
         loadWorkouts()
@@ -169,15 +159,6 @@
           ...props.params,
         })
       }
-      function loadMoreWorkouts() {
-        page.value += 1
-        store.dispatch(WORKOUTS_STORE.ACTIONS.GET_MORE_USER_WORKOUTS, {
-          page: page.value,
-          per_page,
-          ...defaultOrder,
-          ...props.params,
-        })
-      }
 
       watch(
         () => props.params,
@@ -187,12 +168,10 @@
       )
 
       return {
-        moreWorkoutsExist,
         workouts,
         capitalize,
         format,
         getDateWithTZ,
-        loadMoreWorkouts,
       }
     },
   })

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

@@ -4,6 +4,7 @@ import authApi from '@/api/authApi'
 import router from '@/router'
 import { ROOT_STORE, USER_STORE, WORKOUTS_STORE } from '@/store/constants'
 import { IRootState } from '@/store/modules/root/types'
+import { WorkoutsMutations } from '@/store/modules/workouts/enums'
 import {
   IWorkoutsActions,
   IWorkoutsState,
@@ -19,8 +20,7 @@ import { handleError } from '@/utils'
 const getWorkouts = (
   context: ActionContext<IWorkoutsState, IRootState>,
   payload: TWorkoutsPayload,
-  target: string,
+  target: WorkoutsMutations
-  append = false
 ): void => {
   context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
   authApi
@@ -29,14 +29,7 @@ const getWorkouts = (
     })
     .then((res) => {
       if (res.data.status === 'success') {
-        context.commit(
+        context.commit(WORKOUTS_STORE.MUTATIONS[target], res.data.data.workouts)
-          target === 'CALENDAR_WORKOUTS'
-            ? WORKOUTS_STORE.MUTATIONS.SET_CALENDAR_WORKOUTS
-            : append
-            ? WORKOUTS_STORE.MUTATIONS.ADD_USER_WORKOUTS
-            : WORKOUTS_STORE.MUTATIONS.SET_USER_WORKOUTS,
-          res.data.data.workouts
-        )
       } else {
         handleError(context, null)
       }
@@ -51,19 +44,25 @@ export const actions: ActionTree<IWorkoutsState, IRootState> &
     payload: TWorkoutsPayload
   ): void {
     context.commit(WORKOUTS_STORE.MUTATIONS.EMPTY_CALENDAR_WORKOUTS)
-    getWorkouts(context, payload, 'CALENDAR_WORKOUTS')
+    getWorkouts(context, payload, WorkoutsMutations['SET_CALENDAR_WORKOUTS'])
   },
   [WORKOUTS_STORE.ACTIONS.GET_USER_WORKOUTS](
     context: ActionContext<IWorkoutsState, IRootState>,
     payload: TWorkoutsPayload
   ): void {
-    getWorkouts(context, payload, 'USER_WORKOUTS')
+    getWorkouts(context, payload, WorkoutsMutations['SET_USER_WORKOUTS'])
   },
-  [WORKOUTS_STORE.ACTIONS.GET_MORE_USER_WORKOUTS](
+  [WORKOUTS_STORE.ACTIONS.GET_TIMELINE_WORKOUTS](
     context: ActionContext<IWorkoutsState, IRootState>,
     payload: TWorkoutsPayload
   ): void {
-    getWorkouts(context, payload, 'USER_WORKOUTS', true)
+    getWorkouts(context, payload, WorkoutsMutations['SET_TIMELINE_WORKOUTS'])
+  },
+  [WORKOUTS_STORE.ACTIONS.GET_MORE_TIMELINE_WORKOUTS](
+    context: ActionContext<IWorkoutsState, IRootState>,
+    payload: TWorkoutsPayload
+  ): void {
+    getWorkouts(context, payload, WorkoutsMutations['ADD_TIMELINE_WORKOUTS'])
   },
   [WORKOUTS_STORE.ACTIONS.GET_WORKOUT_DATA](
     context: ActionContext<IWorkoutsState, IRootState>,

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

@@ -5,22 +5,25 @@ export enum WorkoutsActions {
   EDIT_WORKOUT = 'EDIT_WORKOUT',
   GET_CALENDAR_WORKOUTS = 'GET_CALENDAR_WORKOUTS',
   GET_USER_WORKOUTS = 'GET_USER_WORKOUTS',
-  GET_MORE_USER_WORKOUTS = 'GET_MORE_USER_WORKOUTS',
+  GET_TIMELINE_WORKOUTS = 'GET_TIMELINE_WORKOUTS',
+  GET_MORE_TIMELINE_WORKOUTS = 'GET_MORE_TIMELINE_WORKOUTS',
   GET_WORKOUT_DATA = 'GET_WORKOUT_DATA',
 }
 
 export enum WorkoutsGetters {
   CALENDAR_WORKOUTS = 'CALENDAR_WORKOUTS',
+  TIMELINE_WORKOUTS = 'TIMELINE_WORKOUTS',
   USER_WORKOUTS = 'USER_WORKOUTS',
   WORKOUT_DATA = 'WORKOUT_DATA',
 }
 
 export enum WorkoutsMutations {
-  ADD_USER_WORKOUTS = 'ADD_USER_WORKOUTS',
+  ADD_TIMELINE_WORKOUTS = 'ADD_TIMELINE_WORKOUTS',
   EMPTY_WORKOUTS = 'EMPTY_WORKOUTS',
   EMPTY_CALENDAR_WORKOUTS = 'EMPTY_CALENDAR_WORKOUTS',
   EMPTY_WORKOUT = 'EMPTY_WORKOUT',
   SET_CALENDAR_WORKOUTS = 'SET_CALENDAR_WORKOUTS',
+  SET_TIMELINE_WORKOUTS = 'SET_TIMELINE_WORKOUTS',
   SET_USER_WORKOUTS = 'SET_USER_WORKOUTS',
   SET_WORKOUT = 'SET_WORKOUT',
   SET_WORKOUT_GPX = 'SET_WORKOUT_GPX',

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

@@ -12,6 +12,9 @@ export const getters: GetterTree<IWorkoutsState, IRootState> &
   [WORKOUTS_STORE.GETTERS.CALENDAR_WORKOUTS]: (state: IWorkoutsState) => {
     return state.calendar_workouts
   },
+  [WORKOUTS_STORE.GETTERS.TIMELINE_WORKOUTS]: (state: IWorkoutsState) => {
+    return state.timeline_workouts
+  },
   [WORKOUTS_STORE.GETTERS.USER_WORKOUTS]: (state: IWorkoutsState) => {
     return state.user_workouts
   },

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

@@ -8,11 +8,11 @@ import {
 import { IWorkout, IWorkoutApiChartData } from '@/types/workouts'
 
 export const mutations: MutationTree<IWorkoutsState> & TWorkoutsMutations = {
-  [WORKOUTS_STORE.MUTATIONS.ADD_USER_WORKOUTS](
+  [WORKOUTS_STORE.MUTATIONS.ADD_TIMELINE_WORKOUTS](
     state: IWorkoutsState,
     workouts: IWorkout[]
   ) {
-    state.user_workouts = state.user_workouts.concat(workouts)
+    state.timeline_workouts = state.timeline_workouts.concat(workouts)
   },
   [WORKOUTS_STORE.MUTATIONS.SET_CALENDAR_WORKOUTS](
     state: IWorkoutsState,
@@ -20,6 +20,12 @@ export const mutations: MutationTree<IWorkoutsState> & TWorkoutsMutations = {
   ) {
     state.calendar_workouts = workouts
   },
+  [WORKOUTS_STORE.MUTATIONS.SET_TIMELINE_WORKOUTS](
+    state: IWorkoutsState,
+    workouts: IWorkout[]
+  ) {
+    state.timeline_workouts = workouts
+  },
   [WORKOUTS_STORE.MUTATIONS.SET_USER_WORKOUTS](
     state: IWorkoutsState,
     workouts: IWorkout[]

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

@@ -3,6 +3,7 @@ import { IWorkout } from '@/types/workouts'
 
 export const workoutsState: IWorkoutsState = {
   calendar_workouts: [],
+  timeline_workouts: [],
   user_workouts: [],
   workoutData: {
     gpx: '',

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

@@ -19,6 +19,7 @@ import {
 export interface IWorkoutsState {
   user_workouts: IWorkout[]
   calendar_workouts: IWorkout[]
+  timeline_workouts: IWorkout[]
   workoutData: IWorkoutData
 }
 
@@ -31,7 +32,11 @@ export interface IWorkoutsActions {
     context: ActionContext<IWorkoutsState, IRootState>,
     payload: TWorkoutsPayload
   ): void
-  [WORKOUTS_STORE.ACTIONS.GET_MORE_USER_WORKOUTS](
+  [WORKOUTS_STORE.ACTIONS.GET_TIMELINE_WORKOUTS](
+    context: ActionContext<IWorkoutsState, IRootState>,
+    payload: TWorkoutsPayload
+  ): void
+  [WORKOUTS_STORE.ACTIONS.GET_MORE_TIMELINE_WORKOUTS](
     context: ActionContext<IWorkoutsState, IRootState>,
     payload: TWorkoutsPayload
   ): void
@@ -59,12 +64,13 @@ export interface IWorkoutsActions {
 
 export interface IWorkoutsGetters {
   [WORKOUTS_STORE.GETTERS.CALENDAR_WORKOUTS](state: IWorkoutsState): IWorkout[]
+  [WORKOUTS_STORE.GETTERS.TIMELINE_WORKOUTS](state: IWorkoutsState): IWorkout[]
   [WORKOUTS_STORE.GETTERS.USER_WORKOUTS](state: IWorkoutsState): IWorkout[]
   [WORKOUTS_STORE.GETTERS.WORKOUT_DATA](state: IWorkoutsState): IWorkoutData
 }
 
 export type TWorkoutsMutations<S = IWorkoutsState> = {
-  [WORKOUTS_STORE.MUTATIONS.ADD_USER_WORKOUTS](
+  [WORKOUTS_STORE.MUTATIONS.ADD_TIMELINE_WORKOUTS](
     state: S,
     workouts: IWorkout[]
   ): void
@@ -72,6 +78,10 @@ export type TWorkoutsMutations<S = IWorkoutsState> = {
     state: S,
     workouts: IWorkout[]
   ): void
+  [WORKOUTS_STORE.MUTATIONS.SET_TIMELINE_WORKOUTS](
+    state: S,
+    workouts: IWorkout[]
+  ): void
   [WORKOUTS_STORE.MUTATIONS.SET_USER_WORKOUTS](
     state: S,
     workouts: IWorkout[]