admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: add next event indicator to Show Page Calendar tab (#4348)

Browse Source 
* feat: add next event indicator to Show Page Calendar tab

Closes #4289

* feat: improve calendar animation

* refactor: add some utils and fix sorting edge case with full day

* refactor: rename CalendarCurrentEventIndicator to CalendarCurrentEventCursor

* fix: fix tests

* Fix lint

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Thaïs
2024-03-12 10:27:51 -03:00
committed by GitHub
parent 0d8e700239
commit ab4ab1dfba
17 changed files with 668 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
packages/twenty-front/src/modules/activities/calendar/components/Calendar.tsx
View File

@ -1,14 +1,13 @@
import styled from '@emotion/styled';
import { format, getYear, startOfMonth } from 'date-fns';
import mapValues from 'lodash.mapvalues';
import { format, getYear } from 'date-fns';
import { CalendarMonthCard } from '@/activities/calendar/components/CalendarMonthCard';
import { CalendarContext } from '@/activities/calendar/contexts/CalendarContext';
import { useCalendarEvents } from '@/activities/calendar/hooks/useCalendarEvents';
import { sortCalendarEventsDesc } from '@/activities/calendar/utils/sortCalendarEvents';
import { H3Title } from '@/ui/display/typography/components/H3Title';
import { Section } from '@/ui/layout/section/components/Section';
import { mockedCalendarEvents } from '~/testing/mock-data/calendar';
import { groupArrayItemsBy } from '~/utils/array/groupArrayItemsBy';
import { sortDesc } from '~/utils/sort';
const StyledContainer = styled.div`
box-sizing: border-box;
@ -27,28 +26,35 @@ export const Calendar = () => {
const sortedCalendarEvents = [...mockedCalendarEvents].sort(
sortCalendarEventsDesc,
);
const calendarEventsByMonthTime = groupArrayItemsBy(
sortedCalendarEvents,
({ startsAt }) => startOfMonth(startsAt).getTime(),
);
const sortedMonthTimes = Object.keys(calendarEventsByMonthTime)
.map(Number)
.sort(sortDesc);
const monthTimesByYear = groupArrayItemsBy(sortedMonthTimes, getYear);
const lastMonthTimeByYear = mapValues(monthTimesByYear, (monthTimes = []) =>
Math.max(...monthTimes),
);
const {
calendarEventsByDayTime,
currentCalendarEvent,
daysByMonthTime,
getNextCalendarEvent,
monthTimes,
monthTimesByYear,
updateCurrentCalendarEvent,
} = useCalendarEvents(sortedCalendarEvents);
return (
<StyledContainer>
{sortedMonthTimes.map((monthTime) => {
const monthCalendarEvents = calendarEventsByMonthTime[monthTime];
const year = getYear(monthTime);
const isLastMonthOfYear = lastMonthTimeByYear[year] === monthTime;
const monthLabel = format(monthTime, 'MMMM');
<CalendarContext.Provider
value={{
calendarEventsByDayTime,
currentCalendarEvent,
getNextCalendarEvent,
updateCurrentCalendarEvent,
}}
>
<StyledContainer>
{monthTimes.map((monthTime) => {
const monthDayTimes = daysByMonthTime[monthTime] || [];
const year = getYear(monthTime);
const lastMonthTimeOfYear = monthTimesByYear[year]?.[0];
const isLastMonthOfYear = lastMonthTimeOfYear === monthTime;
const monthLabel = format(monthTime, 'MMMM');
return (
!!monthCalendarEvents?.length && (
return (
<Section key={monthTime}>
<H3Title
title={
@ -58,11 +64,11 @@ export const Calendar = () => {
</>
}
/>
<CalendarMonthCard calendarEvents={monthCalendarEvents} />
<CalendarMonthCard dayTimes={monthDayTimes} />
</Section>
)
);
})}
</StyledContainer>
);
})}
</StyledContainer>
</CalendarContext.Provider>
);
};