eduvia/workavia-calendar-front
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[#25] changed loading order + added condition to keep loading screen while loading calendar list

Browse Source
This commit is contained in:
Camille Moussu
2025-07-04 15:27:25 +02:00
parent 1b55f82e45
commit aae4d729f6
11 changed files with 216 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/Calendars/CalendarModal.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ function CalendarPopover({
const [description, setDescription] = useState("");
const [color, setColor] = useState("");
const [timeZone, setTimeZone] = useState("");
const timezones = Intl.supportedValuesOf?.("timeZone") || [];
const timezones = Intl.supportedValuesOf?.("timeZone") ?? [];
const handleSave = () => {
dispatch(createCalendar({ name, description, color }));
src/features/Calendars/CalendarSlice.ts
+71 -30
View File
@@ -5,7 +5,7 @@ import { getCalendar, getCalendars } from "./CalendarApi";
import getOpenPaasUserId from "../User/userAPI";
import { parseCalendarEvent } from "../Events/eventUtils";
export const getCalendarsAsync = createAsyncThunk<
export const getCalendarsListAsync = createAsyncThunk<
Record<string, Calendars>, // Return type
string // Arg type (access_token)
>("calendars/getCalendars", async (access_token: string) => {
@@ -21,51 +21,65 @@ export const getCalendarsAsync = createAsyncThunk<
? cal["calendarserver:source"]._links.self.href
.replace("/calendars/", "")
.replace(".json", "")
: cal._links.self.href
.replace("/calendars/", "")
.replace(".json", "")
: cal._links.self.href.replace("/calendars/", "").replace(".json", "");
const color = cal["apple:color"];
const calendarDetails = await getCalendar(id, access_token);
const events = calendarDetails._embedded["dav:item"].map(
(eventdata: any) => {
const datas = eventdata.data[2][0][1];
return parseCalendarEvent(datas, color);
}
);
// const calendarDetails = await getCalendar(id, access_token);
// const events = calendarDetails._embedded["dav:item"].map(
// (eventdata: any) => {
// const datas = eventdata.data[2][0][1];
// return parseCalendarEvent(datas, color);
// }
// );
importedCalendars[id] = { id, name, description, color, events };
importedCalendars[id] = { id, name, description, color, events: [] };
}
return importedCalendars;
});
export const getCalendarDetailAsync = createAsyncThunk<
{ calId: string; events: CalendarEvent[] }, // Return type
{ access_token: string; calId: string } // Arg type
>("calendars/getCalendarDetails", async ({ access_token, calId }) => {
const calendar = await getCalendar(calId, access_token);
const color = calendar["apple:color"];
const events: CalendarEvent[] = calendar._embedded["dav:item"].map(
(eventdata: any) => {
const datas = eventdata.data[2][0][1];
return parseCalendarEvent(datas, color);
}
);
return { calId, events };
});
const CalendarSlice = createSlice({
name: "calendars",
initialState: {} as Record<string, Calendars>,
initialState: { list: {} as Record<string, Calendars>, pending: false },
reducers: {
createCalendar: (state, action: PayloadAction<Record<string, string>>) => {
const id = Date.now().toString(36);
state[id] = {} as Calendars;
state[id].name = action.payload.name;
state[id].color = action.payload.color;
state[id].description = action.payload.description;
state[id].events = [];
state.list[id] = {} as Calendars;
state.list[id].name = action.payload.name;
state.list[id].color = action.payload.color;
state.list[id].description = action.payload.description;
state.list[id].events = [];
},
addEvent: (
state,
action: PayloadAction<{ calendarUid: string; event: CalendarEvent }>
) => {
if (!state[action.payload.calendarUid].events) {
state[action.payload.calendarUid].events = [];
if (!state.list[action.payload.calendarUid].events) {
state.list[action.payload.calendarUid].events = [];
}
state[action.payload.calendarUid].events.push(action.payload.event);
state.list[action.payload.calendarUid].events.push(action.payload.event);
},
removeEvent: (
state,
action: PayloadAction<{ calendarUid: string; eventUid: string }>
) => {
state[action.payload.calendarUid as string].events = state[
state.list[action.payload.calendarUid as string].events = state.list[
action.payload.calendarUid
].events.filter((event) => {
if (event.uid !== action.payload.calendarUid) {
@@ -75,14 +89,41 @@ const CalendarSlice = createSlice({
},
},
extraReducers: (builder) => {
builder.addCase(
getCalendarsAsync.fulfilled,
(state, action: PayloadAction<Record<string, Calendars>>) => {
Object.keys(action.payload).forEach((id) => {
state[id] = action.payload[id];
});
}
);
builder
.addCase(
getCalendarsListAsync.fulfilled,
(state, action: PayloadAction<Record<string, Calendars>>) => {
state.pending = false;
Object.keys(action.payload).forEach((id) => {
state.list[id] = action.payload[id];
});
}
)
.addCase(
getCalendarDetailAsync.fulfilled,
(
state,
action: PayloadAction<{ calId: string; events: CalendarEvent[] }>
) => {
state.pending = false;
if (!state.list[action.payload.calId]) {
state.list[action.payload.calId] = {
id: action.payload.calId,
events: [] as CalendarEvent[],
} as Calendars;
}
state.list[action.payload.calId].events = action.payload.events;
state.list[action.payload.calId].events.forEach((event) => {
event.color = state.list[action.payload.calId].color;
});
}
)
.addCase(getCalendarDetailAsync.pending, (state) => {
state.pending = true;
})
.addCase(getCalendarsListAsync.pending, (state) => {
state.pending = true;
});
},
});