Skip to content

Commit

Permalink
wip on fixing isues
Browse files Browse the repository at this point in the history
  • Loading branch information
@luxumbra @dysbulic
luxumbra authored and dysbulic committed Nov 2, 2023
1 parent 8601d5c commit 257d70c
Show file tree
Hide file tree
Showing 5 changed files with 254 additions and 184 deletions.
2 changes: 1 addition & 1 deletion packages/design-system/src/icons/CalendarAddIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import * as React from 'react';
export const CalendarAddIcon = createIcon({
displayName: 'CalendarAddIcon',
path: (
<g fill="none" fill-rule="evenodd">
<g fill="none" fillRule="evenodd">
<path d="M24 0v24H0V0h24ZM12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036c-.01-.003-.019 0-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.016-.018Zm.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01l-.184-.092Z" />
<path
fill="currentColor"
Expand Down
282 changes: 157 additions & 125 deletions packages/web/components/Dashboard/Calendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import { MarkdownViewer } from 'components/MarkdownViewer';
import type { GoogleCalEventType } from 'lib/hooks/useCalendar';
import { useCalendar } from 'lib/hooks/useCalendar';
import { DateTime } from 'luxon';
import React, { useEffect, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';

type GroupedEventsType = {
date: string;
Expand All @@ -53,7 +53,7 @@ const loadMoreButtonStyles: ButtonProps = {
export const Calendar: React.FC = () => {
const [calendar, setCalendar] = useState<GroupedEventsType[]>([]);
const [loadingMore, setLoadingMore] = useState(false);
const showHowMany = 4;
const showHowMany = 3;
const {
fetching,
error,
Expand All @@ -65,10 +65,18 @@ export const Calendar: React.FC = () => {
limit,
setLimit,
} = useCalendar(showHowMany);

const lastItemRef = useRef<HTMLLIElement>(null);
const handleShowMoreItems = async () => {
try {
if (loadingMore || limit >= totalEvents) return;
setLoadingMore(true);
setTimeout(() => {
lastItemRef.current?.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'nearest',
});
}, 0);
setTimeout(() => {
setLimit(limit + showHowMany);
setLoadingMore(false);
Expand All @@ -80,15 +88,13 @@ export const Calendar: React.FC = () => {

function renderLoadMoreButton() {
if (limit < totalEvents) {
/* When there are more items to show */
return (
<MetaButton onClick={handleShowMoreItems} {...loadMoreButtonStyles}>
{loadingMore ? <Spinner size="xs" /> : 'Load More'}
</MetaButton>
);
}

/* When there are no more items to show */
return (
<Tooltip label="No more to load" aria-label="A tooltip">
<MetaButton as="span" isDisabled {...loadMoreButtonStyles}>
Expand All @@ -103,9 +109,7 @@ export const Calendar: React.FC = () => {
const limitedEvents = eventsGroupedByDay.slice(0, limit);
setCalendar(limitedEvents);
}

// eslint-disable-next-line react-hooks/exhaustive-deps
}, [limit, fetching]);
}, [limit, fetching, eventsGroupedByDay]);

if (error) {
return (
Expand Down Expand Up @@ -146,9 +150,6 @@ export const Calendar: React.FC = () => {
>
Calendar
</Text>
{/* <Text as="span" color="Highlight" fontWeight={600}>
{timeZone.users} {`(UTC${usersOffsetString}) ${DateTime.local().zoneName}`}
</Text> */}
</HStack>
<Box flexShrink={1}>
<Button
Expand Down Expand Up @@ -195,124 +196,155 @@ export const Calendar: React.FC = () => {
}}
>
{calendar.length > 0 &&
calendar.map((day) => (
<Box
as="li"
className="calendar__day"
display="flex"
width="100%"
px={0}
py={0}
mb={3}
flexFlow="column wrap"
alignItems="flex-start"
justifyContent="flex-start"
role="group"
key={day.date}
_last={{
mb: 0,
}}
>
calendar.map((day, i) => {
const last = i === calendar.length - 1;
return (
<Box
as="h3"
fontSize="sm"
fontFamily="body"
fontWeight={400}
className="calendar__day--title"
mb={2}
pl={0}
>
{DateTime.fromISO(day.date)
.toLocaleString({ weekday: 'long' })
.toUpperCase()}{' '}
•{' '}
{DateTime.fromISO(day.date)
.toLocaleString({
month: 'long',
day: 'numeric',
year: 'numeric',
})
.toUpperCase()}
</Box>
<VStack
as="ol"
className="calendar__day--events"
ml={0}
ref={last ? lastItemRef : null}
as="li"
className="calendar__day"
display="flex"
width="100%"
sx={{
listStyle: 'none',
px={0}
py={0}
mb={3}
flexFlow="column wrap"
alignItems="flex-start"
justifyContent="flex-start"
key={day.date}
_last={{
mb: 0,
}}
>
{day &&
day.events?.map((event) => (
<Box
as="li"
className="calendar__day--event"
width="100%"
px={5}
py={2}
backgroundColor="blackAlpha.500"
borderRadius="md"
role="group"
_groupHover={{
backgroundColor: 'blackAlpha.600',
}}
>
<Popover colorScheme="purple">
<Event
title={event.summary}
start={
'dateTime' in event.start
? DateTime.fromISO(
event.start.dateTime,
).toLocaleString(DateTime.TIME_24_SIMPLE)
: DateTime.fromISO(
event.start.date,
).toLocaleString(DateTime.TIME_24_SIMPLE)
}
end={
'dateTime' in event.end
? DateTime.fromISO(
event.end.dateTime,
).toLocaleString(DateTime.TIME_24_SIMPLE)
: DateTime.fromISO(
event.end.date,
).toLocaleString(DateTime.TIME_24_SIMPLE)
}
/>
<EventPopover
title={event.summary}
start={
'dateTime' in event.start
? DateTime.fromISO(
event.start.dateTime,
).toLocaleString(DateTime.TIME_24_SIMPLE)
: DateTime.fromISO(
event.start.date,
).toLocaleString(DateTime.TIME_24_SIMPLE)
}
end={
'dateTime' in event.end
? DateTime.fromISO(
event.end.dateTime,
).toLocaleString(DateTime.TIME_24_SIMPLE)
: DateTime.fromISO(
event.end.date,
).toLocaleString(DateTime.TIME_24_SIMPLE)
}
description={cleanDescription(
event.description,
)}
htmlLink={event.htmlLink}
location={event.location}
addToCalUrl={buildAddToCalendarLink(event)}
<Box
as="h3"
fontSize="sm"
fontFamily="body"
fontWeight={400}
className="calendar__day--title"
mb={2}
pl={0}
>
{DateTime.fromISO(day.date)
.toLocaleString({ weekday: 'long' })
.toUpperCase()}{' '}
•{' '}
{DateTime.fromISO(day.date)
.toLocaleString({
month: 'long',
day: 'numeric',
year: 'numeric',
})
.toUpperCase()}
</Box>
<VStack
as="ol"
className="calendar__day--events"
ml={0}
width="100%"
sx={{
listStyle: 'none',
}}
>
{day &&
day.events?.map((event) => (
<Box
as="li"
position="relative"
className="calendar__day--event"
width="100%"
px={5}
py={2}
backgroundColor="blackAlpha.500"
borderRadius="md"
overflow="hidden"
role="group"
_groupHover={{
backgroundColor: 'blackAlpha.600',
}}
>
<Popover colorScheme="purple">
<Event
title={event.summary}
start={
'dateTime' in event.start
? DateTime.fromISO(
event.start.dateTime,
).toLocaleString(
DateTime.TIME_24_SIMPLE,
)
: DateTime.fromISO(
event.start.date,
).toLocaleString(
DateTime.TIME_24_SIMPLE,
)
}
end={
'dateTime' in event.end
? DateTime.fromISO(
event.end.dateTime,
).toLocaleString(
DateTime.TIME_24_SIMPLE,
)
: DateTime.fromISO(
event.end.date,
).toLocaleString(
DateTime.TIME_24_SIMPLE,
)
}
/>

<EventPopover
title={event.summary}
start={
'dateTime' in event.start
? DateTime.fromISO(
event.start.dateTime,
).toLocaleString(
DateTime.TIME_24_SIMPLE,
)
: DateTime.fromISO(
event.start.date,
).toLocaleString(
DateTime.TIME_24_SIMPLE,
)
}
end={
'dateTime' in event.end
? DateTime.fromISO(
event.end.dateTime,
).toLocaleString(
DateTime.TIME_24_SIMPLE,
)
: DateTime.fromISO(
event.end.date,
).toLocaleString(
DateTime.TIME_24_SIMPLE,
)
}
description={cleanDescription(
event.description,
)}
htmlLink={event.htmlLink}
location={event.location}
addToCalUrl={buildAddToCalendarLink(event)}
/>
</Popover>
<Box
position="absolute"
inset={0}
_groupHover={{
backgroundColor: 'blackAlpha.600',
}}
transition="all 0.1s ease-in-out"
zIndex={-1}
/>
</Popover>
</Box>
))}
</VStack>
</Box>
))}
</Box>
))}
</VStack>
</Box>
);
})}
</VStack>
</Box>
</Box>
Expand All @@ -329,7 +361,7 @@ interface EventType {

const Event = ({ title, start, end }: EventType) => (
<PopoverTrigger>
<Box tabIndex={0} role="button" aria-label="Event summary">
<Box tabIndex={0} role="button" aria-label="Event summary" zIndex={10}>
<Text as="h4" fontSize="md" fontFamily="body" fontWeight="bold" mb={0}>
{title}
</Text>
Expand Down
Loading

0 comments on commit 257d70c

Please sign in to comment.