Skip to content

Commit

Permalink
Requested changes added
Browse files Browse the repository at this point in the history
  • Loading branch information
@karthxk07
karthxk07 committed Jan 28, 2024
1 parent 6c5b51e commit af1094a
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 14 deletions.
19 changes: 19 additions & 0 deletions src/components/CurrentHourIndicator/CurrentHourIndicator.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.round {
background-color: red;
border-radius: 100%;
width: 15px;
height: 15px;
}
.line {
width: 100%;
height: 1px;
background-color: red;
margin: auto;
}
.container {
position: relative;
display: flex;
flex-direction: row;
top: -8px;
left: -9px;
}
10 changes: 10 additions & 0 deletions src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import type { Dispatch, SetStateAction } from 'react';
import React from 'react';
import { render } from '@testing-library/react';
import CurrentHourIndicator from './CurrentHourIndicator';

describe('Testing Current Hour Indicator', () => {
test('Component Should be rendered properly', async () => {
render(<CurrentHourIndicator />);
});
});
13 changes: 13 additions & 0 deletions src/components/CurrentHourIndicator/CurrentHourIndicator.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';
import styles from './CurrentHourIndicator.module.css';

const CurrentHourIndicator = (): JSX.Element => {
return (
<div className={styles.container}>
<div className={styles.round}></div>
<div className={styles.line}></div>
</div>
);
};

