140 lines
3.2 KiB
TypeScript
140 lines
3.2 KiB
TypeScript
import {
|
|
type IChartBreakdown,
|
|
type IChartEvent,
|
|
type IInterval,
|
|
} from "@/types";
|
|
import { getDaysOldDate } from "@/utils/date";
|
|
import { type PayloadAction, createSlice } from "@reduxjs/toolkit";
|
|
|
|
type InitialState = {
|
|
events: IChartEvent[];
|
|
breakdowns: IChartBreakdown[];
|
|
interval: IInterval;
|
|
startDate: Date;
|
|
endDate: Date;
|
|
};
|
|
|
|
// First approach: define the initial state using that type
|
|
const initialState: InitialState = {
|
|
startDate: getDaysOldDate(7),
|
|
endDate: new Date(),
|
|
interval: "day",
|
|
breakdowns: [
|
|
{
|
|
id: "A",
|
|
name: 'properties.id'
|
|
}
|
|
],
|
|
events: [
|
|
{
|
|
id: "A",
|
|
name: "sign_up",
|
|
filters: []
|
|
},
|
|
],
|
|
};
|
|
|
|
const IDS = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"] as const;
|
|
|
|
export const reportSlice = createSlice({
|
|
name: "counter",
|
|
initialState,
|
|
reducers: {
|
|
// Events
|
|
addEvent: (state, action: PayloadAction<Omit<IChartEvent, "id">>) => {
|
|
state.events.push({
|
|
id: IDS[state.events.length]!,
|
|
...action.payload,
|
|
});
|
|
},
|
|
removeEvent: (
|
|
state,
|
|
action: PayloadAction<{
|
|
id: string;
|
|
}>,
|
|
) => {
|
|
state.events = state.events.filter(
|
|
(event) => event.id !== action.payload.id,
|
|
);
|
|
},
|
|
changeEvent: (state, action: PayloadAction<IChartEvent>) => {
|
|
state.events = state.events.map((event) => {
|
|
if (event.id === action.payload.id) {
|
|
return action.payload;
|
|
}
|
|
return event;
|
|
});
|
|
},
|
|
|
|
// Breakdowns
|
|
addBreakdown: (
|
|
state,
|
|
action: PayloadAction<Omit<IChartBreakdown, "id">>,
|
|
) => {
|
|
state.breakdowns.push({
|
|
id: IDS[state.breakdowns.length]!,
|
|
...action.payload,
|
|
});
|
|
},
|
|
removeBreakdown: (
|
|
state,
|
|
action: PayloadAction<{
|
|
id: string;
|
|
}>,
|
|
) => {
|
|
state.breakdowns = state.breakdowns.filter(
|
|
(event) => event.id !== action.payload.id,
|
|
);
|
|
},
|
|
changeBreakdown: (state, action: PayloadAction<IChartBreakdown>) => {
|
|
state.breakdowns = state.breakdowns.map((breakdown) => {
|
|
if (breakdown.id === action.payload.id) {
|
|
return action.payload;
|
|
}
|
|
return breakdown;
|
|
});
|
|
},
|
|
|
|
// Interval
|
|
changeInterval: (state, action: PayloadAction<IInterval>) => {
|
|
state.interval = action.payload;
|
|
},
|
|
|
|
// Date range
|
|
changeStartDate: (state, action: PayloadAction<Date>) => {
|
|
state.startDate = action.payload;
|
|
},
|
|
|
|
// Date range
|
|
changeEndDate: (state, action: PayloadAction<Date>) => {
|
|
state.endDate = action.payload;
|
|
},
|
|
|
|
changeDateRanges: (state, action: PayloadAction<number>) => {
|
|
if(action.payload === 1) {
|
|
state.interval = "hour";
|
|
} else if(action.payload <= 30) {
|
|
state.interval = "day";
|
|
} else {
|
|
state.interval = "month";
|
|
}
|
|
state.startDate = getDaysOldDate(action.payload);
|
|
state.endDate = new Date();
|
|
}
|
|
},
|
|
});
|
|
|
|
// Action creators are generated for each case reducer function
|
|
export const {
|
|
addEvent,
|
|
removeEvent,
|
|
changeEvent,
|
|
addBreakdown,
|
|
removeBreakdown,
|
|
changeBreakdown,
|
|
changeInterval,
|
|
changeDateRanges,
|
|
} = reportSlice.actions;
|
|
|
|
export default reportSlice.reducer;
|