feat: 支持活动挑战页面
This commit is contained in:
richarjiang
169
store/challengesSlice.ts
Normal file
169
store/challengesSlice.ts
Normal file
@@ -0,0 +1,169 @@
|
||||
import { createSelector, createSlice } from '@reduxjs/toolkit';
|
||||
import type { RootState } from './index';
|
||||
|
||||
export type ChallengeDefinition = {
|
||||
id: string;
|
||||
title: string;
|
||||
startDate: string; // YYYY-MM-DD
|
||||
endDate: string; // YYYY-MM-DD
|
||||
participantsCount: number;
|
||||
participantsUnit: string;
|
||||
image: string;
|
||||
avatars: string[];
|
||||
};
|
||||
|
||||
export type ChallengeViewModel = ChallengeDefinition & {
|
||||
dateRange: string;
|
||||
participantsLabel: string;
|
||||
};
|
||||
|
||||
type ChallengesState = {
|
||||
entities: Record<string, ChallengeDefinition>;
|
||||
order: string[];
|
||||
};
|
||||
|
||||
const initialChallenges: ChallengeDefinition[] = [
|
||||
{
|
||||
id: 'joyful-dog-run',
|
||||
title: '遛狗跑步，欢乐一路',
|
||||
startDate: '2024-09-01',
|
||||
endDate: '2024-09-30',
|
||||
participantsCount: 6364,
|
||||
participantsUnit: '跑者',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1525253086316-d0c936c814f8?auto=format&fit=crop&w=1200&q=80',
|
||||
avatars: [
|
||||
'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=200&q=80',
|
||||
'https://images.unsplash.com/photo-1544723795-3fb6469f5b39?auto=format&fit=crop&w=200&q=80',
|
||||
'https://images.unsplash.com/photo-1544723795-3fbce826f51f?auto=format&fit=crop&w=200&q=80',
|
||||
'https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?auto=format&fit=crop&w=200&q=80',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'penguin-swim',
|
||||
title: '企鹅宝宝的游泳预备班',
|
||||
startDate: '2024-09-01',
|
||||
endDate: '2024-09-30',
|
||||
participantsCount: 3334,
|
||||
participantsUnit: '游泳者',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1531297484001-80022131f5a1?auto=format&fit=crop&w=1200&q=80',
|
||||
avatars: [
|
||||
'https://images.unsplash.com/photo-1525134479668-1bee5c7c6845?auto=format&fit=crop&w=200&q=80',
|
||||
'https://images.unsplash.com/photo-1530268729831-4b0b9e170218?auto=format&fit=crop&w=200&q=80',
|
||||
'https://images.unsplash.com/photo-1520813792240-56fc4a3765a7?auto=format&fit=crop&w=200&q=80',
|
||||
'https://images.unsplash.com/photo-1463453091185-61582044d556?auto=format&fit=crop&w=200&q=80',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'hydration-hippo',
|
||||
title: '学河马饮，做补水人',
|
||||
startDate: '2024-09-01',
|
||||
endDate: '2024-09-30',
|
||||
participantsCount: 9009,
|
||||
participantsUnit: '饮水者',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1481931098730-318b6f776db0?auto=format&fit=crop&w=1200&q=80',
|
||||
avatars: [
|
||||
'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=200&q=80',
|
||||
'https://images.unsplash.com/photo-1544723660-4bfa6584218e?auto=format&fit=crop&w=200&q=80',
|
||||
'https://images.unsplash.com/photo-1544723795-3fbfb7c6a9f1?auto=format&fit=crop&w=200&q=80',
|
||||
'https://images.unsplash.com/photo-1544723795-432537f48b2b?auto=format&fit=crop&w=200&q=80',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'autumn-cycling',
|
||||
title: '炎夏渐散，踏板骑秋',
|
||||
startDate: '2024-09-01',
|
||||
endDate: '2024-09-30',
|
||||
participantsCount: 4617,
|
||||
participantsUnit: '骑行者',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1509395176047-4a66953fd231?auto=format&fit=crop&w=1200&q=80',
|
||||
avatars: [
|
||||
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=80',
|
||||
'https://images.unsplash.com/photo-1521572267360-ee0c2909d518?auto=format&fit=crop&w=200&q=80',
|
||||
'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=200&q=80',
|
||||
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=80',
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'falcon-core',
|
||||
title: '燃卡加练甄秋腰',
|
||||
startDate: '2024-09-01',
|
||||
endDate: '2024-09-30',
|
||||
participantsCount: 11995,
|
||||
participantsUnit: '健身爱好者',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1494871262121-6adf66e90adf?auto=format&fit=crop&w=1200&q=80',
|
||||
avatars: [
|
||||
'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=200&q=80',
|
||||
'https://images.unsplash.com/photo-1520813792240-56fc4a3765a7?auto=format&fit=crop&w=200&q=80',
|
||||
'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?auto=format&fit=crop&w=200&q=80',
|
||||
'https://images.unsplash.com/photo-1521572267360-ee0c2909d518?auto=format&fit=crop&w=200&q=80',
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const initialState: ChallengesState = {
|
||||
entities: initialChallenges.reduce<Record<string, ChallengeDefinition>>((acc, challenge) => {
|
||||
acc[challenge.id] = challenge;
|
||||
return acc;
|
||||
}, {}),
|
||||
order: initialChallenges.map((challenge) => challenge.id),
|
||||
};
|
||||
|
||||
const challengesSlice = createSlice({
|
||||
name: 'challenges',
|
||||
initialState,
|
||||
reducers: {},
|
||||
});
|
||||
|
||||
export default challengesSlice.reducer;
|
||||
|
||||
const selectChallengesState = (state: RootState) => state.challenges;
|
||||
|
||||
export const selectChallengeEntities = createSelector([selectChallengesState], (state) => state.entities);
|
||||
|
||||
export const selectChallengeOrder = createSelector([selectChallengesState], (state) => state.order);
|
||||
|
||||
const formatNumberWithSeparator = (value: number): string => value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
|
||||
const formatDateLabel = (value: string): string => {
|
||||
const [year, month, day] = value.split('-');
|
||||
if (!month || !day) {
|
||||
return value;
|
||||
}
|
||||
const monthNumber = parseInt(month, 10);
|
||||
const dayNumber = parseInt(day, 10);
|
||||
const paddedDay = Number.isNaN(dayNumber) ? day : dayNumber.toString().padStart(2, '0');
|
||||
if (Number.isNaN(monthNumber)) {
|
||||
return value;
|
||||
}
|
||||
return `${monthNumber}月${paddedDay}日`;
|
||||
};
|
||||
|
||||
const toViewModel = (challenge: ChallengeDefinition): ChallengeViewModel => ({
|
||||
...challenge,
|
||||
dateRange: `${formatDateLabel(challenge.startDate)} - ${formatDateLabel(challenge.endDate)}`,
|
||||
participantsLabel: `${formatNumberWithSeparator(challenge.participantsCount)} ${challenge.participantsUnit}`,
|
||||
});
|
||||
|
||||
export const selectChallengeList = createSelector(
|
||||
[selectChallengeEntities, selectChallengeOrder],
|
||||
(entities, order) => order.map((id) => entities[id]).filter(Boolean) as ChallengeDefinition[],
|
||||
);
|
||||
|
||||
export const selectChallengeCards = createSelector([selectChallengeList], (challenges) =>
|
||||
challenges.map((challenge) => toViewModel(challenge))
|
||||
);
|
||||
|
||||
export const selectChallengeById = (id: string) =>
|
||||
createSelector([selectChallengeEntities], (entities) => entities[id]);
|
||||
|
||||
export const selectChallengeViewById = (id: string) =>
|
||||
createSelector([selectChallengeEntities], (entities) => {
|
||||
const challenge = entities[id];
|
||||
return challenge ? toViewModel(challenge) : undefined;
|
||||
});
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { configureStore, createListenerMiddleware } from '@reduxjs/toolkit';
|
||||
import challengeReducer from './challengeSlice';
|
||||
import challengesReducer from './challengesSlice';
|
||||
import checkinReducer, { addExercise, autoSyncCheckin, removeExercise, replaceExercises, setNote, toggleExerciseCompleted } from './checkinSlice';
|
||||
import circumferenceReducer from './circumferenceSlice';
|
||||
import exerciseLibraryReducer from './exerciseLibrarySlice';
|
||||
@@ -48,6 +49,7 @@ export const store = configureStore({
|
||||
reducer: {
|
||||
user: userReducer,
|
||||
challenge: challengeReducer,
|
||||
challenges: challengesReducer,
|
||||
checkin: checkinReducer,
|
||||
circumference: circumferenceReducer,
|
||||
goals: goalsReducer,
|
||||
@@ -70,4 +72,3 @@ export const store = configureStore({
|
||||
export type RootState = ReturnType<typeof store.getState>;
|
||||
export type AppDispatch = typeof store.dispatch;
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user