Client - refactoring workouts (WIP)

separate user workouts from timeline workouts
This commit is contained in:
Sam 2021-11-02 14:02:18 +01:00
parent 288a78e2a0
commit 37596f52f4
8 changed files with 45 additions and 44 deletions

View File

@ -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,

View File

@ -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,
}
},
})

View File

@ -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,
append = false
target: WorkoutsMutations
): 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(
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
)
context.commit(WORKOUTS_STORE.MUTATIONS[target], 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>,

View File

@ -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',

View File

@ -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
},

View File

@ -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[]

View File

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

View File

@ -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[]