export default CurrentHourIndicator;
15 changes: 14 additions & 1 deletion src/components/EventCalendar/EventCalendar.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,19 @@
width: 40px;
}
.calendar_hour_text {
top: 20px;
top: -10px;
left: -5px;
position: relative;
color: #707070;
font-size: 12px;
}
.calendar_timezone_text {
top: -10px;
left: -11px;
position: relative;
color: #707070;
font-size: 9px;
}
.calendar_hour_block {
display: flex;
flex-direction: row;
Expand All @@ -62,6 +69,12 @@
}
.event_list_parent {
position: relative;
width: 100%;
}
.event_list_parent_current {
background-color: #def6e1;
position: relative;
width: 100%;
}
.dummyWidth {
width: 1px;
Expand Down
59 changes: 59 additions & 0 deletions src/components/EventCalendar/EventCalendar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Calendar from './EventCalendar';
import { render, screen, fireEvent, act } from '@testing-library/react';
import { MockedProvider } from '@apollo/react-testing';
import { I18nextProvider } from 'react-i18next';
import { debug } from 'jest-preview';

import {
DELETE_EVENT_MUTATION,
Expand All @@ -11,6 +12,7 @@ import {
import i18nForTest from 'utils/i18nForTest';
import { StaticMockLink } from 'utils/StaticMockLink';
import styles from './EventCalendar.module.css';
import { BrowserRouter } from 'react-router-dom';

const eventData = [
{
Expand Down Expand Up @@ -272,6 +274,63 @@ describe('Calendar', () => {
fireEvent.click(lessButton);
expect(screen.queryByText('Event 3')).not.toBeInTheDocument();
});
// it('Should open the day view calendar', async () => {
// const multipleEventData = [
// {
// _id: '1',
// title: 'Event 1',
// description: 'This is event 1',
// startDate: new Date().toISOString().split('T')[0],
// endDate: new Date().toISOString().split('T')[0],
// location: 'Los Angeles',
// startTime: '14:00',
// endTime: '16:00',
// allDay: false,
// recurring: false,
// isPublic: true,
// isRegisterable: true,
// },
// {
// _id: '2',
// title: 'Event 2',
// description: 'This is event 2',
// startDate: new Date().toISOString().split('T')[0],
// endDate: new Date().toISOString().split('T')[0],
// location: 'Los Angeles',
// startTime: '14:00',
// endTime: '16:00',
// allDay: false,
// recurring: false,
// isPublic: true,
// isRegisterable: true,
// },
// {
// _id: '3',
// title: 'Event 3',
// description: 'This is event 3',
// startDate: new Date().toISOString().split('T')[0],
// endDate: new Date().toISOString().split('T')[0],
// location: 'Los Angeles',
// startTime: '14:00',
// endTime: '16:00',
// allDay: false,
// recurring: false,
// isPublic: true,
// isRegisterable: true,
// },
// ];
// act(() => {
// render(< />);
// });
// const selector = screen.getByText('Month');
// await act(() => {
// fireEvent.click(selector);
// });
// act(() => {
// fireEvent.click(getByTestId('selectDay'));
// });
// debug();
// });

test('Handles window resize', () => {
render(
Expand Down
52 changes: 39 additions & 13 deletions src/components/EventCalendar/EventCalendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import React, { useState, useEffect } from 'react';
import styles from './EventCalendar.module.css';
import { ChevronLeft, ChevronRight } from '@mui/icons-material';
import { Dropdown } from 'react-bootstrap';
import CurrentHourIndicator from 'components/CurrentHourIndicator/CurrentHourIndicator';

interface InterfaceEvent {
_id: string;
Expand Down Expand Up @@ -41,7 +42,7 @@ enum Role {
ADMIN = 'ADMIN',
}

enum ViewType {
export enum ViewType {
DAY = 'Day',
MONTH = 'Month',
}
Expand Down Expand Up @@ -86,6 +87,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
'05 AM',
'06 AM',
'07 AM',
'08 AM',
'09 AM',
'10 AM',
'11 AM',
Expand All @@ -97,6 +99,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
'05 PM',
'06 PM',
'07 PM',
'08 PM',
'09 PM',
'10 PM',
'11 PM',
Expand Down Expand Up @@ -229,6 +232,13 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
setCurrentDate(today.getDate());
};

const timezoneString = `UTC${
new Date().getTimezoneOffset() > 0 ? '-' : '+'
}${String(Math.floor(Math.abs(new Date().getTimezoneOffset()) / 60)).padStart(
2,
'0'
)}:${String(Math.abs(new Date().getTimezoneOffset()) % 60).padStart(2, '0')}`;

const renderHours = (): JSX.Element => {
const toggleExpand = (index: number): void => {
if (expanded === index) {
Expand Down Expand Up @@ -272,9 +282,17 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
<>
{allDayEventsList.length > 0 && (
<div className={styles.calendar_hour_block}>
<div className={styles.calendar_hour_text_container}>{``}</div>
<div className={styles.calendar_hour_text_container}>
<p className={styles.calendar_timezone_text}>{timezoneString}</p>
</div>
<div className={styles.dummyWidth}></div>
<div className={styles.event_list_parent}>
<div
className={
allDayEventsList.length > 0
? styles.event_list_parent_current
: styles.event_list_parent
}
>
<div
className={
expanded === -100
Expand Down Expand Up @@ -312,11 +330,10 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
{hours.map((hour, index) => {
const timeEventsList: any = events
?.filter((datas) => {
console.log(dayjs(hour, { format: 'hh A' }));
const currDate = new Date(currentYear, currentMonth, currentDate);

if (
datas.startTime?.slice(0, 2) ==
dayjs(hour, { format: 'hh A' }).format('HH') &&
datas.startTime?.slice(0, 2) == (index % 24).toString() &&
datas.startDate == dayjs(currDate).format('YYYY-MM-DD')
) {
return datas;
Expand Down Expand Up @@ -348,7 +365,17 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
<p className={styles.calendar_hour_text}>{`${hour}`}</p>
</div>
<div className={styles.dummyWidth}></div>
<div className={styles.event_list_parent}>
<div
className={
timeEventsList.length > 0
? styles.event_list_parent_current
: styles.event_list_parent
}
>
{index % 24 == new Date().getHours() &&
new Date().getDate() == currentDate && (
<CurrentHourIndicator />
)}
<div
className={
expanded === index
Expand Down Expand Up @@ -527,19 +554,18 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
</div>
<div className={styles.flex_grow}></div>
<div>
{/* <Dropdown className={styles.selectType} onChange={handleChangeView}>
<option value="month">Month</option>
<option value="day">Day</option>
</Dropdown> */}
<Dropdown onSelect={handleChangeView} className={styles.selectType}>
<Dropdown.Toggle variant="success" id="dropdown-basic">
{viewType || ViewType.MONTH}
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item eventKey={ViewType.MONTH}>
<Dropdown.Item
eventKey={ViewType.MONTH}
data-testid="selectMonth"
>
{ViewType.MONTH}
</Dropdown.Item>
<Dropdown.Item eventKey={ViewType.DAY}>
<Dropdown.Item eventKey={ViewType.DAY} data-testid="selectDay">
{ViewType.DAY}
</Dropdown.Item>
</Dropdown.Menu>
Expand Down

0 comments on commit af1094a

Please sign in to comment.