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

View File

@ -92,11 +92,6 @@
</div> </div>
</div> </div>
<NoWorkouts v-if="workouts.length === 0" /> <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 id="bottom" />
</div> </div>
</template> </template>
@ -150,11 +145,6 @@
) )
const per_page = 10 const per_page = 10
const page = ref(1) const page = ref(1)
const moreWorkoutsExist: ComputedRef<boolean> = computed(() =>
workouts.value.length > 0
? workouts.value[workouts.value.length - 1].previous_workout !== null
: false
)
onBeforeMount(() => { onBeforeMount(() => {
loadWorkouts() loadWorkouts()
@ -169,15 +159,6 @@
...props.params, ...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( watch(
() => props.params, () => props.params,
@ -187,12 +168,10 @@
) )
return { return {
moreWorkoutsExist,
workouts, workouts,
capitalize, capitalize,
format, format,
getDateWithTZ, getDateWithTZ,
loadMoreWorkouts,
} }
}, },
}) })

View File

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

View File

@ -5,22 +5,25 @@ export enum WorkoutsActions {
EDIT_WORKOUT = 'EDIT_WORKOUT', EDIT_WORKOUT = 'EDIT_WORKOUT',
GET_CALENDAR_WORKOUTS = 'GET_CALENDAR_WORKOUTS', GET_CALENDAR_WORKOUTS = 'GET_CALENDAR_WORKOUTS',
GET_USER_WORKOUTS = 'GET_USER_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', GET_WORKOUT_DATA = 'GET_WORKOUT_DATA',
} }
export enum WorkoutsGetters { export enum WorkoutsGetters {
CALENDAR_WORKOUTS = 'CALENDAR_WORKOUTS', CALENDAR_WORKOUTS = 'CALENDAR_WORKOUTS',
TIMELINE_WORKOUTS = 'TIMELINE_WORKOUTS',
USER_WORKOUTS = 'USER_WORKOUTS', USER_WORKOUTS = 'USER_WORKOUTS',
WORKOUT_DATA = 'WORKOUT_DATA', WORKOUT_DATA = 'WORKOUT_DATA',
} }
export enum WorkoutsMutations { export enum WorkoutsMutations {
ADD_USER_WORKOUTS = 'ADD_USER_WORKOUTS', ADD_TIMELINE_WORKOUTS = 'ADD_TIMELINE_WORKOUTS',
EMPTY_WORKOUTS = 'EMPTY_WORKOUTS', EMPTY_WORKOUTS = 'EMPTY_WORKOUTS',
EMPTY_CALENDAR_WORKOUTS = 'EMPTY_CALENDAR_WORKOUTS', EMPTY_CALENDAR_WORKOUTS = 'EMPTY_CALENDAR_WORKOUTS',
EMPTY_WORKOUT = 'EMPTY_WORKOUT', EMPTY_WORKOUT = 'EMPTY_WORKOUT',
SET_CALENDAR_WORKOUTS = 'SET_CALENDAR_WORKOUTS', SET_CALENDAR_WORKOUTS = 'SET_CALENDAR_WORKOUTS',
SET_TIMELINE_WORKOUTS = 'SET_TIMELINE_WORKOUTS',
SET_USER_WORKOUTS = 'SET_USER_WORKOUTS', SET_USER_WORKOUTS = 'SET_USER_WORKOUTS',
SET_WORKOUT = 'SET_WORKOUT', SET_WORKOUT = 'SET_WORKOUT',
SET_WORKOUT_GPX = 'SET_WORKOUT_GPX', 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) => { [WORKOUTS_STORE.GETTERS.CALENDAR_WORKOUTS]: (state: IWorkoutsState) => {
return state.calendar_workouts return state.calendar_workouts
}, },
[WORKOUTS_STORE.GETTERS.TIMELINE_WORKOUTS]: (state: IWorkoutsState) => {
return state.timeline_workouts
},
[WORKOUTS_STORE.GETTERS.USER_WORKOUTS]: (state: IWorkoutsState) => { [WORKOUTS_STORE.GETTERS.USER_WORKOUTS]: (state: IWorkoutsState) => {
return state.user_workouts return state.user_workouts
}, },

View File

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

View File

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

View File

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